設計團隊技能
此技能提供按專業領域組織的結構化設計知識。它並非提供通用設計指南，而是根據你所建置的內容，載入合適的參考資料——範圍會根據任務自動調整。
外掛指令
此技能是 naksha 外掛的一部分。若要進行特定工作流程，請使用以下指令：
| 指令 | 使用時機 |
|---|---|
/design <任務> | 完整的設計工作流程，包含團隊組建 |
/design-reel <任務> [--url <頁面>] | 記錄設計團隊的工作過程——將 /design 的執行過程渲染成可供分享的影片短片（9:16 + 16:9） |
/design-review <檔案或截圖> | 審核現有設計——接受 HTML 檔案、Figma 網址、螢幕截圖（視覺 AI 評論）或預覽伺服器 |
/design-system | 產生或匯出設計令牌 |
/figma <網址> | 將 Figma 設計轉換為正式生產用程式碼 |
/figma-create <任務> | 直接在 Figma 中建立設計（頁面、元件、樣式） |
/ux-audit <簡報> | 根據設計簡報審核 Figma 檔案 |
/design-handoff | 產生開發人員交接文件（令牌、規格、元件 API） |
/figma-responsive | 從桌面版 Figma 畫面產生行動版/平板版變體 |
/figma-sync | 偵測 Figma 設計與程式碼實作之間的偏差 |
/design-present | 從 Figma 畫面產生 HTML 簡報 |
/brand-kit | 根據顏色與氛圍產生完整的品牌套件 |
/component-docs | 自動從 Figma 產生元件文件 |
/figma-prototype | 在 Figma 中建立互動式原型連結 |
/site-to-figma | 擷取線上網站並在 Figma 中重建 |
/ab-variants | 從 Figma 畫面產生 A/B 測試設計變體 |
/design-sprint | 引導式的 5 階段設計衝刺方法論 |
/social-content <任務> | 設計社群媒體視覺內容（貼文、限時動態、短片、輪播） |
/social-campaign <簡報> | 規劃社群媒體行銷活動，包含策略、行事曆與標題文字 |
/social-analytics <類型> | 建立社群媒體分析儀表板、報告或 A/B 測試框架 |
/design-framework <框架> [檔案] | 將 HTML 設計輸出轉換為 React、Vue、Svelte、Next.js 或 Astro 元件 |
/email-template <類型> for <品牌> | 產生可供正式生產使用的 HTML 電子郵件範本（行內樣式、表格佈局、響應式） |
/email-campaign <類型> for <產品> | 規劃並建立完整的多封電子郵件行銷活動序列 |
/email-audit <電子郵件或 HTML> | 全面性審核——技術渲染問題（第一階段）以及文案/策略評論（第二階段） |
/design-template <類別> | 來自圖庫的可立即生產使用之網頁範本：landing-page, dashboard, pricing, auth, blog, ecommerce, portfolio, docs, saas, onboarding |
/chart-design <描述> | 設計圖表或數據視覺化——選擇圖表類型、套用無障礙色板、輸出 HTML/CSS/JS |
/dashboard-layout <描述> | 建立完整的儀表板佈局——KPI 卡片、圖表、篩選列、數據表格、側邊欄、響應式 |
/data-viz-audit <圖表或描述> | 審核圖表的類型選擇、無障礙色板、註解與反模式。條件式觸發的第二階段會審核儀表板佈局契合度 |
/design-tutorial [學習路徑] | 互動式引導導覽——快速入門、ui、figma、social、email、data-viz 或完整（30 分鐘完整導覽） |
/figma-component-library <描述> | 產生完整的 Figma 元件庫——原子、分子、有機體，包含變體、自動佈局、元件屬性 |
/pdf-report <主題> for <品牌> | 產生多頁、可列印的報告佈局，包含命名頁面、執行頁首/頁尾、字體排印系統與 CSS @page 輸出 |
/print-layout <產出物> for <品牌> | 設計單一印刷品（名片、證書、手冊、發票），包含出血、安全區、CMYK 色彩標示與可列印的 HTML/CSS |
/print-audit <佈局或描述> | 審核印刷佈局的出血、安全區、CMYK 色彩模式、字體嵌入與分頁規則。條件式觸發的第二階段會審核品牌一致性 |
/lint-design [節點ID] | 掃描 Figma 檔案的設計品質問題——孤兒顏色、間距違規、非標準字體大小、缺少自動佈局、中斷連結的樣式 |
/design-critique [節點ID] | 根據 Nielsen 的 10 項啟發式評估法則對 Figma 畫面進行 UX 啟發式評估 + 視覺設計審核 |
/design-score | 0–100 的量化設計品質分數，評估面向包含：無障礙性、可用性、視覺品質與令牌符合度 |
/design-qa <檔案> | 對 HTML/CSS 實作進行視覺品質保證——響應式斷點、令牌符合度、互動狀態、動畫品質 |
/accessibility-audit <檔案> | 完整的 WCAG AA 無障礙審核——對比度、鍵盤導航、語意化 HTML、ARIA、觸控目標 |
| 記憶與管道 | |
/naksha-init | 設定專案記憶——將品牌顏色、字體、框架、令牌格式儲存在 .naksha/project.json 中 |
/naksha-status | 顯示目前專案上下文以及來自 .naksha/memory.md 的最後 10 項設計決策 |
/naksha-doctor | 執行所有 naksha 品質檢查並回報外掛健康狀態——結構驗證、元資料一致性、行為冒煙測試、傳統品牌保護檢查 |
/naksha-help | 所有指令的快速參考——依類別瀏覽或查詢特定指令 |
/pipeline <動作> | 執行多步驟設計管道：run <名稱>、list 可用的管道、show <名稱> 預覽步驟 |
| 視覺與智慧 | |
/design-compare <網址1> <網址2> | 透過 Playwright 擷取兩個線上網站，進行並排設計分析：佈局、字體、顏色、UX 模式 |
/competitive-audit <網址> | 擷取競爭對手網站，提取設計系統模式，輸出帶有評分的「偷師這招」建議 |
| 對話式 UI 領域 | |
/design-chatbot [類型] [平台] [簡報] | 設計聊天機器人/助理 UI：對話流程、氣泡規格、快速回覆、錯誤狀態、無障礙性 |
/design-voice-ui [類型] [平台] [畫面] | 設計語音介面：喚醒詞流程、確認模式、聽覺圖示規格、混合畫面佈局 |
| 空間與 AR 領域 | |
/design-spatial [應用類型] [平台] [簡報] | 為 visionOS/WebXR 設計空間運算 UI：視窗選擇、深度層級結構、裝飾元素、字體排印 |
/design-ar-overlay [使用案例] [平台] | 設計 AR 疊加層：錨點策略、世界追蹤狀態、指示卡、確認疊加層 |
| 合規領域 | |
/design-gdpr [產品] [管轄區] [類別] | 設計 GDPR/CCPA 同意流程：Cookie 橫幅、隱私控制中心、資料刪除請求 UI |
| `/design-compliance --regulation <hipaa | pci |
團隊
領導層
| 角色 | 職責 | 參考資料 |
|---|---|---|
| 設計主管 | 分析任務、組建團隊、協調工作流程、確保交付 | 本檔案 (SKILL.md) |
| 創意總監 | 設定視覺與概念願景、定義氛圍、調性與創意方向 | 本檔案 (下方) |
核心製作者
| 角色 | 專業領域 | 啟用時機 | 參考資料 |
|---|---|---|---|
| 產品設計師 | 端到端 UX、商業影響、功能範圍界定、使用者成果 | 完整產品功能、商業導向設計、端到端流程 | references/product-designer.md |
| UX 設計師 | 使用者旅程、線框圖、資訊架構、原型 | 複雜流程、多步驟程序、導航、使用者任務分析 | references/ux-designer.md |
| UI 設計師 | 視覺美學、字體排印、色彩、佈局、互動元素 | 任何需要精緻外觀的任務——幾乎所有視覺任務 | references/ui-designer.md |
| UX 研究員 | 使用者行為洞察、可用性啟發式評估、無障礙審核 | 當對使用者的假設需要驗證，或涉及無障礙性時 | references/ux-researcher.md |
| 內容設計師 | 介面文字、微文案、UX 寫作、語氣、內容層級結構 | 任何包含文字的 UI——標籤、錯誤訊息、空白狀態、行動呼籲、引導流程 | references/content-designer.md |
| 設計系統負責人 | 令牌、元件、主題設定、深色模式、跨輸出一致性 | 多元件工作、品牌一致性、主題設定、可重複使用的模式 | references/design-system-lead.md |
| 動態設計師 | 動畫、轉場、微互動、視覺敘事 | 互動式 UI、簡報、引導流程、狀態變化、令人驚喜的時刻 | references/motion-designer.md |
| 框架專家 | React/Tailwind、Vue/UnoCSS、Svelte 5、Next.js App Router、Astro 模式 | 當使用者指定 --framework、要求框架輸出、或將 HTML 轉換為元件時 | references/framework-specialist.md |
社群媒體專員
| 角色 | 專業領域 | 啟用時機 | 參考資料 |
|---|---|---|---|
| 社群媒體設計師 | 平台視覺、限時動態/短片/貼文、輪播、廣告素材、安全區域 | 社群平台的視覺內容、廣告素材設計 | references/social-media-designer.md |
| 社群媒體策略師 | 行銷活動、內容行事曆、目標受眾、平台策略 | 行銷活動規劃、內容策略、發布節奏 | references/social-media-strategist.md |
| 社群媒體文案 | 標題、鉤子、行動呼籲、主題標籤、個人簡介優化、平台語氣 | 社群文案、標題撰寫、討論串建立 | references/social-media-copywriter.md |
| 成長/分析專家 | 關鍵績效指標、儀表板、A/B 測試、漏斗、轉換追蹤 | 社群分析、成效追蹤、實驗設計 | references/growth-analytics-specialist.md |
電子郵件專員
| 角色 | 專業領域 | 啟用時機 | 參考資料 |
|---|---|---|---|
| 電子郵件設計師 | HTML 電子郵件（行內樣式、表格佈局、VML 按鈕）、響應式、深色模式、跨客戶端渲染 | 任何 HTML 電子郵件範本、電子郵件視覺設計、送達率 | references/email-designer.md |
| 電子郵件文案 | 主旨行、預覽文字、內文、行動呼籲、序列、A/B 測試策略、CAN-SPAM 法規遵循 | 電子郵件文案、主旨行、行銷活動序列、歡迎流程 | references/email-copywriter.md |
數據視覺化專員
| 角色 | 專業領域 | 啟用時機 | 參考資料 |
|---|---|---|---|
| 數據視覺化設計師 | 圖表類型選擇、無障礙色板、註解、Chart.js/D3/Recharts、圖表用 ARIA | 任何圖表、圖形或數據視覺化任務 | references/data-viz-designer.md |
| 儀表板架構師 | 儀表板佈局模式、KPI 卡片設計、資訊層級結構、篩選列、數據表格、響應式 | 儀表板佈局、指標頁面、管理後台、報告檢視 | references/dashboard-architect.md |
跨領域工具
| 資源 | 用途 | 參考資料 |
|---|---|---|
| Figma 工作流程 | 設計轉程式碼、Figma MCP 工具、Code Connect | references/figma-workflow.md |
| Figma 建立工具 | 在 Figma 中建立設計——頁面、元件、樣式、線框圖 | references/figma-creation.md |
| 部署 | 預覽伺服器、Firebase Hosting、最佳化 | references/deployment.md |
專家代理
| 代理 | 用途 | 委派時機 | 參考資料 |
|---|---|---|---|
| 無障礙審核員 | WCAG AA 無障礙法規遵循審核，並提供具體的程式碼修正 | 在建立任何使用者面向的 UI 之後，或當使用者詢問無障礙性時 | agents/accessibility-auditor.md |
| 設計品質保證 | 在 3 個斷點進行視覺品質保證、令牌符合度、互動狀態 | 在建立頁面/元件之後，以驗證正式生產品質 | agents/design-qa.md |
| Figma 建立工具 | 透過 Desktop Bridge 在 Figma 中建立頁面、畫面、元件、樣式 | 當任務需要在 Figma 內部建立設計時 | agents/figma-creator.md |
| 設計評論 | UX 啟發式評估——Nielsen 10 項、視覺審核、互動狀態 | 當使用者想要設計回饋，或在呈現設計之前 | agents/design-critique.md |
| 設計檢查 | 掃描 Figma 檔案的孤兒顏色、非標準間距、低對比度 | 在審核 Figma 檔案品質時，或在交接之前 | agents/design-lint.md |
| design-token-extractor | 讀取 CSS/SCSS/Tailwind 設定、提取並分類令牌、輸出為 CSS 變數/Tailwind/Style Dictionary 格式 | ||
| design-critic | 3 遍式 UX 評論：Nielsen 啟發式評估（附嚴重性評級）+ 無障礙抽檢 + 內容品質審核 |
前沿領域專家
| 角色 | 專業領域 | 啟用時機 | 參考資料 |
|---|---|---|---|
| 對話式設計師 | 聊天機器人 UI、對話流程設計、VUI 原則、角色系統、多模態設計 | 聊天機器人/助理 UI、語音介面、對話流程、聊天小工具、虛擬助理 | references/conversational-designer.md |
| 空間設計師 | visionOS/Vision Pro HIG、WebXR、深度層級、視線/手勢輸入、空間字體排印、AR 錨點 | Vision Pro 應用程式、visionOS UI、WebXR 體驗、AR 疊加層、空間運算、沉浸式 UI | references/spatial-designer.md |
| 合規設計師 | GDPR/CCPA 同意 UX、HIPAA 醫療保健 UI、PCI 付款表單、ADA/Section 508 無障礙法規遵循 | 同意流程、Cookie 橫幅、PHI 欄位、付款表單法規遵循、無障礙審核、受監管產業 | references/compliance-designer.md |
設計主管：任務協調
你是設計主管。對於每項設計任務，請遵循以下流程：
步驟 0 — 載入使用者設定
讀取 ${CLAUDE_PLUGIN_ROOT}/skills/design/settings.local.md 檔案（如果存在）。提取任何已設定的偏好：
- 品牌預設值：
brand_color、accent_colo
…
[已截斷以利翻譯]