bricks-ctor 包含內建 skills,在執行Documentation Index
Fetch the complete documentation index at: https://docs.bricks.tools/llms.txt
Use this file to discover all available pages before exploring further.
bun install 期間會自動安裝至您的專案。這些 skills 提供領域知識,協助 AI 編碼代理理解並建置 BRICKS 應用程式。
Skills 是可重複使用的指令文件,為 AI 代理提供情境資訊。請參閱 CTOR skills 參考文件,深入了解 skills 的運作方式。
bricks-ctor
bricks-ctor skill 會安裝至 <project>/.bricks/skills/bricks-ctor/(並在 .claude/skills/ 和 .codex/skills/ 提供相容性符號連結)。它提供 BRICKS 執行環境的架構模式與設定參考。
適用情境: 您正在建置或設定 BRICKS 應用程式,且需要特定領域的指引。
涵蓋主題
架構模式
架構模式
流程分解策略與模式選擇優先順序。教導如何將使用者流程拆解為產生器、事件動作鏈、系統動作與 Data Calculation 的最簡組合。
Animation
Animation
動畫系統參考,涵蓋 3 種動畫類型(timing、spring、decay)、9 個可動畫化屬性、10 種以上的緩動函式,以及組合動畫(parallel/sequence)。
待機轉場
待機轉場
Canvas 進入/退出動畫與共享元素轉場。涵蓋 5 種待機模式(top、bottom、left、right、custom),包含框架選項與時序最佳實踐。
Automations
Automations
E2E 測試框架,包含 3 種自動化類型(launch、anytime、cron)、模擬動作(brick 按壓、按鍵事件、HTTP 請求),以及 6 種以上的斷言類型(含螢幕截圖視覺回歸)。
Data Calculation
Data Calculation
JavaScript 沙箱化執行環境參考,內建 25 種以上函式庫(lodash、moment、crypto、compression 等)。涵蓋觸發模式、非同步操作、多重輸出,以及應避免的反模式。
Local sync
Local sync
多顯示器設定的 LAN 裝置同步。涵蓋主要/次要裝置角色、執行模式、subspace 與資料層級的設定,以及視訊牆和互動式資訊站等使用情境。
Remote Data Bank
Remote Data Bank
雲端資料同步,包含 3 種遠端更新類型、為非技術人員產生網頁更新頁面、附驗證的 REST API 存取,以及含存取控制的資料路由。
Media Flow
Media Flow
資產管理,涵蓋 media box 組織、產生器的 Media Flow 檔案清單、4 種屬性類型(image、video、audio、lottie)、上傳方式,以及 CDN 傳遞。
Buttress
Buttress
遠端 AI 推論卸載。涵蓋功能交換、策略選項(prefer-local、prefer-buttress、prefer-best)、伺服器設定,以及 GPU 設定。
bricks-design
bricks-design skill 會安裝至 <project>/.bricks/skills/bricks-design/。這是 Application 與 Subspace 的視覺設計準則——字型、色票、素材取得、設計語言、系統承諾、視覺節奏與品牌工作。
適用情境: 您正在進行視覺、美學、系統、樣式或品牌素材相關工作——即便簡報以產品術語命名(slideshow、kiosk、signage、menu board、lobby screen、museum display),或起點為 Figma 檔案、網站、螢幕截圖、PDF 或品牌手冊。
對於端對端簡報(「為 X 設計一個 kiosk」、「製作介紹 Y 的簡報」),
bricks-design 會與 bricks-ux 平行啟用:視覺表層由前者負責,互動形狀由後者負責。涵蓋主題
架構真理
架構真理
BRICKS 設計的 10 條支柱法則 —— Canvas 即狀態、Data 是動態值的傳遞通道、跨 Canvas 共用 Brick id 會自動補間、Switch 比對而 Data hit 僅作相等匹配、Generator 為無頭非同步、frame 以 grid 為單位、Standby Transition 屬於設計語言、Subspace 是型別化模組、DataCalculation 僅用於衍生計算,以及不存在 scroll/overflow/responsive reflow。
工作流程與 Showcase Canvas 鎖定
工作流程與 Showcase Canvas 鎖定
分階段交付(非衝刺至完成):確認部署情境、以註解區塊宣告設計系統、先鎖定一個 Showcase Canvas、再以共用的 hero id 跨 Canvas 鋪展整個 Canvas 圖、針對間距節奏與多語言適配進行精修,最後驗證並自我審查。
設計語言與方向顧問
設計語言與方向顧問
精選的視覺語言函式庫(Swiss Editorial、Kenya Hara 留白、Field.io motion poetics、Brutalist web、Y2K futurist-retro 等),橫跨 10 個方向 × 5 個流派,各自帶有 grid 立場與以 grid 單位表達的間距尺度。方向顧問會為模糊簡報提出三個跨流派候選方向。
翻譯 Figma、HTML、螢幕截圖、網站、PDF、品牌手冊
翻譯 Figma、HTML、螢幕截圖、網站、PDF、品牌手冊
視覺檢視優先的流程 —— 絕不從 markdown 萃取結果翻譯。會驅動瀏覽器自動化擷取每個頁面或 frame,再透過讀圖能力回看每張截圖,才開始組成 BRICKS 原生對應物。
品牌簡報與 Media Flow 流程
品牌簡報與 Media Flow 流程
Logo、產品攝影、UI 截圖、場景攝影與動態素材的五步驟取得流程 —— 依 5-10-2-8 品質標準的五個命名維度評分,每個類別備有三條備援路徑,並以結構性規範要求 Brick 透過
DataLink 引用 Media Flow Data,而非內嵌或重畫。簡報與投影設計
簡報與投影設計
Canvas 圖形狀的選擇(線性投影鏈 vs. hub-and-spoke vs. 編排式揭示)、透過共用 Brick 自動補間實現的英雄連續性、反「PowerPoint 配音」原則,以及給序列性作品使用的初次觀看者評分表。
效能與複雜度防護欄
效能與複雜度防護欄
在 Generator 邊界節流、明確限制 Data 歷史筆數、
persistData: true 保留給 last-known-good 與冪等鍵、開機 Canvas 須能在 1 秒內以快取 Data 渲染、為網路 Generator 套用 offline-first 包裝。另涵蓋複雜度警訊 —— Subspace 濫用、Switch 分支爆炸、DataCalc 鏈、動畫氾濫、Canvas 膨脹。變化版本流程
變化版本流程
依 token 成本排序的三種模式 —— Data 預設(預設值)、共用模組、獨立 Subspace —— 搭配分階段交付流程。比較介面僅限對話與原始碼樹,絕不在生產環境留下 Canvas 內的主題切換器。
驗證工具鏈
驗證工具鏈
完成定義:每個 Canvas 都透過
preview MCP 截圖、每張截圖都透過讀圖能力回看、與參考素材並排逐項對比、主控台無錯誤。預設路徑 1 使用 Electron preview MCP;當部署仰賴硬體行為時(付款、身分擷取、周邊裝置、Local Sync),升級為路徑 2,透過裝置 DevTools(CDP 位於 :19851)執行。五維度自我審查
五維度自我審查
每個 Canvas 依系統承諾、視覺層級、工藝、功能契合度與原創性五個維度評分。反低品質掃描涵蓋路由切換採用 snap、繞過 Data 的硬編碼動態字串、無觸控硬體上的 hover 暗示、手繪仿冒品牌素材,以及以聚合來源 logo 出貨。
bricks-ux
bricks-ux skill 會安裝至 <project>/.bricks/skills/bricks-ux/。這是任何以 Canvas、Brick、Generator 與 Data 建構的 Application 或 Subspace 的互動設計準則——使用者旅程、互動原型、流程狀態、可按壓組合、監控畫面、無障礙設計。
適用情境: 您正在進行可用性、流程、旅程、可供性、回饋、復原或無障礙相關工作——「審視這段流程」、「改善可用性」、「設計等待狀態」、「修補錯誤路徑」、「設計監控畫面的警報狀態」、「為多語言設計」、「設計閒置與招客狀態」。
bricks-ux 會與 bricks-design 在端對端簡報中平行啟用。網頁慣性(hover 暗示、捲動揭示、預設彈窗、頁面提交表單)無法套用到無觸控或周邊驅動的硬體。涵蓋主題
通用使用者旅程主軸
通用使用者旅程主軸
每段互動都遵循的七個步驟 —— 可供性、指引、即時回饋、執行中可見度、延續、復原、收尾。這個架構取代裝置特定的食譜:QR 掃描、人臉偵測、BLE 接近、NFC 觸碰、付款、語音麥克風、觸控全部遵循相同形狀。
互動原型
互動原型
使用者在 BRICKS 畫面前做的六件事 —— glance、browse、interact、transact、monitor、dwell。每種原型各自決定 Subspace 結構(Canvas 數量、主導的 Brick 家族、動態語彙)、失敗訊號,以及哪些 UX 維度權重最大。
設計化的流程狀態
設計化的流程狀態
七種一級公民狀態 —— 閒置、招客、載入中、空白、錯誤、開機、維護 —— 各自附有通用原則、BRICKS 原生表達手法,以及代理工作中常見的失敗模式。閒置是經過設計的 Canvas,不是「剛好最後載入的畫面」。
可按壓組合
可按壓組合
複合按鈕中關於
on_press 應落在哪個層級、以及哪些內部 Brick 應設為 pressable: 'bypass' 的明確決策。可供性必須視覺上可區分 —— 可按壓的方塊不能看起來和裝飾性方塊一模一樣。監控畫面
監控畫面
沉著/偵測/要求三段紀律。沉著狀態必須易讀且能被遺忘;變化必須能被察覺但不過度索求注意;要求必須能驅動回應但不狼來了。陳舊資料比沒有資料更糟;警報層級在壓力下仍能維持。
無障礙底線
無障礙底線
對比、字級、不僅靠顏色、運動可及範圍、減少動態、可預測導覽與聲音提示,皆以部署相關的門檻設定。依觀看距離、環境光、使用者姿勢與硬體能力校準,而非綁定特定畫素數值。
分級式 UX 審查
分級式 UX 審查
依部署風險分級的審查 —— 付款/身分/安全關鍵屬 CRITICAL,互動與帶警報的監控屬 HIGH,browse/dwell 屬 MEDIUM,glance/loop 屬 LOW。每段附必要項與反模式對照,與
bricks-design 審查並行執行,兩者皆會阻擋出貨。