網站設計
一個管道，能讓任何 AI 代理（包括小型或較弱的模型）交付世界級、美觀、功能豐富的網站並進行部署。每個階段都會產出一個具名構件，供下一個階段重新讀取，因此任何決策都不會重做或遺失。可透過技能建立者慣例觸發；每個描述都是一個單行引號字串。
管道構件（工作記憶）：DESIGN BRIEF（受眾、氛圍、旋鈕）→ DIRECTION（風格、色板、字體、允許/禁止）→ TOKENS（標準 CSS 自訂屬性、深色模式）→ SECTION MAP（有序的區段，包含標題/本文/素材/行動呼籲欄位）→ DEPLOY SPEC（主機、類型、URL、回滾）。
路由模式：管道 + 刻面
管道（按順序，絕不跳過任何階段）：
- briefing - 從使用者訊息、連結、螢幕截圖、儲存庫中提取 DESIGN BRIEF。
- direction - 在任何 HTML 或 CSS 之前，先選擇風格、色板、字體。
- system - 將 DIRECTION 轉換為 TOKENS，並配置主題/深色模式。
- structure - 將 TOKENS 和 DIRECTION 轉換為 SECTION MAP。
- components - 根據區塊配方建置每個區段（子項：導覽列、英雄區、功能區、社會證明、轉換區、表單）。
- content - 用真實文案和真實素材填滿每個 SECTION MAP 欄位。
- motion - 根據 MOTION 旋鈕，提供每個區段的動畫規格。
- quality - 僅供審查的閘門：反垃圾、無障礙、效能、稽核、生產環境、預飛（最終閘門）。
- deploy - 選擇主機：higgsfield 或 generic。
刻面（入口點，非階段）：
- 網站已存在（URL、儲存庫、檔案）→ 先在 redesign 開始（在簡報之前），然後重新進入管道。
quality/*葉節點僅供審查；在檢查時載入，而非建置時。- version-control 與每個階段並行執行：在產生每個構件時就提交。在 webdev-managed 的網站儲存庫（WEBSITES/）中工作時，此為強制要求。
子節點
- briefing - 對於新建置來說永遠是第一個；產生包含 VARIANCE/MOTION/DENSITY 旋鈕的 DESIGN BRIEF。
- direction - 透過 ui-ux-pro-max 驗證搜尋來決定風格、色板、字體；產生 DIRECTION.md。
- system - 標準記號、主題、深色模式；產生 TOKENS。
- structure - 有序的區段與欄位計數；產生 SECTION MAP。
- components - 依據區段類型的區塊配方；每個區段載入一個葉節點。
- content - 真實文案、真實圖片，無填充內容；產生 CONTENT。
- motion - 動畫規格、GSAP 骨架、減少動態路徑。
- preflight - 最終閘門；諮詢所有品質同級節點，然後交給部署。
- deploy - 主機路由器：higgsfield（網站/應用程式/遊戲）或通用靜態主機；產生 DEPLOY SPEC。
- redesign - 當網站已存在時的稽核優先入口點。
- version-control - 跨所有階段的 git 規範；絕不遺留未提交的工作。
導航（僅根路由器）
- 跳轉：知道階段？直接載入該子節點；永遠不載入整棵樹。
- 漫步：僅當決策本身不明確時；一次只讀一個路由器。
- 宣告你正在操作的階段；當階段轉換時，請明確說明。
- 重新路由：如果載入的葉節點與任務矛盾，返回此處並重新選擇；絕不臨時編造一個葉節點。
- 委派：將寬廣的分支委派給一個子代理，並附上子節點的路徑和分拆後的任務；只有該子樹會被載入。
- 天花板：葉節點永遠不能超出其上層規則；此檔案在衝突中擁有最終決定權。
慣例
從 _build/plan-expanded.md 提升而來；對此子樹中的每個節點都具有約束力。
- 弱模型驗證：決策表、具體數字（「內邊距 96-128px」，而非「寬敞的」）、每個葉節點有 3-8 個可計數且可搜尋的通過/失敗檢查。用一行說明，以便更聰明的模型可以泛化；機械規則本身應獨立成立。
- 主題基礎：每個美學選擇都必須錨定到具體的主題、受眾和主要任務（行業、材料、行業術語）。一個給 8-11 歲女孩的玩具店和一個給財務分析師的工具必須有所區別。始終使用真實內容；當內容缺失時，透過 briefing 提議具體文案並確認。
- 語言無關：原則存在於語義 HTML + CSS 中，位於
references/stack-adapters.md。永遠不依賴 React、Tailwind 或任何框架。 - 標準記號：定義於 system，隨處使用：
--bg --surface --text --text-muted --accent --accent-contrast --border --destructive、--radius --radius-lg、--font-display --font-body --font-mono、--space-1..--space-10（4 8 12 16 24 32 48 64 96 128）、--container、--shadow-1 --shadow-2。 - 來自 briefing 的旋鈕：整數 1-10，確切名稱為
VARIANCE（1 極簡，10 不對稱/藝術）、MOTION（1 靜態，10 電影級）、DENSITY（1 稀疏，10 密集）。切勿發明新的旋鈕。 - ui-ux-pro-max 協定：方向/系統選擇須根據該套件中的風格/色板/字體數據進行驗證；若結果為空，則回退到內建表格並說明。
- 五個構件以圍欄區塊形式傳遞，按名稱重新讀取，而非從記憶體讀取。
- Frontmatter：
name:必須與目錄名稱相符，description:為單行引號觸發字串。 - 風格：不得使用全形破折號（請使用連字號或句號）、不得使用表情符號；絕對禁止項目僅存在於 anti-slop 中；以根目錄相對路徑交叉連結同級節點（heroes）。
不可協商事項
- 任何節點中不得出現全形破折號；反垃圾葉節點的偵測器會對此進行 grep。
- 不得使用偽造的品牌標誌、客戶評價、統計數據或品牌圖像；content 提議，使用者確認。
- 不得使用佔位記號；每個區段都必須透過標準記號集進行渲染。
- 不得混合設計系統：每次建置只能使用一種風格系列、一個色板、一種字體配對。
- 不得遺留未提交的構件：version-control 會在下一個階段開始之前提交每個階段的輸出。
- 未通過 preflight 不得部署。
- 圖表明確超出此技能範圍。如需資料視覺化（ui-ux-pro-max 中的 25 種圖表類型），請查詢
python ~/.agents/skills/ui-ux-pro-max/scripts/search.py "<資料形狀>" --domain chart，而不是自行拼湊網格和長條圖。