Community图像github.com

themeforge-pro/agent-kit

将静态 HTML 网站(手写、AI 生成或从构建器导出)转换为带有可编辑管理后台的 WordPress 主题,使用 ThemeForge 属性。当用户希望将其静态或 AI 生成的网站迁移到 WordPress、要求“从该 HTML 制作 WordPress 主题”、希望客户在 WordPress 管理后台中编辑文本、图片、列表、菜单或商品,或提及 ThemeForge 时使用。涵盖站点地图、放置 fld-/opt-/tax-/wp- 属性、使用免费验证器检查标记,以及移交站点进行构建的全过程。

agent-kit 是什么?

ThemeForge Agent Kit 是一个 AI 代理技能,旨在帮助开发者和 AI 代理(如 Claude Code、Cursor 等)将静态 HTML 网站高效地转换为功能完整的 WordPress 经典主题。其核心优势在于,它不需要用户编写任何 PHP 或 WordPress 代码,而是通过在 HTML 中嵌入特定的 `fld-*`、`opt-*`、`tax-*` 和 `wp-*` 属性来标记可编辑区域。这些属性会由 ThemeForge 生成器自动转化为 WordPress 管理后台中的字段、页面模板和设置屏幕,使网站所有者能够直接编辑文本、图片、列表、菜单和商品等内容,同时保持原始 HTML 设计不变。此技能支持多种平台,并提供了一个清晰的工作流程:首先与用户确认站点地图,然后从 ThemeForge 规则 API 拉取所需的文档模块,在编写或阅读 HTML 时即时应用属性标记,最后使用免费的验证 API 或本地脚本检查标记的正确性,确保所有内容无误后,将站点打包成 ZIP 文件移交给 ThemeForge 项目进行最终的主题构建和部署。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/themeforge-pro/agent-kit/tree/HEAD/skills/themeforge-markup

Installed? Explore more 图像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

ThemeForge 标记语言

ThemeForge 从静态 HTML 构建经典 WordPress 主题。您可以使用 HTML 属性标记可编辑部分:fld-* 用于页面上的字段,opt-* 用于全站设置,tax-* 用于分类法字段,wp-* 用于 WordPress 自身(文章、菜单、商品)。生成器会将它们转化为管理后台字段、页面模板和站点所有者可编辑的管理屏幕。设计风格保持不变。

规则文档位于 https://themeforge.pro/ai,并会随生成器更新。 请勿凭记忆或根据此文件进行标记:每次会话都必须获取规则。本技能仅告诉您工作顺序。

1. 首先确认站点地图

在编写标记之前,请回复一个站点地图并等待确认:

  • 每个页面文件及其 slug(index.html、menu.html、contacts.html……)——文件名决定 WordPress 模板,因此 blog.html 是名为 blog 的页面,而非博客文章列表;
  • 内容类型:博客文章、商品、自定义类型及其分类法;
  • 全站内容(页眉、页脚、联系方式)——它们将放入 theme-options.html;
  • 语言。

2. 拉取您需要的规则

GET https://themeforge.pro/ai              入口页面:首先阅读
GET https://themeforge.pro/ai?m=core      总是需要,在任何标记之前
GET https://themeforge.pro/ai?m=build      当您要生成站点(而非仅注释时)
GET https://themeforge.pro/ai?m=<module>   pages · blog · cpt · woocommerce · deploy · legacy

仅加载当前站点需要的模块:没有商店的咖啡馆永远不需要读取 woocommerce。

3. 边编写边标记

在编写或阅读每个部分时立即添加属性,而不是进行第二轮修改。根据规则文档,大多数常见错误的检查要点如下:

  • 每个页面的 <body> 上必须有 wp-fields-group 属性,否则无法获得任何字段;
  • 每个字段都必须有名称;链接及其标题文本应使用不同名称(例如 Button / Button text);
  • 在列表(fld-loop)中,每个卡片都必须携带属性,而不仅仅是第一个;
  • 全站字段必须在 theme-options.html 中声明。

4. 免费检查,无需账户

在一次请求中发送所有页面,并重复该过程,直到返回 "ok": true:

POST https://themeforge.pro/api/validate-markup
Content-Type: application/json

{"pages":[{"name":"index.html","html":"…"},{"name":"theme-options.html","html":"…"}]}

或者,从本工具包运行 node scripts/validate.mjs <site-folder>。error 会破坏主题,warning 表示某些内容会被静默丢弃,hint 则是值得了解的信息。不会存储任何数据。

5. 移交

遵循 ?m=deploy 模块:生成一个包含站点全部内容的 ZIP 文件(index.html 位于根目录)。用户将其上传到 https://themeforge.pro 上的项目,免费在浏览器中打开主题的 WordPress 管理后台,并通过订阅下载最终的主题。如果他们提供其项目 ID 和令牌,deploy 模块会展示如何通过 HTTP 自行构建主题。

参考资料

相关技能