---
name: "figma-to-vue3"
description: "解析 Figma 链接并以 Vue 3 对界面进行 1:1 还原：先输出结构/布局/样式蓝图，用户确认后生成 Vue 3 代码。用户提供 Figma URL 且希望按图实现 UI 时调用。"
---

# Figma → Vue 3（两步走）

## 目标

把用户提供的 Figma 链接按设计稿在 Vue 3 中 1:1 还原（像素级布局与样式），分两阶段完成：

1) **解析与方案**：解析figma链接的原型图并输出结构化蓝图（页面树、组件拆分、布局规则、样式/Token、交互）。
2) **生成代码（仅在用户确认后）**：按已确认的蓝图与仓库现有规范生成 Vue 3 SFC 及相关文件。

该技能用于避免“盲目代码生成”，先确认结构与样式决策，确保最终代码能稳定做到 1:1 还原。

## 何时调用

当用户满足以下任一情况时调用：

- 提供 Figma URL（file/page/node 链接均可），并要求“转 Vue3 / 生成 Vue3 / 1:1 还原 / 实现 UI”等
- 要求先“解析页面结构/组件/样式/布局”，确认后再生成代码

## 必要输入

- Figma 链接（file/page/node）以及目标页面/Frame（可指定多个）
- 约束条件（如有）：响应式断点、组件边界、项目技术栈/样式约束（如 Tailwind/纯 CSS 等）、是否允许抽 Token、是否需要还原交互

若用户未提供约束，默认假设：

- 技术栈：严格跟随仓库现有 Vue 3 工程与组件库/样式方案，不新增依赖（除非仓库已有或用户明确要求）
- 还原标准：优先保证布局、字号/行高、颜色、间距、圆角、阴影、边框等视觉一致；资源缺失时以占位方案不破版
- 质量门槛：不输出注释（除非用户要求），避免魔法数扩散（优先抽取可复用 Token/变量并保持与项目一致）

## 阶段 1：解析与蓝图（不改代码）

### 步骤 1：读取 Figma 链接

- 使用现有的 **Figma AI Bridge** 能力读取 Figma 链接内容。

### 步骤 2：输出蓝图

输出精简但完整的蓝图，包含：

- **页面/视图清单**：涉及的页面与主要屏幕（如适用），并标注哪些是可复用区块
- **组件树**：按层级拆分（page → section → reusable components）
- **布局规则**：grid/flex、间距、对齐、滚动区域、min/max 宽度、断点策略
- **样式 Token**：
  - 颜色、字号/行高、圆角、阴影、间距尺度
  - 图标/图片资源清单与使用位置
- **状态与交互**：hover/active/disabled/loading/empty/error；modal/drawer；导航交互；表单校验与防重复提交
- **内容占位**：哪些是静态/动态；必要时给出 props 的示例 JSON 结构（只为还原 UI 所需）
- **验收清单**：完成标准（像素级对齐、滚动行为、断点行为、交互一致性）

### 步骤 3：请求确认（硬门槛）

生成代码前，必须给出并让用户确认：

- 最终组件/文件规划（文件名 + 职责）
- 关键样式决策（Tailwind vs CSS Modules vs scoped CSS；Token 放哪里；图标策略）
- 路由与布局决策（导航归属、页面层级、守卫/登录态要求）
- 状态管理与持久化决策（Pinia store 划分、持久化键与版本策略）
- 交互关键点（提交阻断、错误/空态、可访问性焦点与键盘路径）
- 埋点清单与参数字典（至少覆盖 PRD 关键事件）
- 接口契约遵循方式（HTTP 封装、headers、幂等键、错误码映射到 UI）
- 不可避免的假设/风险点

并让用户明确选择其一：

- “按方案直接生成代码”
- “先调整方案（列出需要改的点）”

未获得明确确认前，禁止进入代码生成阶段。

## 阶段 2：生成 Vue 3 代码（用户确认后）

### 步骤 1：遵循仓库规范

写代码前必须先做：

- 检查现有 Vue 组件的命名与写法/样式约定
- 检查 `package.json` 的技术栈与样式库（Tailwind/UnoCSS/ElementPlus 等）
- 优先复用项目现有组件/工具方法，不重复造轮子

### 步骤 2：生成规则

- 使用 Vue 3 SFC，默认 `<script setup lang="ts">`
- 组件保持可组合与适度拆分，避免不必要的深层 props 传递
- 样式方案与仓库保持一致
- 除非仓库已使用，否则不新增依赖
- 除非用户明确要求，否则不写注释
- UI 必须严格按 Figma 还原：尺寸/间距/对齐/字体/颜色/圆角/阴影/边框/分割线等；允许抽取 Token，但不得改变视觉结果
- 资源与字体缺失时：使用不破版的占位策略，并在输出中明确差异点

### 步骤 3：验证

- 运行项目已有的 lint/typecheck/build 命令（如 `npm run build`/`npm run lint`/`npm run typecheck`）
- 确保页面可正常渲染且控制台无错误

## 输出格式（阶段 1）

输出建议包含：

- 组件树（列表）
- 文件规划表（文件 → 用途）
- Token 表（颜色/字体/间距等）
- Store/持久化规划（store → 职责 → 持久化字段）
- 埋点事件表（事件名 → 触发点 → 参数）
- 错误/空态清单（场景 → 提示文案 → 引导/重试）
- 需要用户确认的问题/假设（精简列表）

## 输出格式（阶段 2）

输出建议包含：

- 新增/修改文件清单（带链接）
- 本地运行/预览说明
- 与 Figma 的差异/限制说明（如字体不可用、图片资源缺失等）