AI编程：使用Trae + Claude生成原型图，提示词分享

最近在学习AI编程相关的东西，看到了有人分享的提示词，做了两个APP原型图，分享给大家。

成果
第一个是依据B站的 @探索者-子默 的视频，照着生成的AI改写原型图

第二个是我修改了一下提示词让AI生成做视频解析链接的APP原型图。

整体来说效果不错，微微的调整一下就可以直接拿来做产品原型。
这下独立开发者有福了。

提示词分享给大家：

### 原型界面图设计

我需要打造一个实用的「短视频免费下载的小程序」的工具，这个工具的核心需求如下：

#### 一、产品需求

1. **解析用户黏贴的连接**

- 解析用户黏贴的连接，后端服务进行解析

- 返回下载的视频地址，并在页面上能播放

- 展示视频标题

- 展示视频封面

- 用户可以点击按钮进行下载，下载封面，复制标题

- 还可以复制下载视频地址、下载封面地址

2. **我的个人相关功能**

- 我的tab能可以登录，可以显示登录的昵称和头像

- 用户可以分享、有邀请任务

---

#### 二、页面功能模块

1. **首页**

页面功能点：

**banner**

- 循环播放banner图片

**输入区**

- 输入框（用户黏贴的连接信息）

- 输入框右侧有一个黏贴按钮，能黏贴用户复制的连接信息

- 有一个解析按钮在输入框下面，呼吸效果

**展示文档信息**

- 展示使用教程

**底部导航栏：**

- 首页 tab

- 我的 tab

2. **解析结果页**

解析完成之后跳入此页

页面功能点：

**视频信息展示：**

- 在上面分三个小的tab

视频tab、封面tab、标题tab

**视频tab**

- 播放视频区域

- 视频标题

- 下载按钮

- 复制视频连接按钮

**封面tab**

- 封面展示

- 下载按钮

- 复制封面地址按钮

**标题tab**

- 标题展示在编辑框

- 复制按钮

3. **我的页**

页面功能点：

- 头像(不登录展示默认的头像)

- 昵称(不登录展示游客)

- 下面有不同的项目，有邀请任务、使用教程、历史纪录、设置

- 下面一行字介绍目前的版本号的

---

### 一、设计与实现要求

1. **需求分析与交互流程梳理**

根据产品目标，提炼核心功能点，明确各页面之间的交互路径。

2. **界面结构规划**

制定合理的页面布局方案，确保模块划分清晰、信息架构有逻辑性。

3. **视觉与UI设计**

参照iOS设计规范，结合现代化审美进行界面设计。使用提供的图片风格作为视觉参考，确保界面美观统一。

4. **可交互原型开发**

使用 HTML + Tailwind CSS 实现界面效果，尽量通过现有类名构建样式，减少自定义 CSS。图标建议引用 FontAwesome 或其他开源图标库，增强界面真实感。

5. **页面组织方式**

- 每个页面单独成文件（如：index.html, history.html, rewrite.html 等）

- index.html 作为主展示页，采用 iframe 嵌入其他页面进行预览展示

- 各 iframe 之间请保留一定垂直间距，避免内容重叠，提升可读性和展示体验

- 可以多行进行排列页面，确保直观。

---

### 二、效果增强建议

- 所有界面按 iPhone 16 Pro Max 尺寸设计，含圆角边框，模拟真实设备视图

- 使用 Unsplash、Pexels 等图库中的真实图片代替占位图，确保视觉效果贴近实用场景

- 顶部添加微信小程序样式的状态栏，底部固定导航栏，符合小程序设计习惯

---

请严格参照上述标准，完成具有开发指导意义的 HTML 原型页面，确保最终交付的代码具备实际落地能力。

生成原型用到的组件：

• fontawesome图标库
• tailwindcss
• html