技能对照册 ← 返回首页

评分规则 v1

一个案例的各组生成完毕后,主会话按本规则给每组成品打分并写评价。分数显示在首页结果卡片上,分项得分与扣分依据写进 examples/case-NN/评分记录.md。

评分对象是用户打开页面后实际看到、操作到的结果,源码用来确认原因和找出看不见的问题。分数只代表这一次生成的成品,不代表技能本身的水平。

为节省消耗,评委只在浏览器中以 1440×900 桌面视口查看和操作页面,不在手机宽度下查看。提示词要求的移动端适配只通过阅读源码判断(见「需求还原」中的约束项),不单设手机布局分。

总览

满分 100,五个维度:

维度分值子项
需求还原30按验收清单计算
视觉设计35排版与层级 7、色彩 7、构图与节奏 7、细节完成度 7、主题契合与辨识度 7
交互与动效15核心交互手感 6、状态与反馈 5、动效 4
可访问性10键盘与焦点 4、语义与对比度 3、减弱动效与配色模式 3
代码质量10结构与组织 4、健壮性 3、性能与体积 3

所有子项取整数。总分是五个维度相加。

需求还原(30)

验收清单

评分前,对照提示词写出这个案例的验收清单,六组共用同一份。每一项必须能在页面上验证,分三类:

提示词明确称为核心的项,或页面主要目的所在的交互,权重记 2;其余项记 1。提示词写得笼统时(例如「向访客介绍这首歌」),清单就只列提示词说到的几项,不替提示词补需求。

判定与计算

每项判为:

需求还原得分 = 30 × Σ(权重 × 判定) ÷ Σ(权重),四舍五入取整。

提示词没有要求的额外功能不计入需求还原。做得好可以在交互与动效里体现;如果出错、拖慢页面或干扰阅读,照常在相应维度扣分。

视觉设计(35)

在浏览器中以 1440 宽度从头看到尾后评,五个子项各 7 分。

子项75–63–40–2
排版与层级字号与字重的节奏清楚,中文排版舒服(行长、行距、标点),一眼看出主次层级清楚,个别段落偏密或偏挤层级平均,标题与正文拉不开,或有大段难读文字文字重叠、截断,或层级混乱
色彩配色有明确主张且克制,强调色用在该强调的地方,整体协调协调统一,但比较保守或有一两处突兀常见的套路配色,或强调色泛滥、对比不足颜色冲突,或影响阅读
构图与节奏板块之间疏密有变化,长页面读下来有起伏,首屏构图完整结构清晰,板块节奏略单调板块一律等宽堆叠,或留白失衡(过空或过挤)布局错位、塌陷或大片空白
细节完成度对齐、间距、圆角、图标、图像处理统一,挑不出毛病少量不一致,不仔细看看不出多处对不齐、间距随意,或图像质量差、比例失真破图、占位文字、明显未完成的板块
主题契合与辨识度视觉语言贴合品牌与内容,有让人记住的处理,不像模板贴合主题,个性一般换个品牌名也能用,典型的模板观感与主题冲突

交互与动效(15)

在桌面视口实际操作后评。这一维度评的是交互做得好不好;交互有没有做,归需求还原。

子项满分满分表现常见扣分
核心交互手感6提示词点名的交互响应及时,结果一目了然,操作方式符合直觉要找半天才知道能点;切换后没有明显变化;拖动或点击区域过小
状态与反馈5悬停、按下、焦点、选中、空值、错误、成功状态齐全且清楚缺焦点样式;表单错误只靠颜色提示;提交后没有反馈
动效4动效服务于理解,例如表现状态变化或引导视线,流畅不拖沓卡顿;入场动画让内容迟迟不出现;装饰动效干扰阅读

页面没有任何交互要求时,核心交互手感按导航、链接、按钮等基础操作评。

可访问性(10)

子项满分满分表现常见扣分
键盘与焦点4所有交互可以用键盘完成,焦点顺序合理,焦点位置看得见用 div 做按钮导致无法聚焦;焦点样式被去掉
语义与对比度3有正确的标题层级与地标,图片有替代文本,表单有标签,正文对比度足够浅灰小字压在浅底上;缺替代文本;标题层级跳乱
减弱动效与配色模式3系统开启减弱动态效果时关掉或明显减弱动画;提示词要求深浅色时两套都完整可读减弱动效无效;深色模式有遗漏的浅色块或看不清的文字

提示词要求了深浅色或减弱动效时,这两项同时在验收清单中计入;这里评的是做得是否到位。

代码质量(10)

读源码后评,扣分要写出代码位置。

子项满分满分表现常见扣分
结构与组织4语义化 HTML,样式用变量统一管理,脚本按功能划分,没有大段重复大量重复的样式或标记;魔法数字散落;死代码
健壮性3无控制台报错,边界输入有处理,状态之间不会互相打架有报错;快速连续操作后状态错乱;本地存储读写不做容错
性能与体积3动画用合成属性或按帧调度,资源体积合理滚动或动画明显掉帧;同一图片重复内嵌;无节制的定时器

页面体积只在明显浪费时扣分。提示词要求实景图片并内嵌时,体积大是合理的。

通用规则

硬性上限

必需页面缺失、无法打开或首屏空白时,该组总分最高 40。

分数档位

总分含义
90 以上可以直接上线,有让人记住的地方
80–89完整统一,只有少量瑕疵
70–79能用,但模板化或有明显短板
60–69有影响使用的问题
60 以下核心需求缺失,或页面破损

逐项打完分后,看总分落在哪一档,与对这个页面的整体判断是否相符;不符时回头检查子项,不要直接改总分。

校准

中立

证据

扣 2 分及以上必须写出依据:浏览器中的操作步骤与看到的结果,或代码位置(文件:行号)。验收清单中的「部分」和「未达成」同样要写依据。

不计入评分

评价写法

每组写一句卡片评价,显示在首页结果卡片上:

示例:「风味轮与订阅配置器联动顺畅,果实照片气质出众;订阅区按钮缺少选中反馈,切换后不易察觉。」

评分记录格式

examples/case-NN/评分记录.md 依次包含:

  1. 评分条件:评分日期、评分模型、规则版本、验收视口(1440×900)。
  2. 验收清单:一张矩阵表,行是清单项(注明类别与权重),列是各组,单元格填 ✓、△、✗ 或 —;表后列出各个 △ 和 ✗ 的依据。
  3. 各组评分:每组一节,标题为「技能名 · 总分」,下面是分项表(维度、得分、依据),最后是卡片评价原文。
  4. 有补充模型结果时另起一节,结构相同。

版本

版本日期说明
v12026-11-09首版