SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场typography-audit

typography-audit

设计与创作

查看项目

更新于 10-15 02:08

技能介绍

用途

Typography Audit 用于审计网页排版，共 10 个类别、78 条规则。每条发现都会给出文件名、规则 ID 和修复建议。它只关注排版：字体加载、字号、标点、间距、层级、文本布局、OpenType 特性、字体搭配、品牌字体、展示型标题。

它不负责宽泛的 UI 审查（无障碍、表单、导航等应使用 ui-design 的 Audit 模式），也不负责重新设计（更换字体、重设字号阶梯应使用 ui-design 的 Direction 模式）。

主要能力

规则按优先级分为 10 个类别：

  1. 字体选择与字重（CRITICAL，前缀 font-，11 条）
  2. 字号与行宽（CRITICAL，前缀 size-，6 条）
  3. 标点与特殊字符（CRITICAL，前缀 punct-，12 条）
  4. 间距与节奏（HIGH，前缀 spacing-，8 条）
  5. 层级与阶梯（MEDIUM-HIGH，前缀 hierarchy-，8 条）
  6. 对齐与布局（MEDIUM，前缀 layout-，6 条）
  7. OpenType 特性（MEDIUM，前缀 opentype-，7 条）
  8. 品牌与识别（MEDIUM，前缀 brand-，8 条）
  9. 字体搭配（MEDIUM，前缀 pairing-，5 条）
  10. 展示与标题（LOW-MEDIUM，前缀 display-，7 条）

每个规则文件包含“为什么重要”以及一个错误示例和一个正确示例。类别的影响等级反映该类别中最严重的规则；报告发现时应使用规则自身 frontmatter 中的影响等级，它常与类别不同（例如 brand-color 在 MEDIUM 的 brand- 类别中属于 HIGH，因为它涉及 WCAG 对比度底线）。

使用方式

审计工作流如下：

  • 步骤 1：确定范围。列出变更文件（或全量扫描），将信号映射到类别。
  • 步骤 2：在范围内运行 CRITICAL 规则（font-、size-、punct-）。
  • 步骤 3：在范围内运行 HIGH 规则（spacing-）。
  • 步骤 4：按优先级降序运行其余范围内类别。
  • 步骤 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、列表、引用块、多栏文本 → layout-
  • font-feature-settings、font-variant-*、文案中的数字/分数 → opentype-
  • Logo/字标样式、品牌 token、文本颜色 token、许可注释 → brand-
  • 两个或更多不同的 font-family 值 → pairing-
  • 主视觉/展示型字号、首字下沉、initial-letter → display-

输出约定

发现按如下格式报告：

## Typography Audit Findings

### path/to/file.css
- [CRITICAL] `punct-smart-quotes` (file.css:42): Straight quotes in heading copy.
  - Fix: Replace `"` with `&ldquo;`/`&rdquo;` (or UTF-8 curly quotes).
- [CRITICAL] `size-line-height` (file.css:18): `line-height: 20px`, a fixed value the 48px `h1` inherits, so its lines overlap.
  - Fix: Use unitless `line-height: 1.5`.

### path/to/clean-file.css
- ✓ pass

按文件分组；文件内按影响等级排序。每条发现包含：影响标签、规则 ID、file:line、一行问题描述、修复方式。干净文件也以 ✓ pass 列出，以便看到覆盖范围。最后以摘要结束：各影响等级的计数。

注意事项

  • 不要预加载所有规则文件。只加载信号表选中的前缀；全量加载会把预算花在范围内没有信号的类别上。
  • 报告规则自身 frontmatter 的影响等级，而非类别的。最常被误报的两条：brand-color 是 HIGH（无障碍底线，而非品牌点缀），punct-daggers 是 LOW-MEDIUM（装饰性，尽管它位于 CRITICAL 类别中）。
  • 标点规则只适用于渲染后的文案。在 <code>、<pre> 或 JS/TS 字符串字面量中标记直引号或 -- 是误报；“修复”它们会破坏代码。
  • 当发现依赖渲染字体和计算样式时，通过 ui-verification 确认。仅凭 CSS 声明无法证明实际加载了哪个字体。
  • 在未确认已加载字体是否支持的情况下，不要标记缺失的 OpenType 特性。浏览器会静默忽略不支持的 font-feature-settings 标签，修复不会生效。
  • 每条发现都需要 file:line 和具体修复；不可操作的发现会迫使重做。
  • 审计不是重新设计。提出新的字体搭配或字号阶梯会把 10 分钟的审查变成设计项目；标记问题，并将重新设计请求转给 ui-design。
  • 不要拉平优先级。把 LOW-MEDIUM 的展示型小问题排在 CRITICAL 的伪粗体发现之上，会掩盖真正看起来坏掉的地方。

相关技能

  • ui-design Audit 模式：宽泛的前端质量（无障碍、表单、导航、动效）；其排版覆盖较浅。
  • ui-design Direction 模式：从零选择字体、字号阶梯和视觉方向；当发现变成重新设计请求时运行。
  • ghostwriter：标题和标签的措辞。本技能只管理该文案的大小写（punct-case-rules）。

仅维护用途：evals/evals.json 包含针对本技能变更的回归场景；它不会在用户任务期间加载。