How-to · Design & Creative · By JR Brugger (Design Workflow)

How to use Typography Scale in your AI agent

Install and use the Typography Scale skill in Claude Code, Cursor, Codex, Gemini CLI, OpenCode, and Windsurf — with sample prompts.

What you'll get

This skill creates a complete typography system with harmonious font sizes, weights, and spacing rules. It's designed for anyone building digital products who wants their text to look polished and professional without guessing at sizes. You get a ready-to-use scale that works across desktop and mobile.

Step 1 — Get the skill source URL

The Typography Scale skill lives at:

Open ↗

Step 2 — Add it to your AI agent

Copy one of these prompts and paste it into your AI tool. The agent will fetch and install the skill for you.

Claude Code

Add the agent skill from https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/typography-scale to my project.

Cursor

Install this agent skill: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/typography-scale

Codex

Add this skill to .codex/skills/: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/typography-scale

Gemini CLI

Add the skill at https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/typography-scale to my .gemini/skills/ directory.

OpenCode

Install this agent skill from https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/typography-scale

Windsurf

Add this skill: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/typography-scale

Step 3 — Try these prompts

Once the skill is installed, ask your AI things like:

  • Designing a website, app, or marketing site and need consistent text sizing
  • You want your headings and body copy to look harmonious without manual tweaking
  • Building a design system or brand guide
  • You need typography rules that work across desktop and mobile

What this skill does

  • Generates a mathematical scale of text sizes from captions to large headings
  • Defines line heights and letter spacing for optimal readability
  • Provides font weight and pairing recommendations
  • Creates responsive rules so text scales gracefully on mobile devices
  • Documents usage guidelines for each text style
SkillTypography Scale
Made byJR Brugger (Design Workflow)
CategoryDesign & Creative
SourceView original ↗