design 技能

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

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

web-component-design 技能可協助團隊為 React、Vue 與 Svelte 設計可重複使用的 UI 元件，提供穩健的 API 模式、無障礙指引，以及適用於設計系統的樣式取捨參考。

mobile-android-design 可協助代理提供貼近 Android 原生體驗的 UI 指引，涵蓋 Material Design 3、Jetpack Compose、主題設計、導覽，以及適用於手機、平板與摺疊裝置的自適應版面模式。

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

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

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

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

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

interaction-design skill 可協助團隊設計並實作有明確目的的 UI 動態、微互動、轉場、載入狀態與回饋模式，並提供以 React 為導向的實用參考與使用指引。

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

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

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

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

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

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

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

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

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

frontend-design 協助你把模糊的 UI 構想變成具有明確美感方向的獨特、可上線前端介面，產出真實可用的 frontend 程式碼，減少千篇一律的 AI 風格。

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

使用來自 wshobson/agents 儲存庫的 responsive-design skill，規劃並實作可自適應的 UI 版面，涵蓋 container queries、流體字體、CSS Grid、Flexbox，以及 mobile-first breakpoints。

mobile-ios-design 技能可協助代理產出更貼近 iOS 原生體驗的 UI 指引，涵蓋 Apple HIG 原則、SwiftUI 模式、導覽建議、無障礙設計，以及適用於 iPhone 與 iPad 的自適應版面配置。

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

design-an-interface 可協助你先蒐集需求，再提出 3 種以上差異明顯的模組與 API 介面方案，並在實作前比較各自的取捨，幫助你更穩妥地決定設計方向。

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

canvas-design 以兩步驟流程協助產出原創靜態視覺：先用 Markdown 寫設計哲學，再渲染成 .png 或 .pdf。特別適合海報、封面視覺、概念圖，以及文字較少、偏 UI 延伸的活動宣傳圖。

figma-create-design-system-rules 技能可為 Figma 轉程式碼工作流程產生專案專屬的設計系統規則。可用來編碼儲存庫慣例，涵蓋元件、tokens、版面基礎單元、檔案結構與硬編碼邊界，讓編碼代理在各個畫面間維持一致。最適合搭配已連線的 Figma MCP server 與既有程式碼庫使用。

ckm:banner-design 可協助製作橫幅、封面、頁首、展示廣告與網站 hero 圖，提供結構化 brief、依尺寸調整的流程與多種視覺方向。適合 UI 設計、行銷素材與各平台橫幅概念發想，搭配 SKILL.md 與 banner 尺寸/風格參考使用。

python-design-patterns 是一項聚焦於 Python 重構與設計審查的技能，核心涵蓋 KISS、SRP、關注點分離、優先組合而非繼承，以及 Rule of Three，幫助你寫出更乾淨、也更容易測試的程式碼。

event-store-design 可協助 Backend Development 團隊為 event-sourced 系統設計事件儲存，涵蓋 streams、排序、並行控制、snapshots、metadata、subscriptions，以及營運上的取捨。適合在正式實作前，用來先規劃出務實可行的 event store 設計。

api-design 是一個專注於 REST API 設計的 skill，適合用來規劃與審查 endpoints、資源命名、狀態碼、分頁、篩選、版本控管與錯誤回應。

deployment-pipeline-design 可協助你為 Kubernetes、ECS、VM、serverless 與其他部署目標設計多階段 CI/CD pipeline，涵蓋核准關卡、安全檢查、rollout 策略、環境升版流程與 rollback 邏輯。

liquid-glass-design 可協助你在 SwiftUI、UIKit 與 WidgetKit 中實作 Apple 的 iOS 26 Liquid Glass 系統。適合用來製作玻璃質感按鈕、卡片、工具列、容器與小工具，並提供形狀、色調、互動性，以及何種情境適合實際 UI 使用的指引。

web-design-guidelines 會依 Vercel Web Interface Guidelines 檢查 UI 程式碼，抓取最新規範，並以精簡的 file:line 結果回報，適合聚焦 UX 與無障礙稽核。

api-design-principles 可協助你設計與審查 REST 和 GraphQL API，提供檢查清單、參考文件與 FastAPI 範本。適合在實作前用來改善資源命名、HTTP 語意、分頁、錯誤處理、版本管理與 schema 結構。

kpi-dashboard-design 技能可協助團隊規劃以決策為核心的 KPI 儀表板，涵蓋指標挑選、儀表板層級、圖表設計模式，以及適用於高階主管、戰術管理與營運監控視角的治理建議。

normalize 技能會稽核 UI 功能，並重新對齊到你的 design system。了解 normalize 的安裝適用情境、必要的 /frontend-design 前置準備，以及在 pages、routes 與 components 中的實際使用方式。

api-and-interface-design 技能協助你為 REST、GraphQL、SDK、元件 props 與模組邊界設計穩定、難以誤用的公開介面。當 API 開發需要清楚契約、更安全的預設值，以及能在不破壞使用者的前提下持續演進的可信路徑時，就適合使用它。

figma-generate-library 可將程式碼庫轉成具備 tokens、variables、components、theming 與文件的 Figma 設計系統 library。當你需要一套分階段的 Design Systems 工作流程時，就適合使用 figma-generate-library 技能，涵蓋安裝、設定、探索、建立、驗證，以及與程式碼對齊與修正。

使用 wpds 技能來建置或審查搭配 WordPress Design System（WPDS）的 WordPress UI。它會透過 WPDS MCP server，協助你驗證元件、tokens、patterns 與套件是否相符，讓你的 wpds 指南建立在權威文件上，而不是憑空猜測。特別適合用於 Design Systems 相關的 wpds 工作，涵蓋 Gutenberg、WooCommerce、WordPress.com、Jetpack 與相關介面。

postgresql-table-design 可協助代理設計或審查 PostgreSQL schema，提供實務導向的規則，涵蓋鍵值、正規化、資料型別、約束、外鍵索引，以及 PostgreSQL 特有的常見陷阱。

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

使用 animate skill 檢視 UI 功能，並規劃有目的的動畫、微互動與轉場效果。它能協助你找出哪些動態能提升回饋感、清晰度、層級與愉悅感，同時需要先具備來自 /frontend-design 的設計脈絡，並兼顧效能與無障礙。

figma-use 是在 Figma Plugin API 工作流程中安全呼叫 `use_figma` 的必要技能。在使用 JavaScript 撰寫、更新、檢查或結構化 Figma 檔案之前，先安裝並載入 figma-use 技能。它特別適合設計實作、元件作業、變數、auto layout，以及程式化讀取檔案。

bolder 是一個用於 UI 設計的技能，能為平淡、過於保守的介面提升對比、層級與個性。在已先用 /frontend-design 蒐集脈絡後使用效果最佳；若目前沒有設計脈絡，也可先搭配 /teach-impeccable。它適合用來產出更銳利、可執行的設計改進方向，同時不犧牲可用性。

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

bolder 可協助把安全但平淡的 UI 設計做得更有辨識度，同時不犧牲可用性。本文說明何時適合使用 bolder skill、必須先完成的 $frontend-design 前置步驟，以及如何撰寫更有力的 prompts、進行問題診斷，並在可控範圍內提升視覺張力。

arrange 可協助診斷並改善 UI 版面配置、間距與視覺層級。當畫面過於擁擠、網格重複感太強或整體構圖偏弱時，可使用這個 arrange skill；需先完成 $frontend-design 設定，並可視情況補充 $teach-impeccable 作為額外情境。

shape 是一個以規劃優先為核心的 UX/UI skill，會先進行探索式訪談，再在動手寫程式前整理成設計簡報。可搭配 /impeccable 使用，用來釐清使用者目標、限制條件、各種狀態，以及 UI Design 的實作方向。

arrange skill 可協助改善 UI 版面配置、留白間距、資訊分組與視覺層級。這份指南會說明什麼情況適合使用它、如何從 GitHub repo 完成 arrange install，以及如何結合 /frontend-design 脈絡實際運用 arrange，做出更好的 UI Design 判斷。

delight skill 可協助 UI 團隊加入有品味的微互動、文案與回饋時刻，讓介面更有溫度，也更容易被記住。最適合用來打磨特定畫面或操作流程，不適合拿來做整體重新設計。建議先具備 /frontend-design 的前置脈絡，必要時也可先使用 /teach-impeccable。

quieter skill 可降低 UI Design 的視覺刺激強度，協助弱化過於張揚、刺眼或令人感官負擔過重的介面，同時保留層級、清晰度與品牌個性。最適合在 pbakaus/impeccable repository 中完成必要的 /frontend-design workflow 後使用。

extract 可協助團隊找出重複出現的 UI 模式、design tokens 與元件，並以較安全的遷移規劃整併到既有設計系統中。

adapt 技能可協助 UI/UX 團隊將既有介面重新設計到新的使用情境，例如手機、平板、列印或觸控環境。你可以在實作前先用 adapt 盤點原始設計假設、目標限制與互動變化。可從 pbakaus/impeccable 安裝，並搭配 /frontend-design 使用，以獲得更完整的效果。

content-modeling-best-practices 指南，適用於結構化內容架構、可重用 schema、reference 與 embedding 的取捨、分類法設計，以及在 Sanity 和其他 headless CMS 中的 Design Systems 規劃。

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

normalize skill 會稽核 UI 功能，並將其重新對齊到你的設計系統。了解 normalize 的安裝選項、前端設計所需前置準備，以及在頁面、路由與元件上的實際使用方式。

extract 技能可協助團隊找出重複的 UI 模式、tokens 與元件，並規劃或執行整併到既有 design system 的工作，同時提供較安全的遷移路徑。

delight skill 可為 UI Design 加入恰到好處的愉悅感、角色感與細節層次。適合用來優化成功狀態、空狀態、載入時刻與各種互動體驗，並提供依情境調整的 delight 安裝、設定與使用指引。

typeset skill 可稽核並優化 UI 字體排印，改善字型選擇、層級、尺寸、字重與可讀性。特別適合產品介面、儀表板與落地頁。在使用前需先具備 /frontend-design 的脈絡；若沒有任何設計脈絡，則應先搭配 /teach-impeccable。

distill 是一個用於 UI 設計的 skill，能將畫面、元件與流程收斂到最核心的使用目標。適合用來減少雜亂、視覺噪音與功能膨脹；但要注意，distill 依賴 /frontend-design，且有時在使用前還需要先執行 /teach-impeccable。

polish 是一個用於 UI 的最終檢視 skill，適合在正式交付前找出對齊、間距、一致性、token 使用與各種微小細節問題。它最適合已經能正常運作、但整體質感還差臨門一腳的畫面、流程或元件。可用來提升上線準備度、強化與 design system 的一致性，並在不做多餘重設計的前提下整體拉高品質。

impeccable 可協助你打造有辨識度、可直接投入產品的前端 UI，而不是一眼就看出是 AI 生成的制式介面。它支援 craft、teach 與 extract 工作流程，可用於頁面、web components、app 介面、海報與其他設計比重高的前端場景，因此特別適合 UI Design、設計情境建立，以及可重用設計模式的萃取。

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

distill 是一個用於 UI 設計精簡的 skill，能將畫面收斂到最核心的使用任務。適合用來減少介面雜訊、去除多餘元素，並釐清資訊層級。最適合在完成 /frontend-design 之後使用，前提是你已提供明確的單一畫面、一個主要使用者目標，以及清楚的必留限制。

bolder 是一個用於 UI 設計的 skill，適合在介面看起來過於平淡、保守時使用，透過更鮮明的層級、對比與個性提升整體表現，同時維持可用性。最適合在 /frontend-design 之後使用；若缺少脈絡，也可搭配 /teach-impeccable，並針對明確目標套用，例如某個頁面、區塊或元件。

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

website-to-hyperframes 是一個工作流程技能，可將既有網站轉成 HyperFrames 影片。當你手上有一個 URL，並且想做一支以網站真實設計、文案與素材為基礎的產品導覽、宣傳片、社群廣告或解說影片時，就很適合使用它。這個 repo 支援 capture、design、script、storyboard、VO、build 與 validation，適用於 Design Implementation 工作。

openclaw-persona-forge 是一個以工作流程為核心的技能，可從零開始建立完整的 OpenClaw 人設套件。它會產出身份張力、SOUL.md 風格框架、邊界規則、命名選項，以及可選的頭像提示詞指引。最適合 OpenClaw 角色設計、角色扮演代理，以及與 UI Design 相鄰的人設工作，不適合拿來對既有人設做小幅修改。

ui-ux-pro-max 是一款專為 AI 輔助 UI/UX 設計打造的全方位技能，提供網頁與行動專案的版型、風格、色彩系統、字體排版及 UX 規範等結構化指引。適合需要實用設計決策的開發者與團隊，支援 React、Next.js、Vue、Svelte、Tailwind、shadcn/ui、SwiftUI、React Native、Flutter 及 HTML/CSS。可用於 UI 規劃、審查與優化，結合精選設計智慧。

overdrive 是一個可由使用者主動呼叫的技能，適合用於企圖心強烈的 UI 設計，將介面體驗推進到標準元件之外。它需要先建立 `/frontend-design` 的上下文，接著會要求你先提出概念方向，再著手打造聚焦且高衝擊力的互動。

了解 colorize 技能如何為灰暗或過於平淡的 UI 設計加入更有策略性的色彩。這份指南整理了使用前所需的 frontend-design 準備、來自 repository 的安裝與依賴脈絡，以及在資訊層級、語意表達與品牌契合度上的實務用法。

ckm:ui-styling 結合 shadcn/ui、Tailwind CSS 與 canvas 視覺設計，協助你打造無障礙、可量產的使用者介面。特別適合需要結構化響應式版型、無障礙元件、深色模式與一致設計系統的 React 專案。用 ckm:ui-styling 技能進行 UI 設計、主題設定與快速原型開發，並獲得針對技術棧的實用指引。

使用 animate skill 檢視功能介面，加入有目的的動畫、微互動與動態效果，提升清晰度、回饋感與整體細緻度。最適合有明確目標、設計脈絡與效能限制的 UI 設計工作。

impeccable 是一個用於 UI 設計與前端開發的 skill，適合打造有辨識度、可投入正式環境的介面。你可以透過 craft、teach 或 extract 工作流塑造設計方向、載入更聚焦的參考資料，並實作更精緻的元件、頁面與 design system 模式；同時也提供更完整的安裝與使用判斷指引。

shape 是一個以規劃優先為核心的 UI/UX 設計 skill，會先執行結構化的需求探索訪談，並在寫程式前產出設計 brief。適合用來釐清使用者問題、限制條件與設計方向，再把 brief 交給後續實作。

adapt skill 可協助你把既有 UI 重新設計到新的裝置或使用情境。本文整理 adapt 的工作流程、必備的 frontend-design 相依技能、安裝路徑，以及在 mobile、tablet、print 與跨平台 UI/UX 設計調整上的實際用法。

overdrive 是一項適合高企圖心 UI 設計的 GitHub skill，可協助團隊判斷並打造高影響力、能呼應情境的互動體驗。可用於規劃吸睛動效、偏重效能的 UI，以及更講究完成度的進階流程，但在實作前需要先完成必要的設計準備。

typeset 會透過檢視字體選擇、層級、尺寸、字重與可讀性來改善 UI 排版。最適合在 /frontend-design 之後使用；若缺少脈絡，建議搭配 /teach-impeccable，將原本普通、缺乏設計意圖的文字內容整理成更清楚且更有一致性的字體系統。

quieter 是一項用於精修 UI 設計的技能，能在保留層級、品牌識別與可用性的前提下，降低畫面的視覺刺激與壓迫感。它最適合在 /frontend-design 之後使用，必要時再搭配 /teach-impeccable，幫助團隊在不全面重設計的情況下，讓過於喧鬧的介面回歸平衡。

layout 技能可在 UI 看起來扁平、擁擠或排列過於死板時，協助改善間距、層級與整體構圖。它適合處理版面配置、對齊與視覺節奏等問題，提供的是偏實務的 UI Design layout 指南，而不是泛泛而談的樣式建議。當你需要調整結構、釐清群組關係，並改善閱讀動線時，這項技能特別適合。

harden 技能可協助將 UI 設計與介面規格補強到可正式上線的程度，透過檢查邊界情境、空白狀態、錯誤處理、長文字、本地化、權限限制，以及其他真實世界常見的失敗情境，降低實作落差。當你要將 harden 用於 UI Design，希望減少版面意外、補齊互動與例外處理規則時，就很適合使用。

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

shadcn-ui 技能可協助你在真實應用中規劃、安裝並調整 shadcn/ui 元件。這份 shadcn-ui 指南適用於設計實作、元件探索、自訂調整，以及在表單、表格、驗證流程與版面配置中實際運用 shadcn-ui。

onboard skill 可協助優化 onboarding 流程、空白狀態與首次使用體驗，加快使用者完成啟用。它需要先使用 /frontend-design，視情況可能還需要 /teach-impeccable，並且在目標明確、已定義 aha moment，以及具備使用者體驗背景資訊時效果最佳。

arrange 可協助改善 UI 版面、間距與視覺層級。適合用來診斷畫面過於擁擠、重複性過高的網格、群組關係薄弱，以及構圖扁平等問題，並進一步建立更清楚的結構與更有節奏的留白。最適合在 pbakaus/impeccable 中，於 /frontend-design 之後使用；有些情況也建議先執行 /teach-impeccable，才能更充分發揮 arrange 的效果。

gstack 是一個以瀏覽器驅動的 AI 技能，適用於 QA 測試、內部試用、發布檢查與錯誤蒐集。它會開啟真實頁面、實際點擊 UI、驗證狀態、比對前後差異、測試響應式版面，並擷取附有螢幕截圖佐證的結果。當你需要來自 gstack skill 的可靠瀏覽器結果時，特別適合用於 UI 設計審查與部署驗證。

critique skill 可協助團隊對頁面、功能與元件進行有架構的 UX 評審。它會檢視資訊層級、認知負荷、可用性啟發式，以及以 persona 為基礎的風險，並把發現整理成可執行的修正建議。最適合在 /frontend-design 之後使用，並搭配清楚的截圖、目標與使用者情境。

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

critique 可幫你從 UX 角度檢視介面、功能、頁面或元件，提供結構化評分、基於 persona 的測試、啟發式檢查與可執行的回饋。當你需要一套可重複使用、專為 UI/UX Design 設計的 critique 指南，而不是空泛評論時，就適合使用這個 skill。它最適合針對某個明確範圍、具備清楚脈絡的目標區域進行聚焦 critique。

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

teach-impeccable 是一個一次性的 UI 設計設定技能，會掃描你的 repo、提出聚焦的 UX 問題，並將可持續沿用的設計指引保存下來，供後續工作階段使用。

overdrive 是一個 GitHub 技能，適合有雄心的 UI 設計工作，重視情境理解、先提案再規劃，以及極高水準的互動品質。可用來安裝並套用 overdrive，打造電影感轉場、響應式介面與高衝擊力的產品體驗。

typeset 透過修正字體選擇、層級、字級、字重與可讀性，提升 UI 排版，讓文字呈現更有意圖感。當 UI Design 裡的文字看起來普通、前後不一致，或不易快速掃讀時，就適合使用 typeset skill，幫助你建立更清楚的字體系統，減少猜測。

使用 shadcn 技能檢查專案脈絡、執行正確的 CLI 指令、安裝元件，並依照文件化模式組合 UI，涵蓋 base 與 radix 的差異、forms、theming 與 registries。

使用 adapt 將既有 UI/UX 設計適配到 mobile、tablet、desktop、print、TV 與其他使用情境。內容涵蓋安裝基礎、必要的設計情境設定，以及跨裝置與跨情境適配的實務用法。

hyperframes-registry 可幫你更少猜測地安裝並串接可重用的 HyperFrames registry 項目。可用來執行 hyperframes add、辨識 blocks 與 components、合併片段、將 blocks 串入 index.html，並依照 hyperframes.json 的路徑對應來進行設計實作與 registry 探索。

brainstorming 是一項實作前技能，會先釐清情境脈絡、一次只提出一個澄清問題，並要求在任何程式碼撰寫前先完成設計核准。另包含可選用的 visual companion，並對 Requirements Planning 提供完整支援。

colorize skill 可協助 UI 團隊為灰階或過於平淡的介面加入更有策略的色彩。了解何時適合使用、需要提供哪些背景脈絡，以及它如何搭配 $frontend-design 與具品牌意識的色彩決策，融入 impeccable workflow。

gsap 是 HyperFrames 組合內容的實用動畫參考。它能幫你在 `gsap.to()`、`from()`、`fromTo()` 與 `gsap.timeline()` 之間做出選擇，並套用正確的 vars、easing、stagger、transform 與效能模式。當你需要可直接落地實作的進場動畫、轉場效果與可重複使用的設計動效時，就用這份 gsap 指南。

onboard skill 可協助產品團隊優化 onboarding 流程、empty states 與首次使用體驗。內容提供實務導向的安裝與使用流程，說明必要的 `/frontend-design` 相依需求，並引導你定義 aha moment、使用者熟悉程度與關鍵 activation 步驟。

polish 技能用於產品上線前的最後一輪 UI 檢視，協助修正間距、對齊、文案、狀態與轉場等細節。最適合在功能已完成、具備設計脈絡、有明確品質標準，且已鎖定特定畫面、流程或元件時使用。

polish skill 可協助團隊在正式上線前，針對 UI 做最後一輪品質檢查。適合在介面功能已完成、設計脈絡也已明確後使用，用來找出間距、對齊、互動狀態、文案，以及各種邊界情境的細節問題。

quieter 是一個用於精煉 UI 設計的技能，能在視覺過度強烈、容易讓人感到疲勞的介面中降低視覺壓迫感，同時保留清晰度、層級與品牌意圖。它最適合在父層 `$impeccable` 技能之後使用，並能協助團隊在做出有針對性的調整前，先診斷出造成強度過高的來源。

android-native-dev 是一個聚焦 Android 原生開發的技能，涵蓋 Kotlin、Jetpack Compose、Material Design 3、專案設定、無障礙設計與建置疑難排解。它可協助團隊評估 repo 狀態、初始化或修復 Android 專案，並以較少猜測完成可建置的 UI。

clarify 可協助改寫容易讓人困惑的 UI 文案、錯誤訊息、標籤與操作指引，提升整體 UX。最適合在 pbakaus/impeccable 工作流程中、於 /frontend-design 之後使用；若能一併提供目標受眾程度與使用者當下的心理狀態，通常會得到更好的結果。

frontend-dev 是一個用於打造精緻、可直接上線的網頁前端技能，涵蓋高質感 UI、電影感動效、AI 生成素材、說服力文案與生成式藝術。適合用在 landing pages、行銷網站、產品頁、儀表板，以及其他需要設計、內容與實作細節彼此一致的前端工作。

ckm:brand 是一套品牌工作流程技能，用於建立、更新與審查品牌指南、訊息架構、語氣風格、視覺識別，以及透過實用腳本與檢查清單同步 design tokens。

colorize skill 可協助團隊為灰階或過於平淡的 UI 設計加入更有策略的色彩。它會引導你判斷哪些地方該上色、為什麼重要，以及如何結合既有品牌脈絡、資訊層級、語意狀態與整體語氣來運用色彩。建議先搭配 /frontend-design 使用，能讓配色決策更穩妥可靠。

minimax-pdf skill 可在你重視視覺品質與文件辨識度時，協助你建立、填寫或重新排版出精緻的 PDF。適合 CREATE、FILL 或 REFORMAT 工作流程，搭配以 token 為基礎的設計系統，將粗略輸入轉成可直接印刷的輸出。本指南涵蓋 minimax-pdf 安裝、minimax-pdf 使用方式，以及如何選擇路由以獲得更好的結果。

critique skill 透過結構化的 UX 稽核流程，協助檢視頁面、流程與元件。它會檢查 AI-slop 訊號、視覺層級、資訊架構、認知負荷、啟發式原則，以及以 persona 為基礎的操作阻力，並將發現整理成可執行的回饋。最適合搭配 frontend-design 與 teach-impeccable 的脈絡一起使用。

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

infocard 讓你直接在頁面中嵌入 HTML 和 CSS，用 Markdown 製作具有編輯風格的資訊卡片。它適合用於摘要、主題快照、重點面板、活動卡片、比較區塊，以及其他看起來經過刻意設計、適合 UI 設計的內容。它不適合圖表或資料視覺化；這類需求請改用專門的圖表或繪圖技能。

healthcare-emr-patterns 是一個實用的 Healthcare EMR/EHR 設計技能。它涵蓋病人就診流程、臨床紀錄撰寫、用藥檢核、檢驗結果醒目標示、稽核軌跡、CDSS 整合，以及以可近用性優先的醫療資料輸入，協助建立更安全的臨床工作流程。

ux-designer 是一套結構化的 UX 設計 skill，涵蓋研究、無障礙、資訊架構、互動流程、線框規劃與 UX 文案。它透過 AGENTS.md 與聚焦的規則檔，協助團隊把粗略的產品想法整理成更清楚、可依準則判斷的設計決策。

accessibility skill 可協助你依據 WCAG 2.2 Level AA，為 Web、iOS 與 Android 設計、實作並稽核無障礙 UI。可用來梳理元件角色、標籤、狀態、焦點行為與 accessibility traits，並支援 UX Audit 與實作審查中的實務應用。

用 wp-block-themes 來處理 WordPress 區塊主題工作：`theme.json`、`templates`、`template parts`、`patterns`、`style variations`，以及 `Site Editor` 除錯。它特別適合設計落地、安裝與使用流程，以及在較少猜測下釐清樣式階層、覆寫、快取與使用者自訂問題。

frontend-ui-dark-ts 可協助你用 TypeScript、Tailwind CSS、Framer Motion 與可重複使用的設計 tokens，打造深色主題的 React UI。它特別適合儀表板、管理後台、分析視圖，以及其他需要精緻深色美學與一致元件模式的高密度資料介面。

react:components 技能會將 Stitch 設計轉換為適用於前端開發的模組化 Vite 與 React 元件。它結合檢索、本機檔案檢查與基於 AST 的驗證，確保輸出能對齊設計 token、既有檔案與專案限制。當你需要結構化的元件程式碼，而不是一次性的 JSX 傾倒時，這份 react:components 指南就很適合。

figma-create-new-file 可在草稿中建立全新的空白 Figma 或 FigJam 檔案，並預設編輯器類型與檔名。這個 figma-create-new-file 技能適合用於設計落地、快速原型製作，以及在使用 use_figma 之前先開啟全新的畫布。必要時，它也會透過 whoami 進行 planKey 解析。

gan-style-harness 是一個用於 Agent Orchestration 的 Generator-Evaluator 技能，能以更嚴格的評審、更好的迭代，以及更少的薄弱環節，協助打造完整應用程式。當你需要 gan-style-harness 技能來處理偏前端、全端，或偏向正式上線思維的工作，而且審查品質比速度更重要時，這個技能就很適合。

使用 delight skill 為成功、載入、空白與 onboarding 狀態加入有品味的 UI 潤飾、微互動與品牌個性，同時不影響可用性或使用者注意力。

distill 能協助精簡雜亂的 UI 設計，移除干擾資訊、薄弱的層級關係與多餘選項，讓核心任務更清楚。當某個畫面需要更有紀律地做減法、釐清優先順序，並進行聚焦式簡化時，就很適合使用它。

huggingface-gradio 可協助你用 Python 建立與編輯 Gradio Web UI，適合 demo、chatbot 與前端開發流程。使用 huggingface-gradio 技能來挑選元件、串接事件，並更有把握地規劃版面配置。

teach-impeccable 是一個一次性設定 skill，會掃描你的 repo，只針對缺漏的 UX 與品牌問題提問，並將可持續沿用的設計指引保存下來，供後續 AI 工作階段使用。

使用 animate skill 檢視 UI 功能，加入有明確目的的轉場、回饋狀態與微互動。它會引導你根據可用性、效能限制、降低動態需求與清楚的實作方向來做動效決策，而不只是單純堆疊裝飾性效果。

這個 storyboard 技能會把產品點子轉成一個六格敘事，從問題一路推進到解方。當你需要快速、以人為本的方式來檢驗一個想法是否有共鳴時，可用在利害關係人對齊、概念審查、demo，以及 Prototypes 的 storyboard。

clarify 可協助 UI/UX 團隊改善不夠清楚的 UX 文案、錯誤訊息、標籤與操作指引。了解適合使用它的情境、需要提供哪些背景脈絡，以及如何把它實際套用到特定畫面、流程與介面文字。

rust-patterns 是一份實用的 Rust 開發指南，聚焦慣用寫法，涵蓋 ownership、錯誤處理、traits、並行、模組邊界，以及偏向後端的設計取捨，幫助你寫出更安全、更乾淨的程式碼。

architecting-solutions 是一個用於 Claude Code 的技能，適合技術設計、遷移規劃與需求規劃。它能協助釐清需求、分析程式碼庫限制、比較各種取捨，並將 PRD 風格的設計文件寫入專案的 `docs/` 資料夾。

cloud-solution-architect 技能可協助代理人以 Azure Cloud Solution Architect 的方式做出雲端架構決策。它適合用來檢視設計、選擇架構樣式、比較 Azure 服務，並套用設計原則、模式與最佳實務，減少像一般提示詞那樣憑空猜測。

graphviz 是一種以 DOT 為基礎的圖表繪製技能，可用來建立自動排版的有向圖與無向圖。適合用於相依性樹、呼叫圖、套件階層、權責關係圖，以及其他在圖表繪製場景中更重視可讀結構、而非手動擺位的 graphviz use cases。它能協助 agent 產生有效的 DOT，並減少版面或語法錯誤。

site-architecture 可協助規劃或重整網站的頁面階層、導覽、URL 模式與內部連結。可用於產出 sitemap、導覽規格、URL 對照表，以及 Mermaid 或 ASCII 網站架構圖，適合行銷與 UI/UX 規劃使用。

layout skill 可協助檢查並改善 UI 的構圖、留白、視覺層級、對齊與節奏感。特別適合用於畫面過於擁擠或結構薄弱的介面；使用前需先透過 /impeccable 蒐集必要脈絡。

python-patterns 技能可協助你撰寫、審查與重構 Python 程式碼，強調慣用模式、可讀的結構、型別註解，以及實用的例外處理。適合用在新程式碼、套件／模組設計，或是想在保留行為並遵循 Python 慣例的前提下，進行更乾淨的重構。

postgres-patterns 是一個實用的 PostgreSQL 快速參考技能，涵蓋查詢最佳化、資料庫結構設計、索引、Row Level Security 與連線池管理。它協助 Database Engineering 工作流程以精簡的最佳實務做出更快、更可靠的決策，而不是依賴泛用提示詞。

database-schema-designer 可協助開發者與資料庫工程師設計可用於正式環境的 SQL 或 NoSQL schema，涵蓋正規化、索引、限制條件與 migration 規劃。內容也提供 trigger phrases、schema 設計 checklist，以及 migration template，方便用於實際的 schema 產生與審查。

使用內嵌 SVG，製作精緻、深色主題的架構圖，並輸出為獨立 HTML 檔案。architecture-diagram 技能專為系統架構、基礎架構、雲端、安全性與網路拓樸圖而設計，提供可直接在瀏覽器開啟的視覺化成果，具備語意化配色、清晰的元件關係與一致的技術風格。

improve-codebase-architecture 協助你找出程式碼庫中的架構阻力、表層模組，以及可進一步深化的機會。可用於重構審查、提升可測試性，以及 AI 可導引的設計決策，尤其適合希望這項技能遵循 `CONTEXT.md` 與 `docs/adr/` 指引的情境。

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

shader-dev 是一套實用的 GLSL 著色器技能，適用於 ShaderToy 風格的即時視覺效果。使用 shader-dev 技能可建立或除錯 ray marching、SDF 場景、光照、粒子、流體動態、後製，以及 UI Design 的 shader-dev，且比泛用提示詞更少憑空猜測。

uml 技能可協助你建立 PlantUML 圖表，用於軟體建模，包含類別圖、序列圖、活動圖、狀態機圖、元件圖、使用案例圖、部署圖，以及相關圖表。當你需要可編輯、能自動排版、以文字為先的圖表來支援程式碼、文件與 repo 工作流程時，可使用 uml 進行 Diagramming。它不適合分層架構、圖表，或 BPMN 工作流程。

baoyu-infographic 是一套用於結構化資訊圖表製作的提示框架，提供 21 種版型與 20 種風格。它能協助分析來源內容、選擇合適的版型與風格，並產出清楚的視覺化摘要，適合用於 UI 設計、比較整理、流程說明，以及其他資訊密度較高的解說內容。

brainstorm-experiments-new 可協助 Product Management 團隊為新產品構想設計精實創業驗證實驗。它會產生 XYZ 假設，並建議低成本、低工時的測試方式，例如登陸頁、說明影片、電子郵件行銷、預購、候補名單，以及 concierge MVP，讓團隊在正式開發前先驗證需求。

winui-app 技能可協助你以 C# 與 Windows App SDK 啟動、建置與排查 WinUI 3 桌面應用程式。適合用於環境準備、新專案設定、Shell 與導覽選擇、XAML 控制項、主題樣式、無障礙設計、部署，以及啟動修復流程，特別適合 Frontend 開發。

fireworks-tech-graph 是一個圖表繪製技能，可將系統描述轉換成可直接用於正式環境的 SVG 與 PNG 圖表。內容包含安裝指引、輔助腳本、驗證、範本與風格參考，適用於技術圖表、架構流程圖、序列圖與相關視覺工作流程。

frontend-slides 可協助你從零開始製作充滿動畫效果的 HTML 簡報，或將 PowerPoint 檔轉換成 HTML 簡報。當你需要做簡報、提案 deck、工作坊、內部 demo，或是想用 frontend-slides 進行 UI Design 的視覺探索時，都很適合使用這個 skill；它能輸出零依賴的瀏覽器簡報，並讓投影片精準符合單一視窗尺寸。

clarify 可改善讓人看不懂的 UX 文案、錯誤訊息、標籤、導覽流程與操作指引，讓使用者更少猜測就能採取行動。它很適合技術寫作、支援內容，以及需要更清楚介面文字的產品團隊。這個技能會先釐清情境、受眾與使用者狀態，再進行改寫，因此產出的內容會更直接、更具體，也更好用。

guizang-ppt-skill 是一套簡報技能，可用來打造單一檔案的 HTML 投影片簡報，風格介於編輯雜誌與電子紙之間。它能幫你快速做出適合發表會、演講與 demo 的橫向滑動式簡報，具備強烈排版感、WebGL 背景與可重複使用的版型。搭配 guizang-ppt-skill 指南，可更快、更穩定地產出簡報。

baoyu-cover-image 可協助代理生成結構化的文章封面圖片提示詞，涵蓋類型、配色、渲染、文字與氛圍等維度。支援 2.35:1、16:9 與 1:1 格式，並提供自動選擇規則與相容性指引，適合需要可重複執行的編輯與 UI Design 封面製作流程。

golang-patterns 是一份實用指南，涵蓋 Go 的慣用模式、程式碼審查與重構。它可協助後端開發團隊選擇清楚的 API、安全的錯誤處理、有用的零值，以及可維護的套件邊界。當你希望減少猜測、讓 Go 的設計決策更一致時，就適合安裝 golang-patterns。

ios-application-dev 是一份實用的 iOS app 開發指南，涵蓋 UIKit、SnapKit 和 SwiftUI。它能幫助前端開發者更快做出 UI 決策，處理版面配置、導覽、無障礙、Dynamic Type、Dark Mode 與 Apple 平台慣例。可用來檢視程式碼，或把產品需求轉成可上線的 iPhone 畫面。

swiftui-patterns 是一份適用於 Apple 平台前端開發的實用指南。它涵蓋 SwiftUI 狀態管理、NavigationStack 流程、view 組合與效能建議，協助你在真實的 app 程式碼中選對模式。當你要重構或建立需要清楚權責分工、並盡量減少重繪的畫面時，適合使用 swiftui-patterns 技能。

frontend-ui-engineering 協助你打造或優化可直接上線的介面，涵蓋無障礙、響應式版面、設計系統規範，以及 Frontend Development 的實用元件結構。當你需要以實作為導向的建議，來處理頁面、元件、狀態與 UI 修正，並希望成果看起來精緻、一致、可交付時，就適合使用 frontend-ui-engineering 技能。

chatgpt-apps 是用來建置或修復 ChatGPT Apps SDK 專案的技能，適用於搭配 MCP server 與 widget UI 的情境。可用於依照文件進行設定、工具設計、bridge wiring、resource registration、metadata、CSP，以及 repo validation。當後端與 UI 必須一起設計時，它也支援用於 Backend Development 的 chatgpt-apps。