22 岁生日祝福网页评分记录
按 评分规则 给六组成品打分。分数只代表这一次生成的成品，不代表技能本身的水平。
评分条件
- 评分日期：2026-11-09
- 评分模型：Claude Opus 5.5（
claude-opus-5-5） - 规则版本：v1
- 验收方式：Claude Code 内置浏览器，1440×900 桌面视口，从头滚到尾并逐项操作；首屏以画廊预览图为准，预览图在页面加载 6 秒后截取。
- 说明：六组页面同源打开，taste-skill 与 impeccable 用了同一个愿望存储键，测试时会读到对方存下的愿望。每组测试前都清空了本地存储并重新加载，这一点不算页面缺陷。
- 麦克风：点击后会弹出系统授权，验收时没有实际开启。麦克风吹气、拒绝授权后回退为点击，这两项按源码判断。
验收清单
| 清单项 | 类别 | 权重 | 无技能 | frontend-design | oil-ui | taste-skill | impeccable | hallmark |
|---|---|---|---|---|---|---|---|---|
| 开场有她的名字、22 岁与生日日期 | 内容 | 1 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| 生日前显示倒计时，当天和之后显示祝福 | 功能 | 1 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
?date= 参数按指定日期预览 | 功能 | 1 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| 六百字左右的信，写到具体的共同回忆 | 内容 | 1 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| 22 个瞬间按大一到大四分组，每件有日期、地点和一句话，含提示词的两个示例 | 内容 | 1 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| 按年份筛选 | 功能 | 1 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| 点开详情，在详情里切换上一件、下一件 | 功能 | 1 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| 22 根蜡烛，点击逐根吹灭 | 功能 | 2 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| 麦克风吹气一次吹灭一批，拒绝或不支持时只保留点击（读源码） | 功能 | 1 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| 全部吹灭后写愿望，只存本机，提交后显示已收好，刷新后保留 | 功能 | 1 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| 五位同学的留言，各有名字和一件具体小事 | 内容 | 1 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Web Audio 合成生日歌，默认不播放，点击播放，可以停止 | 功能 | 1 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
单个 index.html，样式脚本内联，不加载外部资源 | 约束 | 1 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| 桌面 1440 为主，适配到 390 宽（读源码） | 约束 | 1 | ✓ | △ | ✓ | ✓ | ✓ | ✓ |
| 开启减弱动态效果时关闭动画（读源码） | 约束 | 1 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
- frontend-design 的手机适配记为 △：700px 断点下首屏标题字号 42px，还加了字间距（
index.html:14）。在 375 宽打开时，首屏文字列的右缘到了 382px，整页能横向拖动约 10px。其他板块都有对应的窄屏规则。 - 用
?date=2026-11-21打开时，六组都切到了生日当天的祝福；无技能组另外用?date=2026-12-01验证了生日之后的文案。 - 六组都把提示词的两个示例写进了 22 个瞬间（2022 年 9 月 3 日宿舍 302 的台灯，2024 年 7 月青岛没等到的日出），都按大一到大四分组。frontend-design、taste-skill、hallmark 的筛选按自然年或入学年标注，impeccable 同时提供学年和自然年两种筛选。
- 六组的麦克风都是点击后才申请权限；吹气一次熄灭 4 到 5 根，授权被拒或浏览器不支持时隐藏麦克风按钮，提示改为点击。
- 六组在 1440 下都没有控制台报错，页面加载时也没有请求外部地址。
- 六组的减弱动效规则都关闭了全部动画和过渡：无技能
index.html:16、frontend-design:15、oil-ui:17、taste-skill:26、impeccable:17、hallmark:352。
需求还原：frontend-design 29 分，其余五组 30 分。六组功能都做全了，差距主要在视觉设计。
各组评分
无技能 · 84
| 维度 | 得分 | 依据 |
|---|---|---|
| 需求还原 | 30/30 | 清单全部达成 |
| 视觉设计 | 25/35 | 排版 5、色彩 5、构图 5、细节 5、主题 5。米白纸面配绿色点缀，首屏圆形底板里的蛋糕和信封整洁；22 个瞬间用了十几种不同插画，是六组里重样最少的。蛋糕在许愿区里偏小，22 根蜡烛挤成三排；留言区是规整的白卡片网格，整页观感接近模板 |
| 交互与动效 | 12/15 | 手感 5、反馈 4、动效 3。回忆默认只显示 8 件，大二组只露出 2 件就被「再翻一页」截断（index.html:89）；愿望框在吹灭前锁住并给出提示，保存后有浮动提示 |
| 可访问性 | 9/10 | 焦点 4、语义 2、减弱动效 3。蜡烛、回忆卡都是按钮，对话框支持方向键翻页；底部和卡片上的灰色小字对比度偏低 |
| 代码质量 | 8/10 | 结构 2、健壮 3、性能 3。样式压成几行超长代码（index.html:12 一行一万多字符），难以维护；麦克风和音乐都用代号防止重复启动，本地存储读写有容错 |
卡片评价：22 个瞬间配了十几种插画，最不重样；蛋糕在页面里偏小，留言卡片规整但平淡。
frontend-design · 87
| 维度 | 得分 | 依据 |
|---|---|---|
| 需求还原 | 29/30 | 手机适配为 △，见清单说明 |
| 视觉设计 | 28/35 | 排版 6、色彩 5、构图 5、细节 6、主题 6。首屏把蛋糕放进拍立得，旁边是日历和南京到深圳的明信片，标题三行节奏舒服；留言做成淡彩便签。回忆只有 6 种插画来回用，许愿区的淡紫色和全页的米绿不太统一，右侧愿望卡片偏空 |
| 交互与动效 | 13/15 | 手感 5、反馈 5、动效 3。关闭详情后焦点回到原来的卡片（index.html:169）；空愿望用浏览器原生提示拦下，筛选后会读出当前展示的数量 |
| 可访问性 | 9/10 | 焦点 4、语义 2、减弱动效 3。说明文字多为浅灰小字，对比度偏低 |
| 代码质量 | 8/10 | 结构 2、健壮 3、性能 3。样式写在一行（index.html:11 约一万七千字符）；倒计时到生日后会自动停掉定时器（:180） |
卡片评价：拍立得里的蛋糕和明信片首屏精致，留言做成彩色便签；回忆插画重复多，许愿区偏空。
oil-ui · 87
| 维度 | 得分 | 依据 |
|---|---|---|
| 需求还原 | 30/30 | 清单全部达成 |
| 视觉设计 | 28/35 | 排版 6、色彩 6、构图 5、细节 5、主题 6。首屏两张拍立得配「22」邮票，砖红点缀醒目；信里用荧光笔划出几句重点，读起来像真的手写信；结尾是整块砖红色带。22 个瞬间一次全部铺开，7 种插画反复出现，页面拉到 7000px，中段偏长 |
| 交互与动效 | 12/15 | 手感 5、反馈 4、动效 3。愿望保存后只显示「已收好」，要再点「看看 / 修改」才能看到内容；首屏插画入场约两秒 |
| 可访问性 | 9/10 | 焦点 4、语义 2、减弱动效 3。开启减弱动态效果时直接显示入场内容（index.html:17、:150）；卡片说明文字偏浅 |
| 代码质量 | 8/10 | 结构 2、健壮 3、性能 3。回忆数据写完后再用循环给几条改插画（index.html:103），样式压成一行（:11） |
卡片评价：信里用荧光笔划出重点句，砖红点缀醒目；22 个瞬间一次铺开，插画反复出现，页面偏长。
taste-skill · 85
| 维度 | 得分 | 依据 |
|---|---|---|
| 需求还原 | 30/30 | 清单全部达成 |
| 视觉设计 | 26/35 | 排版 6、色彩 6、构图 4、细节 5、主题 5。首屏拱形底板里的绿色蛋糕插画克制干净，留言区五栏排开，结尾用墨绿色收束。22 个瞬间全是纯文字卡片，卡片标题位置放的是地点，四段连续二十多张一样的卡片，读来单调（index.html:98）；详情页只有 4 幅小图标轮换（:101） |
| 交互与动效 | 12/15 | 手感 5、反馈 4、动效 3。详情翻到第一件再按上一件，会绕回最后一件（index.html:108），和页码不对应；愿望保存后默认收起，要点开才能看到 |
| 可访问性 | 9/10 | 焦点 4、语义 2、减弱动效 3。减弱动效时另外关闭了悬停位移（index.html:26）；首屏日期等小字偏浅 |
| 代码质量 | 8/10 | 结构 2、健壮 3、性能 3。样式分成多行但单行仍很长（index.html:25 约五千字符）；本地存储写入失败时保留输入内容 |
卡片评价：首屏蛋糕插画和绿色调克制干净；22 个瞬间只有文字卡片，整段读来单调。
impeccable · 89
| 维度 | 得分 | 依据 |
|---|---|---|
| 需求还原 | 30/30 | 清单全部达成 |
| 视觉设计 | 29/35 | 排版 5、色彩 6、构图 6、细节 5、主题 7。首屏是两人秋天野餐的大幅插画，叠一张雨中撑伞的小照片和邮戳，最像一本生日手册；回忆按学年分组，卡片微微倾斜；留言是贴着胶带的彩色便签。长信用手写风格字体，读六百字有些累；蛋糕下的「这一块，有你的名字」压在了托盘上；面碗插画在回忆里出现四次 |
| 交互与动效 | 13/15 | 手感 5、反馈 5、动效 3。学年和自然年两种筛选可以组合；吹蜡烛时可以「重新点亮」再来一次；愿望框带字数计数，空提交有文字提示 |
| 可访问性 | 9/10 | 焦点 4、语义 2、减弱动效 3。打开详情时焦点移到关闭按钮，关闭后回到原卡片（index.html:170、:174）；便签上的小字对比度一般 |
| 代码质量 | 8/10 | 结构 2、健壮 3、性能 3。样式压成一行（index.html:12 约一万八千字符）；麦克风同时判断音量和噪声频谱，过滤说话声（:221） |
卡片评价：倾斜卡片和胶带便签最像生日手册；长信用手写体读来稍累，蛋糕下的字压住了托盘。
hallmark · 86
| 维度 | 得分 | 依据 |
|---|---|---|
| 需求还原 | 30/30 | 清单全部达成 |
| 视觉设计 | 25/35 | 排版 6、色彩 6、构图 4、细节 4、主题 5。首屏雨中撑伞的拍立得、花束照片和深圳到南京的车票点题，豆沙红配色统一。回忆卡片大，插画只在台灯、建筑、汤碗几种之间轮换，整页拉到 8000px；「校园田径场」那件配的是写着「图书馆」的建筑插画（index.html:577、:410） |
| 交互与动效 | 13/15 | 手感 5、反馈 5、动效 3。除了点蜡烛，还可以按「吹灭一根」，也可以重新点亮；保存愿望失败时会保留输入内容并给出提示（index.html:730） |
| 可访问性 | 9/10 | 焦点 4、语义 2、减弱动效 3。已经吹灭的蜡烛只标了不可用状态，仍然可以聚焦（index.html:702）；卡片说明文字偏浅 |
| 代码质量 | 9/10 | 结构 4、健壮 2、性能 3。六组里唯一按行排版、带注释的代码，样式变量完整；已吹灭的蜡烛仍可点击触发更新（index.html:692） |
卡片评价：车票和雨中拍立得点题，蜡烛可以一根根吹；回忆插画几种轮换，操场配了图书馆。
校准
按总分排序为 impeccable 89、frontend-design 87、oil-ui 87、hallmark 86、taste-skill 85、无技能 84，与整体印象一致。六组用了同一个模型，功能几乎都做全了，视觉方向也都落在暖色纸面加手绘插画，所以分差只有 5 分，全部在 80–89 档。impeccable 的手册感最强，排在第一；无技能组插画种类最多，但版式最接近模板。