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