关于 typeset
typeset 是 ui-craft 的排版子技能,面向调整界面字体与文字层级的开发者。它按字体、字号、字距、行高和微排版等步骤检查,并可直接修改代码。
主要功能
- 01检查字体清单与字体搭配
- 02建立模块化字号比例
- 03规范字距与行高
- 04控制字重层级
- 05检查数字、标点与文本层级
适用场景
- 01为界面建立一致的字体与字号系统
- 02改善标题、正文和控件的文字层级
- 03调整数字、标点及标题换行等细节
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ educlopez/ ui-craft --skill typeset安装后在 Claude Code 中输入/typeset确认已加载。
详细介绍
上下文: 此子技能是更广泛的 ui-craft 技能的一个视角。如果也安装了 ui-craft 技能,请先阅读其 SKILL.md,了解 Discovery + Anti-Slop + Craft Test,然后再应用以下具体视角。
为 $ARGUMENTS 排版。加载 ui-craft 技能并阅读 references/typography.md。
**注意:**排版不受旋钮影响——排版规则(标题不能全大写、字号 ≥ 24px 时使用 tracking-tight、正文只用一种字体等)不可调整。
按顺序执行:
-
字体清单 — 加载了哪些字体?如果没有理由就默认选择 Inter,请先询问再接受(Inter 是最明显的 AI 痕迹)。好的替代选项:Geist、DM Sans、Plus Jakarta Sans、系统字体栈。正文用一种字体,可选再加一种展示字体。绝不要用三种字体。
-
字号比例 — 是否有统一比例,还是字号随意设定?采用模块化比例(1.125 / 1.2 / 1.25)。字号:12 / 14 / 16 / 20 / 24 / 32 / 48 / 64 / 72。不要随意使用 13px / 15px / 17px,除非出于视觉校正需要。
-
字距(letter-spacing):
- ≥ 24px → 使用
tracking-tight(-0.02em),40px 及以上可更紧 - 正文 14-20px → 默认字距
- 分类标签 11-13px → 使用
tracking-wide(+0.06em)+ 允许全大写(唯一例外) - 标题、导航、按钮、表格中绝不要使用全大写
- ≥ 24px → 使用
-
行高(line-height):
- 标题:1.05-1.15
- 正文:1.5-1.65
- UI(按钮、标签):1.2-1.3
-
字重层级 — 最多选 2-3 种字重。常见设置:正文 400、UI/标签 500、标题 600-700。不要为了“以防万一”加载 9 种字重。
-
微排版(组合细节):
- 对所有需要对齐的数字(表格、统计数据、时间戳、价格)使用
tabular-nums - 标题使用
text-wrap: balance,正文使用text-wrap: pretty - 使用弯引号(
'/")、长破折号(—)、短破折号(–),不要使用双连字符 - 品牌名称中、数字与单位之间,以及标题末尾较短单词前使用
- 缩写中的撇号使用弯撇号
- 使用
font-feature-settings或font-variant-*启用可选特性(连字、ss01、分数) - 单位使用直撇号(
′、″),不要用引号代替
- 对所有需要对齐的数字(表格、统计数据、时间戳、价格)使用
-
层级检查 — 能否一眼区分主要、次要和第三级内容?如果每一行的字重或字号都相同,就合并或强化层级。
强化层级
如果 UI 在技术上正确,却令人过目即忘,就用排版作为利器。选一个元素作为标志性特征(绝不要选两个);大胆感来自排版,而非颜色或装饰:
- 主视觉标题 — 将字号提升至 80-120px,字重提升至 700-800,字距设为 -0.04em。行高设紧(0.95-1.0)。
- 拉大层级差距 — 扩大 H1 与正文之间的差距。如果 H1 是 32px、正文是 16px,UI 就显得有气无力;H1 达到 48px 及以上时,比例才更醒目。刻意压缩或扩大字号范围。
- 微型标志元素 — 添加一个反复出现的自定义细节:手绘下划线、数字计数器(
01、02)、不对称的辅助元素,或独特的列表标记。
强化的旋钮门槛(CRAFT_LEVEL):
≤ 4— 跳过。大胆风格属于工艺层,而非基线要求。5-7— 仅强化排版。除非用户提出要求,否则不添加标志性元素。8+— 强化排版 + 一个标志性细节(在/craft首轮中根据references/craft-intent.md选择;/polish和/bolder可加强这一细节——绝不要再叠加第二个)。
预检: 如果强调色已经过度使用,或层级已经十分强烈,问题就不是不够突出,而是视觉噪声过多。改用 /distill(删减)或 /colorize(减少强调色)。
输出: 直接编辑代码。打印 Review Format 表格。指出影响最大的一项改动(通常是“字体选择”或“主视觉标题使用 tracking-tight”)。
下一步: /polish——排版系统确立后,最适合立即处理微小细节(第 1 阶段)。