字体排印水很深？这个 Skill 把专业书籍里的智慧交给 AI
字体排印水很深？这个 Skill 把专业书籍里的智慧交给 AI
做 AIGC 落地页、产品 UI 或者营销素材，最容易翻车的细节是什么？字体。字号乱跳、行间距随意、标点高低不齐……内容再好，视觉上一乱就掉价。以前这种问题要么靠设计师盯着调，要么靠经验积累，没个系统性参考。
最近发现一个 Skill 叫 Typography（来自 petekp/claude-code-setup 仓库），专门把专业字体排印知识打包成 AI 可以直接调用的规范。核心哲学引用了 Robert Bringhurst 的一句话：“Typography exists to honor content.”
它到底管什么
这个 Skill 覆盖的场景相当全面，不只是”推荐几个字体”那么简单：
- 字号系统（Type Scale）— Minor Third、Perfect Fourth 等经典比例，怎么选、为什么选
- 行间距与行长— 正文字 1.5–1.7 倍行高、45–75 字符行宽（66 为理想值），这些都是有依据的
- 字体配对（Font Pairing）— 主字体 + 正文字体怎么搭，衬线和非衬线怎么用
- 可变得字体（Variable Fonts）— 一个字体文件覆盖所有字重，怎么用 fluid weight 优化性能
- 字体加载— FOIT/FOUT 问题怎么解决，预加载和 Core Web Vitals 怎么平衡
- OpenType 特性— 连字符、数字样式（tabular nums、slashed zero）、字形集怎么调用
- 流体字体（Fluid Typography）— 用 clamp() 做响应式字体，不再靠断点硬切
- Tailwind 集成— 直接给出 Tailwind 工具类的集成方案
- 国际化— RTL 阿拉伯文/希伯来文、CJK、双向文字怎么处理
使用方式
安装后，Claude Code 里直接说人话：
- “帮我设计这个 landing page 的字体系统”
- “这段正文的行间距和行长合理吗？”
- “选一个适合金融产品的字体配对”
- “给这个 UI 加 fluid typography”
它会从 8 个参考文件里调用对应规范，生成完整的 Type Scale 表格和 CSS 实现。
为什么值得了解
字体排印是设计中门槛最高的领域之一——传统上要读《The Elements of Typographic Style》这类经典书籍才能建立系统认知。这个 Skill 把书里的核心原则提取成 AI 可执行的指令，等于给 Claude 请了个会排版的设计顾问。
对于 AIGC 工具生成的 UI/网页，这个 Skill 可以做自动审查：字体系统是否一致、行间距是否合理、字体加载是否有性能问题。
安装命令：
npx vskill@latest install petekp/claude-code-setup/typography
或
npx skills add https://github.com/petekp/claude-code-setup --skill typography
GitHub：https://github.com/petekp/claude-code-setup
评论区
登录后可评论。