最近更新.rss.xml
最近实践
note https://z2h.cn/hanzi 字帖生成网站，田字格
note 仿苹果液态玻璃效果
note amd 利用 npu 的办法：https://ryzenai.docs.amd.com/en/latest/inst.html
https://lemonade-server.ai/ https://github.com/amd/gaia?tab=readme-ov-file
主要还是 lemonade-server ，gaia 也是连接的 gaia （直接安装 gaia 会自动安装 lemonade-server
好文推荐 https://vue-bits.dev/ 非常绚酷的 vue 动画库
好文推荐 浏览器插件开发最佳实践 https://wxt.dev/guide/installation.html
好文推荐 前端开发的瓶颈与未来之路
实践
昨天晚上让 glm-5-turbo 自己跑了一晚上优化，今天早上被震惊了，ai是真厉害啊
将一个成熟的开源库的性能居然能优化快了足足接近十倍多了，太强了
将一个成熟的开源库的性能居然能优化快了足足接近十倍多了，太强了
背景
今天呢就是又遇到了字体需要裁剪的情况了，做前端就是难免逃不掉和字体去打交道。
时隔几年又碰到需要裁剪字体，想起来多年之前手搓的字体动态裁剪工具，但是现在用起来不是特别好用。
让我自己改嘛，我又没什么兴趣改了，所以的话，我就想要让AI帮我改。
AI改的时候有种被玷污的感觉，但是我自己又不想维护，就是还是让AI帮我改吧
很快啊，他就帮我把整个界面重新写了一遍，还新增了一些上传下载功能，这些功能其实我一直想要，但自己一直不想去改。
然后我又突发奇想，因为咱们这个项目本质上是依赖开源的一个字体编辑项目，那我在想，因为咱们性能虽然很快，但是不够快，我想让AI试试看，它能不能直接从底层去优化这个性能。
所以我让他直接把那个包拉到项目本地，然后让AI去优化。
AI改的时候有种被玷污的感觉，但是我自己又不想维护，就是还是让AI帮我改吧
让我自己改嘛，我又没什么兴趣改了，所以的话，我就想要让AI帮我改。
时隔几年又碰到需要裁剪字体，想起来多年之前手搓的字体动态裁剪工具，但是现在用起来不是特别好用。
今天呢就是又遇到了字体需要裁剪的情况了，做前端就是难免逃不掉和字体去打交道。
很快啊，他就帮我把整个界面重新写了一遍，还新增了一些上传下载功能，这些功能其实我一直想要，但自己一直不想去改。
然后我又突发奇想，因为咱们这个项目本质上是依赖开源的一个字体编辑项目，那我在想，因为咱们性能虽然很快，但是不够快，我想让AI试试看，它能不能直接从底层去优化这个性能。
所以我让他直接把那个包拉到项目本地，然后让AI去优化。
昨天晚上让 glm-5-turbo 自己跑了一晚上优化，今天早上被震惊了，ai是真厉害啊
搓了个 Vite 插件，让 Agent 能自己 debug 前端代码
向大家推荐一个我做的 Vite 插件 —— vite-plugin-pilot
bash
Read https://raw.githubusercontent.com/2234839/vite-plugin-pilot/master/SETUP.md and follow its steps to configure vite-plugin-pilot for my project, including installing the plugin, configuring vite.config.ts, and writing the usage guide into the project instruction file.
效果基本可以媲美 Chrome DevTools MCP，用来开发一些运行在稀奇古怪环境（比如你在开发浏览器插件、嵌入式 Webview、某个定制化的客户端）的前端程序的时候非常好用，即便是开发正常前端程序也能达到和 chrome devtools mcp 差不多的效果
这个的作用很简单，就是让 agent 能够在前端使用 eval 执行 js，这样他就能自己检查自己写的前端程序有没有什么bug之类的了
还可以用于探索一些稀奇古怪环境的运行时下怎么实现一些功能，agent同样是有自己探索的能力的，但是这些运行时是没法运行 chrome devtools mcp 这些工具
这个项目本身是我使用 glm5-turbo + cc 迭代出来的，一开始是一个项目中的 vite-plugin.ts 文件，结果发现就这么简单的提供给 agent 在页面执行js的能力就能让他的开发 测试和debug能力得到大幅的提升
想和大家分享的一个有意思的点是在这个迭代过程中本身也是用到了 vite-plugin-pilot 项目中有一个 playground ，我只要提供思路 glm5-turbo 就能自己利用 vite-plugin-pilot 在 playground 中测试使用他的顺手度并完善，由于这个插件完全是由 agent 使用这个插件自身迭代出来的，所以我相信对于agent而言他会能非常顺手的来使用这个工具
事实上在我工作中的真实场景，他确实能够很好的工作在开发插件场景下，能够自行实现功能并测试直到正确完成
于是便创建了一个单独的项目发布出来，希望能够帮助到各位前端开发者❤️
bash
Read https://raw.githubusercontent.com/2234839/vite-plugin-pilot/master/SETUP.md and follow its steps to configure vite-plugin-pilot for my project, including installing the plugin, configuring vite.config.ts, and writing the usage guide into the project instruction file.
Agent 架构说明
整体架构
这是一个 Tool-Use Agent（工具调用型 Agent），运行在 WPS 加载项的 webview 中。核心设计思想是：让 LLM 通过唯一的 bash 工具在虚拟终端中执行 CLI 命令，间接操作 WPS 文档。
┌─────────────────────────────────────────────────┐
│ index.vue (UI 层) │
│ - 用户输入、日志展示、暂停/停止/撤回控制 │
│ - LLM 提供商选择、SSE 流式解析 │
│ - 文档选区自动轮询 │
└──────────────┬──────────────────────────────────┘
│ runAgentLoop(config, signal)
▼
┌─────────────────────────────────────────────────┐
│ agentLoop.ts (主循环) │
│ - LLM ↔ Tool 循环 (最多 80 轮) │
│ - 上下文压缩 (compactMessages) │
│ - 连续失败反思、空响应重试 │
│ - Todo 未完成阻止退出 │
│ - 技能切换 (switch_skill) │
└──────────┬──────────────────┬───────────────────┘
│ │
▼ ▼
┌──────────────────┐ ┌──────────────────────────┐
│ agentCore.ts │ │ virtualBash.ts │
│ - 类型定义 │ │ - 命令行解析器 │
│ - token 估算 │ │ - 管道 | / 链式 && || │
│ - 上下文压缩 │ │ - 内置文本工具 │
│ - 错误分类 │ │ - 模糊匹配 & 弱模型回退 │
│ - SkillConfig │ │ - 变量展开 ($VAR, $?) │
└──────────┬───────┘ └──────────┬────────────────┘
│ │
▼ ▼
┌─────────────────────────────────────────────────┐
│ Skills (技能层) │
│ ┌──────────────┐ ┌──────────────────────────┐ │
│ │ paibanSkill │ │ writeSkill │ │
│ │ 公文排版 │ │ 公文写作 │ │
│ │ 11个CLI命令 │ │ 流式写入+writeDoc命令 │ │
│ └──────┬───────┘ └──────────┬───────────────┘ │
└─────────┼─────────────────────┼─────────────────┘
│ │
▼ ▼
┌─────────────────────────────────────────────────┐
│ cli/ (CLI 命令层, ~15 个命令) │
│ doc, fmt, batch, margin, font, para, head, │
│ search, find, split, selection, writeDoc, │
│ report, history, env, todo, help, switch_skill │
└──────────────────┬──────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────┐
│ docOperationLayer.ts (文档操作抽象层) │
│ - 写前自动选中 + 滚动队列(去重) │
│ - 写前快照 + 写后验证 │
│ - 生命周期钩子 (beforeWrite/afterWrite/onError) │
└──────────────────┬──────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────┐
│ wpsTools.ts (WPS API 封装) │
│ - 段落查看/排版/字体/格式/搜索/替换/删除/写入 │
│ - 格式预设 (国标公文格式) │
│ - Markdown 加粗语法处理 │
└──────────────────┬──────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────┐
│ WPS Document API (window.Application) │
└─────────────────────────────────────────────────┘
这是一个 Tool-Use Agent（工具调用型 Agent），运行在 WPS 加载项的 webview 中。核心设计思想是：让 LLM 通过唯一的 bash 工具在虚拟终端中执行 CLI 命令，间接操作 WPS 文档。
┌─────────────────────────────────────────────────┐
│ index.vue (UI 层) │
│ - 用户输入、日志展示、暂停/停止/撤回控制 │
│ - LLM 提供商选择、SSE 流式解析 │
│ - 文档选区自动轮询 │
└──────────────┬──────────────────────────────────┘
│ runAgentLoop(config, signal)
▼
┌─────────────────────────────────────────────────┐
│ agentLoop.ts (主循环) │
│ - LLM ↔ Tool 循环 (最多 80 轮) │
│ - 上下文压缩 (compactMessages) │
│ - 连续失败反思、空响应重试 │
│ - Todo 未完成阻止退出 │
│ - 技能切换 (switch_skill) │
└──────────┬──────────────────┬───────────────────┘
│ │
▼ ▼
┌──────────────────┐ ┌──────────────────────────┐
│ agentCore.ts │ │ virtualBash.ts │
│ - 类型定义 │ │ - 命令行解析器 │
│ - token 估算 │ │ - 管道 | / 链式 && || │
│ - 上下文压缩 │ │ - 内置文本工具 │
│ - 错误分类 │ │ - 模糊匹配 & 弱模型回退 │
│ - SkillConfig │ │ - 变量展开 ($VAR, $?) │
└──────────┬───────┘ └──────────┬────────────────┘
│ │
▼ ▼
┌─────────────────────────────────────────────────┐
│ Skills (技能层) │
│ ┌──────────────┐ ┌──────────────────────────┐ │
│ │ paibanSkill │ │ writeSkill │ │
│ │ 公文排版 │ │ 公文写作 │ │
│ │ 11个CLI命令 │ │ 流式写入+writeDoc命令 │ │
│ └──────┬───────┘ └──────────┬───────────────┘ │
└─────────┼─────────────────────┼─────────────────┘
│ │
▼ ▼
┌─────────────────────────────────────────────────┐
│ cli/ (CLI 命令层, ~15 个命令) │
│ doc, fmt, batch, margin, font, para, head, │
│ search, find, split, selection, writeDoc, │
│ report, history, env, todo, help, switch_skill │
└──────────────────┬──────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────┐
│ docOperationLayer.ts (文档操作抽象层) │
│ - 写前自动选中 + 滚动队列(去重) │
│ - 写前快照 + 写后验证 │
│ - 生命周期钩子 (beforeWrite/afterWrite/onError) │
└──────────────────┬──────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────┐
│ wpsTools.ts (WPS API 封装) │
│ - 段落查看/排版/字体/格式/搜索/替换/删除/写入 │
│ - 格式预设 (国标公文格式) │
│ - Markdown 加粗语法处理 │
└──────────────────┬──────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────┐
│ WPS Document API (window.Application) │
└─────────────────────────────────────────────────┘
核心设计模式
1. 单一工具 + 虚拟终端
LLM 只暴露一个 bash function tool，所有能力通过虚拟终端命令实现。这是一种经典的 Agent 设计，好处是：
简化 LLM 的工具选择（只有一个工具）
通过管道和链式组合实现复杂操作
命令历史、错误恢复等在终端层面统一处理
2. Skill 技能系统
通过 SkillConfig 接口定义可插拔的技能模块，当前有两个技能：
paibanSkill — 公文排版（11 个 CLI 命令）
writeSkill — 公文写作（1 个 CLI 命令 + 流式写入）
Agent 启动时所有技能的命令都注册到 CLI 中，LLM 通过 switch_skill 命令切换，切换后注入对应的系统提示词。
3. 多层上下文压缩（agentCore.ts）
参考了多篇 Agent 优化论文实现了一套渐进式压缩策略：
Tool Result Clearing（自适应轻量压缩）：保留最近 N 条完整、渐进压缩更早的、激进压缩最旧的
错误记录保护（P9-C/Manus）：错误记录保留更多行，防止模型"忘记教训"
轨迹去重（P10-B/AgentDiet）：合并连续重复的 tool 调用
结构化摘要：压缩时生成包含 session intent + 进度 + 操作脉络的摘要
4. 文档操作抽象层（docOperationLayer.ts）
在 CLI 命令和 WPS API 之间增加了中间层：
写操作前自动选中目标 range（视觉反馈）
滚动队列去重（高频排版时避免反复滚动）
写前快照 + 写后验证（类似 Claude Code 的"先读再写"）
生命周期钩子支持
5. 弱模型容错（virtualBash.ts）
模糊匹配（Levenshtein 距离 ≤ 2）
从文本中提取命令（处理弱模型不生成 tool call 的情况）
错误分类（deterministic/transient/capability）+ 修复建议
1. 单一工具 + 虚拟终端
LLM 只暴露一个 bash function tool，所有能力通过虚拟终端命令实现。这是一种经典的 Agent 设计，好处是：
简化 LLM 的工具选择（只有一个工具）
通过管道和链式组合实现复杂操作
命令历史、错误恢复等在终端层面统一处理
简化 LLM 的工具选择（只有一个工具）
简化 LLM 的工具选择（只有一个工具）
通过管道和链式组合实现复杂操作
通过管道和链式组合实现复杂操作
命令历史、错误恢复等在终端层面统一处理
命令历史、错误恢复等在终端层面统一处理
2. Skill 技能系统
通过 SkillConfig 接口定义可插拔的技能模块，当前有两个技能：
paibanSkill — 公文排版（11 个 CLI 命令）
writeSkill — 公文写作（1 个 CLI 命令 + 流式写入）
paibanSkill — 公文排版（11 个 CLI 命令）
paibanSkill — 公文排版（11 个 CLI 命令）
writeSkill — 公文写作（1 个 CLI 命令 + 流式写入）
writeSkill — 公文写作（1 个 CLI 命令 + 流式写入）
Agent 启动时所有技能的命令都注册到 CLI 中，LLM 通过 switch_skill 命令切换，切换后注入对应的系统提示词。
3. 多层上下文压缩（agentCore.ts）
参考了多篇 Agent 优化论文实现了一套渐进式压缩策略：
Tool Result Clearing（自适应轻量压缩）：保留最近 N 条完整、渐进压缩更早的、激进压缩最旧的
错误记录保护（P9-C/Manus）：错误记录保留更多行，防止模型"忘记教训"
轨迹去重（P10-B/AgentDiet）：合并连续重复的 tool 调用
结构化摘要：压缩时生成包含 session intent + 进度 + 操作脉络的摘要
Tool Result Clearing（自适应轻量压缩）：保留最近 N 条完整、渐进压缩更早的、激进压缩最旧的
Tool Result Clearing（自适应轻量压缩）：保留最近 N 条完整、渐进压缩更早的、激进压缩最旧的
错误记录保护（P9-C/Manus）：错误记录保留更多行，防止模型"忘记教训"
错误记录保护（P9-C/Manus）：错误记录保留更多行，防止模型"忘记教训"
轨迹去重（P10-B/AgentDiet）：合并连续重复的 tool 调用
轨迹去重（P10-B/AgentDiet）：合并连续重复的 tool 调用
结构化摘要：压缩时生成包含 session intent + 进度 + 操作脉络的摘要
结构化摘要：压缩时生成包含 session intent + 进度 + 操作脉络的摘要
4. 文档操作抽象层（docOperationLayer.ts）
在 CLI 命令和 WPS API 之间增加了中间层：
写操作前自动选中目标 range（视觉反馈）
滚动队列去重（高频排版时避免反复滚动）
写前快照 + 写后验证（类似 Claude Code 的"先读再写"）
生命周期钩子支持
写操作前自动选中目标 range（视觉反馈）
写操作前自动选中目标 range（视觉反馈）
滚动队列去重（高频排版时避免反复滚动）
滚动队列去重（高频排版时避免反复滚动）
写前快照 + 写后验证（类似 Claude Code 的"先读再写"）
写前快照 + 写后验证（类似 Claude Code 的"先读再写"）
生命周期钩子支持
生命周期钩子支持