就在昨日，curosr更新了0.47 版本，全面升级了claude-3.7-sonnet-thinking，搭载了全新claude-3.7-sonnet-max 模型，支持在聊天中一次上传多张图片。
参见： cursor更新日志
以往我们直接把设计图直接丢给cursor转代码，效果并不好。这次，让我们尝试使用claude-3.7-sonnet-max模型还原设计图UI。
其中，为了更好地提高代码质量，我使用了蓝湖 AI 转代码功能帮助我拿到设计图的具体样式。
具体步骤如下：
- 使用蓝湖上的设计图转代码工具（蓝湖已集成，可免费无限量使用）
- 把蓝湖 AI 生成的代码下载到项目中
- 使用 Cursor AI 读取该代码，加入图片，并输入提示词
- 提示词调优
- 手动调优，与剩下逻辑代码编写
以充值页面示例
1、使用蓝湖上的设计图转代码工具（得到粗糙源代码）
2、创建一个空文件， 把html和css代码都复制到项目中（得到蓝湖设计图具体色值字体大小等样式）
3、把空文件与设计图图片丢给 Cursor AI，并输入提示词，得到我们想要的代码。（提示词越详细，生成出来的细节与交互就越多）
这里需要注意的是，需要使用 claude-3.7-sonnet-thinking 或者 最新的claude-3.7-sonnet-max模型，claude-3.7-sonnet-max生成效果会更好，这里我选择的是max模型来生成，其他模型没有经过深度思考，效果会差一些。
瞬间就完成了，其中色值字体大小等基础样式，参考了蓝湖的代码样式，输出是完全正确的。随后，就得到一个还原度看起来还可以的界面了。除了导航栏有位置有点不太一样，需要微调一下，这里可以选择人工调整或者完善一下提示词再生成一下也可以。
通过多次生成比较：
claude-3.7-sonnet-thinking模型：消耗了2次快速请求，生成效果不错，但会出现部分细节样式错乱， 边框、阴影、渐变背景色无法识别，还原度 80%，复杂页面需要多次加强提示词来生成完善细节。
claude-3.7-sonnet-max模型：$0.05 per request and per tool use（我没看懂是怎么计费的，应该是独立计费？），生成效果很好，基本还原了设计图 UI，对于边框、阴影、渐变背景色也能识别，但也不是百分百准确，基本一次提示词就能完成，还原度：95%
除了还原设计图之外，还有很多有趣并且实用的功能也能实现。
比如我让他填写 excel，生成 excel 统计数等等都能完成。
还有使用 MCP 搜索、MCP 自动化测试，更多更多...不禁让人感到危机感十足。
