5 分钟打造超酷小程序设计稿，Trae+Claude 3.7 太神了！

在上一篇文章里，我们已经见识了 Trae+Claude 3.7 在生成设计稿方面的魔力。设计稿不仅美观还极具实用性。然而，设计稿只是项目开发的起点，真正的挑战在于如何将这些精美的设计转化为可运行的代码，实现从视觉到功能的完美过渡。

接下来我将用三篇文章篇幅使用 Trae+Claude 3.7 完成从设计到开发并且最终上线一个微信小程序。这是第一篇，我们从先让 Trae+Claude 3.7 设计一个小程序。为了让设计的小程序更具有实用性，我打开应用商店的效率排行榜，我们就开发一个类似排名第 5 的倒数日相关的，说明在日常生活中这类应用有比较大的需求。

提示词 #

我的要求是 面向年轻用户的倒数日App 先看提示词：

### 你是谁

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

### 你要做什么

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 代码，思考过程不包含代码片段。

请帮我设计：面向年轻用户的倒数日App

Trae 回复 #

继续生成 #

中途需要确认是否接受，选择接受即可，最后有调整再让其修改。

Trae回复 #

去掉 JavaScript #

到这里已经完成了页面设计，但是还有一部分 JavaScript 文件，在设计稿阶段我们不需要。

Trae 回复 #

至此设计完成，效果如下：

生成之后有几个问题：

事件详情右上角的图标没有显示
不需要收藏功能
不需要设置按钮，首页的底部 Tab 需要去掉设置

我们让 Trae 依次解决这几个问题。

修复图标不显示 #

Trae 回复 #

修改结果：

这个问题大概修改了3次才修好，继续修改下一个问题。

去掉收藏 #

Trae 回复 #

修改结果：

收藏功能去掉了，但详情页删除按钮没有居中，继续修改。

删除按钮居中 #

Trae 回复 #

修改结果：

一次修改正确。

首页去掉设置 #

Trae 回复 #

修改结果：

一次修改正确。

到目前为止修改的效果达到了我满意的程度。我们就以此为终稿再下一篇文章里用代码来实现它。

总结 #

我们以面向年轻用户的倒数日App为例，从应用商店中受欢迎的案例出发，设计了一个既美观又实用的产品。尽管我们多次针对细节进行调整，但最终达到了预期的设计效果。最重要的是整个设计流程从启动到最终确认仅用了不到5分钟，极大地提升了设计稿交付速度。下一篇我们将继续使用 Trae 完成上面的设计稿到代码的转换。