AICODING / DEMO
下载 Markdown 原文 ↗返回主题 →运行作品 ↗对比此实验浏览截图集 →

实验摘要

依据当前归档元数据整理；正文中的历史验证记录保留原有时间与口径。

模型 / 档位
Qwen 3.8 Max · xhigh
任务版本 / 轮次
v1 · 01
实验 / 归档日期
2026-10-14 / 未记录
输入留存
输入留存不完整
执行模式
执行模式未记录
工具
Claude Code
截图评分
85/100 · 规则 v3
费用
批次合计 · 91.81 CNY · 11 个案例，不拆算单案例
耗时
批次耗时 · 2h 50m 7s · 11 个案例
人工修改
查看 2 条修改记录多页面实验：五个功能页（home/watch/explore/profile/studio.html）全部显式登记为 preview.pages，默认入口 home.html。；维护者于 2026-10-22 按 v3 对本轮桌面、手机及补充状态逐图重评并绑定 captures 证据；旧截图和 v2 评分见 catalog/score-reviews/2026-10-21-v3-source.json。未重跑模型或改写实验源码，截图不证明完整功能、算法、手势或性能。

查看完整原始输入 →

YouTube UI 五大模块原型（Qwen3.8 Max · xhigh）

原始提示词

见 完整原始输入，任务正文版本 v1。任务正文是 meta 提示词：要求把复杂产品按功能拆分、每个功能输出一个 HTML（内含该功能多页面的并排 mockup），并在使用【Artifacts】插件预览、每页完成后询问是否继续。本轮一次性完成全部五个功能页；Claude Code 无 Artifacts 插件，以多页面 HTML + 本地静态服务器验证替代插件预览（记录于 run.json 的 environment.notes）。

批次记录

Aliyun 批次合计 91.81 CNY，覆盖 11 个案例，耗时 2h 50m 7s；费用及耗时均为批次总计，不拆分为单案例。

运行方式

  • 五个入口（多页面显式登记）：首页 · 播放 · 发现 · 个人中心 · 创作中心；页间有顶部导航互联。
  • 依赖 Tailwind CSS CDN、Lucide Static CDN（unpkg 图标 svg）、Unsplash 图片，需联网；file:// 直接打开亦可（需外网）。
  • 每个功能页内并排展示 3 个 mockup：移动端机壳（375 宽、圆角边框、隐藏滚动条）与桌面浏览器窗口框。

各功能页面清单

  • 首页（home.html）：移动端信息流（顶栏 / chips / 视频卡 / 底部导航）、桌面端（侧边栏 + 搜索 + 网格）、移动端搜索结果与联想。
  • 播放（watch.html）：移动端播放页（控制层 / 操作条 / 订阅行 / 描述卡 / 评论 / Up Next）、桌面端双列、横屏全屏播放器。
  • 发现（explore.html）：移动端热榜（排名与升降）、桌面分类枢纽（音乐 / 游戏 / 新闻 / 电影 + 频道推荐）、Shorts 竖屏发现行。
  • 个人中心（profile.html）：频道主页（横幅 / 订阅 / Tabs / 视频网格）、媒体库（历史进度 / 播放列表堆叠）、设置与 Premium。
  • 创作中心（studio.html）：桌面仪表盘（KPI 卡 / 趋势 svg / Top 表格）、移动端内容管理（公开 / 检查中 / 草稿状态）、上传流程四步（进度环与检查清单）。

验证记录

2026-10-14 Playwright（Chromium headless）冒烟测试：

  • 五个页面均加载成功：Tailwind 生效、Lucide 图标（13–29 个/页）与 Unsplash 图片（3–12 个/页）全部 naturalWidth > 0、无 JS 报错。
  • 每页 ≥3 个并排 mockup；顶部导航五页互联点击可达。
  • 390px 页面无水平溢出（mockup 行在容器内横向滚动，页面本身不溢出）。

复盘

  • 设计语言统一：#0f0f0f 深色基底、white/5–10 玻璃拟态卡片与 backdrop-blur 顶栏、YouTube 红仅作品牌与进度点缀；图标全部走 Lucide Static CDN 的 svg 文件（深色底用 invert 反白），不手写 svg 路径，符合任务正文约束。
  • 「界面中不要有滚动条」通过屏幕内 overflow hidden / no-scrollbar 实现；页面级的 mockup 横排使用容器内横向滚动，保证 390px 页面本身不溢出。
  • 桌面 mockup 用浏览器窗口框（信号点 + 地址 pill）与移动端机壳区分观看情境；缩略图统一 16:9、时长角标、两行标题截断，保持 YouTube 视觉语法。

当前归档信息（自动生成）

  • 实验 ID：youtube-ui--qwen3-8-max-xhigh-r01
  • 模型：Qwen 3.8 Max；推理档位：xhigh
  • 类型：prototype；预览：static；网络：required
  • 完整原始输入快照 · 主题与其他版本
  • 输入记录：prompt.md 保留用户会话指令与任务正文原文；任务正文为 meta 提示词（要求按功能逐页输出并询问是否继续），本轮一次性完成全部五个功能；Claude Code 系统提示与仓库 AGENTS.md 项目说明同时生效，系统提示未留存于快照。
  • 工具：Claude Code。当前会话直接执行，未委派子代理；模型与档位由用户指定为 qwen3.8-max / xhigh，与会话自报一致。任务正文要求的【Artifacts】插件在 Claude Code 中不存在，以提交多页面 HTML + 本地静态服务器/浏览器截图方式替代可视化预览，未伪造插件调用。Windows 11 + Node 22；Playwright（Chromium headless）冒烟验证五页加载、图标/图片、导航互联与 390px 布局。
  • 运行方式：浏览器直接打开本目录入口；CDN/外部素材需要联网。
  • 费用记录：Aliyun 批次合计 91.81 CNY（11 个案例；批次 qwen3-8-max-xhigh-2026-10-14；未记录单案例费用）
  • 首页功能
  • 播放功能
  • 发现功能
  • 个人中心
  • 创作中心

部署适配记录

  • 多页面实验：五个功能页（home/watch/explore/profile/studio.html）全部显式登记为 preview.pages，默认入口 home.html。
  • 维护者于 2026-10-22 按 v3 对本轮桌面、手机及补充状态逐图重评并绑定 captures 证据；旧截图和 v2 评分见 catalog/score-reviews/2026-10-21-v3-source.json。未重跑模型或改写实验源码，截图不证明完整功能、算法、手势或性能。

本页目录 ↑