The full upstream README, mirrored here for reference. Install config, tool schemas, adoption signals, and an original overview live on the CSS Crème listing page.
A Claude Code skill that gives a coding agent a real design system before it writes UI: semantic tokens, measured WCAG contrast, and rules it can be held to.
Free. No account, no API key, no paid tier.
An agent asked for UI with no design system does the same thing every time: invents a palette, mixes three or four corner radii, adds a second font nobody asked for, and ships contrast that was never checked. The result is recognisable on sight, and no amount of prompt rewording fixes it, because the problem is missing input rather than weak instruction.
A file fixes it. Tokens the agent must use, ratios that were computed rather than asserted, and numbered rules that can be diffed against what actually got built. "Use only these six roles" is checkable. "Make it clean" is not.
Fastest: connect the MCP server (free, no account, no key):
That gives the agent ten tools with no files to manage: search_themes, list_themes,
get_design_md, get_theme_tokens, get_install_command, get_agent_rules, how_to_use,
decode_url, decode_site and verify_design_md. The last three are the ones worth knowing
about: point the agent at a live URL and it decodes that site into the same format, then checks
its own generated UI against the file afterwards. The skill below adds the house rules on top.
Claude Code (project):
Claude Code (all projects): same, into ~/.claude/skills/csscreme/.
Then ask for UI as normal. The skill fires on things like "build a dashboard", "make this look less generic", or "match the design of stripe.com".
npx shadcn@latest add <registry-url>.| URL | Returns |
|---|---|
csscreme.com/d/<slug>.md | DESIGN.md for a curated theme |
csscreme.com/d/t/<slug>.md | DESIGN.md for a template theme |
csscreme.com/t/<id>.md | DESIGN.md for an extracted theme |
csscreme.com/r/<slug>.json | shadcn/ui registry item |
csscreme.com/t/<id>.json | shadcn/ui registry item, extracted |
csscreme.com/mcp | MCP server (JSON-RPC 2.0 over POST) |
All CORS-open and cacheable, served as text/markdown or application/json.
A DESIGN.md is a contract rather than a description. Eight fields: semantic colour roles in hex and OKLCH, the full shadcn token set in light and dark, two font families, one radius token, an explicit spacing scale, WCAG contrast ratios that were computed rather than asserted, numbered rules each checkable against the tables above them, and paste-ready CSS variables.
The contrast section is the part worth reading twice. If a colour pair fails AA, the file says
FAILS WCAG instead of quietly shipping it. Nothing in the file is an adjective the agent has to
interpret.
The files are plain Markdown, so nothing here is Claude-specific. Per-tool wiring for Cursor, Codex, v0 and Lovable: https://csscreme.com/ai/design-md
Full field spec, with a worked example generated at build time: https://csscreme.com/ai/design-md
Nobody owns the DESIGN.md file name, us included. The useful part here is the generator and
the measured contrast, not the noun.
MIT. The skill is MIT; the themes it fetches are free to use.