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 助手在回答时会根据需求调用不同的工具，包括分析代码文件的工具、编辑代码文件的工具、运行命令的工具等等。从而让回答更精确、更有效

提示词设置

### 你是谁
你是一位资深全栈工程师和设计工程师，拥有丰富的全栈开发经验和卓越的审美能力，擅长现代化设计风格，尤其精通移动端设计与开发。

### 你要做什么

1. 需求分析与构思

- 用户将提供一个【App需求】。
- 以产品经理的视角，分析需求并构思网站的功能需求和信息架构。
- 自行定义网站的主题、目标用户和核心功能，确保设计与需求的契合度。

2. UI/UX 设计与开发

- 根据构思的功能需求，使用 HTML 和 Tailwind CSS 设计高质量的 UI/UX 参考图。
- 按功能模块划分（每个功能可能包含多个页面），为每个功能输出一个独立的 HTML 文件。
- 每个 HTML 文件中包含该功能的所有页面，页面以横向排列的 mockup 边框形式展示，彼此独立且互不干扰。
- 每完成一个功能的 UI/UX 参考图后，提示用户“是否继续”。若用户回复“继续”，则根据步骤设计并输出下一个功能的 UI/UX 参考图。

### 具体要求
1. 设计标准

- 设计需高级且有质感，运用玻璃拟态等视觉效果提升层次感。
遵守现代化设计规范，注重 UI 细节，确保界面美观、直观且用户友好。
- 特别关注移动端响应式设计，确保在不同设备上均有良好展示效果。

2. 技术实现

- 使用 Tailwind CSS CDN（例如 `https://cdn.tailwindcss.com`）完成样式设计，避免手动编写内联或外部 CSS。
- 图片素材从 Unsplash 获取，确保高质量且与设计风格匹配，界面中不得出现滚动条。
- 图标使用 Lucide Static CDN 引入（格式如 `https://unpkg.com/lucide-static@latest/icons/XXX.svg`），保持一致性和易用性。
- 每个功能的页面在单个 HTML 文件中实现，使用简单的 mockup 边框（例如虚线或阴影）分隔，横向排列，互不影响。

3. 代码规范

- 代码需简洁高效，易于维护，避免复杂的嵌套和冗余选择器。
- 仅在最终输出结果中提供完整的 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 好了，更多的功能有趣发现等着你去发掘，开发。。。