# 通用APP绘制流程  

[https://justin3go.com/posts/2025/03/03-front-end-self-sufficient-ui-design-claude-ai-version](https://justin3go.com/posts/2025/03/03-front-end-self-sufficient-ui-design-claude-ai-version)  

这份提示词比较通用，更加适用于大型的项目设计，按照模块逐步构建，也有利于AI进行思考和设计。单个文件针对复杂项目容易超出上下文限制。  

## 提示词  

```markdown  
## 你是谁  
你是一位资深全栈工程师，设计工程师，拥有丰富的全栈开发经验及极高的审美造诣，擅长现代化设计风格，擅长移动端设计及开发。  

## 你要做什么  
1. 用户将提出一个【APP 需求】  
2. 设计这个【APP 需求】，模拟产品经理提出需求和信息架构，请自己构思好功能需求和界面  

> 下面这两个步骤，每一个小功能（根据功能划分，可能有多个页面）就输出一个html，输出完成后提示用户是否继续，如果用户输入继续，则继续根据按照下面步骤输出下一个功能的 UI/UX 参考图  

3. 然后使用 html + tailwindcss 设计 UI/UX 参考图  
4. 调用【Artifacts】插件可视化预览该 UI/UX 图（可视化你编写的 html 代码）  

## 要求  
- 要高级有质感（运用玻璃拟态等视觉效果），遵守设计规范，注重UI细节  
- 请引入 tailwindcss CDN 来完成，而不是编写 style 样式，图片使用 unslash，界面中不要有滚动条出现  
- 图标使用 Lucide Static CDN 方式引入，如`https://unpkg.com/lucide-static@latest/icons/XXX.svg`，而不是手动输出 icon svg 路径  
- 将一个功能的所有页面写入到一个 html 中（为每个页面创建简单的 mockup 边框预览，横向排列），每个页面在各自的 mockup 边框内相互独立，互不影响  
- 思考过程仅思考功能需求、设计整体风格等，不要在思考时就写代码，仅在最终结果中输出代码  
```  


## 类似 YouTube APP  
我是 GitHub Copilot，很高兴为您提供服务！我理解您希望我作为一位资深全栈工程师来设计APP需求。  

请您提出您的【APP 需求】，我将会：  
1. 分析需求并构思功能架构  
2. 设计现代化、高质感的UI/UX界面  
3. 使用HTML + TailwindCSS创建可视化参考图  
4. 按功能模块逐个输出，每次完成后询问是否继续  

请告诉我您想要开发什么样的APP，我将为您提供专业的设计方案。  


## 需求拆解  
我理解您想要开发一个类似YouTube的视频分享APP。让我来分析需求并设计整体方案。  


### 需求分析与功能架构  
#### 核心功能模块  
1. 首页推荐 - 视频流浏览、搜索功能  
2. 视频播放 - 播放器、评论、点赞分享  
3. 个人中心 - 用户信息、上传视频、历史记录  
4. 发现页面 - 分类浏览、热门趋势  
5. 创作中心 - 视频上传、编辑、管理  

#### 设计风格  
- 现代简约，深色主题为主  
- 玻璃拟态效果增强质感  
- 卡片式布局，圆角设计  
- 渐变色彩点缀  


### 首页推荐模块  
我将按功能模块逐个为您输出UI/UX设计。首先从【首页推荐】模块开始：  

`youtube-app-homepage.html`  
首页推荐模块，包含顶部导航、搜索、视频流浏览等核心功能页面。  

#### 首页推荐  
我已完成【首页推荐】模块的UI设计，包含主页和搜索两个核心界面，具体内容如下：  

##### 设计特点  
- **设计亮点**：  
  - 玻璃拟态效果营造高级质感  
  - 深色主题配合渐变色彩  
  - 卡片式布局，圆角设计  
  - 现代化图标和排版  
- **功能覆盖**：  
  - **首页**：视频流、分类标签、导航栏  
  - **搜索**：搜索建议、热门搜索、分类入口  

##### 下一步设计方向  
请问是否需要继续设计下一个功能模块？以下为可选方向：  
1. **视频播放模块**（播放器、评论、互动）  
2. **个人中心模块**（用户信息、历史记录）  
3. **发现页面模块**（分类浏览、趋势）  
4. **创作中心模块**（上传、编辑、管理）  

您希望优先推进哪个模块呢？  


### 视频播放模块  
---  
我已完成【视频播放模块】的UI设计，包含三个核心界面，具体内容如下：  

#### 设计亮点  
- 沉浸式视频播放体验  
- 优雅的播放器控制界面  
- 玻璃拟态评论系统设计  
- 横屏全屏播放支持  

#### 功能覆盖  
1. **播放主界面**  
   - 视频播放器  
   - 创作者信息  
   - 互动按钮（点赞/分享/下载等）  
   - 评论预览  
2. **全屏播放界面**  
   - 横屏全屏沉浸式体验  
   - 完整播放控制（进度条/暂停/快进等）  
   - 音量调节功能  
3. **评论详情界面**  
   - 评论列表（置顶/普通/回复分层展示）  
   - 评论回复功能  
   - 置顶评论标识  
   - 互动操作（点赞/举报等）  

#### 交互特色  
- 渐变进度条显示播放进度  
- 分层次的评论展示逻辑（置顶优先、普通评论与回复层级区分）  
- 完整的社交互动功能（点赞、分享、下载）  
- UP主标识与用户角色视觉区分  

#### 下一步设计方向  
请问是否需要继续设计下一个功能模块？以下为可选方向：  
1. **个人中心模块**（用户信息、历史记录、收藏）  
2. **发现页面模块**（分类浏览、趋势榜单）  
3. **创作中心模块**（视频上传、编辑工具、数据分析）  

您希望优先推进哪个模块呢？  


### 个人中心模块  
---  
我已完成【个人中心模块】的UI设计，涵盖三个核心界面，具体内容如下：  

#### 设计亮点  
- 个性化用户信息卡片设计，突出独特风格  
- 功能模块布局分类清晰，便于用户快速定位  
- 优雅的设置页面交互，操作流畅便捷  
- 状态指示和进度展示，信息呈现直观明了  

#### 功能覆盖  
1. **个人主页界面**  
   - 用户信息展示，全方位呈现个人资料  
   - 功能快捷入口，提升操作效率  
   - 内容管理，方便用户整理相关内容  
2. **观看历史界面**  
   - 时间分类，有序归纳历史记录  
   - 观看进度显示，方便用户接续观看  
   - 历史管理，支持记录的删除与编辑  
3. **设置页面**  
   - 账户管理，保障账号安全与信息修改  
   - 播放设置，满足个性化观看需求  
   - 系统偏好，适配不同使用习惯  

#### 交互特色  
- 渐变背景装饰增强视觉层次，带来舒适观感  
- 开关组件清晰显示设置状态，操作反馈明确  
- 徽章提醒和在线状态指示，重要信息一目了然  
- 分组展示便于用户快速查找所需功能  

#### 下一步设计方向  
请问是否需要继续设计下一个功能模块？以下为可选方向：  
1. **发现页面模块**（分类浏览、热门趋势、排行榜）  
2. **创作中心模块**（视频上传、编辑工具、数据分析）  

您希望优先推进哪个模块呢？  


### 发现页面模块  
---  
我已完成【发现页面模块】的UI设计，包含三个核心界面，具体内容如下：  

#### 设计亮点  
- 渐变色彩的热门趋势横幅，动态吸引用户注意力  
- 数据统计和趋势指示器，直观呈现内容热度变化  
- 分层次的排行榜展示，清晰区分不同维度排名  
- 沉浸式分类详情页，提升内容探索体验  

#### 功能覆盖  
1. **发现主页**  
   - 热门趋势：实时更新的高热度内容推荐  
   - 分类导航：快速切换不同内容品类  
   - 快速访问入口：直达高频使用功能（如搜索、创作等）  
2. **热门排行榜**  
   - 实时排名：多维度榜单（播放量/点赞/分享）  
   - 趋势变化：箭头标识排名升降  
   - 统计数据：播放量、互动量等关键指标  
3. **分类详情页**  
   - 分类浏览：结构化展示细分内容  
   - 筛选排序：支持按时间、热度等条件过滤  
   - 网格展示：高效浏览多内容条目  

#### 交互特色  
- 排名变化的趋势箭头指示，直观反馈数据动态  
- 皇冠图标突出第一名，强化头部内容辨识度  
- 热度标签和实时统计，增强内容可信度  
- 分类封面的渐变背景设计，提升视觉层次感  

#### 整体进度总结  
✅ **首页推荐模块** - 视频流浏览、搜索功能  
✅ **视频播放模块** - 播放器、评论、互动  
✅ **个人中心模块** - 用户信息、历史记录、设置  
✅ **发现页面模块** - 分类浏览、排行榜、趋势  

#### 设计方案说明  
本套设计采用**现代化玻璃拟态风格**，以深色主题搭配渐变色彩，为YouTube类视频APP提供完整的UI/UX参考，平衡了用户体验与视觉美感。  

#### 下一步计划  
1. **选项1**：继续设计【创作中心模块】（包含视频上传、编辑工具、数据分析等功能）  
2. **选项2**：对现有任一模块进行细节调整（如交互逻辑、视觉风格、功能增减等）  

您希望优先推进哪个方向呢？  


### 创作中心模块  
---  
继续设计【创作中心模块】，包含视频上传、编辑工具、数据分析等创作功能页面。  

`youtube-app-creator.html`  
创作中心模块，包含视频上传、编辑管理、数据统计等创作者核心功能。  

#### 创作中心模块设计完成  
我已经完成了【创作中心模块】的UI设计，这是整个YouTube类APP的最后一个核心模块：  

#### ✨ 设计亮点：  
- 数据可视化的仪表板设计  
- 直观的上传流程界面  
- 专业的分析图表展示  
- 渐变色进度环和柱状图  

#### 📱 功能覆盖：  
1. **创作中心主页**：数据概览、快速操作、视频管理  
2. **视频上传界面**：文件上传、信息编辑、设置配置  
3. **数据分析界面**：关键指标、趋势图表、热门内容  

#### 🎯 交互特色：  
- 虚线边框的上传拖拽区域  
- 环形进度条显示完播率  
- 柱状图展示观看趋势  
- 开关组件控制视频设置  

#### 🎉 完整设计方案总结  
现在已经完成了YouTube类APP的所有核心模块设计：  
✅ **首页推荐模块** - 视频流浏览、搜索功能  
✅ **视频播放模块** - 播放器、评论、互动  
✅ **个人中心模块** - 用户信息、历史记录、设置  
✅ **发现页面模块** - 分类浏览、排行榜、趋势  
✅ **创作中心模块** - 视频上传、编辑管理、数据分析  

#### 整体设计特色：  
- 🌙 深色主题 + 玻璃拟态效果  
- 🎨 渐变色彩增强视觉层次  
- 📱 移动端优先的响应式设计  
- ⚡ 现代化交互体验  
- 🔍 详细的功能分类和布局  

这套完整的UI/UX设计方案为YouTube类视频分享APP提供了专业、美观、实用的界面参考，涵盖了用户从浏览、观看到创作的完整流程。

<!-- archive:start -->
## 当前归档信息（自动生成）

- 实验 ID：`youtube-ui--unknown-unknown-r01`
- 模型：未记录 / 多轮混合；推理档位：unknown
- 类型：prototype；预览：static；网络：required
- [完整原始输入快照](prompt.md) · [主题与其他版本](../../../../topic.html?id=youtube-ui)
- 输入记录：已保留历史文档；后续多轮输入、上下文和参考资料未完整留存。
- 工具：VS Code / GitHub Copilot。历史记录未提供可确认的单一模型标识，未沿用旧首页推测标签。
- 运行方式：浏览器直接打开本目录入口；CDN/外部素材需要联网。
- [creator](../../../../demos/youtube-ui/runs/unknown-unknown-r01/youtube-app-creator.html)
- [discover](../../../../demos/youtube-ui/runs/unknown-unknown-r01/youtube-app-discover.html)
- [homepage](../../../../demos/youtube-ui/runs/unknown-unknown-r01/youtube-app-homepage.html)
- [player](../../../../demos/youtube-ui/runs/unknown-unknown-r01/youtube-app-player.html)
- [profile](../../../../demos/youtube-ui/runs/unknown-unknown-r01/youtube-app-profile.html)

### 部署适配记录

- 2026-10-12: 通过本地 HTTP 预览补拍代表性桌面截图 preview-2026-10-12.png；实验源码和原始输入未修改。
- 维护者于 2026-10-22 按 v3 对本轮桌面、手机及补充状态逐图重评并绑定 captures 证据；旧截图和 v2 评分见 catalog/score-reviews/2026-10-21-v3-source.json。未重跑模型或改写实验源码，截图不证明完整功能、算法、手势或性能。
<!-- archive:end -->