惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

S
Secure Thoughts
P
Proofpoint News Feed
D
Darknet – Hacking Tools, Hacker News & Cyber Security
Project Zero
Project Zero
Cyberwarzone
Cyberwarzone
K
Kaspersky official blog
AWS News Blog
AWS News Blog
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
N
News | PayPal Newsroom
S
Schneier on Security
O
OpenAI News
S
Security @ Cisco Blogs
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
月光博客
月光博客
GbyAI
GbyAI
T
Tenable Blog
B
Blog
人人都是产品经理
人人都是产品经理
Engineering at Meta
Engineering at Meta
T
Troy Hunt's Blog
量子位
S
Security Affairs
Security Archives - TechRepublic
Security Archives - TechRepublic
The Cloudflare Blog
W
WeLiveSecurity
U
Unit 42
Application and Cybersecurity Blog
Application and Cybersecurity Blog
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
The GitHub Blog
The GitHub Blog
Cloudbric
Cloudbric
A
About on SuperTechFans
Hacker News - Newest:
Hacker News - Newest: "LLM"
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
Google DeepMind News
Google DeepMind News
博客园_首页
I
Intezer
P
Proofpoint News Feed
N
News and Events Feed by Topic
SecWiki News
SecWiki News
Microsoft Security Blog
Microsoft Security Blog
TaoSecurity Blog
TaoSecurity Blog
博客园 - 三生石上(FineUI控件)
NISL@THU
NISL@THU
Latest news
Latest news
H
Help Net Security
G
Google Developers Blog
博客园 - Franky
T
The Exploit Database - CXSecurity.com
Cisco Talos Blog
Cisco Talos Blog
Know Your Adversary
Know Your Adversary

十月指南

使用AI开发一个应用最好的时间是现在 Kimi K2 发布并开源,实测效果确实很强! Vibe Coding实战:从翻车到上线,我开发了一款提前还贷计算器小程序 告别熬夜写代码!AI编程让我用Vibe Coding轻松上线 10 + 工具 用Vibe Coding方式打造 AI 内容创作平台 我连代码都没写,却做出JSON格式化工具—Vibe Coding了解一下 AI 时代程序员生存指南 Cursor+Figma MCP 设计稿还原如此简单 MCP(模型上下文协议)是什么?它如何简化与API的AI集成 号外!我用Trae+Claude3.7开发的小程序上线啦 30分钟开发完成!Trae+Claude 3.7 打造小程序全流程揭秘! 5 分钟打造超酷小程序设计稿,Trae+Claude 3.7 太神了! 一句话生成设计稿,Trae+Claude 3.7 Sonnet,设计师也要被AI取代了 一句话生成应用!程序员效率翻倍的AI代码生成工具大盘点 我用AI创作了一首歌:Suno、海绵音乐、天工AI音乐生成效果测评 从哪吒2热潮到AI短片创作:AI视频实战测评 shadcn_ui:2024年最受欢迎的前端项目 实战:基于 Next.js+MoonShot API 开发一个 Github Trending 总结助手 技术篇:构建与部署 技术篇:Google 统计服务 技术篇:Next.js 多环境配置 技术篇:数据库-Prisma 技术篇:身份验证-NextAuth 技术篇:CSR、SSR、SSG、ISR 与客户端、服务端组件 技术篇:Next.js 路由与页面管理 技术篇:Next.js 项目结构 技术篇:Next.js 简介与概览 技术篇:从零开始掌握 Tailwind CSS 设计篇:独立开发设计入门 开篇:走上独立开发之路 Ollama:本地大模型运行指南 TooTool.net 理解 CSS 中的 Containing Block(包含块) 独立开发者工具大全(持续更新) TimeFlow 如何快速拥有一个技术博客 一个人从零开发上线一款App需要多少钱?终于有答案了! 深入理解HTTPS Nginx实战 Flutter Platform Channel 使用与源码分析 Android SDK类产品开发总结 360插件化框架 RePlugin 之 ClassLoader Hook Mac下Charles抓包配置 十一大西北体验 利用ContentProvider实现同步Binder macOS修改Android模拟器Hosts 走过 登山记 期待成长 小雨 静夜思 关于
GPT 4.1、DeepSeek R1、Claude 3.7 代码生成横评,谁才是设计稿还原之王?
十月 · 2025-04-21 · via 十月指南

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 的推理能力是非常强的,因此可以根据实际情况选择更合适的模型。