Agent Skills Hub

figma

利用 Figma MCP 伺服器獲取設計數據、提取資源，並將 Figma 節點轉換為符合設計系統規範的 React 與 Tailwind 程式碼。

figma-design-to-code

使用 TemPad Dev MCP 將 Figma 設計轉換為符合專案規範的 UI 代碼，精確處理標記、樣式與設計標記整合。

pix

一個自動化的 UI 實作代理，利用 Figma MCP 和瀏覽器渲染驗證，將 Figma 設計轉換為像素級精確的程式碼。

ui-implementer

根據 Figma 或設計稿實作 UI 組件，提供像素級精確度、智慧設計驗證與自適應代理切換功能。

figma-create-new-file

透過 MCP 伺服器直接建立新的 Figma 設計或 FigJam 檔案。自動處理計畫解析並為您的設計工作流程初始化畫布。

pencil-ui-design

使用 Pencil MCP 進行工業級 UI 設計的完整工作流程與組件庫，包含顏色、字體、間距與陰影的標準化設計規範。

ui-design-system

專業 UI 設計系統工具包，涵蓋設計代幣生成、組件架構、響應式設計計算及開發人員交接文檔，確保視覺一致性。

ui-mockup

音訊插件 WebView UI 設計協調器，處理迭代式原型製作及 JUCE 插件的生產級程式碼腳手架生成。

svg-logo-generator

使用 Python 腳本生成高品質、簡約且幾何化的 SVG 標誌。適用於製作圖標、品牌標識及幾何圖形視覺資產。

build-design-system

使用 Design Graph 方法論構建連貫且基於約束的設計系統。自動化設計令牌、排版比例、元件、變體及主題的創建過程。

logo-creator

使用 AI 創作專業商標。涵蓋設計討論、多樣化生成、修圖去背與 SVG 向量格式導出，適用於品牌、吉祥物、圖標與徽章設計。

structuring-plugins

引導 Claude Code 插件的建立與組織，包含目錄架構搭建、plugin.json 清單設定、元件管理（指令、代理、技能、鉤子）及自動探索機制配置。