003 用Trae生成产品原型

Java突击队2025/12/19大约 6 分钟

003 用Trae生成产品原型

前言

前面两篇文章主要是为了方便0基础的新手，也能够跟着一步步的用AI做开发。

我给大家介绍了目前国内比较好用的AI idea开发工具：Trae的一些使用方法。（如果你是一名资深的开发大佬，前面两篇文章可以直接跳过）

从今天的这篇文章开始，正式介绍我用Trae从产品原型设计、到代码结构设计、到数据库表设计、到小程序和后端代码生成、前后端的代码联调、BUG修复、到生成测试数据、到跑完整的流程的整个过程。

希望对你会有所帮助。

1 以前的开发流程

一般的大公司，以往在开发一款产品之前，流程是下面这样的：

产品经理设计产品原型。
做需求评审。
美工根据产品原型，转换成静态的图片效果。
交互设计师会根据产品原型和静态的图片中的效果，制作成动态的html页面。
前端开发工程师，会将html页面转换成前端项目，会将图片进行切图。
后端开发工程师，需要要前端的要求，给前端开发工程师，提供相应的接口。
前端开发工程师和后端开发工程师，完成了各自的代码开发之后，需要进行联调和测试。
后端开发工程师需要配置造一些测试数据。
如果产品原型的功能有问题，需要找产品经理确认，修改产品原型，然后美工、交互设计师、前端开发工程师、后端开发工程师要一起修改。

整个流程非常繁琐，开发周期很长。

但现在有个好消息是：用AI可以简化这个繁琐的流程，提升开发效率。

如果你是一个后端开发工程师，那么恭喜你，使用AI你可以直接晋升为一个全栈开发工程师。

那么，问题来了，我们如何用AI设计一个款产品原型呢？

2 创建一个项目

首先在电脑上创建一个存放项目的目录，比如：it刷题小程序，这之前创建的目录：

然后打开电脑中安装好的Trae。

选择打开文件夹，选择我们刚刚创建的目录：

打开项目之后，右边窗口切换到Builder模式：

AI输入框中的大模型切换到Claude-3.7-Sonnet：

Trade我们已经配置好了。

接下来，我们正式开始生成产品原型。

3 输入提示词

我们在右边的AI输入框中输入下面的提示词：

我想开发一个 {IT面试题库小程序}，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原界面可以直接用于开发：
1、用户体验分析：先分析这个小程序的主要功能和用户需求，确定核心交互逻辑。
2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。
3、高保真 UI 设计：作为 UI 设计师，设计贴近真实小程序设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
4、HTML 原型实现：使用 HTML + Tailwind CSS (或 Bootstrap) 生成所有原型界面，并使用 FontAwesome (或其他开源 UI 组件) 让界更加精美、接近真实的 App 设计。
拆分代码文件，保持结构清晰：
5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。
- index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺示在 index 页面中，而不是跳转链接。