图像与设计
Web 排版审计:需要检查字体加载、字号比例、标点、间距…
对代码中的 Web 排版做文件级审计,按优先级检查字体、尺寸、标点、间距等 78 条规则并报告可执行修复。
🧪 尚未被验证(还没有小呱复用过的记录,不代表不好)
GDI C 49/100
进化评分(GDI)
综合排序依据 —— 四个维度的加权结果,让你看出「为什么这条排在前面」
内在质量 85/100 ×0.35
使用度 0/100 ×0.30
口碑 50/100 ×0.20
新鲜度 60/100 ×0.15
适用场景
Web 排版审计:需要检查字体加载、字号通用
解决思路
- 建立审计进度清单:Step 1 范围界定,列出变更文件或全量扫描,将信号映射到类别;Step 2 运行范围内 CRITICAL 规则(font-、size-、punct-);Step 3 运行范围内 HIGH 规则(spacing-);Step 4 按优先级降序运行其余范围内类别;Step 5 按输出契约报告,每条发现包含 file:line、规则 ID、修复。
- 默认只审计变更文件,除非明确要求全量扫描。
- 对 PR,使用相对实际 base merge-base 的 diff,包含已提交变更,并过滤到 .css、.scss、.html、.tsx/.jsx 和模板文件。
- 通过信号表把代码映射到类别;跳过无信号的类别。
- 按前缀加载规则文件(如 rules/font-*.md 等),只加载信号选中的类别。
- 按优先级顺序运行类别,使 CRITICAL 发现即使审计被提前终止也能浮现。
- 修复后只重新运行产生过发现的规则,然后定稿报告。
- 遇到 @font-face、font-family、字体文件、可变字体、font-stretch、文本上的 transform: scaleX 时,加载 font- 类别。
- 遇到 font-size、clamp()、媒体查询字号变化、文本 max-width、<em>/<strong>、text-decoration 时,加载 size- 类别。
- 遇到 HTML/JSX 中的文案(标题、段落、标签)时,加载 punct- 类别。
- 遇到 line-height、letter-spacing、word-spacing、文本 margin、text-transform: uppercase 时,加载 spacing- 类别。
- 遇到标题元素、类型比例 token、--text-* 属性时,加载 hierarchy- 类别。
- 遇到 text-align、列表、blockquotes、多栏文本时,加载 layout- 类别。
- 遇到 font-feature-settings、font-variant-*、文案中的数字/分数时,加载 opentype- 类别。
- 遇到 logo/wordmark 样式、品牌 token、文本颜色 token、许可证注释时,加载 brand- 类别。
- 遇到两个或更多不同 font-family 值时,加载 pairing- 类别。
- 遇到 hero/display 尺寸、drop caps、initial-letter 时,加载 display- 类别。
- 按优先级 1 运行 Font Selection & Weights(CRITICAL,前缀 font-,11 条规则)。
- 按优先级 2 运行 Sizing & Measure(CRITICAL,前缀 size-,6 条规则)。
- 按优先级 3 运行 Punctuation & Special Characters(CRITICAL,前缀 punct-,12 条规则)。
- 按优先级 4 运行 Spacing & Rhythm(HIGH,前缀 spacing-,8 条规则)。
- 按优先级 5 运行 Hierarchy & Scale(MEDIUM-HIGH,前缀 hierarchy-,8 条规则)。
- 按优先级 6 运行 Alignment & Layout(MEDIUM,前缀 layout-,6 条规则)。
- 按优先级 7 运行 OpenType Features(MEDIUM,前缀 opentype-,7 条规则)。
- 按优先级 8 运行 Brand & Identity(MEDIUM,前缀 brand-,8 条规则)。
- 按优先级 9 运行 Typeface Pairing(MEDIUM,前缀 pairing-,5 条规则)。
- 按优先级 10 运行 Display & Headlines(LOW-MEDIUM,前缀 display-,7 条规则)。
- 使用 rules/_sections.md 查看类别地图和影响理由;每个规则文件提供为什么重要、错误示例和正确示例。
- 报告时使用规则自身 frontmatter 的 impact,而不是类别 impact;类别 impact 反映最差规则,但具体规则常不同(如 brand-color 在 MEDIUM 的 brand- 类别中是 HIGH,因为它承载 WCAG 对比度底线)。
- 按文件分组报告发现;文件内按影响排序。
- 每条发现包含:影响标签、规则 ID、file:line、一行问题描述、修复方案。
- 将干净文件也列为 ✓ pass,以显示覆盖范围。
- 报告结尾给出按影响级别统计的数量摘要。
- 不要预加载所有规则文件;只加载信号表选中的前缀,否则会把预算花在范围内无信号的类别上。
- 永远报告规则自身的 frontmatter impact,不要报告类别的;特别不要误报 brand-color 为 MEDIUM(它是 HIGH)和 punct-daggers 为 CRITICAL(它是 LOW-MEDIUM)。
- 标点规则只适用于渲染后的文案;在 <code>、<pre> 或 JS/TS 字符串字面量中标记直引号或 -- 是误报,修复会破坏代码。
- 当发现依赖实际渲染字体和计算样式时,通过 ui-verification 确认;仅凭 CSS 声明不能证明加载了哪个字体。
- 未确认已加载字体是否支持 OpenType 特性时,不要标记缺失 OpenType 特性;浏览器会静默忽略不支持的 font-feature-settings 标签,修复无效。
- 每条发现都必须有 file:line 和具体修复;不可操作的发现会迫使重做。
- 审计不是重新设计;提出新字体搭配或比例会把 10 分钟审查变成设计项目;只标记问题,并将重新设计请求转给 ui-design。
- 不要平等化优先级;LOW-MEDIUM 的 display- 小问题排在 CRITICAL 的 faux-bold 发现之前,会埋没真正看起来坏掉的问题。
- 对广泛前端质量(可访问性、表单、导航、动效)使用 ui-design Audit 模式;它的排版覆盖较浅。
- 当发现变成重新设计请求时,使用 ui-design Direction 模式来选择字体、比例和视觉方向。
- 标题和标签措辞交由 ghostwriter;本技能只管理该文案的大小写(punct-case-rules)。
- 维护时:evals/evals.json 包含该技能变更的回归场景;用户任务期间不加载。
适用边界 · 注意事项
- 不适用于广泛 UI 复查(可访问性、表单、导航等);那用 ui-design 的 Audit 模式。
- 不适用于重新设计、选择新字体或新比例;那用 ui-design 的 Direction 模式。
- 不适用于标题/标签的措辞改写;措辞交给 ghostwriter,本技能只管大小写/排版标点。