设计稿转代码

Design to Code

将设计稿转化为高质量的前端代码是开发中最耗时的任务之一。通过 Claude Code 结合 Figma MCP 服务，你可以大幅加速从设计到实现的过程，同时保持高度的视觉还原。

Figma MCP（Framelink）配置

Figma MCP (Framelink) Configuration

Framelink 是一个 Figma MCP 服务器，允许 Claude Code 直接读取和解析 Figma 设计文件。

获取 Figma Access Token

登录 Figma
进入 Settings → Account → Personal Access Tokens
点击 Generate new token
设置 Token 名称（如 "Claude Code"）并生成
复制保存 Token

安装 Framelink MCP

bash

# 通过 npm 安装
npm install -g @anthropic-ai/framelink-figma-mcp

配置 MCP 服务

在 Claude Code 的 MCP 配置文件中添加 Framelink 服务：

json

// ~/.claude/mcp_servers.json
{
  "figma": {
    "command": "npx",
    "args": ["-y", "@anthropic-ai/framelink-figma-mcp"],
    "env": {
      "FIGMA_ACCESS_TOKEN": "your-figma-token-here"
    }
  }
}

验证配置

bash

# 启动 Claude Code，检查 MCP 工具状态
/mcp

# 应看到 figma 相关工具：
# figma: get_figma_data

MCP 工具说明

工具	功能	参数
`get_figma_data`	获取 Figma 节点数据	fileKey, nodeId（可选）

该工具能够获取：

设计稿的完整图层结构
每个元素的位置、尺寸、样式
颜色、字体、间距等设计 Token
组件实例及其属性
自动布局（Auto Layout）设置

设计稿分析流程

Design Analysis Workflow

在开始编码之前，让 Claude 先分析设计稿的结构和设计模式。

获取设计稿链接

从 Figma 复制页面或组件的链接：

# Figma 链接格式
https://www.figma.com/design/FILE_KEY/FILE_NAME?node-id=NODE_ID

# 例如
https://www.figma.com/design/abc123/MyApp?node-id=1234-5678

分析提示词

bash

# 第一步：分析整体布局
请获取这个 Figma 设计稿的数据并分析：
https://www.figma.com/design/abc123/MyApp?node-id=1234-5678

分析以下方面：
1. 页面整体布局结构（Header/Content/Footer）
2. 组件层级关系
3. 设计系统（颜色、字体、间距规律）
4. 响应式断点提示
5. 交互状态（hover、active、disabled）

分析结果示例

Claude 会返回结构化的分析报告：

markdown

## 设计稿分析报告

### 页面结构
- Header（固定顶部，高度 64px）
  - Logo（左侧）
  - Navigation（居中，5 个链接）
  - UserMenu（右侧，头像 + 下拉）
- Hero Section（全宽，高度 480px）
  - 标题 + 副标题（左对齐）
  - CTA 按钮组
  - 背景插图（右侧）
- Features Grid（3 列，间距 24px）
  - FeatureCard × 6
- Footer（深色背景）

### 设计 Token
| Token | 值 |
|-------|-----|
| 主色 | #6366F1 |
| 文字色 | #1F2937 |
| 次要文字 | #6B7280 |
| 背景色 | #FFFFFF |
| 圆角 | 8px / 12px |
| 间距基数 | 8px |
| 标题字体 | Inter, 32px/700 |
| 正文字体 | Inter, 16px/400 |

生成 React/Vue/HTML 组件

Generating React/Vue/HTML Components

基于设计稿分析结果，Claude 可以生成对应框架的组件代码。

React 组件生成

bash

请根据 Figma 设计稿生成 React 组件：
https://www.figma.com/design/abc123/MyApp?node-id=1234-5678

技术栈要求：
- React 18 + TypeScript
- Tailwind CSS 样式
- 组件拆分为独立文件
- 包含 Props 类型定义

输出结构：
src/components/
├── Header/
│   ├── Header.tsx
│   ├── Navigation.tsx
│   └── UserMenu.tsx
├── Hero/
│   └── Hero.tsx
├── Features/
│   ├── FeatureGrid.tsx
│   └── FeatureCard.tsx
└── Footer/
    └── Footer.tsx

生成代码示例

tsx

// src/components/Features/FeatureCard.tsx
import React from 'react';

interface FeatureCardProps {
  icon: React.ReactNode;
  title: string;
  description: string;
}

export const FeatureCard: React.FC<FeatureCardProps> = ({
  icon,
  title,
  description,
}) => {
  return (
    <div className="rounded-xl border border-gray-200 p-6 hover:shadow-lg transition-shadow">
      <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600">
        {icon}
      </div>
      <h3 className="mb-2 text-lg font-semibold text-gray-900">
        {title}
      </h3>
      <p className="text-sm leading-relaxed text-gray-500">
        {description}
      </p>
    </div>
  );
};

Vue 组件生成

bash

# 同样的设计稿，生成 Vue 3 组件
请根据 Figma 设计稿生成 Vue 3 组件：
[Figma 链接]

技术栈：
- Vue 3 + Composition API + TypeScript
- CSS Modules 或 Scoped CSS
- 组件拆分为 SFC（.vue 文件）

纯 HTML/CSS 生成

bash

# 生成静态 HTML 页面
请根据 Figma 设计稿生成一个独立的 HTML 页面：
[Figma 链接]

要求：
- 单个 HTML 文件，内嵌 CSS
- 使用 CSS Grid 和 Flexbox 布局
- 语义化 HTML 标签
- 可直接在浏览器中打开预览

框架选择参考

框架	适用场景	样式方案
React + Tailwind	SPA 应用	实用类优先
React + CSS Modules	大型项目	模块化 CSS
Vue 3 + Scoped CSS	渐进式项目	Scoped 样式
HTML + CSS	静态页面/邮件模板	内联/内嵌
Next.js	SSR 应用	Tailwind/CSS Modules

样式还原技巧

Style Matching Techniques

高保真度的样式还原需要关注细节，以下是常用的技巧。

颜色和字体提取

bash

# 从设计稿提取设计 Token 并生成配置
请分析设计稿中使用的所有颜色和字体，
生成以下配置文件：

1. tailwind.config.js 的 theme.extend
2. CSS 变量文件 styles/variables.css
3. 设计 Token JSON 文件 tokens/design-tokens.json

Tailwind 主题配置示例

javascript

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#EEF2FF',
          100: '#E0E7FF',
          500: '#6366F1',
          600: '#4F46E5',
          700: '#4338CA',
        },
        gray: {
          50: '#F9FAFB',
          100: '#F3F4F6',
          500: '#6B7280',
          900: '#1F2937',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      },
      borderRadius: {
        'xl': '12px',
      },
    },
  },
};

阴影和效果

bash

# 提取设计稿中的阴影效果
请分析设计稿中使用的所有阴影效果，
生成对应的 CSS box-shadow 值：

# 常见设计稿阴影映射
| 设计稿名称 | CSS 值 |
|------------|--------|
| shadow-sm  | 0 1px 2px rgba(0,0,0,0.05) |
| shadow-md  | 0 4px 6px -1px rgba(0,0,0,0.1) |
| shadow-lg  | 0 10px 15px -3px rgba(0,0,0,0.1) |

像素精确还原

关注点	说明	检查方法
间距	元素之间的 margin/padding	与设计稿数值对比
字号	font-size 和 line-height	叠加对比
圆角	border-radius	视觉检查
颜色	精确的十六进制/RGB 值	取色器对比
对齐	元素的水平和垂直对齐	叠加辅助线

响应式适配

Responsive Adaptation

设计稿通常只有桌面版，但实际开发需要适配多种屏幕尺寸。

断点定义

bash

# 请根据设计稿生成响应式组件
# 参考以下标准断点

| 断点 | 尺寸 | 设备 |
|------|------|------|
| sm | 640px | 手机横屏 |
| md | 768px | 平板 |
| lg | 1024px | 小屏笔记本 |
| xl | 1280px | 桌面 |
| 2xl | 1536px | 大屏幕 |

响应式策略

bash

# 让 Claude 根据桌面设计推断移动端布局
请根据设计稿生成响应式组件：
[Figma 链接]

桌面端按设计稿还原，移动端请按以下策略适配：
1. Navigation → 折叠为汉堡菜单
2. 3 列 Grid → 单列堆叠
3. Hero 区域 → 图片移到文字下方
4. 侧边栏 → 折叠到底部
5. 表格 → 卡片模式

使用 Tailwind 的响应式前缀实现

响应式代码示例

tsx

// 响应式 FeatureGrid
export const FeatureGrid: React.FC<{ features: Feature[] }> = ({ features }) => {
  return (
    <section className="px-4 py-12 md:px-8 lg:px-16">
      <h2 className="mb-8 text-center text-2xl font-bold md:text-3xl lg:text-4xl">
        核心功能
      </h2>
      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {features.map((feature) => (
          <FeatureCard key={feature.id} {...feature} />
        ))}
      </div>
    </section>
  );
};

截图对比验证

Screenshot Comparison Verification

生成代码后，通过截图对比可以验证视觉还原度。

对比流程

1. 从 Figma 导出设计稿截图
2. 在浏览器中打开生成的页面
3. 截取浏览器页面截图
4. 让 Claude 对比两张截图的差异

使用 Claude 进行对比

bash

# 截图对比
请对比以下两张截图：
- design/figma-export.png （设计稿）
- design/browser-screenshot.png （实现效果）

检查以下方面的差异：
1. 布局和间距
2. 字体大小和行高
3. 颜色和对比度
4. 圆角和阴影
5. 元素对齐
6. 图标和图片尺寸

列出所有差异并给出修复建议

对比结果示例

markdown

## 截图对比报告

### 差异列表

| 编号 | 位置 | 问题 | 严重度 | 修复方案 |
|------|------|------|--------|----------|
| 1 | Header | Logo 左边距不足 | 低 | 添加 ml-6 |
| 2 | Hero | 标题 font-weight 偏细 | 中 | 改为 font-extrabold |
| 3 | Features | 卡片圆角偏小 | 低 | 改为 rounded-xl |
| 4 | CTA Button | 按钮颜色偏浅 | 中 | 使用 bg-indigo-600 |
| 5 | Footer | 底部间距过大 | 低 | 减少 py-12 为 py-8 |

### 总体还原度：92%

自动化截图对比

bash

# 使用 Playwright 自动截图对比
npx playwright screenshot http://localhost:3000 design/browser-screenshot.png

# 然后让 Claude 对比
请对比 design/figma-export.png 和 design/browser-screenshot.png

实际案例

Practical Case Study

案例：SaaS 产品落地页

需求：将 Figma 设计稿转化为响应式 Next.js 页面。

步骤一：分析设计稿

bash

请获取并分析这个 Figma 设计稿：
https://www.figma.com/design/xxx/SaaS-Landing-Page?node-id=0-1

重点分析：
- 页面分区和组件拆分方案
- 设计 Token（颜色、字体、间距）
- 可复用组件识别
- 动画和交互提示

步骤二：搭建项目结构

bash

请创建 Next.js 项目结构：

src/
├── app/
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── ui/           # 基础 UI 组件
│   ├── sections/     # 页面区块
│   └── layout/       # 布局组件
├── styles/
│   └── globals.css
└── lib/
    └── constants.ts  # 设计 Token

步骤三：逐区块实现

bash

# 按区块依次实现
请根据设计稿实现 Hero Section：
- 左侧标题、描述、CTA 按钮
- 右侧产品截图（带阴影和倾斜效果）
- 背景渐变
- 响应式适配

步骤四：截图验证

bash

请截取当前页面的截图，与 Figma 设计稿对比，
列出所有需要调整的细节

步骤五：细节调优

bash

请根据对比结果修复以下问题：
1. Header 阴影效果缺失
2. Hero 区域背景渐变角度调整为 135deg
3. FeatureCard hover 效果需要添加 transform scale
4. Footer 链接颜色需要调整

修复后重新截图验证

最终交付物

文件	说明
`src/components/`	所有 React 组件
`tailwind.config.js`	主题配置
`tokens/design-tokens.json`	设计 Token
`design/comparison-report.md`	截图对比报告

最佳实践

Best Practices

实践	说明
先分析再编码	让 Claude 先分析设计稿结构
组件化拆分	识别可复用组件，避免重复代码
Token 先行	先提取设计 Token，再编写组件
逐步验证	每实现一个区块就进行截图对比
移动端优先	从小屏开始，逐步增大
语义化 HTML	使用正确的 HTML 标签
无障碍访问	添加 ARIA 标签和键盘导航

设计稿转代码 ​

Figma MCP（Framelink）配置 ​

获取 Figma Access Token ​

安装 Framelink MCP ​

配置 MCP 服务 ​

验证配置 ​

MCP 工具说明 ​

设计稿分析流程 ​

获取设计稿链接 ​

分析提示词 ​

分析结果示例 ​

生成 React/Vue/HTML 组件 ​

React 组件生成 ​

生成代码示例 ​

Vue 组件生成 ​

纯 HTML/CSS 生成 ​

框架选择参考 ​

样式还原技巧 ​

颜色和字体提取 ​

Tailwind 主题配置示例 ​

阴影和效果 ​

像素精确还原 ​

响应式适配 ​

断点定义 ​

响应式策略 ​

响应式代码示例 ​

截图对比验证 ​

对比流程 ​

使用 Claude 进行对比 ​

对比结果示例 ​

自动化截图对比 ​

实际案例 ​

案例：SaaS 产品落地页 ​

步骤一：分析设计稿 ​

步骤二：搭建项目结构 ​

步骤三：逐区块实现 ​

步骤四：截图验证 ​

步骤五：细节调优 ​

最终交付物 ​

最佳实践 ​

设计稿转代码

Figma MCP（Framelink）配置

获取 Figma Access Token

安装 Framelink MCP

配置 MCP 服务

验证配置

MCP 工具说明

设计稿分析流程

获取设计稿链接

分析提示词

分析结果示例

生成 React/Vue/HTML 组件

React 组件生成

生成代码示例

Vue 组件生成

纯 HTML/CSS 生成

框架选择参考

样式还原技巧

颜色和字体提取

Tailwind 主题配置示例

阴影和效果

像素精确还原

响应式适配

断点定义

响应式策略

响应式代码示例

截图对比验证

对比流程

使用 Claude 进行对比

对比结果示例

自动化截图对比

实际案例

案例：SaaS 产品落地页

步骤一：分析设计稿

步骤二：搭建项目结构

步骤三：逐区块实现

步骤四：截图验证

步骤五：细节调优

最终交付物

最佳实践