figma-design-to-code

TemPad Dev Figma 设计转代码技能是 Figma 视觉设计与您的代码库之间的权威桥梁。专为前端工程师与 UI 开发人员设计，它利用 TemPad Dev MCP 服务器直接从您的 Figma 选区或特定 nodeId 中提取精确的设计证据，包括布局结构、CSS、设计标记（tokens）与资源。此代理程序可将设计数据自动转换为特定框架的代码，确保视觉精确度并遵守您项目既有的样式模式，如 Tailwind CSS 或自定义组件库。

• 实时设计提取：利用 get_code 与 get_structure 工具直接从 Figma 画布获取标记、样式、间距、排版与色彩细节。
• 项目感知生成：读取本地配置文件（如 AGENTS.md）、设计系统文档与现有原始组件，确保输出符合您项目的文档惯例、导入路径与组件边界。
• 智慧标记处理：将 Figma 变量与设计标记动态映射到您项目的 CSS 变量或标记系统，维持设计到开发过程中的一致性。
• 资源管理：提取并处理 SVG 与图片资源，支持主题感知着色与资源管道。
• 设置灵活性：支持自定义 CSS 单位（rem/px）、根字体大小与缩放因子，以满足特定的响应式与无障碍需求。

使用说明与限制：

• 必要条件：必须启用并连接 TemPad Dev MCP。若服务器无法访问，技能将暂停并要求重新连接。
• 证据阶层：技能优先将本地项目证据（如 AGENTS.md、现有组件）视为实作真理，其次是来自 TemPad Dev 的设计证据，最后才是使用者对于缺失商业逻辑或产品决策的意图。
• 范畴限制：本工具仅限于 UI 转换，不进行设计检视、产品创意发想或泛用代码审查。除非有明确证据，否则不会主动猜测隐藏状态（如悬停、禁用、加载状态）或复杂的非视觉商业逻辑。
• 工作流建议：首先阅读项目指令档与设计系统文件以建立约束。在实作前，执行 get_code 进行顶层提取以取得设计快照。若对于组件边界或可重用组件存在模糊空间，请在进行前先参阅现有代码库模式。
• 精确第一：切勿发明设计中未证实的视觉细节或行为。若无法完全验证请求的输出，代理程序将会警告使用者或暂停，而非输出错误或推测性的代码。