메뉴
Design type systems — scale, pairing, fluid type, vertical rhythm — use when: pick fonts, font pairing, type scale, vertical rhythm, fluid typography, body and heading sizes
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | gsp-typography |
| description | Design type systems — scale, pairing, fluid type, vertical rhythm — use when: pick fonts, font pairing, type scale, vertical rhythm, fluid typography, body and heading sizes |
| user-invocable | true |
| allowed-tools | ["Read","Write","Bash","AskUserQuestion","Glob","Grep","WebSearch"] |
This is a standalone composable skill. It works two ways:
/gsp-typography directly for type scale generation, font pairing, or full system design/gsp-typography --enrich to add technical precision to creative typeface choicesVisual companion: https://typescale.com/ — users can preview ratios interactively there, then feed the values here.
Build a production-ready typography system — scale, pairing, fluid type, vertical rhythm, and font loading strategy.Input: Font families + ratio, --enrich, --list-ratios, --preview, --from-style, or interactive
Output: typography.md foundation chunk + CSS file (Tailwind or vanilla)
Agent: None — inline skill, mathematical scale generation
<execution_context> @${CLAUDE_SKILL_DIR}/chunk-format.md </execution_context>
- Always use `AskUserQuestion` for user interaction — never prompt via plain text - One decision per question — never batch multiple questions in a single message - All sizes include px, rem, AND fluid clamp() values for headings - CSS output defaults to Tailwind v4 / shadcn format unless `--vanilla` is passed - Foundation chunks follow `chunk-format.md` format exactly ## Step 0: Parse mode| Input | Mode | Domain |
|---|---|---|
"Inter" --ratio 1.25 | Direct scale | domains/scale.md |
--from-style cyberpunk | From style preset | domains/scale.md |
--list-ratios | List ratios | domains/scale.md |
--preview "Inter" --ratio 1.25 | Preview scale | domains/scale.md |
--enrich | Enrich existing typography | domains/pairing.md |
| (no args) | Interactive full system | domains/system.md |
Read the domain file from ${CLAUDE_SKILL_DIR}/domains/{domain}.md.
For scale modes, also read ${CLAUDE_SKILL_DIR}/references/typography-scales.md.
Execute the loaded domain's workflow. The domain file contains all rules, formulas, tables, and output specifications.
Write typography.md + optional CSS file to the resolved output path. Display scale summary and offer next steps.
Add reference material to a project — use when: add a reference, save inspiration, attach examples, link this site as reference, drop in a moodboard
Craft ASCII art interactively — you direct, the artist creates — use when: make ASCII art, terminal art, decorative banner, splash screen, hero ASCII
Audit an existing brand before evolving it — use when: audit our brand, what do we have, before a rebrand, brand health check, current brand state, brand inventory
Sync brand to match a project's shipped state — tokens, voice, visual patterns, personality — use when: brand drifted from the app, reverse-engineer the brand, the code is ahead of the brand docs, sync brand to shipped, update brand from production
Design color systems — palettes, contrast, semantic mapping, dark mode — use when: pick colors, build a palette, semantic tokens, dark mode pairings, brand color, accent color
Design icon systems — library selection, sizing, containers, custom SVG direction — use when: pick an icon library, icon sizing rules, icon containers, custom SVG direction, swap icons, icon strategy