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。

ui-design-system 是一個用於 Design Systems 的 Claude skill，可協助產生 design tokens、color scales、typography、spacing、responsive rules、component documentation 與 developer handoff assets，並提供參考資料與 Python token generator，可輸出 JSON、CSS、SCSS 或 summary。

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