mcpField
T
typeset

typeset

github.com/educlopez设计与 UI407573 次安装2 周前更新
代码仓库

关于 typeset

typeset 是 ui-craft 的排版子技能,面向调整界面字体与文字层级的开发者。它按字体、字号、字距、行高和微排版等步骤检查,并可直接修改代码。

主要功能

  1. 01检查字体清单与字体搭配
  2. 02建立模块化字号比例
  3. 03规范字距与行高
  4. 04控制字重层级
  5. 05检查数字、标点与文本层级

适用场景

  1. 01为界面建立一致的字体与字号系统
  2. 02改善标题、正文和控件的文字层级
  3. 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、正文只用一种字体等)不可调整。

按顺序执行:

  1. 字体清单 — 加载了哪些字体?如果没有理由就默认选择 Inter,请先询问再接受(Inter 是最明显的 AI 痕迹)。好的替代选项:Geist、DM Sans、Plus Jakarta Sans、系统字体栈。正文用一种字体,可选再加一种展示字体。绝不要用三种字体。

  2. 字号比例 — 是否有统一比例,还是字号随意设定?采用模块化比例(1.125 / 1.2 / 1.25)。字号:12 / 14 / 16 / 20 / 24 / 32 / 48 / 64 / 72。不要随意使用 13px / 15px / 17px,除非出于视觉校正需要。

  3. 字距(letter-spacing):

    • ≥ 24px → 使用 tracking-tight(-0.02em),40px 及以上可更紧
    • 正文 14-20px → 默认字距
    • 分类标签 11-13px → 使用 tracking-wide(+0.06em)+ 允许全大写(唯一例外)
    • 标题、导航、按钮、表格中绝不要使用全大写
  4. 行高(line-height):

    • 标题:1.05-1.15
    • 正文:1.5-1.65
    • UI(按钮、标签):1.2-1.3
  5. 字重层级 — 最多选 2-3 种字重。常见设置:正文 400、UI/标签 500、标题 600-700。不要为了“以防万一”加载 9 种字重。

  6. 微排版(组合细节):

    • 对所有需要对齐的数字(表格、统计数据、时间戳、价格)使用 tabular-nums
    • 标题使用 text-wrap: balance,正文使用 text-wrap: pretty
    • 使用弯引号(' / ")、长破折号(—)、短破折号(–),不要使用双连字符
    • 品牌名称中、数字与单位之间,以及标题末尾较短单词前使用  
    • 缩写中的撇号使用弯撇号
    • 使用 font-feature-settings 或 font-variant-* 启用可选特性(连字、ss01、分数)
    • 单位使用直撇号(′、″),不要用引号代替
  7. 层级检查 — 能否一眼区分主要、次要和第三级内容?如果每一行的字重或字号都相同,就合并或强化层级。

强化层级

如果 UI 在技术上正确,却令人过目即忘,就用排版作为利器。选一个元素作为标志性特征(绝不要选两个);大胆感来自排版,而非颜色或装饰:

  1. 主视觉标题 — 将字号提升至 80-120px,字重提升至 700-800,字距设为 -0.04em。行高设紧(0.95-1.0)。
  2. 拉大层级差距 — 扩大 H1 与正文之间的差距。如果 H1 是 32px、正文是 16px,UI 就显得有气无力;H1 达到 48px 及以上时,比例才更醒目。刻意压缩或扩大字号范围。
  3. 微型标志元素 — 添加一个反复出现的自定义细节:手绘下划线、数字计数器(01、02)、不对称的辅助元素,或独特的列表标记。

强化的旋钮门槛(CRAFT_LEVEL):

  • ≤ 4 — 跳过。大胆风格属于工艺层,而非基线要求。
  • 5-7 — 仅强化排版。除非用户提出要求,否则不添加标志性元素。
  • 8+ — 强化排版 + 一个标志性细节(在 /craft 首轮中根据 references/craft-intent.md 选择;/polish 和 /bolder 可加强这一细节——绝不要再叠加第二个)。

预检: 如果强调色已经过度使用,或层级已经十分强烈,问题就不是不够突出,而是视觉噪声过多。改用 /distill(删减)或 /colorize(减少强调色)。

输出: 直接编辑代码。打印 Review Format 表格。指出影响最大的一项改动(通常是“字体选择”或“主视觉标题使用 tracking-tight”)。

下一步: /polish——排版系统确立后,最适合立即处理微小细节(第 1 阶段)。

评论

支持 Markdown