원클릭으로 Manus에서 모든 스킬 실행

시작하기

ui-typeset

스타2

포크0

업데이트2026년 4월 25일 00:31

Fix typography: font choices, hierarchy, sizing, weight, readability

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

norlanp

norlanp/dotfiles

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

UI Typeset

/ui-typeset [target] - Fix typography: font choices, hierarchy, sizing, weight, readability. Make text intentional, not default.

Flow

Assess current typography: font choices (defaults? brand match?), hierarchy clarity, sizing consistency, readability, consistency
Plan improvements: font selection, type scale, weight strategy, spacing
Improve systematically

Font Selection

Banned (AI monoculture): Inter, Roboto, Arial, Open Sans, system defaults, Fraunces, DM Sans, Syne, Plus Jakarta Sans, Outfit, Space Grotesk, IBM Plex, Instrument Sans.

Procedure:

Write 3 concrete brand-voice words (not "modern" or "elegant")
List 3 fonts you'd normally reach for — reject them
Browse Google Fonts, Pangram Pangram, Future Fonts, Adobe Fonts, ABC Dinamo, Klim, Velvetyne
Look for something that fits as a physical object (museum caption, shop sign, terminal manual, fabric label)
Cross-check: right font for "elegant" ≠ necessarily serif. "technical" ≠ necessarily sans-serif

Type Hierarchy

5 sizes cover most needs: caption, secondary, body, subheading, heading
Consistent ratio between levels (1.25, 1.333, or 1.5)
Combine dimensions: size + weight + color + space — don't rely on size alone
App UIs: fixed rem-based scale, optionally at 1-2 breakpoints
Marketing/content: fluid clamp(min, preferred, max) for headings, fixed body text

Readability

max-width: 65ch for text containers
Line-height: 1.1-1.2 for headings, 1.5-1.7 for body, +0.05-0.1 for light-on-dark
Body text minimum 16px / 1rem
tabular-nums for data tables
font-kerning: normal

Consistency

2-3 font families max
3-4 weights max (Regular, Medium, Semibold, Bold)
Load only weights used
Semantic token names (--text-body, --text-heading)
Same-role elements styled identically

NEVER

Use > 2-3 font families
Pick sizes arbitrarily (commit to a scale)
Body text below 16px
Decorative fonts for body text
Disable browser zoom
Use px for font sizes (use rem)
Default to Inter/Roboto when personality matters
Pair similar fonts (two geometric sans-serifs)

이 저장소의 다른 Skills

같은 저장소

brainstorm

norlanp/dotfiles

Interview the user relentlessly about a plan or design. Use when the user wants to stress-test a plan before building, or uses any 'grill' trigger phrases.

2026-06-222

improve-code

norlanp/dotfiles

Surface deepening opportunities in a codebase — shallow modules, seam leaks, missing locality — and grill through whichever one you pick. Architecture-pattern aware (monolith / distributed / serverless).

2026-06-222

docs

norlanp/dotfiles

Reconcile and validate all documents in the project's docs/ directory

2026-06-092

audit

norlanp/dotfiles

Full-project code audit workflow: audit then fix

2026-05-162

debug

norlanp/dotfiles

Systematic root cause analysis. No fixes without investigation

2026-05-042

engineer

norlanp/dotfiles

Principal Engineer persona. Production-first technical judgment

2026-04-272

UI Typeset

/ui-typeset [target] - Fix typography: font choices, hierarchy, sizing, weight, readability. Make text intentional, not default.

Flow

Assess current typography: font choices (defaults? brand match?), hierarchy clarity, sizing consistency, readability, consistency

Plan improvements: font selection, type scale, weight strategy, spacing

Improve systematically

Font Selection

Banned (AI monoculture): Inter, Roboto, Arial, Open Sans, system defaults, Fraunces, DM Sans, Syne, Plus Jakarta Sans, Outfit, Space Grotesk, IBM Plex, Instrument Sans.

Procedure:

Write 3 concrete brand-voice words (not "modern" or "elegant")

List 3 fonts you'd normally reach for — reject them

Browse Google Fonts, Pangram Pangram, Future Fonts, Adobe Fonts, ABC Dinamo, Klim, Velvetyne

Look for something that fits as a physical object (museum caption, shop sign, terminal manual, fabric label)

Cross-check: right font for "elegant" ≠ necessarily serif. "technical" ≠ necessarily sans-serif

Type Hierarchy

5 sizes cover most needs: caption, secondary, body, subheading, heading

Consistent ratio between levels (1.25, 1.333, or 1.5)

Combine dimensions: size + weight + color + space — don't rely on size alone

App UIs: fixed rem-based scale, optionally at 1-2 breakpoints

Marketing/content: fluid clamp(min, preferred, max) for headings, fixed body text

Readability

max-width: 65ch for text containers

Line-height: 1.1-1.2 for headings, 1.5-1.7 for body, +0.05-0.1 for light-on-dark

Body text minimum 16px / 1rem

tabular-nums for data tables

font-kerning: normal

Consistency

2-3 font families max

3-4 weights max (Regular, Medium, Semibold, Bold)

Load only weights used

Semantic token names (--text-body, --text-heading)

Same-role elements styled identically

NEVER

Use > 2-3 font families

Pick sizes arbitrarily (commit to a scale)

Body text below 16px

Decorative fonts for body text

Disable browser zoom

Use px for font sizes (use rem)

Default to Inter/Roboto when personality matters

Pair similar fonts (two geometric sans-serifs)

name	ui-typeset
description	Fix typography: font choices, hierarchy, sizing, weight, readability