The Claude Code plugin

Crocotaste reads a DESIGN.md. Most repositories don’t have one yet, and a brand new product has nothing to derive it from. The plugin covers that stretch inside Claude Code: it brainstorms the brand with you, writes a single-file brand book, derives DESIGN.md from the book’s tokens, mocks up your screens from the same tokens, and points every coding agent at the result. Then it shows you the App’s install link.

Install

One command from your shell (Claude Code 2.1.292 or later):

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

Or two steps 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.

The six skills

branding --> guidelines --> mockups --> handoff --> install
               ^
extract -------+

• /crocotaste:branding: brainstorm the brand with you, the feel, references, palette, type and shape, shown as directions in the browser, ending in an approved brief.
• /crocotaste:extract: write the brief of an existing codebase by reading its tokens, theme, fonts and components, and flag what is inconsistent.
• /crocotaste:guidelines: turn the brief into BRAND.html, a single-file visual brand book, and derive DESIGN.md from it, both reviewed before you see them.
• /crocotaste:mockups: build HTML mockups of your screens from BRAND.html, one file per screen with an index, previewed live.
• /crocotaste:handoff: wire the design system into the repo for every coding agent, through CLAUDE.md or AGENTS.md and .gitattributes.
• /crocotaste:install: install the Crocotaste GitHub App so every pull request is checked against DESIGN.md.

Each skill names the next one when it ends. You can also call any step on its own.

What it writes in your repo

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

The tokens live once, in BRAND.html. A small script derives the rest: the DESIGN.md frontmatter and the tokens inside every mockup. A file that exists is never overwritten silently, and the decisions you wrote in DESIGN.md are kept word for word.

How it hands over

The install skill shows the App’s install link and never opens it for you. When the installation reaches Crocotaste, the DESIGN.md is read on first sight and no onboarding issue is opened, because the file already exists. From there every review cites it: your first review shows what lands on the pull request.

Your files stay on your machine

The script has no dependencies and makes one kind of network request: fonts downloads open fonts from Google Fonts when you ask. Crocotaste never writes to your repo, and the plugin writes only the files above.

Two made-up products, each with a brief, a brand book, a DESIGN.md and three mockups, all made with these skills: the plugin’s examples. The code is on GitHub.