spadeontop/Skills

Design Context Generator & OpenCode Data 引擎

一個次世代的系統技能，用於互動式設計、視覺測試，並產生高效 token 的前端設計系統 (DESIGN_CONTEXT.md) 以及零依賴的即時 HTML 預覽 (design-preview.html)。

直接整合了透過瀏覽器開發工具 MCP 分析提取的 OpenCode Data (opencode.ai/data) 技術等寬字型遙測設計系統，其特色包括 IBM Plex Mono 字體、黑曜石炭筆畫布 (#161616)、0.5px 髮絲般精準邊框、即時狀態跑馬燈、排行榜排名卡片以及高密度資料表格。

嚴格執行：

1. 60-30-10 色彩法則 + 功能反饋狀態。
2. 數學 WCAG 2.1 AA/AAA 無障礙性（正文至少 4.5:1，邊框/控制項至少 3.0:1，強化文字至少 7.0:1）。
3. Tailwind CSS v4 瀏覽器 CDN 架構 (@tailwindcss/browser@4) 搭配 @theme 和 @custom-variant dark。
4. 高效 Token 的語義工具類配方（使用精簡類別，避免自訂 CSS 膨脹）。
5. 禁止使用表情符號（採用 1.5px/2px 描邊的清晰 SVG 圖示或純文字徽章）。

---

使用時機

• 當初始化、升級或為任何網頁應用程式或儀表板產生 DESIGN_CONTEXT.md 時。
• 當建立靈感來自 OpenCode Data (opencode.ai/data) 的遙測儀表板、AI 排行榜、開發者工具或資料密集型平台時。
• 當為 Tailwind CSS v4（CDN 或 Vite/CLI）或 Tailwind v3 建立設計 token、UI 指南或樣式標準時。
• 當為下游 AI 編碼代理提供簡潔、明確的元件藍圖，以防止任意的十六進位色碼漂移時。

---

核心指令與限制

1. 禁止一次性傾倒：絕不在第一次互動時就輸出最終的 DESIGN_CONTEXT.md。請遵循 5 階段互動式工作流程，以接收偏好設定、調和 token、數學驗證對比度、產生即時視覺預覽，並與使用者確認。
2. 高效 Token 的語義配方：藍圖必須使用簡潔的語義 Tailwind 工具類別（例如 px-4 py-2 rounded-input bg-primary text-primary-foreground），而非自訂 CSS 區塊或一次性十六進位值（如 bg-[#1a2b3c]）。
3. 禁止使用表情符號：在生成的設計上下文、程式碼檔案或與使用者溝通中，絕不使用表情符號。請使用清晰的 SVG 圖示規格或簡潔的文字徽章。
4. WCAG 2.1 AA/AAA 合規性：所有色彩組合必須通過數學對比度測試：
   • 畫布/表面上的正文文字：≥ 4.5:1（AAA 標準目標為 ≥ 7.0:1）。
   • 基本圖示、邊框和輸入控制項：≥ 3.0:1。
   • 主要 CTA 按鈕文字：≥ 4.5:1。
5. TAILWIND CSS V4 CDN 架構：
   • 對於獨立、無建構步驟的 HTML/JS，使用 <script src="https://unpkg.com/@tailwindcss/browser@4"></script>。
   • 透過 <style type="text/tailwindcss"> 並使用 @theme 和 @custom-variant dark (&:where(.dark, .dark *)); 進行配置。
   • 動態深色模式透過在 <html> 上套用 .dark class 來控制，並搭配 :root 和 .dark 之間的 CSS 變數 token 切換。

---

模組化參考與模板

此技能包含深入的模組化參考資料與生產用模板：

• opencode-data-spec.md：OpenCode Data 設計系統的完整規範（IBM Plex Mono、黑曜石畫布、髮絲邊框、遙測跑馬燈、排行榜卡片、資料表格、走勢圖）。
• archetypes.md：精選預設集：
  1. OpenCode Data（來自 opencode.ai/data 的技術等寬字型引擎）
  2. Linear / SaaS Dark（黑曜石色調、電光紫/青色、半透明邊框）
  3. 極簡主義（ stark 單色調、建築感留白、零漸層）
  4. 現代乾淨企業風（Plus Jakarta Sans 字體、企業藍、清晰的卡片網格）
  5. 金融科技終端（等寬數字、訂單簿階梯、盈虧強調色）
  6. 編輯極簡（顯示字體、溫暖紙張色調、文學優雅感）
• semantic-tokens.md：通用的 60-30-10 token 合約、功能性 token 以及 CSS 變數對應。
• typography-scales.md：字體搭配、Tailwind 字型比例以及表格資料規則。
• wcag-contrast-rules.md：數學相對亮度公式與驗證過的對比度矩陣。
• preview.template.html：零依賴的 Tailwind v4 CDN 即時互動式 HTML 預覽，附帶原型切換器和主題切換功能。
• DESIGN_CONTEXT.template.md：供下游代理使用的完整 markdown 藍圖模板。
• tailwind.config.template.js：可匯出的配置，適用於 Tailwind v4 CDN、v4 CSS 建構以及 v3。
• validate-contrast.js：Node/瀏覽器腳本，用於計算對比度比率。

---

程序性工作流程（5 個階段）

第一階段：接收與探索

1. 檢查使用者是否指定了：
   • 目標原型（預設：OpenCode Data 或 Linear / SaaS Dark）。
   • 期望的品牌/強調色（或提供精選種子強調色：OpenCode Indigo #8190ff、Cobalt #3b5cf6、Electric Violet #8b5cf6、Emerald #10b981）。
   • 目標主題偏好（預設為雙模式、深色優先或淺色優先）。
   • 目標技術堆疊（預設為用於無建構 HTML/JS 的 Tailwind CSS v4 瀏覽器 CDN，或 Vite/CLI）。
2. 若未指定，請使用 ask_question 以互動方式釐清偏好。

第二階段：語義調和與 OpenCode Data 對應

1. 將選定的顏色對應到嚴格的 60-30-10 分配 + 功能狀態：
   • 60% 主導色：bg-background、bg-surface、text-foreground。
   • 30% 次要色：bg-surface-elevated、bg-muted、text-muted-foreground、border-border、border-border-subtle。
   • 10% 強調色：bg-primary、text-primary-foreground、hover:bg-primary-hover、ring-ring。
   • 功能色：bg-success、bg-warning、bg-destructive、bg-info 及其各自的文字顏色。
2. 決定適當的字型堆疊：
   • 如果是 OpenCode Data：全域套用 IBM Plex Mono。
   • 如果是 Linear / SaaS Dark：對於表格指標，套用 Inter 或 Geist Sans 搭配 JetBrains Mono。

第三階段：數學 WCAG 對比度驗證

1. 使用 wcag-contrast-rules.md 中的相對亮度公式，計算每個前景/背景組合的對比度比率。
2. 確保：
   • 深色模式中 #161616 上的正文文字達到 > 15:1（AAA）。
   • 次要文字達到 > 4.5:1（AA）。
   • 如果強調色較深，前景文字必須是 #ffffff。
   • 如果強調色是亮霓虹色，前景文字必須是 #09090b 或 #161616。
3. 向使用者呈現提議的調色板表格，包含確切的十六進位色碼和對比度比率。

第四階段：獨立即時視覺預覽 (design-preview.html)

1. 透過將解析後的 token 填入 preview.template.html，在專案根目錄產生 design-preview.html。
2. 告知使用者 design-preview.html 已準備好可在瀏覽器中開啟以測試：
   • 即時 OpenCode Data 排行榜卡片、遙測狀態跑馬燈和高密度資料表格。
   • 具有 localStorage 持久化功能的即時主題切換（深色/淺色）。
   • 動態原型切換器（即時在 OpenCode Data、Linear、極簡主義等之間變形）。
   • 按鈕狀態、輸入框、附 ⌘K 的搜尋列、徽章以及互動式模態框。
3. 徵求使用者的回饋或批准。

第五階段：生產環境 DESIGN_CONTEXT.md 與配置匯出

獲得使用者批准後：

1. 使用 DESIGN_CONTEXT.template.md 在專案根目錄撰寫最終版本的 DESIGN_CONTEXT.md。
2. 為使用者的技術堆疊（Tailwind v4 CDN <head> 或 tailwind.config.js）提供可匯出的配置片段。
3. 保留 design-preview.html 作為未來迭代的即時視覺測試平台。