design 技能

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

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

android-design-guidelines 是一份實用指南，涵蓋 Material Design 3、Jetpack Compose 與 XML 版面配置。可用來檢視 Android UI 決策，包括主題、導覽、無障礙、響應式版面、動態色彩，以及 Material You 相容性。很適合用於 android-design-guidelines guide 與 android-design-guidelines for UI Design 相關任務。

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

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

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

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。

ios-design-guidelines 可協助你依照 Apple Human Interface Guidelines 檢視、調整並改寫 SwiftUI/UIKit 介面，適用於 iPhone。當你需要針對 UI 設計獲得實用的 ios-design-guidelines 指引回饋時，它特別適合用來處理版面配置、導覽、無障礙、Dynamic Type、Dark Mode，以及系統元件的選用。