↓

一句话生成设计稿，Trae+Claude 3.7 Sonnet，设计师也要被AI取代了

·203 字·1 分钟
AI

上个月 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需求】。
  • 以产品经理的视角，分析需求并构思网站的功能需求和信息架构。
  • 自行定义网站的主题、目标用户和核心功能，确保设计与需求的契合度。
  1. 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