designagent-cli

The design brain Claude Code needs — web, mobile, any canvas, any framework.

npx designagent-cli init

Published as designagent-cli on npm (the unscoped designagent is blocked by npm's typosquat filter). After a global install the command is still designagent.

Right now, Claude Code opens knowing nothing about your design — no system, no tokens, no taste. designagent fixes that in 60 seconds: it reads your codebase, reverse-engineers your design system, and writes it down so Claude Code understands it the way a senior design engineer would on day one.

Commands

npx designagent-cli init      # scan + generate DESIGN.md / CLAUDE.md / DECISIONS.md
npx designagent-cli docs      # visual design-system docs (colors, type, spacing, drift)

Flags: docs accepts --export (static HTML), --watch (live reload), --no-open.

What it generates

| File | The question it answers | Owned by | |---|---|---| | DESIGN.md | What are the exact values? | @google/design.md open spec — machine-readable, linted tokens | | CLAUDE.md | How do we build? | designagent — craft principles, framework conventions, a11y rules, agent instructions | | DECISIONS.md | Why is it this way? | designagent — a living log of design decisions |

DESIGN.md = the what · CLAUDE.md = the how · DECISIONS.md = the why.

The init flow

designagent init scans your codebase, then asks three questions:

1. Canvas — Figma · Pencil · OpenPencil · None
2. Design system — Tailwind · shadcn/ui · Custom
3. Framework(s) — React · Vue · Svelte · React Native · SwiftUI · Jetpack Compose (multi-select for monorepos)

Then it generates all three files, lints DESIGN.md with @google/design.md, wires up .mcp.json for your canvas, and installs skills to ~/.designagent/skills/. If files already exist it offers Augment / Migrate / Fresh.

Why it's different

• Reverse-engineers, doesn't template — pulls your real palette, spacing grid, type scale, and component inventory from source, and flags drift (hardcoded values that should be tokens) with file + line.
• Web + native mobile from day one — the only design-agent setup that covers SwiftUI and Jetpack Compose, not just web.
• Canvas-agnostic — sits above Figma, Pencil, and OpenPencil. Figma MCP gives Claude access; designagent gives Claude intelligence.
• Built on Google's open token spec — DESIGN.md is a real, linted, diffable, exportable standard, not a bespoke format.
• Skills are just .md files — framework-aware, community-contributable. Like dotfiles for design agents.

Tokens, everywhere

DESIGN.md exports to real targets via the Google CLI:

npx @google/design.md export --format css-tailwind DESIGN.md   # Tailwind v4 @theme
npx @google/design.md export --format dtcg DESIGN.md           # W3C Design Tokens

For SwiftUI and Jetpack Compose, the design-to-code skill generates the token bridge (DesignTokens.swift / Theme.kt) directly from DESIGN.md.

License

MIT · Built by Sherizan Sheikh · designagent.dev