YouTube · UI 模块设计参考
原始提示词
完整原始输入见 prompt.md。
运行与复盘
按 v1 任务正文“资深全栈 + 设计视角 → APP 功能拆解 → 多个 mockup 边框横向排列 → 玻璃拟态 → Tailwind + Lucide CDN → 图片使用 Unsplash”执行。
页面与功能（每个 mockup 独立）：
- 首页：logo、搜索、过滤 chips、视频卡、底部 Tab（中间凸起 FAB）
- 播放器：大封面、点赞 / 点踩 / 分享 / 下载 / 剪辑、简介
- 发现：分类瀑布、热门 hashtag
- 创作中心：上传 / 直播 / 短片 / 数据分析入口
- 订阅：关注头像横滚 + 视频流
- 个人中心：头像、统计、观看记录、稍后再看、隐私
实现要点：
- 所有 mockup 以 iPhone (390 × 800) 为基准，使用 CSS 模拟设备边框、刘海、状态栏
- Tailwind 通过 CDN 注入；Lucide 图标通过
unpkg.com/lucide-static@latest/icons/*.svg引用，不输出 svg 路径 - 图片使用 Unsplash 直链
- 玻璃拟态：
.glass-bar与.glass-card使用rgba(255,255,255,0.05~0.7)+backdrop-filter - FAB 中央 Tab 使用
accent渐变类，符合 YouTube 经典风格 - 界面在窗口中不出现滚动条（mockup 内部按需滚动）
验证记录
- 直接打开
index.html，6 个 mockup 横向排列 - 移动端 390px 视口下 mockup 完整呈现
- 无水平溢出；CDN 资源需要联网
当前归档信息（自动生成）
- 实验 ID：
youtube-ui--minimax-m3-max-r01 - 模型：MiniMax M3；推理档位：max
- 类型：prototype；预览：static；网络：required
- 完整原始输入快照 · 主题与其他版本
- 输入记录：原 prompts/v1/prompt.md 完整保存；hash 与 prompts/v1/prompt.json 保持一致。
- 工具：Claude Code (MiniMax-M3)。当前会话直接执行；不使用 worktree 或子代理。
- 运行方式：浏览器直接打开本目录入口；CDN/外部素材需要联网。
- UI 模块合集
部署适配记录
- 所有图标通过 lucide-static CDN 加载，不输出 SVG 路径。
- mockup 内滚动通过 overflow-x-auto 实现，外部窗口无滚动条。
- 归档来源：F:\dev\ai-coding-demo-test（model-test-base 分支）中的 demos/youtube-ui/runs/minimax-m3-max-r01；按原实验轮次导入。
- 2026-10-12: 通过本地 HTTP 预览补拍代表性桌面截图 preview-2026-10-12.png；实验源码和原始输入未修改。
- 维护者于 2026-10-22 按 v3 对本轮桌面、手机及补充状态逐图重评并绑定 captures 证据；旧截图和 v2 评分见 catalog/score-reviews/2026-10-21-v3-source.json。未重跑模型或改写实验源码，截图不证明完整功能、算法、手势或性能。