moai-design-tools
✓設計工具整合專家，涵蓋 Figma MCP、Pencil 渲染器和 Pencil 到程式碼匯出。從 Figma 取得設計上下文、將 Pencil DNA 程式碼渲染到 .pen 框架、將 .pen 設計匯出到 React/Tailwind 程式碼或選擇設計到程式碼工作流程時使用。支援設計獲取 (Figma)、視覺渲染 (Pencil MCP) 和程式碼生成 (React/Tailwind)。
SKILL.md
Comprehensive design-to-code workflow guidance covering three major capabilities: Figma MCP (design fetching), Pencil MCP (visual rendering), and Pencil-to-code export (React/Tailwind generation).
Figma integration for fetching design context, metadata, and screenshots from Figma files.
Best For: Fetching design tokens, component specifications, layout information, and style guides from existing Figma files. Extracting design system values and understanding design structure.
設計工具整合專家，涵蓋 Figma MCP、Pencil 渲染器和 Pencil 到程式碼匯出。從 Figma 取得設計上下文、將 Pencil DNA 程式碼渲染到 .pen 框架、將 .pen 設計匯出到 React/Tailwind 程式碼或選擇設計到程式碼工作流程時使用。支援設計獲取 (Figma)、視覺渲染 (Pencil MCP) 和程式碼生成 (React/Tailwind)。 來源：modu-ai/moai-adk。
可引用資訊
為搜尋與 AI 引用準備的穩定欄位與指令。
- 安裝指令
npx skills add https://github.com/modu-ai/moai-adk --skill moai-design-tools- 分類
- *創意媒體
- 認證
- ✓
- 收錄時間
- 2026-02-17
- 更新時間
- 2026-02-18
快速解答
什麼是 moai-design-tools？
設計工具整合專家，涵蓋 Figma MCP、Pencil 渲染器和 Pencil 到程式碼匯出。從 Figma 取得設計上下文、將 Pencil DNA 程式碼渲染到 .pen 框架、將 .pen 設計匯出到 React/Tailwind 程式碼或選擇設計到程式碼工作流程時使用。支援設計獲取 (Figma)、視覺渲染 (Pencil MCP) 和程式碼生成 (React/Tailwind)。 來源：modu-ai/moai-adk。
如何安裝 moai-design-tools？
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/modu-ai/moai-adk --skill moai-design-tools 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code 或 Cursor 中使用
這個 Skill 的原始碼在哪？
https://github.com/modu-ai/moai-adk
詳情
- 分類
- *創意媒體
- 來源
- skills.sh
- 收錄時間
- 2026-02-17