↓

GPT 4.1、DeepSeek R1、Claude 3.7 代码生成横评，谁才是设计稿还原之王？

·224 字·2 分钟
AI

2025 年 4 月 15 日 OpenAI 发布了 GPT 4.1 系列模型，包含 GPT 4.1、GPT 4.1 Mini 和 GPT 4.1 Nano 三款模型。GPT 4.1 专为提升编码能力、超长上下文理解以及精确的指令遵循而设计。

今天我们在代码生成这一核心领域，对三款大语言模型展开实测对比。另外两款模型分别使用 DeepSeek R1 和 Claude 3.7 Sonnet。

DeepSeek R1 是深度求索（DeepSeek）公司推出的推理模型，专攻复杂逻辑推理任务，如数学证明、代码生成、决策分析。

Claude 3.7 Sonnet 是 Anthropic 的最新模型，在编码、数学、多模态任务等领域表现突出。

测试流程如下：

  • 模型分别为 GPT-4.1、DeepSeek R1、Claude 3.7 Sonnet
  • 选择相对复杂页面
  • 测试方式分为使用 Figma MCP 和不使用 Figma MCP
  • 代码只看一次生成效果不做后续调整，以保证公平性
  • 工具使用 Cursor

如果不了解 MCP 或不知道如何在 Cursor 中使用 MCP 可以先看 Cursor+Figma MCP 设计稿还原如此简单 这篇文章

测试页面选择 Figma 上的一个页面如下图：

不使用 Figma MCP #

提示词如下：

### 你是谁

你是一位资深前端工程师和设计工程师，具备丰富的前端开发经验和出色的审美能力，擅长现代化的设计风格，精通前端开发技术。

### 你要做什么

根据用户提供的截图，完整实现其展示的界面效果。

### 具体要求

- **样式设计**  
  使用 Tailwind CSS CDN（例如 `https://cdn.tailwindcss.com`）实现所有样式。

- **图片素材**  
  从 Unsplash 获取高质量图片，图片需与设计风格一致，确保内容完整显示。

- **图标使用**  
  通过 Lucide Static CDN 引入图标（例如 `https://unpkg.com/lucide-static@latest/icons/XXX.svg`），保证图标风格统一且集成简单。

- **代码规范**  
  代码必须简洁高效，易于阅读和维护。

DeepSeek R1 #

由于 DeepSeek R1 在 Cursor 上不支持图片识别，我们只能在官网测试。

生成的 html 页面可以直接运行，由于设计稿比较长，下面生成的效果都以视频形式呈现。

—视频1

可以看到尽管给上传了设计稿，但是并没有按照设计稿的效果来实现，并且实现的功能和设计稿也不匹配。

GPT 4.1 #

再把同样的提示词发送给 GPT 4.1。GPT 4.1 会首先生成一个实现思路如下：

然后再根据思路分模块实现，最终效果下：

—视频2

可以看到只实现了一个模块的功能，并且样式问题较大，有些图片没显示。

Claude 3.7 #

把同样的提示词发送给 Claude 3.7。由于设计稿图片比较长，最初 Claude 3.7 试图一次生成完整代码，但出现了 edit_file 错误，自动调整为按部分生成。

Error calling tool ’edit_file'.

让我分部分实现，首先创建基本HTML结构和头部部分：

生成过程只需等待，然后接受模型生成的代码即可。

—视频2

可以看到还原度还算可以，尽管样式有些差别，但模块没有遗漏，图片里该有的功能都有。

在上面的测评中 Claude 3.7 完胜。

使用 Figma MCP #

接下来我们来测试使用 Figma MCP 后的效果。

点击 Cursor+Figma MCP 设计稿还原如此简单 了解 MCP 使用。

DeepSeek R1 #

发送链接后 DeepSeek 未调用 Figma MCP，因此生成代码和设计稿无关。

GPT 4.1 #

调用完 Figma MCP 后让模型使用 HTML+Tailwind CSS 实现页面，效果如下：

可以看到使用 Figma MCP 后效果有了大幅提升，所有的模块都实现了，但和设计稿仍有一定差异，同时页面中夹杂着中英文。

Claude 3.7 #

使用 Figma MCP 后效果更好，从 Figma 下载了图片，所有的模块有实现，并且因为我的提示词是中文，页面内容也都进行了翻译。

总结 #

对于复杂页面无论是否使用 Figma MCP 都未能 100% 还原设计稿。但在使用 Figma MCP 后 GPT4.1 效果得到明显提升，无论是否使用 Figma MCP 在页面生成领域 Claude3.7 更胜一筹。当然也可能 Cursor 对 DeepSeek 模型的兼容性不是很好导致 DeepSeek 未达到理想效果。实际上在非设计稿还原的场景下 DeepSeek 的推理能力是非常强的，因此可以根据实际情况选择更合适的模型。