Make your design system with your coding agent

A brand book, a DESIGN.md and mockups, then every pull request on them

claude~/acme

/crocotaste:branding

Three directions are open in your browser

The second, with a warmer accent

Brief approved · docs/design/brief.md

/crocotaste:guidelines

Wrote BRAND.html · 10 chapters

Derived DESIGN.md from its tokens

/crocotaste:mockups

3 screens · docs/design/mockups/index.html

A Claude Code plugin with six skills, free and open source. It runs in your repo, and your files stay on your machine.

your shell

claude plugin install crocotaste --marketplace crocotaste/crocotaste-plugin

See what it makes View on GitHub

Six skills, one path

From a brand idea to a reviewed pull request

01
Brainstorm the brand
The feel, references, palette, type and shape, shown as directions in your browser until you approve a brief.
/crocotaste:branding
Writes docs/design/brief.md
or
Or read the look you have
For a codebase with a look
Writes the brief of an existing codebase from its tokens, theme, fonts and components, and flags what disagrees.
/crocotaste:extract
Writes docs/design/brief.md
02
Write the brand book
Turns the brief into a single-file brand book in ten chapters, then derives your DESIGN.md from its tokens.
/crocotaste:guidelines
Writes BRAND.html · DESIGN.md
03
Mock up your screens
One HTML file per screen from the same tokens, with an index, previewed live as it changes.
/crocotaste:mockups
Writes docs/design/mockups/
04
Point every agent at it
One marked block in CLAUDE.md or AGENTS.md, so every coding agent in the repo builds from your system.
/crocotaste:handoff
Writes CLAUDE.md or AGENTS.md · .gitattributes
05
Keep every pull request on it
Shows the Crocotaste App's install link, so every pull request is checked against your DESIGN.md.
/crocotaste:install
Writes one line out of CLAUDE.md or AGENTS.md

Each skill names the next one when it ends, and you can call any of them on its own.

Tokens live once, in your brand book

DESIGN.md and every mockup are derived from them

BRAND.html

01 Foundations
02 Mark
03 Color
04 Typography
05 Spacing
06 Iconography
07 Components
08 Motion
09 Voice
10 Responsive

Outfit 600 · 32/40

DESIGN.mdderived

## Tokens

--color-primary #047f56

## Components

<Button> size sm | md

## Decisions

One primary button per screen.

mockups/invoices.html

Invoices

Still owed$1,240

Send reminders

What it writes in your repo

A small script derives DESIGN.md's front matter and the tokens inside every mockup from BRAND.html. A file that exists is never overwritten silently, and the decisions you wrote in DESIGN.md are kept word for word.

BRAND.html: The brand book, where the tokens live
DESIGN.md: The design system, for agents and for review
docs/design/brief.md: The brief you approved
docs/design/mockups/: One mockup per screen, and an index
CLAUDE.md or AGENTS.md: One marked block that points agents at the system
.gitattributes: Two lines that mark the book and the mockups as generated

Then every pull request stays on it

The last skill shows the App's install link and never opens it for you. Crocotaste reads your DESIGN.md on first sight, so no onboarding issue is opened, and every review cites it.

crocotasteOn-system0 violations

crocotaste1 finding · 1 driftstill green

Your files stay on your machine

The plugin runs inside Claude Code in your own repository. Crocotaste never writes to your repo, and the plugin writes only the files above.

Dependencies: None: the script is plain Node
Network: Google Fonts for your type, and npx or gh when a skill needs them
Writes: Only the files above, never one silently
Price: Free and open source, MIT licensed

Two made-up products, made with it

Each has a brief, a brand book, a DESIGN.md and three mockups, all made with these skills. See the examples (opens in a new tab)

Tidewell: Tide and weather for sea swimmers: cool, airy, unhurried
Ledgerline: Bookkeeping for small shops: warm, dense, confident

Install it in one command

From your shell, with Claude Code 2.1.292 or later

your shell

claude plugin install crocotaste --marketplace crocotaste/crocotaste-plugin

Or in two steps inside a Claude Code session:

inside a Claude Code session

/plugin marketplace add crocotaste/crocotaste-plugin
/plugin install crocotaste@crocotaste

Then start with /crocotaste:branding for a new product, or /crocotaste:extract for a codebase that already has a look.

Install on one repo, open a pull request

Your first review in about a minute, 3 free and no card

Install on GitHub Read the plugin docs

Make your design system with your coding agent

Six skills, one path

Brainstorm the brand

Or read the look you have

Write the brand book

Mock up your screens

Point every agent at it

Keep every pull request on it