figma

Figma MCP (Design-to-Code)

Figma MCP 是连接设计稿与生产代码的超级引擎。它通过 Figma API 获取结构化设计上下文、变量定义及原始素材，并结合大模型的推理能力，将视觉稿一键转化为符合项目规范的 React/Tailwind/Vue 代码。

安装与前提条件

# 确保已安装 Figma MCP Server
mcp_call({ action: "search", keyword: "figma" });
# 获取访问令牌 (PAT)
# 详见 references/figma-mcp-config.md

Figma MCP 核心集成流程 (Workflow)

为了确保 1:1 的视觉还原度和高性能的代码实现，必须严格遵循以下流程：

1. 获取设计上下文 (get_design_context)：首先获取目标 Node ID 的结构化 JSON 表示，理解其层级、间距、填充和排版属性。
2. 处理大数据量 (Metadata First)：如果 Node 层级过深，先运行 get_metadata 获取高层级节点地图，再精准抓取需要的子节点。
3. 视觉对齐 (get_screenshot)：运行 get_screenshot 获取节点的实时渲染图片，作为实现时的绝对参考。
4. 素材下载 (Asset Acquisition)：在开始编码前，下载所有图标（Icons）和装饰图（Images）。
5. 规范化翻译 (Code Translation)：将 Figma 的属性（如 cornerRadius: 8）映射到项目的 Design Tokens（如 rounded-lg）。
6. 最终验证 (Visual Regression)：完成开发后，再次对比 Figma 截图，确保 1:1 还原。

触发条件 / When to Use

• 新功能 UI 开发：用户给出一个 Figma 链接，要求实现对应的组件或页面。
• UI 细节优化：针对现有页面进行微调，以对齐设计稿的最新改动。
• 设计规范审计 (Design Audit)：自动提取 Figma 里的 Color Palette 或 Typography 并与代码库中的 tailwind.config.js 对比。
• 图标与静态资源同步：需要批量导出 SVG 图标并转换为 React 组件。
• 响应式布局实现：需要查看不同 Breakpoints（Desktop, Tablet, Mobile）下的设计差异。

核心能力 / Core Capabilities

1. 结构化设计解析 (Structural Parsing)

• 操作步骤：
  1. 调用 mcp_call({ name: "get_design_context", arguments: { fileKey, nodeIds } })。
  2. 解析 children 数组，识别 TEXT, VECTOR, INSTANCE 等节点类型。
  3. 自动计算 Auto-layout 属性（Gap, Padding, Alignment）。
• 最佳实践：如果发现节点名称是“Frame 1234”，主动询问设计人员其真实的语义名称（如“Primary Button”）。

2. 图像与变量提取 (Variable Extraction)

• 操作步骤：
  1. 检索 Figma Variables 和 Styles。
  2. 将十六进制颜色码转换为项目使用的命名变量（如 #3B82F6 -> brand-primary）。
  3. 通过 get_file_variables 获取全局主题定义。
• 最佳实践：优先使用 variable-id 而非硬编码颜色。

3. 视觉引导编码 (Vision-guided Coding)

• 操作步骤：
  1. 在编写 CSS/Tailwind 时，将 get_screenshot 的结果传入多模态模型进行视觉校验。
  2. 捕捉微小的阴影（Box-shadow）和渐变（Gradient）细节。
• 最佳实践：使用 image_edit 技能在截图上标注出具体的像素间距，辅助编码。

4. 资产自动化处理 (Asset Handling)

• 操作步骤：
  1. 检测 Figma 返回的 localhost 素材源。
  2. 自动将其下载并命名为合规的格式（如 icon-user-profile.svg）。
  3. 如果是 SVG，自动通过 svgr 转化为 React 组件。