Typeset

educlopez/ui-craft/.gemini/skills/typeset

作者 educlopezceecc8e1fb0c2befda73da996435900d6dd0c1ac无许可证375 个星标收录于 2026年10月9日更新于 2026年10月9日仓库5周前更新

Typography pass covering font choice, modular scale, tracking, leading, weight hierarchy, and micro-typography details. Use when fonts feel generic (default Inter with no reason), the scale is ad hoc, hierarchy is flat, or the user says "fix the typography" / "the text doesn't feel right". Invoke when the user asks for typeset on their UI, or mentions 'typeset' alongside design / UI / frontend work.

仅含说明Design & Creative
AI 生成的概览

对界面执行一次排版处理:字体选择、模块化比例、字距、行高、字重层级与微观排版细节。

功能
该技能引导智能体按顺序对用户界面进行排版处理,依次涵盖字体清单、模块化比例、字距、行高、字重层级、微观排版细节以及层级检查。它还描述了针对技术上正确但视觉平淡的界面可选的字体放大手法,并按工艺等级进行限制。产出是直接修改代码,并附上审查表格以及对影响最大的一处改动的说明。
适用场景
当字体显得通用、字号比例随意、层级扁平,或用户要求修复排版、觉得文字感觉不对时使用。它面向以排版为重点的设计、界面或前端工作。
运行要求
仅为指令,不附带脚本。它需要智能体能够直接编辑项目代码,并引用了未包含在此处的配套 ui-craft 技能和 references/typography.md 文件。
<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->

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:

  1. 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.

  2. 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.

  3. 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
  4. Leading (line-height):

    • Headings: 1.05-1.15
    • Body: 1.5-1.65
    • UI (buttons, labels): 1.2-1.3
  5. Weight hierarchy — pick 2-3 weights max. Common: 400 body, 500 UI/labels, 600-700 headings. Never load 9 weights "just in case".

  6. 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
  7. Hierarchy check — can you tell primary / secondary / tertiary at a glance? If every line has the same weight or size, collapse or amplify.

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:

  1. Hero headline — push size to 80-120px, weight to 700-800, tracking to -0.04em. Tight leading (0.95-1.0).
  2. 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.
  3. 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).

来源与署名

来源:educlopez/ui-craft位于.gemini/skills/typeset提交ceecc8e

许可证: 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架