核心功能
figma 是基于 Figma MCP Server 的设计转代码技能。标准流程：通过设计链接获取节点结构（get_design_context）与参考截图（get_screenshot），生成初始代码（通常为 React + Tailwind），再重构为符合项目规范的代码。优先复用现有设计系统，支持按节点局部实现与增量迭代。提供设计链接或 Node ID 即可触发。
功能亮点
设计上下文
通过设计链接调用 get_design_context 获取节点结构与设计信息。
参考截图
调用 get_screenshot 获取设计参考截图，作为代码生成的视觉基准。
代码生成
生成初始代码（React + Tailwind），再重构为项目规范代码。
系统复用
优先复用现有设计系统 tokens、基础组件与架构模式，并支持按节点局部迭代。
适用场景
• Figma 设计稿快速转前端代码
• 按按钮、卡片等节点局部实现
• 对接项目设计系统规范
• 设计改版后的代码增量更新
安装配置
使用前需先在 TRAE Work 的 MCP 市场添加「Figma AI Bridge」MCP Server（参考官方远程 MCP 文档），再到技能市场搜索 figma 安装。
使用方法
提供 Figma 设计链接或 Node ID，如「把这份设计稿转成代码」，AI 自动获取节点结构与截图，生成并重构为项目代码。
优点
- 从设计稿到代码全流程自动化
- 复用设计系统保持一致性
- 支持节点级局部迭代
- 截图对比做视觉校验
缺点
- 需额外配置 Figma MCP Server
- 生成代码需按项目规范重构
- 复杂设计稿需人工校对细节