我们发布了 GrapesJS 开发 Claude 技能——一项免费开源技能，能让 Claude 成为真正懂 GrapesJS 的开发者。它托管在 MIT的 GitHub 上，支持0.21.x、0.22.x和0.23.x，并且兼容GrapesJS Studio。以下是我们为什么要建立它，日常工作中实际发生了哪些变化，以及我们认为未来会走向何方。
问题从来不是AI写不出代码
任何现代模型都能写出完全好的JavaScript。GrapesJS 有另一个问题：它是一个拥有庞大且特定 API 表面的框架，但在开放互联网中并不特别突出。
组件模型，带有defaults，traits，isComponent自定义view和model。区块管理器及其content语义。命令及其生命周期。风格经理及其行业和属性。存储管理器。资产管理人。设备管理器。RTE分机。CSS 作曲家。有几十场编辑活动。
如果一个模型主要只接触过React和Express，它对GrapesJS的了解就很浅——而且它会自信地发明不存在的API。你知道规律：代码看起来完美无瑕，导入干净，然后又坏掉。因为editor.addBlock()没有那种形状的东西，而你真正需要的是editor.BlockManager.add()。
旧的变通方法是手动的：每次新聊天都重新解释架构，粘贴文档块，然后清理幻觉。这比自己写代码还要花时间。
技能的作用
技能是一个结构化的领域知识和惯例包，Claude 在识别任务属于 GrapesJS 任务时调用它。而不是每次对话都要复制的200行系统提示——这些知识与模型并存并自动激活。实际上，这意味着你不再解释框架，而是开始描述功能：
创建一个GrapesJS插件，添加一个带有可编辑计划的定价表块。
创建一个自定义特性，允许用户从预定义的集合中选择图标。
新增一个风格管理器扇区用于 CSS 网格控制。
构建一个React组件，用这个插件架构初始化GrapesJS。
回归的内容遵循生态系统的惯例：正确的插件签名、正确的组件注册、TypeScript类型、合理的文件结构。
该技能涵盖插件、组件、模块、特性、命令、面板和按钮、样式管理器和RTE扩展、存储和资产管理器集成、设备管理器、CSS Composer工具、撤销管理器、画布扩展——以及相关的一切：React、Vue、Next.js、Laravel后端。
具体变化是什么
进入门槛降低了。 你的第一个GrapesJS插件通常需要两天时间阅读文档和别人的源代码。现在你可以从一个可用的骨架开始，边做边学，而不是在开始之前。
模板压缩。 方块、特质、面板——你写过上百遍的代码，带有细微的变体。这正是适合委派的工作。
原型机很便宜。 “如果我们做一个定制的邮件生成器呢？”不再是为了测试这个想法而耗时一周的承诺。半小时后你就有东西要展示了。
瓶颈移动。 以前大家都问怎么在GrapesJS里做这件事。现在是我们建造了什么，使用时感觉如何。这才是个更有趣的问题。
技能不做的事情
直说起来，因为人们对AI工具的期待往往过于高涨。
它不能替代理解框架。它缩短了实现代码工作路径，但调试复杂画布行为、处理大型文档的性能和进行架构调用仍然是你的责任。
它并不保证正确。模型仍然可能出错，尤其是在跨版本边界或很少使用的API中。像审查其他开发者的拉取请求一样审视它。
它不能取代那些做得很好的插件。一分钟内生成的块和跨数百个真实项目的插件是不同的对象。前者非常适合原型和内部工具;第二个是你想在生产环境中保持多年的东西。
这话要往哪里去
技能是第一步。有趣的部分出现在之后。
能看到编辑的经纪人。现在AI是盲写：它生成一个插件，你运行它，你查看，然后回来描述哪里坏了。显而易见的下一步是让代理访问编辑器状态——这样它自己打开预览，发现移动端块崩溃，并修复CSS。从技术上讲，这所需的一切都已经存在。
建筑内部的人工智能，不仅仅是建造过程中。技能帮助你创建一个编辑器。但同样的知识层也应包含在产品内部：用户用通俗易懂的语言描述一个部分，编辑者根据你的模块组装，尊重你的设计系统。“AI生成HTML”和“AI操作你的组件”之间的差距是关键——而在商业构建者中，只有第二个版本才有意义。
每个项目组装插件。如今的市场意味着你能适应成品解决方案。接下来是混合型：基础插件加生成，针对你具体情况缺失的部分。我们已经运行了一个 插件生成器，它指向同一个方向。
技能作为专业知识的分发形式。 如果关于框架的知识可以打包和共享，为什么仅限于框架呢？针对特定插件的技能。对于一家公司的设计系统来说。对于一个客户的邮件模板规则来说。我们认为这会成为文档的正常伴随。
常见问题
GrapesJS的Claude技能是什么？
这是一个免费的开源技能，让 Claude 能够结构化地了解 GrapesJS API ——组件、块、特征、命令、面板、样式管理器、存储和资产管理器——因此它生成的代码遵循生态系统惯例，而不是发明不存在的方法。
它支持哪些 GrapesJS 版本？
该技能已在 GrapesJS 0.21.x、0.22.x 和 0.23.x 上测试，并且兼容 GrapesJS Studio。
商业项目是免费的吗？
是的。它以MIT许可证发布，个人和商业均免费。该源代码在GitHub上，欢迎投稿。
我需要懂GrapesJS才能用吗？
它有帮助，但不再是入门的前提。这个技能第一次尝试就能给你一个可用的插件骨架——你可以通过阅读和修改来学习架构，而不是先读两天文档。对于原型以外的任何内容，你仍然需要理解代码的作用。
它能和React、Vue还是Next.js兼容？
是的。除了核心的 GrapesJS API，该技能还涵盖了 React、Vue 和 Next.js 的集成模式，以及后端布线，如 Laravel 用于存储和资产管理。
这和直接问AI关于GrapesJS有什么不同？
没有域上下文，模型往往会幻觉GrapesJS API——那些看似合理的调用，但在任何版本中都不存在。这项技能在前期提供了真实的API表面和约定，所以你花时间审查代码，而不是纠正发明的方法。
入门
该技能免费、开源、麻省理工学院——个人和商业使用均无附加条件。
欢迎提交请求、想法和错误报告。GrapesJS生态系统一直依赖于人们分享他们为自己打造的东西——这又是一个例子。
如果你尝试了，结果出了问题，就开 个问题。我们真心好奇你会用它建造什么。