最近在学习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