designkit-cli

Install design kits any AI agent can actually use. Companion CLI for designkit.sh.

A DESIGN.md is a single-file brand definition — colors, typography, spacing, radius, components — written in YAML frontmatter on top of plain markdown prose. Drop one into your project and tools like Claude Code, Cursor, or any LLM-powered codegen will match your brand instead of inventing generic ui.

designkit-cli is the one-line installer.

Usage

# Browse the registry
npx designkit-cli list

# Install a kit (auto-detects Claude / Cursor / generic project)
npx designkit-cli add heritage
npx designkit-cli add getdesign/airbnb

# Scaffold a starter DESIGN.md in the current directory
npx designkit-cli init

The bin name is designkit, so after pnpm add -D designkit-cli you can run:

pnpm designkit add heritage

What gets installed

Three files, in a folder named after the kit slug:

• DESIGN.md — the raw brand spec (frontmatter + prose)
• SKILL.md — wrapped frontmatter + token quick-reference, ready for Claude Code's skill_search or Cursor's .cursor/rules/*.mdc
• tokens.css — flattened CSS custom properties (--color-accent: …) ready to import into a stylesheet

Auto-detection

| Project marker | Files written to | |---|---| | .claude/ exists | .claude/skills/design-kit-<slug>/ | | .cursor/ exists | .cursor/rules/design-kit-<slug>.mdc + asset folder | | Otherwise | ./design-kits/<slug>/ |

Override with --target claude-code | cursor | generic.

Kit identifiers

npx designkit-cli add heritage              # official preset
npx designkit-cli add getdesign/airbnb      # curated community
npx designkit-cli add owner/repo            # user-published (Phase 2)

Use the explicit source:slug form to disambiguate:

npx designkit-cli add official:heritage
npx designkit-cli add getdesign:cursor
npx designkit-cli add gh:owner/repo

Configuration

Set DESIGNKIT_REGISTRY to point at a different host (e.g. running the registry locally during development):

DESIGNKIT_REGISTRY=http://localhost:3170 npx designkit-cli list

Default: https://designkit.sh.

Roadmap

• ✅ add, list, init
• ⏳ gh:owner/repo — install from any public GitHub repo via raw
• ⏳ publish — publish a DESIGN.md from your repo to the registry
• ⏳ preview — render a local visual preview of a DESIGN.md

License

MIT — see designkit.sh for the wider project.