使用 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-skills
node shared/scripts/skillpack-build.mjs --clean
node 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,差距从来不在模型,而在你有没有给它正确的 “玩法”


©我爱水煮鱼,本站推荐使用的主机:阿里云,国外主机建议使用BlueHost

本站长期承接 WordPress 优化建站业务,请联系微信:「chenduopapa」。