使用 WorkBuddy + WordPress 官方技能开发了一个古腾堡编辑器小功能

同样是用 AI 做开发，有人能快速做出功能完整的产品，有人跑了大半天毫无结果，转头就怪模型不行，甚至直接给国产模型贴上 “垃圾” 的标签。其实很多时候，问题不在模型，而在使用方式。

我之前做浏览器插件时，核心就是用好 Chrome 的远程调试功能，让 Claude Code 自己抓包、自己发现和修复 Bug、自己更新扩展、自己调试、自己验证，我只需要提需求、给权限、偶尔点拨，全程不用写一行代码。

这背后的关键，就是给 AI 明确边界、工具和最佳实践。

「文章目录」扩展原生化改造

正好最近在更新 WPJAM Basic 的「文章目录」扩展，其中的一个功能是支持在文章编辑页设置文章目录的层次，之前是使用 WordPress 的 Metabox API 实现的：

虽然能用，但是它是 Gutenberg 编辑器通过兼容的方式显示，因为它的样式是传统的 HTML，不是古腾堡那种现代的 React 组件样式。

还有一点就是保存时不是异步的，它会模拟一个传统的 POST 表单提交，并且还要像以前一样使用 save_post 钩子来手动处理保存，不然数据就不会存入数据库。

感觉整体体验不够 “原生”，和编辑器风格割裂，所以我就在想，要不我也学习一下 Gutenberg 开发，将该功能改造成使用 React 组件样式。

使用 WordPress 官方技能

但是一翻开 WordPress 官方的 Block Editor HandBook，我就懵了，内容好多啊：

自己学会，估计至少要 1-2 天，搞那么点东西，性价比太低，那就让 AI 帮我干吧。

想用 AI 高效做 WordPress 开发，第一步必须装官方技能包，这就是 “有人做得好、有人做不出” 的核心差别。

地址：https://github.com/WordPress/agent-skills

WordPress 官方提供的 agent-skills，相当于给 AI 一套标准开发规范 + 最佳实践，让它知道怎么正确构建块编辑器、怎么写规范代码、怎么按官方流程实现功能，而不是瞎猜、乱写。

这个技能包一共 13 个专业的技能包，其中就有一个技能「wp-block-development」就是用于 Gutenberg 开发的。

在命令行输入下面命令即可安装：

git clone https://github.com/WordPress/agent-skills.gitcd agent-skillsnode shared/scripts/skillpack-build.mjs --cleannode shared/scripts/skillpack-install.mjs --global

或者也可以直接和 WorkBuddy 说

帮我安装一下技能 https://github.com/WordPress/agent-skills

这个是真的是动嘴就行了。

使用 WorkBuddy 开发古腾堡插件

这里选择使用 WorkBuddy 开发，是因为群里面老是有人说使用国产的大模型垃圾，而正好 WorkBuddy 内置的都是国产大模型，正好检验一下，到底是模型不行，还是流程与方法不行？

打开 WorkBuddy 输入需求：

我要在 WordPress 后台古腾堡侧边栏，设置 Toc 的深度，存储在 toc_depth meta 里面，然后它是一个下拉菜单，值是 -1=>不显示，''=>默认，2=>h2, 3=>h3, 4=>h4, 5=>h5, 6=>h6，帮我写个插件

可以看出，我预言都是随便写的，没有认真组织，然后在技能那里选择「wp-block-development」，明确让他按照 WordPress 官方指定的最佳实践干活：

如上图，在我的提示词后面紫色背景就是我选中的技能。WorkBuddy 首先读取技能的指导文档，然后很快就把任务分解成 5 个步骤：

1. 创建插件目录结构和主 PHP 文件
2. 注册 post meta 和 REST API 支持
3. 编写 JS 侧边栏组件（PluginDocumentSettingPanel + SelectControl）
4. 配置 package.json 和 webpack 构建
5. 编写构建说明 README

果然有专业指导的 AI 干活就不一样，然后它就按部就班干活：

很快就做好：

最后还提供了使用步骤：

我按照它的要求编译之后，直接上传到插件目录（实际使用的时候我会合并到文章目录扩展）然后激活就看到使用 React 样式的组件：

对比一下之前：

是不是好看多了，😄 重点是保存的时候，没有模拟的 POST 请求了。

AI 不在模型，而在正确的 “玩法”

这次开发再一次证明：

• 不用精通 React、不用啃完官方文档
• 不用从头学古腾堡开发
• 甚至不用纠结模型是国产还是国外

给 AI 正确的方法、权威的规范、合适的工具，普通人也能快速做出专业级开发成果。是的，同样用 AI，差距从来不在模型，而在你有没有给它正确的 “玩法”。