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。