mcpField
T
typography-system

typography-system

github.com/sanky369设计与 UI31258 次安装15 周前更新
代码仓库

关于 typography-system

面向前端设计工作的技能指南，可为现有代码库建立并应用排版比例、字体和可读性规范。它强调检查现有样式系统，并将令牌落实到实际文本组件中。

主要功能

  1. 01检查字号、字体与行高
  2. 02按产品密度选择比例
  3. 03创建含行高的排版令牌
  4. 04应用并迁移文本样式
  5. 05检查对比度与可读性

适用场景

  1. 01统一分散的字号定义
  2. 02为仪表盘构建紧凑排版
  3. 03改善长文内容的阅读体验

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sanky369/vibe-building-skills --skill typography-system

安装后在 Claude Code 中输入/typography-system确认已加载。

附带文件references/type-details.md

详细介绍

字体排印系统

为此代码库构建一套可用的字体大小比例系统——将设计令牌接入现有样式系统，并应用到实际的标题、正文和 UI 文本中，而不是写一篇关于字体的文章。核心原则：字号应根据产品密度选择模块化比例；可读性约束（行高、行长、对比度）不可妥协，并优先于美感。

适用场景 / 交接

  • 适用于字号比例、字体选择与加载、标题层级、可读性修复和流式排版。
  • 如果目前完全没有设计令牌基础设施 → 先运行 skills/frontend-design/design-foundation（或将字体令牌作为它的第一个部分来创建）。
  • 文本颜色未达到对比度要求时，这属于与 skills/frontend-design/color-system 交叉的工作——在这里修复你涉及的颜色组合；涉及整个调色板的工作交给该技能。
  • 标题字号合适，但页面仍然不易浏览 → 使用 skills/frontend-design/visual-hierarchy-refactoring。

第 1 步 — 检查代码库

  1. 统计字号。 搜索 font-size:\s*[\d.]+(px|rem)、Tailwind 的 text-(xs|sm|base|lg|xl|\dxl) 和任意值 text-\[。不同字号超过 8–10 种 = 过于分散；记录字号列表及其出现频率。
  2. 查找字体。 搜索 font-family|@font-face|fonts.googleapis|next/font，并检查 tailwind.config.* / @theme 中的 fontFamily。统计字体系列数和已加载的字重。
  3. 检查行高和行长。 搜索 line-height|leading- 和 max-width.*ch|max-w-prose。
  4. 检查现有令牌。 如果已运行 design-foundation，就在其文件中扩展；绝不要另建一套平行系统。
  5. 根据实际界面判断产品密度： 数据表格、仪表盘和大量控件 = 高密度；着陆页 / 营销页 = 宽松；长篇阅读 = 编辑排版。

第 2 步 — 收集需求

一次性询问尚不明确的内容：用几个词描述品牌气质（或“替我决定”），以及保留当前字体还是可以更换？ 根据代码推断产品密度；基础字号设为 16px，数据密集型产品则可将正文字号设为 14px。不要停滞等待——如果能看到实际界面，就说明假设并开始构建。

第 3 步 — 构建字号比例

根据产品密度选择比例（核心决策规则）：

产品比例原因
数据密集型应用、仪表盘、管理后台1.125–1.2（大二度）需要容纳多个层级，又不让标题过大
标准产品 UI / SaaS1.25（大三度）均衡；不确定时的默认选择
营销网站、着陆页1.25–1.333标题需要醒目
编辑排版 / 品牌感强、主视觉醒目1.414–1.618层级较少，字号跳跃更明显

从基础字号 × 比例^n 生成字号，然后取整到合适的像素值（以 16px 为基础，比例为 1.25 时：16、20、25、31、39、49、61；按需取整）。在基础字号以下添加 xs(12) 和 sm(14)，用于说明文字 / 标签。字号比例的上限取实际使用的最大字号——不要给设置应用发布一个 76px 的展示字号令牌。

字号越大，行高越低： 正文 1.5–1.7，小标题 1.3，大标题 1.1–1.2，说明文字 / 标签 1.4。将行高包含在字号令牌中（Tailwind 字号元组原生支持此设置）。

流式标题： 对于 ≥ 约 31px 的字号，使用 clamp(min, preferred vw formula, max)，而不是按断点覆盖。正文保持固定字号（16px）——绝不要让基础字号以下的文本使用流式排版。

字体： 限制在 ≤2 个字体系列、3–4 种字重（400/500/600/700 子集）。如果需要选择字体：正文使用适合日常 UI 的无衬线字体（如果有可变字体则优先），可选择一种与指定气质相符的展示字体用于标题。使用框架的优化方案（如 next/font）加载字体，或使用 preload + font-display: swap。字体搭配表和字体特性详情见：references/type-details.md。

标准结构（Tailwind v3；根据检测到的技术栈调整）
fontSize: {
  xs:   ['0.75rem',  { lineHeight: '1.4' }],           // 12 — captions, labels
  sm:   ['0.875rem', { lineHeight: '1.5' }],           // 14 — secondary UI text
  base: ['1rem',     { lineHeight: '1.6' }],           // 16 — body
  lg:   ['1.125rem', { lineHeight: '1.6' }],           // 18 — lead paragraphs
  xl:   ['1.25rem',  { lineHeight: '1.3', fontWeight: '600' }],  // 20 — h4/h5
  '2xl': ['1.5625rem', { lineHeight: '1.3', fontWeight: '600' }], // 25 — h3
  '3xl': ['clamp(1.6rem, 1.2rem + 1.6vw, 1.9375rem)', { lineHeight: '1.2', fontWeight: '700' }], // h2
  '4xl': ['clamp(1.9rem, 1.3rem + 2.4vw, 2.4375rem)', { lineHeight: '1.1', fontWeight: '700' }], // h1
}

第 4 步 — 应用并迁移

  1. 将这些令牌写入项目系统（Tailwind 配置 / @theme / CSS 变量）。
  2. 应用于基础元素或共享组件（标题、p、标签、按钮），不要为每个页面单独设置类。
  3. 限制正文宽度：长篇内容容器设置 max-width: 65ch。
  4. 在 1–3 个高流量文件中迁移第 1 步发现的主要离群字号；其余字号映射到对应令牌。

必需的输出格式

交付代码以及以下摘要：

## Type tokens
[file path + full code in the project's system]

## Scale decision
- Density: [dense/standard/marketing/editorial] — evidence: [what you saw]
- Ratio: [x] · Base: [16px] · Levels: [list, snapped px values]
- Fonts: [family/weights] — [kept existing / chosen because …] · Loading: [mechanism]

## Migration map
| Found | Count | Replace with |
| text-[15px], 15px | 12 | text-sm (14px) |
| ... |

## Applied now
[components/files actually restyled]

## Verify
[Contrast pairs checked with ratios; measure per breakpoint]

质量标准（交付前检查）

  • 总字号 ≤8–10 个，且全部符合比例；每个迁移后的值都映射到且仅映射到一个令牌
  • 正文 ≥16px（仅在密集数据 UI 中可低至 ≥14px，且绝不用于长篇内容）
  • 行高：正文 1.5–1.7，标题 1.1–1.3，不低于 1.1
  • 每个断点下的正文测量宽度为 45–75ch
  • 文本/背景对比度：普通文本 ≥4.5:1，大号文本 ≥3:1（≥24px，或粗体时 ≥18.7px）——注明计算出的比率
  • 实际加载的字体系列 ≤2 种、字重 ≤4 种；使用 font-display: swap 或框架等效设置
  • 标题层级一目了然（相邻层级之间至少在比例步进和/或字重上有所区别）
  • 仅大号标题使用流式 clamp()；正文大小固定
  • 字间距：≥39px 的标题略微收紧（−0.01 到 −0.02em），全大写标签略微加宽（+0.05em）

集成

  • 输入：来自 skills/frontend-design/design-foundation 的令牌文件（扩展其中的排版部分）；来自 skills/frontend-design/layout-system 的布局容器（正文测量宽度由其管理）。
  • 输出：供 skills/frontend-design/visual-hierarchy-refactoring（字号/字重层级）和 skills/frontend-design/component-architecture（组件文本样式）使用的字体令牌。
  • 对比度配对信息供 skills/frontend-design/color-system 使用，并由 skills/frontend-design/accessibility-excellence 审核。

参考资料

  • references/type-details.md — 按风格分类的字体搭配表、可变字体、OpenType 特性（等宽数字、小型大写字母）、完整的长篇内容/UI 排版模式，以及完整的比例 → 字号阶梯表。选择字体或设置长篇内容样式时请阅读。

评论

支持 Markdown