开源工具：减少前端 AI Agent 的 token 浪费

AI 编码 Agent 浪费 token，并不总是因为写了太多代码。

在前端项目中，它们往往是因为读取了太多上下文而浪费 token。

一个很小的 UI 修复，可能会演变成这样：

"Fix one button"
→ read the whole app directory
→ inspect many unrelated components
→ create a new helper
→ start a refactor
→ run out of useful context before QA

这正是我想解决的问题。

因此，我构建了一个名为 Frontend Token Trim 的开源 skillpack。

GitHub：https://github.com/kimyoungwopo/frontend-token-trim-skillpack

什么是 Frontend Token Trim？

Frontend Token Trim 是一套面向前端 AI 编码 Agent 的轻量工作流。

少读一些。少改一些。更仔细地验证。

它结合了三种行为：

工作流如下：

User frontend issue
→ Graphify the narrow code path
→ Read connected files only
→ Ponytail the smallest correct diff
→ Keep headroom for lint/type/build/browser QA
→ Report changed files, verification, and remaining risk

为什么前端 Agent 会浪费 token

前端代码仓库尤其容易让 Agent 过度读取。

Fix the dashboard card overflow on mobile

可能会涉及许多不同的区域：

routes
components
hooks
API clients
CSS modules
design tokens
layout wrappers
responsive utilities

如果没有收窄范围的规则，Agent 在弄清楚 bug 究竟位于哪里之前，可能就已经浏览了过多内容。

这会造成多种 token 泄漏：

Frontend Token Trim 试图避免这种情况。

下面是这套工作流的可移植版本：

Apply Frontend Token Trim:

1. Graphify the narrow route/component/data/style path first.
2. Reuse existing components, hooks, API clients, styles, and tokens.
3. No new dependencies or broad refactors unless the current path proves they are necessary.
4. Touch the fewest files that fix the real flow.
5. Verify the exact affected route plus 320/390px mobile overflow when UI changes.
6. Final report: changed files, verification result, remaining risk only.

重点在于，这并不只是“把 prompt 写得更短”。

它改变了工作的先后顺序：

before:
read broadly → guess → patch → maybe verify

after:
narrow path → read connected files → patch locally → verify exact surface

我还加入了一个受控的 transcript benchmark。

Fix a localized /dashboard mobile overflow issue and verify the result.

在这个受控示例中，token 减少了约 80.1%。

只有在保留验证环节的前提下，减少 token 才有意义。

在这项 benchmark 中，经过 token 精简的运行过程读取了更少的文件，同时保留了前端 QA 证据。

完整的 benchmark 文档位于代码仓库中：

这套 skillpack 支持多种 Agent 环境。

Hermes 可以直接安装打包好的 skills。

其他 Agent 可以使用规则模板。

For Hermes Agent:
bash
git clone https://github.com/kimyoungwopo/frontend-token-trim-skillpack.git
cd frontend-token-trim-skillpack
./install.sh
To update later:
bash
./update.sh
For Codex:
bash
cp templates/AGENTS.md /path/to/your-project/AGENTS.md
For Claude Code:
bash
cp templates/CLAUDE.md /path/to/your-project/CLAUDE.md
For OpenClaude:
bash
cp templates/OPENCLAUDE.md /path/to/your-project/OPENCLAUDE.md

这并不是什么神奇的 token 优化器。

你的服务提供商定价

你的前端架构

它只会改变 Agent 使用上下文的方式。

当 Agent 能够使用以下能力时，它的效果最好：

lint/type/build/test 命令

用于可视化前端工作的浏览器或截图 QA

不应使用它来跳过验证、无障碍检查、身份认证检查或数据完整性检查。

为什么我要把它开源

我想要一套小巧、可复用，并且能够直接放进真实前端代码仓库的工作流。

安装与更新脚本

韩语、英语和日语文档

Codex / Claude / OpenClaude 模板

GitHub issue 和 PR 模板

用于 Ponytail 的上游同步工作流

GitHub：https://github.com/kimyoungwopo/frontend-token-trim-skillpack

如果你在前端工作中使用 AI 编码 Agent，却总是发现它们读取太多内容、进行太多重构，或者还没来得及做 QA 就耗尽了上下文，那么这套工具或许能帮到你。

如需采取进一步措施，你可以考虑屏蔽此人和/或举报滥用行为。