---
name: figma-to-code
description: >-
  Figma 设计稿还原为代码 / 实现 Figma 设计。触发场景包括但不限于：
  「figma」「Figma」「FIGMA」出现时。
  「实现这个设计」「还原这个设计」「按照设计稿」「按设计稿」「照着设计稿」「根据设计稿」「设计稿还原」「设计还原」「Figma还原」「figma还原」。
  「把这个页面做出来」「实现这个页面」「还原这个页面」「做这个页面」「写这个页面」「开发这个页面」「切这个页面」「切图」「切页面」。
  「figma链接」「Figma链接」「设计稿链接」「figma地址」「Figma地址」。
  「从Figma」「从figma」「看下设计稿」「看下设计」「看设计」「看Figma」。
  任何提供 Figma URL 或提及 Figma 设计稿并要求生成/实现代码的场景都应触发。
  使用MCP三步验证法：get_design_context（设计意图）→get_metadata（精确坐标）→坐标反推布局，禁止直接使用get_design_context生成的Tailwind代码。
---

# Figma 设计还原

⚠️ **本 Skill 已触发。第一句话必须输出：「🔧 已触发 `figma-to-code`，按 MCP 三步验证法还原设计...」然后严格按照以下步骤执行，不得跳过。**

将 Figma 设计稿还原为代码，以 Figma 文件为唯一事实源。

## MCP 三步验证法

⚠️ **禁止直接使用 `get_design_context` 生成的代码**。`get_design_context` 的输出是大模型推导的近似值，数值和结构均不可信。

### 第 1 步：`get_design_context` → 获取设计意图

用 `mcp__figma__get_design_context` 了解组件整体结构、颜色、字体、视觉效果。
⚠️ 仅用于理解设计意图，数值和结构不可信。

### 第 2 步：`get_metadata` → 获取精确坐标（唯一事实源）

用 `mcp__figma__get_metadata` 获取每个节点的真实 x/y/width/height 坐标。
这是所有尺寸、间距、定位的唯一事实源。

### 第 3 步：坐标反推规则

| 场景 | 反推方法 |
|------|----------|
| Section 上下 padding | 子元素 y 坐标 = 上 padding；父级高度 - 子元素 y - 子元素高度 = 下 padding |
| 元素间距（gap） | 兄弟元素之间的 y 差值（纵向）或 x 差值（横向） |
| 元素是 flex 还是 absolute | 子元素 x 超出父元素左边界 → absolute；子元素在父元素范围内 → flex |
| 固定宽度还是自适应 | metadata 有明确 width 值 → 固定宽度；否则 → 自适应 |

## 常见踩坑

1. **`get_design_context` padding 不准** → 以 metadata 坐标为基准重新计算
2. **按钮被嵌套在文字区域内** → metadata 中同级 x 不同、y 相近 = 横向并排，不应嵌套
3. **固定宽度容器被改成全宽** → metadata 中有明确 width 的容器不能去掉固定宽度
4. **装饰图片被当成 flex 子元素** → metadata 中 x 坐标超出父元素范围 = absolute 定位

## 交付验收

- 交付前对照 Figma 做视觉和交互验收
- 发现无法完全还原的素材、字体、数据或平台限制时，明确说明差异和原因
- 逐项验证：布局、尺寸、间距、颜色、字体、层级、组件状态、响应式规则

## 代码实现规范

- 所有尺寸单位使用 `rem`（1rem = 16px）
- 使用 Tailwind CSS utility classes，禁止原生 CSS
- 禁止硬编码数字，常量/枚举统一定义