用途：moai-design-tools 是设计到代码（design-to-code）工作流的集成技能，整合三项能力：Figma MCP（设计上下文获取）、Pencil MCP（视觉渲染）、Pencil 转代码导出（生成 React/Tailwind）。
主要能力：Figma MCP 可从 Figma 文件获取设计上下文、元数据与截图，提取组件层级、设计令牌与样式指南，适合已有 Figma 文件的规范梳理。Pencil MCP 可将 DNA 代码渲染为 .pen 视觉帧，支持文本描述生成设计、迭代修改与协作评审，DNA 代码便于版本控制。Pencil 转代码导出可将 .pen 设计导出为 React 组件与 Tailwind CSS 样式，保留组件结构与响应式布局。
使用方式：按任务选择工具——需从现有 Figma 文件提取上下文时用 Figma MCP；需从零创建设计、快速原型或文本化设计流程时用 Pencil MCP；设计定稿为 .pen 并需实现为代码时用导出功能。文档提到可通过 Context7 MCP 获取最新工具文档：Figma 使用 resolve-library-id 传入 "figma"，再以 get-library-docs 查询 "mcp"、"api"、"design-tokens"、"metadata" 等主题；Pencil 同理传入 "pencil"，查询 "mcp"、"dna-codes"、"rendering"、"export"。详细实现见 reference/figma.md、reference/pencil-renderer.md、reference/pencil-code.md、reference/comparison.md。
适用场景：设计令牌与组件规范提取、设计系统文档化、快速原型与视觉迭代、协作设计评审、将视觉设计快速实现为 React 前端。
限制：资料未提供具体安装命令、收费与价格、平台支持范围及实际效果数据，暂未提供；具体配置与认证细节需查阅上述参考文件。