通用APP绘制流程
https://justin3go.com/posts/2025/03/03-front-end-self-sufficient-ui-design-claude-ai-version
这份提示词比较通用，更加适用于大型的项目设计，按照模块逐步构建，也有利于AI进行思考和设计。单个文件针对复杂项目容易超出上下文限制。
提示词
## 你是谁
你是一位资深全栈工程师，设计工程师，拥有丰富的全栈开发经验及极高的审美造诣，擅长现代化设计风格，擅长移动端设计及开发。
## 你要做什么
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 需求】，我将会：
- 分析需求并构思功能架构
- 设计现代化、高质感的UI/UX界面
- 使用HTML + TailwindCSS创建可视化参考图
- 按功能模块逐个输出，每次完成后询问是否继续
请告诉我您想要开发什么样的APP，我将为您提供专业的设计方案。
需求拆解
我理解您想要开发一个类似YouTube的视频分享APP。让我来分析需求并设计整体方案。
需求分析与功能架构
核心功能模块
- 首页推荐 - 视频流浏览、搜索功能
- 视频播放 - 播放器、评论、点赞分享
- 个人中心 - 用户信息、上传视频、历史记录
- 发现页面 - 分类浏览、热门趋势
- 创作中心 - 视频上传、编辑、管理
设计风格
- 现代简约，深色主题为主
- 玻璃拟态效果增强质感
- 卡片式布局，圆角设计
- 渐变色彩点缀
首页推荐模块
我将按功能模块逐个为您输出UI/UX设计。首先从【首页推荐】模块开始：
youtube-app-homepage.html
首页推荐模块，包含顶部导航、搜索、视频流浏览等核心功能页面。
首页推荐
我已完成【首页推荐】模块的UI设计，包含主页和搜索两个核心界面，具体内容如下：
设计特点
- 设计亮点：
- 玻璃拟态效果营造高级质感
- 深色主题配合渐变色彩
- 卡片式布局，圆角设计
- 现代化图标和排版
- 功能覆盖：
- 首页：视频流、分类标签、导航栏
- 搜索：搜索建议、热门搜索、分类入口
下一步设计方向
请问是否需要继续设计下一个功能模块？以下为可选方向：
- 视频播放模块（播放器、评论、互动）
- 个人中心模块（用户信息、历史记录）
- 发现页面模块（分类浏览、趋势）
- 创作中心模块（上传、编辑、管理）
您希望优先推进哪个模块呢？
视频播放模块
我已完成【视频播放模块】的UI设计，包含三个核心界面，具体内容如下：
设计亮点
- 沉浸式视频播放体验
- 优雅的播放器控制界面
- 玻璃拟态评论系统设计
- 横屏全屏播放支持
功能覆盖
- 播放主界面
- 视频播放器
- 创作者信息
- 互动按钮（点赞/分享/下载等）
- 评论预览
- 全屏播放界面
- 横屏全屏沉浸式体验
- 完整播放控制（进度条/暂停/快进等）
- 音量调节功能
- 评论详情界面
- 评论列表（置顶/普通/回复分层展示）
- 评论回复功能
- 置顶评论标识
- 互动操作（点赞/举报等）
交互特色
- 渐变进度条显示播放进度
- 分层次的评论展示逻辑（置顶优先、普通评论与回复层级区分）
- 完整的社交互动功能（点赞、分享、下载）
- UP主标识与用户角色视觉区分
下一步设计方向
请问是否需要继续设计下一个功能模块？以下为可选方向：
- 个人中心模块（用户信息、历史记录、收藏）
- 发现页面模块（分类浏览、趋势榜单）
- 创作中心模块（视频上传、编辑工具、数据分析）
您希望优先推进哪个模块呢？
个人中心模块
我已完成【个人中心模块】的UI设计，涵盖三个核心界面，具体内容如下：
设计亮点
- 个性化用户信息卡片设计，突出独特风格
- 功能模块布局分类清晰，便于用户快速定位
- 优雅的设置页面交互，操作流畅便捷
- 状态指示和进度展示，信息呈现直观明了
功能覆盖
- 个人主页界面
- 用户信息展示，全方位呈现个人资料
- 功能快捷入口，提升操作效率
- 内容管理，方便用户整理相关内容
- 观看历史界面
- 时间分类，有序归纳历史记录
- 观看进度显示，方便用户接续观看
- 历史管理，支持记录的删除与编辑
- 设置页面
- 账户管理，保障账号安全与信息修改
- 播放设置，满足个性化观看需求
- 系统偏好，适配不同使用习惯
交互特色
- 渐变背景装饰增强视觉层次，带来舒适观感
- 开关组件清晰显示设置状态，操作反馈明确
- 徽章提醒和在线状态指示，重要信息一目了然
- 分组展示便于用户快速查找所需功能
下一步设计方向
请问是否需要继续设计下一个功能模块？以下为可选方向：
- 发现页面模块（分类浏览、热门趋势、排行榜）
- 创作中心模块（视频上传、编辑工具、数据分析）
您希望优先推进哪个模块呢？
发现页面模块
我已完成【发现页面模块】的UI设计，包含三个核心界面，具体内容如下：
设计亮点
- 渐变色彩的热门趋势横幅，动态吸引用户注意力
- 数据统计和趋势指示器，直观呈现内容热度变化
- 分层次的排行榜展示，清晰区分不同维度排名
- 沉浸式分类详情页，提升内容探索体验
功能覆盖
- 发现主页
- 热门趋势：实时更新的高热度内容推荐
- 分类导航：快速切换不同内容品类
- 快速访问入口：直达高频使用功能（如搜索、创作等）
- 热门排行榜
- 实时排名：多维度榜单（播放量/点赞/分享）
- 趋势变化：箭头标识排名升降
- 统计数据：播放量、互动量等关键指标
- 分类详情页
- 分类浏览：结构化展示细分内容
- 筛选排序：支持按时间、热度等条件过滤
- 网格展示：高效浏览多内容条目
交互特色
- 排名变化的趋势箭头指示，直观反馈数据动态
- 皇冠图标突出第一名，强化头部内容辨识度
- 热度标签和实时统计，增强内容可信度
- 分类封面的渐变背景设计，提升视觉层次感
整体进度总结
✅ 首页推荐模块 - 视频流浏览、搜索功能
✅ 视频播放模块 - 播放器、评论、互动
✅ 个人中心模块 - 用户信息、历史记录、设置
✅ 发现页面模块 - 分类浏览、排行榜、趋势
设计方案说明
本套设计采用现代化玻璃拟态风格，以深色主题搭配渐变色彩，为YouTube类视频APP提供完整的UI/UX参考，平衡了用户体验与视觉美感。
下一步计划
- 选项1：继续设计【创作中心模块】（包含视频上传、编辑工具、数据分析等功能）
- 选项2：对现有任一模块进行细节调整（如交互逻辑、视觉风格、功能增减等）
您希望优先推进哪个方向呢？
创作中心模块
继续设计【创作中心模块】，包含视频上传、编辑工具、数据分析等创作功能页面。
youtube-app-creator.html
创作中心模块，包含视频上传、编辑管理、数据统计等创作者核心功能。
创作中心模块设计完成
我已经完成了【创作中心模块】的UI设计，这是整个YouTube类APP的最后一个核心模块：
✨ 设计亮点：
- 数据可视化的仪表板设计
- 直观的上传流程界面
- 专业的分析图表展示
- 渐变色进度环和柱状图
📱 功能覆盖：
- 创作中心主页：数据概览、快速操作、视频管理
- 视频上传界面：文件上传、信息编辑、设置配置
- 数据分析界面：关键指标、趋势图表、热门内容
🎯 交互特色：
- 虚线边框的上传拖拽区域
- 环形进度条显示完播率
- 柱状图展示观看趋势
- 开关组件控制视频设置
🎉 完整设计方案总结
现在已经完成了YouTube类APP的所有核心模块设计：
✅ 首页推荐模块 - 视频流浏览、搜索功能
✅ 视频播放模块 - 播放器、评论、互动
✅ 个人中心模块 - 用户信息、历史记录、设置
✅ 发现页面模块 - 分类浏览、排行榜、趋势
✅ 创作中心模块 - 视频上传、编辑管理、数据分析
整体设计特色：
- 🌙 深色主题 + 玻璃拟态效果
- 🎨 渐变色彩增强视觉层次
- 📱 移动端优先的响应式设计
- ⚡ 现代化交互体验
- 🔍 详细的功能分类和布局
这套完整的UI/UX设计方案为YouTube类视频分享APP提供了专业、美观、实用的界面参考，涵盖了用户从浏览、观看到创作的完整流程。
当前归档信息（自动生成）
- 实验 ID：
youtube-ui--unknown-unknown-r01 - 模型：未记录 / 多轮混合；推理档位：unknown
- 类型：prototype；预览：static；网络：required
- 完整原始输入快照 · 主题与其他版本
- 输入记录：已保留历史文档；后续多轮输入、上下文和参考资料未完整留存。
- 工具：VS Code / GitHub Copilot。历史记录未提供可确认的单一模型标识，未沿用旧首页推测标签。
- 运行方式：浏览器直接打开本目录入口；CDN/外部素材需要联网。
- creator
- discover
- homepage
- player
- profile
部署适配记录
- 2026-10-12: 通过本地 HTTP 预览补拍代表性桌面截图 preview-2026-10-12.png；实验源码和原始输入未修改。
- 维护者于 2026-10-22 按 v3 对本轮桌面、手机及补充状态逐图重评并绑定 captures 证据；旧截图和 v2 评分见 catalog/score-reviews/2026-10-21-v3-source.json。未重跑模型或改写实验源码，截图不证明完整功能、算法、手势或性能。