ai-coding-demo

通用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 需求】，我将会：

  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. 评论详情界面
    • 评论列表（置顶/普通/回复分层展示）
    • 评论回复功能
    • 置顶评论标识
    • 互动操作（点赞/举报等）

交互特色

下一步设计方向

请问是否需要继续设计下一个功能模块？以下为可选方向：

  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提供了专业、美观、实用的界面参考，涵盖了用户从浏览、观看到创作的完整流程。

This site is open source. Improve this page.