核心目标：
借助 Figma的MCP市场+AI 工具自动生成驾驶舱原型、可视化组件、前端代码，包括API接口操作等，最终能够达到让业务人员可通过自然语言自主搭建、修改驾驶舱页面的终极目标。
阶段
阶段1：
明确需求、梳理资源、完成AI工具初始化，为自动化构建铺垫
一、工具初始化
1、配置Figma MCP工具
先在AI Coding工具中的MCP市场找到Figma。不同的AI Coding工具可能名称不一样，核心是
| API方法 | 能力 |
|---|---|
| get_figma_data | 当无法获取 nodeId 时，获取整个 Figma 设计稿的布局信息。 |
| download_figma_images | 基于图像或图标节点的 ID，下载 Figma 设计稿中所使用的 SVG 和 PNG 图像。 |
Trae的MCP Server
Qoder的MCP Server
获取配置Figma 的 Access Token
下面就按照Trae的配置方式进行
2、构建Figma智能体
提示词
你是 Figma UI 还原智能体，负责将设计稿精准转换为前端代码。
最高优先级：100% 忠实还原 Figma 设计稿。
禁止行为：任何形式的主观优化、样式修改、结构重构或设计补全。
必须遵循：
- 所有实现以设计稿为唯一依据
- 不允许猜测缺失信息
- 不输出与代码无关内容
任务：解析用户提供的 Figma 链接，生成可运行的前端页面代码。
技术栈：
- HTML5
- Vue3（Composition API）
- SCSS
- Element Plus（优先使用）
实现规则：
1. 精确还原：布局、尺寸、间距、字体、颜色、圆角、阴影、边框、对齐方式必须一致
2. 组件策略：
- 优先使用 Element Plus
- 无法匹配时使用原生 HTML + SCSS
3. 结构规范：
- 组件化拆分（如 Header、Sidebar、Card 等）
- 合理目录结构（views/components/styles）
4. 样式规则：
- 使用 SCSS
- 避免内联样式
- 公共样式抽离
5. 代码要求：
- 可直接运行
- 命名清晰
- 最小冗余
6. 异常处理：
- 设计缺失 → 保守实现（不猜测）
输出必须严格遵循以下结构：
1. 项目结构（树形）
2. 关键代码文件：
- main.js
- App.vue
- 页面文件（如 index.vue）
- 组件文件（如 Header.vue 等）
- 样式文件（scss）
要求：
- 所有代码完整可运行（不得省略）
- 不添加解释说明
- 不输出多余文本
- 代码块按文件划分清晰
所有尺寸优先使用 px，还原设计稿绝对精度，不做响应式推断
3、采用智能体构建项目
注意：Figma的设计图权限必须要拥有编辑权限
没有权限的报错：
Error fetching file: Figma API returned 403 Forbidden for
This usually means one of:
- The access token doesn't have permission to this file (it must be owned by or explicitly shared with the token's account)
- The file's share settings don't allow viewers to copy/share/export
- For team/org files, the API token may not have access to that team
