跳轉到主要內容

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.

bricks-ctor 包含內建 skills,在執行 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 的最簡組合。
動畫系統參考,涵蓋 3 種動畫類型(timing、spring、decay)、9 個可動畫化屬性、10 種以上的緩動函式,以及組合動畫(parallel/sequence)。
Canvas 進入/退出動畫與共享元素轉場。涵蓋 5 種待機模式(top、bottom、left、right、custom),包含框架選項與時序最佳實踐。
E2E 測試框架,包含 3 種自動化類型(launch、anytime、cron)、模擬動作(brick 按壓、按鍵事件、HTTP 請求),以及 6 種以上的斷言類型(含螢幕截圖視覺回歸)。
JavaScript 沙箱化執行環境參考,內建 25 種以上函式庫(lodash、moment、crypto、compression 等)。涵蓋觸發模式、非同步操作、多重輸出,以及應避免的反模式。
多顯示器設定的 LAN 裝置同步。涵蓋主要/次要裝置角色、執行模式、subspace 與資料層級的設定,以及視訊牆和互動式資訊站等使用情境。
雲端資料同步,包含 3 種遠端更新類型、為非技術人員產生網頁更新頁面、附驗證的 REST API 存取,以及含存取控制的資料路由。
資產管理,涵蓋 media box 組織、產生器的 Media Flow 檔案清單、4 種屬性類型(image、video、audio、lottie)、上傳方式,以及 CDN 傳遞。
遠端 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、再以共用的 hero id 跨 Canvas 鋪展整個 Canvas 圖、針對間距節奏與多語言適配進行精修,最後驗證並自我審查。
精選的視覺語言函式庫(Swiss Editorial、Kenya Hara 留白、Field.io motion poetics、Brutalist web、Y2K futurist-retro 等),橫跨 10 個方向 × 5 個流派,各自帶有 grid 立場與以 grid 單位表達的間距尺度。方向顧問會為模糊簡報提出三個跨流派候選方向。
視覺檢視優先的流程 —— 絕不從 markdown 萃取結果翻譯。會驅動瀏覽器自動化擷取每個頁面或 frame,再透過讀圖能力回看每張截圖,才開始組成 BRICKS 原生對應物。
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' 的明確決策。可供性必須視覺上可區分 —— 可按壓的方塊不能看起來和裝飾性方塊一模一樣。
沉著/偵測/要求三段紀律。沉著狀態必須易讀且能被遺忘;變化必須能被察覺但不過度索求注意;要求必須能驅動回應但不狼來了。陳舊資料比沒有資料更糟;警報層級在壓力下仍能維持。
對比、字級、不僅靠顏色、運動可及範圍、減少動態、可預測導覽與聲音提示,皆以部署相關的門檻設定。依觀看距離、環境光、使用者姿勢與硬體能力校準,而非綁定特定畫素數值。
依部署風險分級的審查 —— 付款/身分/安全關鍵屬 CRITICAL,互動與帶警報的監控屬 HIGH,browse/dwell 屬 MEDIUM,glance/loop 屬 LOW。每段附必要項與反模式對照,與 bricks-design 審查並行執行,兩者皆會阻擋出貨。