呱呱 图像与设计
审查界面排版时如何检查字号体系、可读性、一致性与设计令牌合规
用于对已渲染界面做屏幕级排版审查，从字号体系、可读性、一致性、令牌合规四个维度发现问题并给出具体修复方案。
🧪 尚未被验证（还没有小呱复用过的记录，不代表不好）
GDI C 49/100
进化评分（GDI）
综合排序依据 —— 四个维度的加权结果，让你看出「为什么这条排在前面」
内在质量 85/100 ×0.35
使用度 0/100 ×0.30
口碑 50/100 ×0.20
新鲜度 60/100 ×0.15
适用场景
审查界面排版时如何检查字号体系、可读性、通用
解决思路
- 按四个维度逐一审查：Scale Usage（字号体系使用）、Readability（可读性）、Consistency（一致性）、Token Compliance（令牌合规）。
- 检查字号体系：确认只使用已定义的字号阶梯（如 display、h1–h4、body-lg、body-sm、caption）。
- 检查每个字号阶梯是否用于其预期用途——标题用作标题、标签用作标签。
- 检查是否存在落在已定义阶梯之外的中间字号或任意字号。
- 检查字号阶梯是否在层级之间形成足够对比（建议每级比例 ≥1.25×）。
- 检查可读性：正文字号是否达到最低阈值（桌面端 16px / 1rem；移动端最低 14px）。
- 检查行高是否按内容类型设置：标题更紧（1.1–1.3），正文更松（1.4–1.6）。
- 检查正文的行长（measure）是否在 45–75 个字符之间。
- 检查字距是否合适——不要过度拉开，也不要压缩到造成阅读摩擦。
- 检查文字与背景的对比度是否符合 WCAG AA（正文 4.5:1，大号文字 3:1）。
- 检查一致性：语义等价的元素（如所有卡片标题、所有表单标签）是否使用相同的文字样式。
- 检查对齐方式是否一致——左对齐、居中或右对齐应有意图地使用，而不是随机混用。
- 检查字重是否一致使用，而不是随机变化（例如有的标签加粗、有的常规）。
- 检查是否存在孤立样式——只在一处使用、别处不用的文字处理。
- 检查令牌合规：font-family、font-size、font-weight、line-height、letter-spacing 是否都通过令牌设置。
- 检查是否存在本应引用令牌的硬编码 CSS 或设计属性值。
- 列出每一个不合规的值及其正确的令牌名称。
- 对每个维度输出三部分：Observation（中性的、事实性的观察）、Problem（哪里坏了以及为何重要）、Fix（具体可执行的修改，包含正确的令牌名）。
- 对每个维度评级：pass / minor issue / major issue。
- 警惕常见失败模式：字号漂移（把尺寸微调 1–2px 而不是跳到下一个已定义阶梯）。
- 警惕行高错配——展示级字号配正文行高，或反之。
- 警惕对齐混用——居中标题配左对齐正文且无有意理由。
- 警惕组件中因找不到或未更新令牌而硬编码 font-size 值。
- 警惕过度使用加粗——单个屏幕上激活超过两个字重层级会稀释对比。
- 对于定义字号阶梯本身，改用 typography-scale（ui-design）。
适用边界 · 注意事项
- 尚未渲染出界面、无法看到实际排版效果时。
- 需要定义或创建字号阶梯本身时（应使用 typography-scale）。