原型

ui-demo 可幫你用 Playwright、可見游標移動與自然節奏，錄製更精緻的網頁應用程式示範影片。適合用於操作導覽、上手教學、功能巡覽與教學式錄製。請依照「探索 → 演練 → 錄製」的工作流程操作，特別適合原型與快速變動的 UI，以獲得更穩定可靠的結果。

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

algorithmic-art 可協助你用 p5.js 創作原創生成藝術，採兩步驟流程：先撰寫演算法創作理念，再產出可執行的 .html 與 .js 檔案，並支援種子隨機、參數控制與互動式檢視器。

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

prototype 技能可協助你先做出一次性程式碼，在投入正式實作前，先回答一個具體問題。它適合用來測試邏輯、狀態轉換、資料結構或 UI 方向，並產出一個符合主 repo 慣例、可執行的 prototype。當你需要的是快速 prototype 指南，而不是最終功能時，這會非常合適。

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

brandkit 是一款高階品牌套件影像生成技能，專為品牌設計工作而打造，涵蓋 logo 系統、識別提案、視覺規範板與藝術指導式品牌簡報。它適合用來產出一致、具有工作室質感的成果，適用於新創、開發工具、資安、遊戲、消費型 App 與精品概念。當你想要的是完整、精緻的品牌世界，而不是制式化的 AI 情緒板時，就適合使用 brandkit。

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

使用 remotion 技能，將 Stitch 專案畫面轉換成精緻的導覽影片，加入轉場、縮放效果與文字疊加。內容包含安裝步驟、範例檔案，以及可重複使用的 remotion 影片編輯指南，協助你建立可直接輸出的 compositions。

pol-probe-advisor 可協助產品經理為假設、風險與資源量級選出合適的 Proof of Life（PoL）探針。使用 pol-probe-advisor 技能，避免做過頭，並把成本最低、但真正有用的驗證方法，對準實際想學到的內容。很適合用於 Product Management 的 pol-probe-advisor，提供實用的 pol-probe-advisor 指南與使用方向。

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

pol-probe 可幫你定義一個 Proof of Life 探針，在真正開始打造產品前，用低成本先驗證高風險假設。使用 pol-probe skill 可以減少原型作戲、設定嚴格的成功標準、選對探針類型，並在學到結果後規劃如何處置。

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

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

excalidraw-diagram 會產生 Excalidraw JSON 圖表，不只是畫出方塊與箭頭，而是能以視覺方式呈現論證。適合用於工作流程、架構、序列流程、決策路徑與概念圖等需要結構清楚、易讀，且能反映真實關係的情境。內容包含安裝指引、可視渲染檢查，以及有助於提升圖表品質的實務工作流程。

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

canvas 可建立 JSON Canvas 圖表，支援自由定位與明確的 x/y 座標。適合用在心智圖、知識圖譜、概念圖、規劃板，以及其他以空間佈局比順序更重要的 Diagramming 工作流程。它不適合流程圖或資料圖表。當你需要可編輯的節點、連結與結構化版面時，請使用 canvas skill。

hig-patterns 是一個 Apple Human Interface Guidelines 的模式技能，用來選擇合適的互動模型，涵蓋 onboarding、loading、permissions、undo、sharing 以及其他 app 流程。可用它來判斷是否該用 modal、如何呈現進度，以及如何設計更貼近 Apple 指引的 UI 行為，減少憑空猜測。

imagegen-frontend-mobile 是一項用於高質感行動 App 畫面與多畫面流程的影像生成技能。它可協助製作適用於 iOS、Android 與跨平台概念的 App 原生視覺，具備清楚層級、易讀文字、受控配色，以及低調的手機樣機呈現。請將它用於影像生成，不適用於程式碼、網站或桌面 UI。

gpt-taste 是一個以設計為核心的 skill，適合用來打造有精緻感的 UI 頁面，強調編輯感的視覺指導、留白節奏與 GSAP 動效。當你要做行銷頁、登陸頁或展示型網站，並希望版面變化更豐富、排版控制更精準、少一些通用的前端套路時，gpt-taste skill 很適合使用。這份指南也包含安裝與使用說明，方便實際落地。

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

world-builder 是一項以設計為核心的技能，用於在 Dorothy 的寶可夢風格世界中建立與管理生成式遊戲區域。使用 world-builder 技能，能把主題、設定前提或地點構想，轉化為可遊玩的地圖，並納入氛圍、版面配置、地形、NPC 擺放與空間邏輯，供 Design Implementation 使用。

gif-sticker-maker 會使用 MiniMax Image Generation、MiniMax Video Generation 和 ffmpeg，將照片轉成 4 張 Funko Pop / Pop Mart 風格的動態 GIF 貼圖。這個 gif-sticker-maker 技能涵蓋安裝前置需求、提示詞範本、說明文字，以及完整的圖像轉 GIF 工作流程。

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