typeui.sh logotypeui.sh

Generate skills

Run this command to create a design skill from scratch:

npx typeui.sh generate

The CLI asks you a series of questions about your design system, then writes a SKILL.md file that AI coding agents can follow.

Provider selection

First, you pick which AI tools you want to target. The universal path .agents/skills/design-system/SKILL.md is always included. You can also select provider-specific targets:

  • Cursor
  • Claude Code
  • Codex
  • OpenCode
  • Gemini CLI
  • Mistral Vibe

Or skip the picker with --providers:

npx typeui.sh generate --providers cursor,claude-code

What the CLI asks

The prompts run in this order:

1. Product basics

  • Product name — used as the title in the generated file
  • Brand summary — a short description of what your product does

2. Visual style

Multi-select from presets like modern, minimal, clean, high-contrast, bold, playful, editorial, data-dense, enterprise, premium. You can also type custom values.

3. Typography

  • Scale strategy — pick one: a fixed scale like 12/14/16/20/24/32, or a preset like mobile-first compact scale or desktop-first expressive scale
  • Primary UI font — choose from Google Fonts (Inter, Roboto, Poppins, DM Sans, etc.)
  • Display/heading font — choose from Google Fonts (Space Grotesk, Playfair Display, Bebas Neue, etc.)
  • Monospace font — choose from Google Fonts (JetBrains Mono, Fira Code, Source Code Pro, etc.)
  • Font weights — multi-select from 100–900 (all selected by default)

4. Color palette

  • Palette guidance — multi-select: primary, secondary, neutral, success, warning, danger, info, surface/subtle layers, dark mode parity
  • Token values — hex values for primary, secondary, success, warning, danger, surface, and text

5. Spacing

Pick one scale: 4/8/12/16/24/32, 2/4/8/12/16/24/32/48, 8pt baseline grid, compact density mode, or comfortable density mode.

6. Components

Multi-select the component families your design system covers — buttons, inputs, forms, cards, tables, modals, navigation, and many more. Add custom ones if needed.

7. Accessibility

Multi-select from: WCAG 2.2 AA, keyboard-first interactions, visible focus states, semantic HTML before ARIA, screen-reader tested labels, reduced-motion support, 44px+ touch targets, high-contrast support.

8. Writing tone

Multi-select: concise, confident, helpful, clear, friendly, professional, action-oriented, low-jargon.

9. Rules

  • Do rules — things your design should always follow (e.g. "prefer semantic tokens over raw values")
  • Don't rules — things to avoid (e.g. "avoid low contrast text", "avoid inconsistent spacing rhythm")

Output

After answering all prompts, the CLI writes SKILL.md files to each selected provider path. The generated file includes all of your answers structured into sections that AI agents can parse: mission, brand, style foundations, components, accessibility, tone, and rules.

Preview the output without writing files:

npx typeui.sh generate --dry-run

To change specific sections later without re-running the full flow, use update.

LicenseUpdate skills