Community影像github.com

themeforge-pro/agent-kit

將靜態 HTML 網站(手寫、AI 生成或從建構工具匯出)轉換為具備可編輯管理後台的 WordPress 主題,使用 ThemeForge 屬性來標記。

agent-kit 是什麼?

此技能專為需要將靜態或 AI 生成的 HTML 網站轉換為 WordPress 主題的開發者、設計師及 AI 代理所設計。它會引導使用者逐一完成建立站點地圖、從 ThemeForge 官方規則 API 動態擷取最新的標記規則、在 HTML 中嵌入 `fld-*`(頁面欄位)、`opt-*`(全站設定)、`tax-*`(分類欄位)和 `wp-*`(WordPress 內建功能)屬性、透過免費驗證端點檢查標記,最後產生可供上傳的 ZIP 檔案並交付。此技能支援所有主流 AI 編碼代理(如 Claude Code、Cursor、Codex 等),確保輸出的 WordPress 主題能讓終端客戶直接在管理後台中編輯文字、圖片、選單、產品等內容,而無需修改任何程式碼。設計風格會保留原始 HTML 的外觀。

相容平台~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>   頁面 · 部落格 · 自訂內容類型 · WooCommerce · 部署 · 舊版

只載入此網站需要的模組:沒有商店的咖啡廳永遠不需要讀取 woocommerce。

3. 邊進行邊標記

在編寫或閱讀每個區段的同時就加上屬性,而不是事後再補做。以下是規則中提到的、最常見錯誤的檢查方式:

  • 每個頁面都需要在 <body> 上加上 wp-fields-group,否則就不會產生任何欄位;
  • 每個欄位都有名稱;連結及其標題文字的名稱要不同(例如 按鈕 / 按鈕文字);
  • 在清單(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 和 token,deploy 模組會說明如何透過 HTTP 自行建構主題。

參考資料

相關技能