design 技能

ckm:design 是一套結構化設計技能，適合分流與製作 logo、CIP mockup、橫幅、簡報與 SVG 圖示。它提供實用參考、CSV 驅動選項與 Python 腳本，讓設計流程可重複執行，不只依賴泛用提示詞輸出。

design-md 技能會分析 Stitch 專案，並將畫面轉換成具語意的 DESIGN.md 單一真相來源，讓版面、語氣、色彩與元件語言保持一致。當你需要的是可供後續 Stitch 生成沿用的提示式設計指引，而不只是視覺摘要時，請使用 design-md 來建立 Design Systems。

design-consultation 是一個 design-consultation 技能，用來把粗略的產品想法轉化為完整的設計方向。它會建立 `DESIGN.md` 作為單一事實來源，並產生預覽與系統層級的指引，涵蓋字體、色彩、間距、版面與動效。特別適合新產品與需要一致起點的 UI 介面。

這個 design skill 能把模糊的 UI 需求轉化為可直接上線的視覺成果，適用於頁面、元件、儀表板，以及以截圖為導向的細節潤飾。當介面看起來醜、看不懂、不一致，或視覺表現不對勁時，就很適合使用；也適合你需要的是 UI Design，而不是後端邏輯或資料管線。內容包含安裝、使用方式、護欄與更好的美感決策指引。

frontend-design 是一項以設計優先為核心的技能，適合用來打造更精緻的前端 UI，並強化情境脈絡、資訊層級、無障礙體驗與響應式表現。你可以用這份指南完成技能安裝、掌握核心參考資料，並依循實務建議，改善元件、頁面與應用畫面的設計品質。

使用 design-system skill 來產生或審查 UI 系統、從既有程式碼中擷取 tokens，並在真實 repo 中檢查樣式一致性。

使用 frontend-design 來打造具有鮮明風格、可直接上線的前端介面，並維持清楚的視覺主張。這個 frontend-design 技能特別適合 landing pages、dashboards、app shells 與各類元件；在這些場景中，層級、字體、動效與完成度的重要性，和實作本身同樣高。內容也提供以設計優先的 UI 工作流程安裝與使用指引。

tool-design 技能可協助你設計面向 agent 的工具，建立清楚的合約、減少重疊，並提升工具選擇品質。可用於 Design Implementation、MCP 工具設計、工具整併、命名規範，以及排查錯誤的工具呼叫。當你需要一份實用的 tool-design 指南，內容包含安裝與使用步驟、可檢視的原始檔，以及讓工具描述更不易產生歧義的具體限制時，它特別適合。

frontend-design 是一個以情境脈絡為優先的技能，專門用來打造更有辨識度的前端 UI 程式碼。你可以用它把目標受眾、使用情境與品牌語氣，轉化為更成熟的版面配置、字體排印、色彩、動態效果、互動狀態與 UX 文案，適用於頁面、元件與整體流程設計。

figma-generate-design 可運用已發布的設計系統，把已寫好的頁面、modal、drawer、sidebar、panel，以及其他多區塊視圖轉成 Figma。它會從 Code Connect 與相關來源找出元件、變數、樣式和素材，再依照區塊逐段組裝畫面，供 Design Implementation 使用，而不是手動重畫整個版面。當你需要盡量貼近程式碼與 tokens 的一致性時，適合使用 figma-generate-design guide。

ckm:design-system 從清晰的 token 架構出發，協助建立三層 tokens、元件規格、CSS variables、Tailwind 對應，以及維持品牌一致的簡報投影片資產。

react-native-design 是一項專注於 React Native UI 模式的技能，涵蓋 StyleSheet 樣式設計、型別化 React Navigation，以及 Reanimated 3 在跨平台畫面中的使用方式。

design-system-starter 可協助團隊快速搭建 design system，提供 tokens、atomic components、theming、WCAG 2.1 AA 指引、檢查清單，以及適用於 React 的文件與起始程式碼範本。

frontend-design-review 是一個 GitHub 技能，用來檢視前端 UI 工作，並從零打造有辨識度、可上線的介面。它能協助評估設計系統遵循度、無障礙性、視覺品質，以及某個 UI 是不是看起來太制式，還是有刻意設計感。適合用在 PR 審查、元件審查，以及 frontend-design-review 相關的 UI Design 情境。

design-review 是一個以 UX 為導向的設計 QA 技能，用來稽核線上介面，找出間距、層級、視覺一致性與互動問題，再透過驗證反覆修正。它支援在實作前先進行 plan-mode 檢視，適合你需要一份能對應具體原始碼變更的 design-review 指南，而不是空泛建議的情境。

ipados-design-guidelines 技能適用於設計與審視 iPad 原生介面。可用於自適應版面、Split View、Stage Manager、側邊欄導覽、指標與觸控板行為、鍵盤快捷鍵，以及窄寬度下的退化方案。它能幫助你把原本偏向 iPhone 的假設，轉成實際可操作的 iPadOS 設計檢查。

figma-create-design-system-rules 可協助你為 Figma 轉程式碼工作產生專案專屬的 Design System 規則。你可以用它整理元件、命名、tokens、檔案位置，以及哪些內容不該硬寫進去，讓 AI 程式代理在整個 repo 中維持一致。需要連接 Figma MCP server。

visual-design-foundations 可協助團隊建立實用的 UI 系統，涵蓋字體比例、色彩 tokens、間距規則與圖示設計指引。你可以用它打好設計基礎、建立 style guide、檢視視覺層級，並依據明確的設計限制產出可直接落地實作的 CSS variables。

figma-implement-design 可將 Figma 畫面轉成可直接投入生產環境的程式碼，並盡量貼近版面配置、狀態、token 與響應式行為。適合用於 Figma-to-code 實作，不適用於 Figma 編輯、code connect 對應，或生成全新設計。內容包含安裝指引、使用說明，以及 Design Implementation 工作流程的邊界規則。

design-an-interface 技能可協助你在定案前，先探索截然不同的 API 與模組介面形狀。它特別適合前端開發與其他模組設計工作：先釐清需求，再比較多種方案、權衡取捨，最後產出更乾淨、面向呼叫端的契約。

tvos-design-guidelines 是一套實用的 Apple TV 設計規範，用於檢視 tvOS 介面、以焦點為核心的導覽、Siri Remote 行為、10 呎可讀性，以及媒體播放。當你需要清楚的限制條件、逐畫面檢視，和針對客廳 UI 設計的實作檢查時，可使用這份 tvos-design-guidelines 指南。

使用 web-design-guidelines 依據最新的 Web Interface Guidelines 審查 UI 程式碼。非常適合聚焦於 web-design-guidelines 的 UX 稽核流程，可在發佈前提供精簡的 file:line 發現、無障礙檢查與介面合規審閱。

figma-generate-design 可將真實畫面、頁面或多區塊版面轉成 Figma，且會優先重用已發布的設計系統，而不是套用通用圖形。它很適合用來對齊程式碼或產品頁面，追求高一致性、可編輯的結構，以及以 token 為基礎的一致表現。適合用於整頁 UI 設計更新，不適合拿來做粗略 mockup。

使用 tailwind-design-system 技能建立 Tailwind CSS v4 設計系統，涵蓋 design tokens、theming、variants、無障礙設計，以及 v3 到 v4 的遷移指引。