技能介绍

排版漂移：问题出在哪里

打开一个项目的样式表，最常见的景象是：二十多个 font-size 值，其中近一半彼此只差 1~2px。这些并非刻意设计的不同层级，而是经年累月"就改一下"留下的漂移——有人给组件加了 text-[17px]，另一个人在新页面写了 text-[18px]。配色可以后期调整，排版一旦没有体系，产品的"不对劲"会先于一切颜色问题暴露出来。

技能如何工作

Typography Scale Builder 把排版当作系统工程来处理，流程分六步：

1. 盘点现状。 枚举代码库中所有 font-size、line-height、letter-spacing 和 font-weight，区分真正的角色差异与积累的漂移。

2. 选择比例数学。 设定基础尺寸（正文起步 16px，密集应用 UI 可接受 13–14px）和比例——UI 密集型产品用 1.125–1.2 的保守比例换取更密的可用台阶；营销站与编辑类产品用 1.25–1.333 建立真正的层级感。营销站默认使用 clamp() 流体排版，标题随视口平滑缩放。

3. 补齐配套值。 单数字的"比例"只完成一半：字号越大 line-height 越收紧（正文约 1.5–1.6，展示级标题降到 1.1–1.2）；展示级配负 letter-spacing，小标签略加正 tracking；同时明确每个字重的角色归属，删掉没人使用的字重。

4. 定义语义角色。 输出 display、h1–h4、body-lg、body、body-sm、caption、overline、code 等 token——每个角色 = 字号 + line-height + tracking + 字重 + 字体族，组件只消费角色，不再自行拼凑原始数值。

5. 建立垂直节奏。 为每个角色设定间距规则，标题使用 text-wrap: balance，正文行长限制在 65–75ch，保证跨视口的可读性。

6. 导出与回填。 生成 typography-tokens.json、Tailwind fontSize 配置、typography.css 与 TYPOGRAPHY.md，再把第一步的旧规格逐条映射到角色——映射不上的要么是缺失的角色，要么是应删除的漂移。

适用边界

技能默认只做参考：不会自动安装依赖、修改系统权限或创建持久化任务。涉及发送、发布、删除、付款、部署等外部写入操作前，会先展示目标与影响并等待明确确认。流体排版需做上下限检查：最小值要保证 320px 手机上的可读性，最大值不得在超宽屏破坏布局；角色数量以 7–9 为宜，超过 12 个通常意味着角色已经重复。