為 Bricks Builder 打造一個開發輔助 Skill

封面圖:發布 Bricks Builder 開發輔助 Skill

去年重新整理自己的 WordPress Blog 時,我最後選擇使用 Bricks Builder 作為網站主要的 Theme 與頁面建置工具。

當時選擇 Bricks Builder,一個很重要的原因是它不只是一套視覺化 Page Builder,本身也保留了相當大的開發彈性。對熟悉 CSS、PHP 與 WordPress 開發的人來說,可以在視覺化建置與客製程式之間取得不錯的平衡。

關於當時為什麼選擇 Bricks Builder,我曾另外整理過一篇文章:

2025 年網站重新建置:使用 Bricks Builder

最初只是想讓 AI 比較容易查 Bricks 文件

隨著使用 Bricks Builder 的程度越來越深入,我開始頻繁查閱 Bricks Academy(官方文檔)。

Bricks 官方其實提供了不少文件,包括 Builder 功能、Dynamic Data、Query Loop、Components、Hooks、Filters、Custom Elements 與各種 Developer API。不過實際使用下來,我一直覺得官方文件的分類與查詢並不是那麼方便,尤其當要找的是某個比較細節的開發資訊時,常常得花一些時間才能找到真正相關的文件。

如果改成讓 AI Agent 自己到 Bricks Academy 搜尋,同樣會遇到類似問題:搜尋、開啟不同頁面、判斷哪些文件真正相關,不但效率不高,也會消耗不少 Context Token。

所以我一開始做這個 Skill 的目的其實很單純:

把 Bricks Academy 官方文件預先下載並轉換成 Markdown,建立一套可以讓 AI Agent 在本機直接搜尋的文件庫。

目前這套文件庫已同步超過 700 篇 Bricks Academy 文件以及相關圖片,Agent 可以先從本機 corpus 搜尋真正需要的內容,而不需要每次都重新到官方網站尋找。

同時我也做了文件同步機制,可以檢查 Bricks Academy 是否有新的或異動的文件,需要時再重新下載、轉換與建立索引。因此它並不是建立一次之後就不再更新的靜態知識庫,而是可以持續與官方文件保持同步。

從文件查詢逐漸擴展成開發輔助 Skill

實際使用一段時間後,我發現單純「找得到文件」仍然不完全足以協助 Bricks Builder 開發。

例如處理 Bricks element tree、page JSON、responsive settings、global classes、Dynamic Data、Query Loop 或 Custom Elements 時,除了官方文件之外,Agent 還需要知道一些基本的資料模型、修改原則與驗證流程。

因此後來又逐步加入了一些精簡的 development references,讓 Skill 除了負責文件查詢之外,也可以提供 Bricks Builder 開發時需要的工作流程與約束。

目前這個 Skill 大致涵蓋:

  • 本機搜尋 Bricks Academy 官方文件。
  • Bricks element tree 與資料結構的基本模型。
  • Page / Element JSON 的建立與修改流程。
  • Custom Elements 開發。
  • Responsive settings、Theme Styles、Global Classes、Variables 與 Components。
  • Dynamic Data、Hooks、Query Loop 與 Forms。
  • 修改後在 Builder 與 Frontend 的驗證流程。

另外有些 Bricks 的實作細節會隨版本改變,例如 control keys、hook signatures、JSON shapes 或內部資料結構。因此這個 Skill 也不會單純依賴既有文件或模型記憶,在有實際 Bricks 開發環境可以查驗時,會以目前安裝版本作為最後的驗證依據。

換句話說,我希望它扮演的角色不是一套「什麼都知道的 Bricks 知識庫」,而是一個知道去哪裡找資料、如何進行開發,以及什麼資訊需要進一步查證的輕量開發輔助 Skill。

Bricks Builder Skill

目前我已將這個 Skill 整理後放到 GitHub 公開:

GitHub:
https://github.com/kenming/bricks-builder-skill

如果平常也使用 AI Agent 協助 Bricks Builder 網站開發,可以自行下載使用。

Repository 的 README 已整理目前支援的能力、安裝方式、Skill 觸發方式、文件同步工具,以及版本查驗與授權邊界等相關說明。

這個專案目前主要還是配合我自己的 Bricks Builder 網站開發持續使用與調整;後續只要 Bricks Academy 文件或實際開發需求有所變化,也會持續更新。

Screenshots

Workflow:How the Bricks Builder Skill Builds an Answer

​​圖:local-first Agent Skill,用來查詢、開發、修改與審核 Bricks Builder 網站

提出明確的 Bricks 問題,即可隱式觸發 Skill

​​圖:提出明確的 Bricks 問題,即可隱式觸發 Skill

需要查詢精確 hook、schema 或實作細節時,可用 $bricks-builder 明確觸發

​​圖:需要查詢精確 hook、schema 或實作細節時,可用 $bricks-builder 明確觸發

留下第一條留言