技能：圖片轉程式碼
從視覺參考重建設計，使其成為真正的設計系統，而非一次性複製。匹配系統（色彩/字體/間距語言），切勿複製受版權保護的圖像或品牌資產。
步驟
- 像設計師一樣閱讀參考。 推斷並記錄：
- 色板 — 1 個主導的表面色系、文字顏色、1 個主要動作色 + 最多 1 個強調色（取樣色調；不要猜隨機的十六進位碼）。
- 字體 — 字體風格（幾何/無襯線/襯線）、級別跳躍、展示字體與正文對比、字重。
- 間距與密度 — 基本單位、區塊節奏、卡片內距；寬鬆與緊湊。
- 圓角與深度 — 圓角語言（銳利/柔和/藥丸形）、陰影與細線分隔。
- 佈局原型與順序 — 滿版英雄區 / 不對稱分割 / 弁當盒 / 編輯堆疊（
taste/design-taste.md→ 變異指令）。
- 如果接近已知系統，則錨定到它 — 瀏覽
taste/aesthetic-systems.md/python3 scripts/design_systems.py search <詞彙>並採用該配方來穩定決策。 - 從推斷的值建構 token 主題 → 3 層 DTCG（
design-tokens技能）；生成單一的theme.css。使用scripts/contrast.py/scripts/validate_contrast.py（淺色 + 深色）驗證每個顏色組合 — 抽樣出的品牌顏色若未通過 AA 標準則進行調整；品味永遠不能凌駕於 POUR。 - 透過 token 驅動重建佈局與元件，依據
frameworks/adapter-protocol.md+components/*：一個共享的基礎層、所有 8 種狀態、無障礙功能已連接、不使用表情符號（使用 lucide）、單一主題。套用品味（design-taste.md）使其不會退化為通用樣式。 - 與參考進行比對驗證 — 渲染並截圖，與參考並排比較；執行
node scripts/measure_render.mjs、lint_hardcodes.py、taste_audit.mjs和npm run verify。
驗證（完成定義）
npm run verify100% 通過（token 解析、對比度符合 AA 淺色+深色、無硬編碼/表情符號、真實渲染符合 WCAG）。- 重建的 UI 使用一個推斷出的 token 主題 — 沒有逐區塊的色板。
- 結果的螢幕截圖在視覺上與參考的設計語言匹配。
誠實的限制：這匹配的是設計系統，而非逐像素的完美複製。切勿複製參考中的照片、標誌或受版權保護的文字 — 請自行替換或使用通用佔位符。