How designkit works

What is a DESIGN.md kit?

A DESIGN.md kit is a single markdown file that captures a complete visual system — colors, typography, spacing, rounded corners, shadows, and component stylings. Coding agents read it to generate UIs that match your brand without you having to repeat yourself in every prompt.

The format follows Google Stitch's DESIGN.md spec: YAML frontmatter with tokens + markdown prose with guidance. We use @agstudio/design-kit to parse and emit CSS variables.

Install a kit

Any public GitHub repo with a DESIGN.md at the root is installable:

npx designkit add owner/repo

This writes a DESIGN.md into your project root.

Publish your own kit

1. Create a public GitHub repo.
2. Drop a DESIGN.md at the root (YAML frontmatter + prose body).
3. Optionally run npx designkit preview to render a local preview.
4. Users install via npx designkit add owner/repo. First install registers your kit and it appears on the leaderboard.

Token reference

Every kit can define these sections — all optional, all extensible:

• colors — flat map of name → hex/rgb
• typography — slots (h1, h2, body, caption…) with family, size, weight, lineHeight, letterSpacing
• spacing — scalar map
• rounded — radius scale
• shadows — shadow scale
• components — per-component token maps (button-primary, card, etc.)

Token references use {colors.accent} syntax and resolve automatically.

What's next

• Browse the gallery and apply a kit to this site.
• Generate a kit from a brand prompt or URL (AI, coming soon).
• Open the canvas to build UI with an agent using any kit (coming soon).