27c - 设计到代码工作流

你有什么输入？
├── 只有想法/需求描述（无设计稿）
│   ├── 需要快速原型 → v0.dev
│   ├── 需要完整应用 → Bolt.new / Lovable
│   └── 需要高质量组件 → v0.dev + 手动精调
├── 有 Figma 设计稿
│   ├── 设计稿规范（Auto Layout + Design Tokens）
│   │   ├── 使用 AI 编码助手（Cursor/Claude Code）→ Figma MCP Server
│   │   ├── 需要批量转换 → Locofy.ai
│   │   └── 需要映射到现有组件库 → Builder.io Visual Copilot
│   └── 设计稿不规范（绝对定位、无命名）
│       ├── 先优化设计稿 → 应用 Auto Layout + 命名规范
│       └── 快速出结果 → Anima / CodeParrot
├── 有截图/竞品页面
│   ├── 需要精确还原 → screenshot-to-code + 手动调整
│   └── 只需参考布局 → Claude Vision 直接描述
└── 有录屏/视频
    └── screenshot-to-code（视频模式）

[组件类型] + [功能描述] + [视觉风格] + [技术约束]

创建一个 [组件类型]，要求：
- 功能：[详细功能描述]
- 布局：[布局要求，如响应式、网格、Flex]
- 风格：[视觉风格，如现代简约、暗色主题、渐变]
- 交互：[交互效果，如 hover、动画、过渡]
- 数据：[数据结构或示例数据]
- 无障碍：[ARIA 标签、键盘导航等要求]
- 使用 shadcn/ui 组件：[指定使用的组件，如 Card、Button、Dialog]
- 使用 Tailwind CSS，不使用内联样式

创建一个 SaaS 定价页面组件，要求：
- 3 个定价层级（Free、Pro、Enterprise），使用 Card 组件
- 每个层级包含：名称、价格（月/年切换）、功能列表、CTA 按钮
- Pro 层级高亮显示为"最受欢迎"
- 响应式布局：桌面端 3 列，平板 2 列，手机 1 列
- 暗色主题，使用渐变边框效果
- 年付切换时显示折扣百分比
- 使用 shadcn/ui 的 Card、Button、Badge、Switch 组件
- 所有交互元素支持键盘导航

# 方式 1：使用 v0 CLI 直接添加到项目
npx v0 add [组件URL]
 
# 方式 2：手动复制代码到项目
# 1. 在 v0.dev 中点击 "Code" 标签
# 2. 复制生成的组件代码
# 3. 粘贴到项目的 components/ 目录
 
# 方式 3：通过 shadcn/ui CLI 安装依赖组件
npx shadcn@latest add card button badge switch

参考上传的图片风格，创建一个类似的 [组件类型]。
保持相同的：
- 配色方案和渐变效果
- 卡片圆角和阴影风格
- 排版层次和字体大小比例
修改以下内容：
- [具体修改要求]

基于当前组件，创建以下变体：
1. 紧凑版本（适用于侧边栏）
2. 暗色主题版本
3. 移动端全屏版本
保持功能逻辑不变，只调整布局和样式。

创建一个完整的用户设置页面，包含以下组件：
1. 左侧导航菜单（使用 Tabs 组件，垂直排列）
2. 个人信息表单（使用 Form + Input 组件）
3. 头像上传区域（使用 Avatar + 拖拽上传）
4. 通知偏好设置（使用 Switch 组件列表）
5. 危险操作区域（删除账户，使用 AlertDialog 确认）
所有组件共享同一个暗色主题，使用一致的间距和圆角。

┌──────────────┐     MCP 协议      ┌──────────────────┐
│  Figma 设计   │ ──────────────→  │  AI 编码助手       │
│  文件         │  结构化数据：      │  (Cursor/Claude   │
│              │  - 节点层级        │   Code/Windsurf)  │
│  ┌─────────┐ │  - 样式变量        │                  │
│  │组件/变体 │ │  - Auto Layout    │  ┌─────────────┐ │
│  │Design   │ │  - Design Token   │  │ 生成代码      │ │
│  │Tokens   │ │  - Code Connect   │  │ React/Vue/   │ │
│  │Auto     │ │  - 截图           │  │ Svelte...    │ │
│  │Layout   │ │                   │  └─────────────┘ │
│  └─────────┘ │                   │                  │
└──────────────┘                   └──────────────────┘

# 在 Figma 中：Settings → Security → Personal Access Tokens
# 创建新令牌，勾选以下权限：
# - File content (Read)
# - Dev resources (Read)
# - Variables (Read)

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/figma-mcp-server"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-figma-token"
      }
    }
  }
}

# 使用 Claude Code 的 MCP 管理命令
claude mcp add figma -- npx -y @anthropic-ai/figma-mcp-server
# 设置环境变量
export FIGMA_ACCESS_TOKEN="your-figma-token"

请根据 Figma 设计文件实现以下页面/组件：

Figma 文件链接：[粘贴 Figma 文件 URL]
目标节点：[具体 Frame 或组件名称]

技术要求：
- 框架：[React/Vue/Svelte]
- 样式方案：[Tailwind CSS/CSS Modules/Styled Components]
- 组件库：[shadcn/ui/Ant Design/自定义]
- 使用 Figma 中定义的 Design Token 作为 CSS 变量
- 保持 Auto Layout 对应的 Flexbox/Grid 布局
- 实现所有定义的组件变体（Variants）

质量要求：
- 像素级还原设计稿
- 响应式适配（参考设计稿中的断点）
- 语义化 HTML 标签
- 完整的 ARIA 属性

1. 在 Figma 编辑器中，选择目标 Frame
2. 打开 Figma Make 面板（右侧面板或快捷键）
3. 选择模式：
   - "从设计生成代码"：将选中的 Frame 转为代码
   - "从描述生成"：用自然语言描述需求
4. 输入 Prompt 或确认转换
5. 预览生成结果
6. 导出代码

对当前生成的 [组件/页面] 进行以下优化：
1. 将静态文本替换为动态数据绑定：[指定数据字段]
2. 添加以下交互效果：[hover 状态/点击事件/过渡动画]
3. 确保在 [断点] 下的响应式行为：[具体布局变化]
4. 将硬编码颜色替换为设计系统中的 Token 变量

1. 在 Figma 中打开 Community → Plugins
2. 搜索 "Locofy" 并安装
3. 注册 Locofy 账户并获取 API Key
4. 在插件中登录

1. 选择目标 Frame
2. 运行 Locofy 插件
3. 使用 "Auto Tag" 自动识别 UI 元素类型
4. 手动修正错误的标注（如将 "Image" 改为 "Button"）
5. 标注交互行为（点击跳转、表单提交等）

1. 选择目标框架：React / Next.js / Vue / React Native / Flutter
2. 选择样式方案：Tailwind CSS / CSS Modules / Styled Components
3. 配置组件映射：将 Figma 组件映射到项目中的现有组件
4. 设置响应式断点
5. 点击 "Generate Code"

# Locofy 支持多种导出方式：
# 1. 直接推送到 GitHub 仓库
# 2. 下载 ZIP 包
# 3. 通过 CLI 同步到本地项目
 
# 使用 Locofy CLI
npm install -g @locofy/cli
locofy pull --project-id <your-project-id> --output ./src/components

# 安装 Builder.io Figma 插件
# Figma → Community → Plugins → 搜索 "Builder.io"
 
# 在项目中安装 Builder.io SDK
npm install @builder.io/react

// builder-registry.ts
import { Builder } from '@builder.io/react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
 
// 将 Figma 组件映射到项目组件
Builder.registerComponent(Button, {
  name: 'Button',
  inputs: [
    { name: 'variant', type: 'string', enum: ['default', 'outline', 'ghost'] },
    { name: 'size', type: 'string', enum: ['sm', 'md', 'lg'] },
    { name: 'children', type: 'string' },
  ],
});
 
Builder.registerComponent(Card, {
  name: 'Card',
  inputs: [
    { name: 'className', type: 'string' },
  ],
});

1. 在 Figma 中选择目标 Frame
2. 打开 Builder.io 插件
3. 选择 "Generate Code"
4. 选择目标框架和样式方案
5. 查看生成的代码——注意 Figma 组件已自动映射为项目组件
6. 复制代码或推送到项目

1. 安装 Anima Figma 插件
2. 选择目标 Frame
3. 点击 "Export to Code"
4. 选择框架（React/Vue/HTML）
5. 预览代码并下载

# 方式 1：Docker 部署（推荐）
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code
 
# 创建环境变量文件
cat > .env << EOF
OPENAI_API_KEY=your-openai-key
ANTHROPIC_API_KEY=your-anthropic-key
EOF
 
# 启动服务
docker-compose up -d
 
# 访问 http://localhost:7878
 
# 方式 2：本地开发环境
# 后端
cd backend
pip install -r requirements.txt
uvicorn main:app --reload --port 7001
 
# 前端
cd frontend
npm install
npm run dev

1. 打开 screenshot-to-code 界面
2. 上传截图或输入 URL
3. 选择目标技术栈：
   - HTML + Tailwind CSS（最佳效果）
   - React + Tailwind CSS
   - Vue + Tailwind CSS
   - Bootstrap
   - Ionic + Tailwind
   - SVG
4. 选择 AI 模型：
   - Claude 3.7 Sonnet（推荐，视觉理解最强）
   - GPT-4o（备选）
5. 点击 "Generate"
6. 等待生成（通常 15-30 秒）

# 常用迭代指令：
"将导航栏改为固定定位（sticky）"
"添加暗色模式支持"
"将卡片布局改为响应式网格"
"替换占位图片为实际图标"
"修复移动端下的布局问题"

1. 录制目标应用的操作视频（建议 30 秒以内）
2. 上传视频文件
3. 工具自动提取 20 帧关键画面
4. 为每帧生成对应的代码
5. 组合为完整的多页面应用

注意：
- 每个功能/页面停留 1-2 秒，确保被捕获
- 避免快速滚动或切换
- 建议录制分辨率 1920×1080

请分析这张 UI 截图，并生成对应的 [React + Tailwind CSS] 代码。

要求：
1. 像素级还原截图中的布局、颜色、字体和间距
2. 使用语义化 HTML 标签（header、nav、main、section、footer）
3. 使用 Tailwind CSS 工具类，不使用内联样式
4. 实现响应式布局（移动端优先）
5. 为所有交互元素添加 ARIA 属性
6. 使用 CSS 变量定义主题色，方便后续修改
7. 图片使用占位符（placeholder），标注实际图片的描述

请先分析截图的布局结构，然后逐区域生成代码。

✅ 正确做法：
- 所有容器使用 Auto Layout
- 使用 "Fill Container" 实现弹性布局
- 使用 "Hug Contents" 实现内容自适应
- 设置合理的 min-width 和 max-width

❌ 错误做法：
- 使用绝对定位放置元素
- 手动设置固定宽高而不使用 Auto Layout
- 嵌套过深的 Auto Layout（超过 5 层）
- 混合使用 Auto Layout 和绝对定位

❌ 避免的命名：
- Frame 1, Frame 2, Frame 3（默认名称）
- Rectangle 45（形状默认名称）
- Group 12（分组默认名称）
- 截图 2025-01-15（无意义名称）
- asdfjkl（随意命名）

✅ 推荐的命名：
- hero-section
- pricing-card-pro
- nav-menu-item
- footer-social-links
- modal-confirm-delete

┌─────────────────────────────────────────────────┐
│  语义层 Token（Semantic Tokens）                  │
│  color-text-primary, color-bg-surface            │
│  spacing-page-margin, radius-card                │
├─────────────────────────────────────────────────┤
│  引用层 Token（Alias Tokens）                     │
│  color-brand-500, color-neutral-100              │
│  spacing-4, radius-md                            │
├─────────────────────────────────────────────────┤
│  原始层 Token（Primitive Tokens）                  │
│  blue-500: #3B82F6, gray-100: #F3F4F6           │
│  4: 16px, md: 8px                                │
└─────────────────────────────────────────────────┘

/* Figma Variables → CSS Custom Properties */
:root {
  /* 原始层 */
  --color-blue-500: #3B82F6;
  --color-gray-100: #F3F4F6;
  --spacing-4: 16px;
  --radius-md: 8px;
 
  /* 语义层 */
  --color-text-primary: var(--color-gray-900);
  --color-bg-surface: var(--color-white);
  --color-brand: var(--color-blue-500);
  --spacing-page: var(--spacing-8);
  --radius-card: var(--radius-md);
}
 
/* 暗色主题覆盖 */
[data-theme="dark"] {
  --color-text-primary: var(--color-gray-100);
  --color-bg-surface: var(--color-gray-900);
}

// tailwind.config.ts
import type { Config } from 'tailwindcss';
 
const config: Config = {
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: 'var(--color-brand)',
          50: 'var(--color-brand-50)',
          100: 'var(--color-brand-100)',
          500: 'var(--color-brand-500)',
          900: 'var(--color-brand-900)',
        },
        surface: 'var(--color-bg-surface)',
        'text-primary': 'var(--color-text-primary)',
      },
      spacing: {
        page: 'var(--spacing-page)',
      },
      borderRadius: {
        card: 'var(--radius-card)',
      },
    },
  },
};
 
export default config;

□ 布局
  □ 所有容器使用 Auto Layout
  □ 设置了合理的间距（gap）和内边距（padding）
  □ 使用 Fill Container / Hug Contents 而非固定尺寸
  □ 定义了响应式断点（Desktop/Tablet/Mobile）

□ 命名
  □ 所有图层使用语义化命名（无 Frame 1、Group 2）
  □ 组件使用 PascalCase/变体 格式
  □ 图标使用 icon- 前缀
  □ 图片使用 img- 前缀

□ 组件化
  □ 重复元素已创建为组件（Component）
  □ 组件定义了变体（Variants）
  □ 组件有清晰的 Props 定义

□ Design Token
  □ 颜色定义为 Figma Variables
  □ 字体样式定义为 Text Styles
  □ 间距使用一致的倍数系统（4px/8px）
  □ 圆角定义为变量

□ 无障碍
  □ 文本对比度满足 WCAG AA（4.5:1）
  □ 交互元素有足够的点击区域（44×44px）
  □ 焦点状态已设计
  □ 颜色不是传达信息的唯一方式

□ 交付
  □ 标注了交互行为（hover、active、disabled 状态）
  □ 标注了动画/过渡效果
  □ 提供了真实数据示例（非 Lorem ipsum）
  □ 标注了边界情况（空状态、加载状态、错误状态）

                    视觉还原度
                    (Visual Fidelity)
                         ⬆
                         │
                         │
代码质量 ◄───────────────┼───────────────► 无障碍合规
(Code Quality)           │                (Accessibility)
                         │
                         │
                         ⬇
                    性能表现
                    (Performance)

# 使用 Percy 进行视觉回归测试
npm install --save-dev @percy/cli @percy/playwright
npx percy snapshot ./snapshots/
 
# 使用 Chromatic 进行 Storybook 视觉测试
npx chromatic --project-token=<your-token>
 
# 使用 BackstopJS 进行像素级对比
npm install -g backstopjs
backstop init
backstop test

请审查以下由设计到代码工具生成的 React 组件代码，评估以下维度：

1. **语义化 HTML**：是否使用了正确的语义标签？
2. **CSS 组织**：是否有内联样式？是否使用了设计系统 Token？
3. **组件结构**：组件拆分是否合理？Props 类型是否完整？
4. **TypeScript**：是否有 any 类型？接口定义是否完整？
5. **可维护性**：代码是否可读？是否有适当的注释？
6. **冗余代码**：是否有未使用的变量、导入或样式？

对每个维度给出 1-5 分评分和具体改进建议。

[粘贴生成的代码]

# 使用 axe-core 进行无障碍检测
npm install --save-dev @axe-core/playwright
# 在 Playwright 测试中集成 axe-core
 
# 使用 Lighthouse CI
npm install -g @lhci/cli
lhci autorun --collect.url=http://localhost:3000
 
# 使用 pa11y 进行命令行检测
npm install -g pa11y
pa11y http://localhost:3000

## 设计到代码质量评估报告
 
### 基本信息
- 项目：[项目名称]
- 页面/组件：[页面或组件名称]
- 工具：[使用的设计到代码工具]
- 评估日期：[日期]
 
### 评分总览
 
| 维度 | 权重 | 得分 | 加权得分 |
|------|------|------|---------|
| 视觉还原度 | 30% | __/100 | __/30 |
| 代码质量 | 30% | __/100 | __/30 |
| 无障碍合规 | 20% | __/100 | __/20 |
| 性能表现 | 20% | __/100 | __/20 |
| **总分** | **100%** | | **__/100** |
 
### 质量等级
- 90-100：生产就绪（Production Ready）
- 75-89：需要小幅调整（Minor Adjustments）
- 60-74：需要显著改进（Significant Improvements）
- < 60：需要重新生成（Regenerate）
 
### 详细发现
1. [具体问题描述和改进建议]
2. ...
 
### 行动项
- [ ] [具体修复任务]
- [ ] ...

1. 在 Figma 中创建设计文件
2. 定义 Design Token：
   - 颜色：brand-500, neutral-100~900, success, warning, error
   - 字体：heading-1~6, body-lg, body-md, body-sm
   - 间距：4, 8, 12, 16, 24, 32, 48, 64
   - 圆角：sm(4px), md(8px), lg(12px), xl(16px)
3. 创建组件库：
   - Button（Primary/Secondary/Ghost × Small/Medium/Large）
   - Card（Default/Elevated/Outlined）
   - Input（Default/Error/Disabled）
   - Badge（Info/Success/Warning/Error）
   - Avatar（Small/Medium/Large）
4. 使用 Auto Layout 构建所有页面
5. 为所有图层使用语义化命名
6. 创建 Desktop/Tablet/Mobile 三个断点的设计

# 在项目根目录配置 MCP
# .claude/mcp.json
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/figma-mcp-server"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}"
      }
    }
  }
}

# 第 1 轮：顶部导航栏
请根据 Figma 设计实现顶部导航栏组件。
Figma 链接：[URL]
节点：TopNavBar
- 使用 shadcn/ui 的 Input（搜索框）、Button（通知）、Avatar
- 实现搜索框的展开/收起动画
- 响应式：移动端隐藏搜索框，显示搜索图标

# 第 2 轮：左侧边栏
请根据 Figma 设计实现左侧边栏组件。
Figma 链接：[URL]
节点：Sidebar
- 使用 shadcn/ui 的 NavigationMenu
- 实现折叠/展开功能（图标模式 vs 完整模式）
- 当前页面高亮显示
- 响应式：移动端使用 Sheet 组件作为抽屉菜单

# 第 3 轮：统计卡片区域
# 第 4 轮：图表区域
# 第 5 轮：数据表格
# 第 6 轮：右侧活动面板
# 第 7 轮：页面组装和布局

视觉还原度：92/100（间距有 1-2px 偏差）
代码质量：88/100（部分组件可进一步拆分）
无障碍合规：85/100（需要补充 ARIA live region）
性能表现：90/100（图表组件需要懒加载）
总分：89/100 → 需要小幅调整

# 运行自动化检测
npx lighthouse http://localhost:3000/dashboard --output=json
npx axe http://localhost:3000/dashboard
npx tsc --noEmit
 
# 修复发现的问题
# 1. 补充 ARIA live region（活动日志区域）
# 2. 添加图表组件的懒加载
# 3. 微调间距以匹配设计稿
# 4. 补充缺失的 TypeScript 类型