
去年重新整理自己的 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

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

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

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