《云烟成雨》歌曲宣传网页案例对照记录
同一份提示词、同一个模型，只改变加载的前端技能，比较六个版本的页面产物、轮次与耗时。
运行条件
- 日期：2026-11-09
- 模型：
claude-opus-5-5（Claude Opus 5.5），思考强度medium；直连 Anthropic 官方接口，使用命令行 claude 的登录令牌，不经过本地代理。 - 提示词：为房东的猫演唱的歌曲《云烟成雨》制作中文宣传网页，桌面优先并适配手机。原文见 案例提示词。
- 交付要求：单个
index.html；样式与脚本内联，不引用外部资源，图形由页面自行绘制或内嵌。 - 隔离方式：
bench/run.sh，每组独立进程、独立配置目录、空 MCP 配置，关闭内置技能后只挂载被测技能。 - 并发方式：无技能、oil-ui、taste-skill、impeccable、hallmark 五组三路并发；frontend-design 组重跑时单独运行。
- 技能快照：仓库 frontend-skills 目录，来源提交记录在该目录的 README。
结果
| 版本 | 技能调用 | 轮次 | 耗时 | 页面大小 | AI 评分 |
|---|---|---|---|---|---|
| 无技能 | 无 | 3 | 2.6 min | 29,942 字节 | 76 |
| frontend-design | frontend-design | 5 | 2.2 min | 19,594 字节 | 86 |
| oil-ui | oil-ui | 22 | 5.3 min | 29,878 字节 | 81 |
| impeccable | impeccable | 38 | 8.5 min | 38,312 字节 | 94 |
| taste-skill | design-taste-frontend | 18 | 5.6 min | 38,678 字节 | 90 |
| hallmark | hallmark | 17 | 3.2 min | 26,280 字节 | 84 |
耗时由 timed_run.py 独立计时，轮次按完整主会话记录汇总。AI 评分由 Claude Opus 5.5 按评分规则 v1 在 1440 桌面视口下验收给出，分项与依据见 评分记录。
frontend-design 组第一次运行时模型没有调用技能，核验判为无效，该次结果没有归档；表中是重跑结果。无效运行保存在原始运行目录的 invalid-frontend-design-no-invoke/。
页面观察
- 无技能：灰蓝色雨天城市，竖排大标题，右侧一句导语和「走进这首歌」入口。
- frontend-design：雾中城市剪影与一盏路灯，竖排标题在右侧，首屏没有导航；提示点击画面让雨下大。
- oil-ui：米白底色上居中竖排大标题，左下两句引文和两个收听入口。
- impeccable：首屏是一扇起雾的车窗，窗外是模糊的城市灯光，可以按住鼠标擦开雾气。
- taste-skill：深色雨夜，路灯下有一只猫的剪影，横排大标题和歌曲信息在左侧。
- hallmark：深色背景上飘着雨夜光斑，横排大标题，右下角可以调节雨量。
验证
- 六组均通过技能清单、技能调用和实际模型的隔离核验。
- 在浏览器中以 1440 与 375 宽度打开六组页面，未发现脚本错误和页面级横向溢出。
- 首屏截图在页面加载 6 秒、入场动画结束后截取。
- 页面中的歌曲信息、歌词引用和收听链接由模型自行生成，未核对其准确性；未逐项验证各页面的交互效果。
五组三路并发运行，单组耗时不能直接横向比较；每组只有一次样本，结果也受服务波动影响，不能据此判断技能优劣。原始运行目录保存在仓库之外的 ~/Code/benchmark-runs/case-06/claude-opus-5.5-medium/。