Figma

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

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

design-system-patterns 協助團隊打造可擴充的 UI 基礎，涵蓋 design token 結構、theming 架構，以及可重用的元件 API 模式，適合用於設計系統與元件庫。

figma-create-new-file 可在 drafts 中建立全新的 Figma Design 空白檔案或 FigJam board。當你需要先有一個乾淨的起點，再進行更深入的 Figma 操作時，這個 skill 很適合使用，包括搭配 use_figma。它支援 design 或 figjam、可選檔名設定，必要時也能透過 whoami 解析方案存取權限。

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

figma-code-connect-components 可搭配 Figma Code Connect，將 Figma 設計元件對應到相符的 code component。適合用於設計與實作對齊、variant 與 prop 配對，以及在建立對應前先找出正確的本地元件。最適合 connect、map 或 link-to-code 工作流程，不適合 canvas 撰寫或整頁生成。

使用 figma 從 Figma MCP 伺服器擷取設計脈絡、截圖、變數與素材，並把 Figma 節點轉成可直接實作的 UI 決策。當你手上有 Figma URL 或 node ID，並且需要用正確的 figma 用法來處理設計轉程式碼、安裝設定或疑難排解時，這個 figma skill 特別適合。

industrial-brutalist-ui skill for UI Design 可打造機械感、高密度介面，結合瑞士風格網格、強烈字級對比、實用主義配色與類比質感。這份 industrial-brutalist-ui 指南適合儀表板、編輯系統與作品集頁面，特別是需要紀律感控制台風格的情境。

wwas 是一個用於需求規劃的提示技能，可把零散想法轉化為 Why-What-Acceptance 待辦項目。使用 wwas 技能來整理商業背景、清楚定義變更內容，並撰寫可測試的驗收條件，讓工作項目更適合進入 sprint。

使用 user-stories skill，將功能轉成可直接納入 backlog 的使用者故事，並結合 3 C、INVEST 準則、設計連結與可測試的驗收條件。很適合撰寫 user stories、將功能拆分為 backlog 項目，以及用更清楚的範圍與更少的臆測來進行 Requirements Planning 的 user-stories。

使用 job-stories 技能，把功能構想轉成 JTBD 風格的 job stories，格式為「當 [情境]，我想要 [動機]，如此一來我就能 [結果]。」這有助於產出更清楚的 backlog 項目、在 Requirements Planning 中運用 job-stories，以及根據使用者情境撰寫驗收標準。

enhance-prompt 技能能把模糊的 UI 想法，轉成更清楚、可直接交給 Stitch 的提示詞，並補強結構、UI/UX 詞彙與設計系統脈絡。使用這份 enhance-prompt 指南，可提升提示詞精確度、減少猜測，並讓提示詞撰寫與 UI 生成得到更一致的結果。

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

diagram-generator 可依結構化輸入建立與編輯 draw.io、Mermaid、Excalidraw 圖表。它支援流程圖、序列圖、類別圖、ER 圖、心智圖、架構圖與網路拓撲，也能讀取既有的 .drawio、.mmd 與 Excalidraw 檔案，方便後續更新。

figma-use 是每次呼叫 `use_figma` 前都應先安裝的技能，讓 JavaScript 能在 Figma 檔案情境中安全執行。它支援設計實作工作，例如建立與編輯節點、連結變數與樣式、製作元件與變體，以及以程式方式檢視檔案結構。這個 repo 也包含使用指引、常見陷阱與各種模式，協助降低常見的 Figma 自動化錯誤。

使用 network skill 建立具備 mxGraph 裝置圖示、自動排版、區域分組與清楚連線語意的 PlantUML 網路拓樸圖。它適合 LAN、WAN、企業、資料中心、無線、資安與特定廠商的圖表，也提供 network 的使用範例，以及何時該用 network 而不是 uml 或 cloud 的指引。

infographic 技能可透過 `infographic` DSL，將結構化內容轉成精緻的資訊圖表版面。適合用於 KPI 卡片、時間軸、路線圖、逐步流程、A vs B 比較、SWOT、漏斗、組織樹，以及簡單圖表。很適合 UI Design 的 infographic 與簡報式摘要，內容以 4–8 個項目最為合適。不適合複雜資料分析或技術示意圖。

logo-generator 可協助你建立專業的 SVG 標誌與精緻的展示圖片，適用於產品、品牌與概念提案。它結合設計模式指引、6 種以上標誌變體、SVG 轉 PNG 匯出，以及背景展示圖生成。當你需要一套快速、結構化的 logo-generator 品牌設計流程，且希望輸出可編輯、預覽可直接簡報使用時，就適合使用這個 skill。

figma-designer 可透過 Figma MCP 分析 Figma 檔案或螢幕截圖，擷取視覺規格、設計 token、元件，以及可直接交付實作的 PRD，適合 UI 設計團隊使用。

stitch-design-taste 是一個用於 Design Implementation 的 Google Stitch 設計系統技能。它會產生適合代理使用的 `DESIGN.md` 指引，協助打造高質感、非制式的 UI，涵蓋清楚的字體層級、經過校準的色彩、非對稱版面、動效規則，以及禁止模式。當你想要的是可重複使用的 stitch-design-taste 指南，而不是一次性的提示詞時，這個技能就很適合。

hand-drawn-diagrams 技能可將自然語言提示轉成手繪風格的 Excalidraw 圖表、流程圖、說明圖、線框圖與頁面 mockup。它會驗證輸出，並可回傳可編輯 URL 以及可匯出的圖片。適合想要速寫感成果、而不是精緻向量圖樣式時，快速繪製圖表。

figma-implement-design 可將 Figma 設計轉換為可直接上線的應用程式程式碼，並盡量維持 1:1 視覺一致性。當你要根據 Figma 檔案實作 UI 程式碼、對齊特定元件或畫面，或依照 figma-implement-design 指南進行設計實作時，這個技能最適合。它不適合用來編輯 Figma 畫布上的節點。

figma-generate-library 可協助你從程式碼庫建立或更新 Figma 設計系統，並以有順序的工作流程處理 tokens、元件庫、文件與明暗主題切換。當你需要的是 Design Systems 的實作指南，而不是一次性的 mockup 時，就適合使用 figma-generate-library 技能。它也會與 figma-use 互補，用於 Plugin API 呼叫。

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