typeset

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Context: this sub-skill is one lens of the broader

ui-craft

skill. If the

ui-craft

skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

Typeset the UI at

$ARGUMENTS

. Load the

ui-craft

skill and read

references/typography.md

Note: typeset is knob-agnostic — typography rules (no ALL CAPS on headings, tracking-tight ≥24px, one body font, etc.) are not tunable.

Apply, in order:

Font inventory — what's loaded? If Inter is the default choice with no reason, ask before accepting it (Inter is the #1 AI-tell). Good alternatives: Geist, DM Sans, Plus Jakarta Sans, system stack. One body font, optionally one display font. Never three.
Scale — is there a scale or are sizes ad hoc? Anchor to a modular scale (1.125 / 1.2 / 1.25). Sizes: 12 / 14 / 16 / 20 / 24 / 32 / 48 / 64 / 72. No 13px / 15px / 17px one-offs unless optical.
Tracking (letter-spacing):
- ≥ 24px →
```
tracking-tight
```
  (
```
-0.02em
```
  ) or tighter for 40px+
- 14-20px body → default
- 11-13px category labels →
```
tracking-wide
```
  (
```
+0.06em
```
  ) + uppercase IS allowed here (the one exception)
- Never ALL CAPS on headings, nav, buttons, tables
Leading (line-height):
- Headings: 1.05-1.15
- Body: 1.5-1.65
- UI (buttons, labels): 1.2-1.3
Weight hierarchy — pick 2-3 weights max. Common: 400 body, 500 UI/labels, 600-700 headings. Never load 9 weights "just in case".
Micro-typography (the compound details):
- ```
tabular-nums
```
  on every number you align (tables, stats, timestamps, prices)
- ```
text-wrap: balance
```
  on headlines,
```
text-wrap: pretty
```
  on body
- Curly quotes (
```
'
```
  /
```
"
```
  ), em dashes (
```
—
```
  ), en dashes (
```
–
```
  ), no double hyphens
- ```
&nbsp;
```
  in brand names, between number + unit, and before final short words in headlines
- Real apostrophes in contractions
- ```
font-feature-settings
```
  or
```
font-variant-*
```
  for opt-in features (ligatures, ss01, fractions)
- Straight prime marks (
```
′
```
  ,
```
″
```
  ) for units, not quotes
Hierarchy check — can you tell primary / secondary / tertiary at a glance? If every line has the same weight or size, collapse or amplify.

背景说明： 本子技能是更广泛的

ui-craft

技能的一个细分方向。若同时安装了

ui-craft

技能，请先阅读其SKILL.md中的发现环节、防冗余规范及工艺测试内容，再应用以下具体细则。

为

$ARGUMENTS

指向的UI进行排版设置。加载

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这类非常规字号。
字距（Tracking，即letter-spacing）设置：
- 字号≥24px → 使用
```
tracking-tight
```
  （
```
-0.02em
```
  ），字号40px及以上时可进一步缩小字距
- 14-20px正文 → 使用默认字距
- 11-13px分类标签 → 使用
```
tracking-wide
```
  （
```
+0.06em
```
  ）+ 允许使用全大写（唯一例外情况）
- 标题、导航、按钮、表格中严禁使用全大写
行高（Leading，即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
```
- 使用弯引号（
```
'
```
  /
```
"
```
  ）、长破折号（
```
—
```
  ）、短破折号（
```
–
```
  ），禁止使用双连字符
- 品牌名称中、数字与单位之间、标题最后一个短单词前使用
```
&nbsp;
```
- 缩写词中使用正确的撇号
- 使用
```
font-feature-settings
```
  或
```
font-variant-*
```
  启用可选特性（连字、ss01、分数等）
- 单位使用直撇号（
```
′
```
  ,
```
″
```
  ），而非引号
层级检查 — 是否能一眼区分主、次、三级内容？若所有文字的字重或字号都相同，需合并或强化层级差异。

Amplifying hierarchy

强化层级效果

If the UI is technically correct but forgettable, use typography as the weapon. Pick ONE element to carry signature (never two); boldness is typography, not color or decoration:

Hero headline — push size to 80-120px, weight to 700-800, tracking to -0.04em. Tight leading (0.95-1.0).
Hierarchy jump — widen the gap between H1 and body. If H1 is 32px and body is 16px, the UI is whispering; if H1 is 48px+, the ratio reads. Compress or expand the range deliberately.
Micro-motif — one custom detail that repeats: a hand-drawn underline, numeric counters (
```
01
```
,
```
02
```
), an asymmetric supporting element, a distinctive list marker.

Knob gating for amplification (CRAFT_LEVEL):

```
≤ 4
```
— skip. Boldness is a craft layer, not a baseline.
```
5-7
```
— apply the type amplification only. No signature motif unless asked.
```
8+
```
— type amplification + one signature detail (chosen at
```
/craft
```
first pass per
```
references/craft-intent.md
```
;
```
/polish
```
and
```
/bolder
```
strengthen it — never stack a second).

Pre-check: if an accent is already overused or hierarchy is already loud, you don't have a tameness problem — you have a noise problem. Route to

/distill

(cut) or

/colorize

(reduce accents) instead.

Output: edit code directly. Print the Review Format table. Call out the single highest-impact change (usually: "font choice" or "tracking-tight on hero").

Next step:

/polish

— micro-details land best right after the type system is set (rung 1).

若UI在技术层面符合规范但缺乏记忆点，可借助排版打造特色。仅选择一个元素作为视觉焦点（绝不能选两个）；突出性来自排版，而非颜色或装饰：

主标题 — 将字号调至80-120px，字重调至700-800，字距调至-0.04em。使用紧凑行高（0.95-1.0）。
层级跨度 — 拉大一级标题与正文的字号差距。若一级标题为32px、正文为16px，UI视觉效果会过于平淡；若一级标题设为48px及以上，层级比例会更清晰。需有意识地压缩或扩展字号范围。
微主题元素 — 添加一个可重复使用的自定义细节：手绘下划线、数字计数器（
```
01
```
,
```
02
```
）、不对称辅助元素、独特的列表标记。

强化效果的权限控制（CRAFT_LEVEL）：

```
≤ 4
```
— 跳过。突出性属于进阶工艺层，而非基础要求。
```
5-7
```
— 仅应用排版强化效果。除非用户要求，否则不添加特色主题元素。
```
8+
```
— 应用排版强化效果 + 一个特色细节（需先根据
```
references/craft-intent.md
```
在
```
/craft
```
环节确定；
```
/polish
```
和
```
/bolder
```
环节可进一步强化，但绝不能添加第二个特色细节）。

预检查： 若已有过度使用的强调元素，或层级已过于醒目，则问题不在于平淡，而在于视觉杂乱。此时应转向

/distill

（精简）或

/colorize

（减少强调元素）操作。

输出要求：直接编辑代码。输出评审格式表格。指出影响最大的单一修改（通常为「字体选择」或「主标题使用tracking-tight」）。

下一步：

/polish

— 微细节优化最适合在排版系统搭建完成后（第一阶段）进行。