上个月 Anthropic 发布了 Claude 3.7 Sonnet，大家发现 Claude 3.7 Sonnet 模型在前端页面生成方面效果非常不错，于是很多人都用它来生成设计稿。今天我为大家实测了一下，不得不说 Claude 审美真的在线，我以记账类App为例，可以先看下生成效果：
效果演示 #
我用的工具是字节的 AI IDE Trae海外版，因为目前可以免费使用 Claude 3.7 Sonnet。另外 Trae 国内版本也已经发布。
Trae 是国内首个 AI IDE，深度理解中文开发场景。AI 高度集成于 IDE 环境之中，为你带来比 AI 插件更加流畅、准确、优质的开发体验。
Claude 是由美国科技公司 Anthropic 开发的人工智能模型。
国内版官网： https://www.trae.com.cn
支持模型：
- DeepSeek R1
- DeepSeek V3
海外版官网： https://www.trae.ai
支持模型：
- Claude 3.7 Sonnet
- Claude 3.5 Sonnet
- DeepSeek R1
- DeepSeek V3
安装好 Trae 后，我们直接打开，主页面如下：
我们选择 Builder 模式，Builder 模式可以帮助你从 0 到 1 开发一个完整的项目。你可以将它无缝融入到项目构建的流程中。 在 Builder 模式下，AI 助手在回答时会根据需求调用不同的工具，包括分析代码文件的工具、编辑代码文件的工具、运行命令的工具等等。从而让回答更精确、更有效。
提示词设置 #
你是谁 #
你是一位资深全栈工程师和设计工程师，拥有丰富的全栈开发经验和卓越的审美能力，擅长现代化设计风格，尤其精通移动端设计与开发。
你要做什么 #
- 需求分析与构思
- 用户将提供一个【App需求】。
- 以产品经理的视角，分析需求并构思网站的功能需求和信息架构。
- 自行定义网站的主题、目标用户和核心功能，确保设计与需求的契合度。
- UI/UX 设计与开发
- 根据构思的功能需求，使用 HTML 和 Tailwind CSS 设计高质量的 UI/UX 参考图。
- 按功能模块划分（每个功能可能包含多个页面），为每个功能输出一个独立的 HTML 文件。
- 每个 HTML 文件中包含该功能的所有页面，页面以横向排列的 mockup 边框形式展示，彼此独立且互不干扰。
- 每完成一个功能的 UI/UX 参考图后，提示用户“是否继续”。若用户回复“继续”，则根据步骤设计并输出下一个功能的 UI/UX 参考图。
具体要求 #
- 设计标准
- 设计需高级且有质感，运用玻璃拟态等视觉效果提升层次感。
- 遵守现代化设计规范，注重 UI 细节，确保界面美观、直观且用户友好。
- 特别关注移动端响应式设计，确保在不同设备上均有良好展示效果。
- 技术实现
- 使用 Tailwind CSS CDN（例如
https://cdn.tailwindcss.com）完成样式设计，避免手动编写内联或外部 CSS。 - 图片素材从 Unsplash 获取，确保高质量且与设计风格匹配，界面中不得出现滚动条。
- 图标使用 Lucide Static CDN 引入（格式如
https://unpkg.com/lucide-static@latest/icons/XXX.svg），保持一致性和易用性。 - 每个功能的页面在单个 HTML 文件中实现，使用简单的 mockup 边框（例如虚线或阴影）分隔，横向排列，互不影响。
- 代码规范
- 代码需简洁高效，易于维护，避免复杂的嵌套和冗余选择器。
- 仅在最终输出结果中提供完整的 HTML 代码，思考过程不包含代码片段。
把提示词发送给 Trae 后，Trae 的回复如下，然后我们让 Trae 设计记账类 App。
接下来就是一步一步继续，自此过程中有可能出现
排队中... 当前请求过多，队列位置 37，请稍作等待。
我们耐心等待就好了。
整体生成完成后，我发现首页的图标显示不出来，然后把问题发送给 Trae 让其自行修复，很快就把问题修复完毕。
最后共生成了7个页面如下：
.
├── account-management.html
├── bill-reminders.html
├── budget-management.html
├── data-analysis.html
├── expense-tracking.html
├── financial-goals.html
└── index.html
首页（作为导航） #
我的账目 #
预算管理 #
数据分析 #
账户管理 #
理财目标 #
账单提醒 #
总结 #
可以看到上面的生成效果非常不错，完全可以作为设计稿了。据说已经有设计师使用 Claude 接单了。注意这里生成的还是 html 格式（静态页面，不具有交互逻辑），如果再让 Claude 加上逻辑，是不是很快就可以发布上线了。总的来说，Claude 3.7 Sonnet 在前端页面生成方面的表现令人叹服，其设计能力、代码质量和开发效率都达到了专业水准。结合 Trae AI IDE 的强大支持，它不仅是设计师的得力助手，也为开发者开启了高效开发的新可能。
参考 #
https://justin3go.com/posts/2025/03/03-front-end-self-sufficient-ui-design-claude-ai-version