黑胶播放器案例对照记录

同一份提示词、同一个模型，只改变加载的前端技能，比较六个版本的页面产物、轮次与耗时。

运行条件

• 日期：2026-11-07
• 模型：codex/gpt-6.1-terra，思考强度 xhigh
• 提示词：桌面端音乐 App 的「正在播放」模块，播放一张三首曲目的虚构专辑；唱臂落针、抬臂取消、拖动选段、方向键调整，播放控制、歌词逐行高亮、播放队列、快捷键与刷新保留都在要求内
• 交付要求：单文件 index.html，样式与脚本内联，音频由 Web Audio 合成或内嵌，不引用任何外部资源
• 隔离方式：bench/run.sh，每组独立进程、独立配置目录、空 MCP 配置，关闭内置技能后只挂载被测技能
• 并发方式：三路同时运行，任意一组结束后补入下一组
• 技能快照：仓库 frontend-skills 目录，来源提交记录在该目录的 README

结果

页面观察

六组在 1440×900 视口下查看过首屏。共同点是左侧唱盘、右侧歌词、底部播放条的整体结构，专辑名、曲目与歌词全部虚构，封面都用 CSS 与 SVG 绘制。

• 无技能：米白底配鼠尾草绿，左侧带「拾音室」侧边栏，主标题为「让时间慢下来。」，唱盘上放着橙色标签的《慢邮来信》，歌词当前行用锈红色标出。首屏高 937 像素，底部播放条固定在视口下沿。
• frontend-design：淡紫灰底，唱盘居中放大，唱臂搭在唱片上，标题「月光落在房间里」压在唱盘上方；歌词独立成右侧一栏，整块内容收在圆角外框里。首屏高 981 像素，底部迷你播放条的下沿落在视口之外。
• oil-ui：暖米色与橄榄绿，标题「留声间」居中，唱盘装在印着 STILL ROOM RECORDS 与 SIDE A / 01—03 的唱片套里，中心标签是橙色的《慢慢有光》。右栏歌词不带序号，按钮区写着「空格键播放 / 暂停」。
• impeccable：浅豆绿满屏，唱盘最大，右栏歌词当前行用深绿加粗。首屏高 1,043 像素，底部播放条落在 900 像素视口之外，需要向下滚动才能看到播放控制。
• taste-skill：灰橄榄色，整页最像一张唱片封套，唱盘带「DUSK RECORDS / After the rain」标签，右侧标题「落日来信」用大号衬线字，底下配“ORIGINAL ALBUM”小方框。播放条在首屏内完整可见。
• hallmark：奶油底，标题「把黄昏折起来」字号最大，唱盘与唱臂占据左半屏，唱臂轴心做成大颗金属圆盘，右栏歌词行距最宽。首屏高 964 像素，控制条刚好落在首屏内，底部另有「拖动唱臂，放到想听的位置」提示。

验证

• 六组都只有一个 index.html，没有引用任何外部图片、字体、脚本或音频；内联脚本通过 node --check 语法检查。
• 实测点击播放后计时从 0:00 走字，空格键能切回暂停；六组播放队列都能展开，按 Esc 都能关闭。
• 实测收藏状态与音量在刷新后保留，六组都通过。
• 唱臂拖动、拖动时的预览时间、方向键调整唱臂、点击歌词跳转、减弱动态效果下的停转只用静态检查确认了代码里有对应处理，没有逐项做交互测试。
• 六组在 1440 宽下都没有横向滚动；390 宽窄屏表现没有检查。

frontend-design 组归档后单独重跑过一次，本文采用重跑结果。重跑只有这一组在跑，没有和其他组争用并发，所以这一行的耗时尤其不能与其余五组直接比较；两版结果分别保存在 ~/Code/benchmark-runs/case-03/ 的 v1-frontend-design 与 v2-frontend-design。

轮次与耗时取自 Claude Code 的 JSON 输出，耗时由毫秒换算为分钟。三路并发运行，单组耗时会互相拉长，耗时一列不能跨组比较；单次样本受服务波动影响，不能据此判断技能优劣。

原始运行目录保存在仓库之外的 ~/Code/benchmark-runs/case-03/，包含每组的 result.json、run.meta 与 cfg-* 会话记录。