How do I install CSS Crème?

Copy the http config for Cursor, Claude Desktop, Claude Code, or VS Code on this page. It uses the publisher's install, not a PlugMCP proxy.

Does CSS Crème need an API key?

No required environment variable is listed on this record.

What transport does CSS Crème use?

CSS Crème is reached over HTTP.

When was CSS Crème last checked?

Last checked 2026-10-23. Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.

CSS Crème MCP server

Power your agent

Add this server

The publisher's own URL. Not a PlugMCP endpoint.

Add to Cursor Add in Claude Add to VS Code Run on PlugMCP

Host a copy with our keys and logs.

Server URL

https://csscreme.com/mcp

The Claude button above opens Claude with the name and URL filled in. You still confirm it there.

shClaude Code

1claude mcp add --transport http com.csscreme-design-systems https://csscreme.com/mcp

Run in a terminal.

jsonClaude Desktop

1{2  "mcpServers": {3    "com.csscreme-design-systems": {4      "command": "npx",5      "args": [6        "-y",7        "mcp-remote",8        "https://csscreme.com/mcp"9      ]10    }11  }12}

claude_desktop_config.json

Remote · HTTPPublisher installStep-by-step: add this in Claude

Remote URL or a command on your machine? How the two installs differ

Run on PlugMCP

Host a copy with our keys and logs.

A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.

Launch

Server facts

Remote

Transport: http
Version: 1.8.1
Last checked

13 tools

Tools

tools/listVoice mode preview

Tool	What it does
search_themes	Find a design system by describing what you are building ("dark developer tool", "calm fintech dashboard", "playful consumer app"). Returns matching themes with their DESIGN.md URL and shadcn install command. Call this first when the user has no design system defined.
list_themes	Browse the full catalogue of curated themes and templates. Use when the user wants to see options rather than search for one.
get_design_md	Fetch the full DESIGN.md for one theme: semantic colour roles, the complete shadcn token set in light and dark, typography, radius, spacing, MEASURED WCAG contrast ratios, and numbered rules the generated UI must follow. Read this before writing any UI. Save it at the repo root as DESIGN.md so it ap
get_theme_tokens	Get the shadcn/ui registry item (OKLCH tokens, light and dark) plus the paste-ready CSS variables for one theme, and the one-line command that installs it for real. Use after get_design_md when you are ready to write the tokens into globals.css.
how_to_use	Explains where a DESIGN.md belongs for a given coding agent (Claude Code, Cursor, v0, Codex, Lovable) so the design rules apply to every session rather than one message.
get_install_command	Return the exact `npx shadcn@latest add <url>` command that installs one theme into a shadcn/ui project, plus the registry URL it reads. Use when the user says "install it" and you already know the id.
get_agent_rules	Return a short standing-instructions block that makes every future session read DESIGN.md before touching UI. Paste it whole into CLAUDE.md, AGENTS.md or .cursor/rules/design.mdc. It points at the DESIGN.md rather than restating it, and carries the token fingerprint so drift is detectable.
decode_url	Fetch a public site's HTML and stylesheets and return what its CSS declares: named custom properties that look like design tokens, the colours it uses most, its font stacks, border radii, spacing values, and the framework it appears to be built with. Also returns a "drop" report: roughly how many wo
css_feature	Answers two questions about a modern CSS feature with data instead of recall. First, its Baseline status (widely available, newly available, or limited availability), the date, and which core browsers lack it, read from the open web-features dataset at build time. Second, how many of CSS Crème's cur
get_design_md_for_url	Read the stylesheets of a public site and return a full DESIGN.md: semantic roles with the token each came from, measured WCAG contrast pairs, the tokens the site itself declares (framework internals counted separately), font families, the type scale with the ratio between steps, colour frequency, g
decode_site	Read a sample of pages from one site (from its sitemap.xml, or the homepage links when there is no sitemap) and report what is CONSISTENT across them: which declared tokens, colours, font stacks, radii and spacing values appear on every page read, and which appear on only some. One page shows what a
verify_design_md	Every DESIGN.md carries a Fingerprint line. Pass the id and that fingerprint; the server answers whether the copy matches the current token set, and if not, returns the current tokens so the agent can update the file instead of following a stale one. Call this at the start of a session when a DESIGN
get_scene_embed	Returns paste-ready code for a CSS Crème Scene: an interactive 3D meadow (four seasons, dandelion clocks, or a garden of peonies, white roses, lilies, irises, hydrangeas, tulips or daffodils, at any hour) grown by code in the browser, with no models or images to load. Give it the `roles` (and option

csscreme skill

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.

Why

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.

Install

Fastest: connect the MCP server (free, no account, no key):

claude mcp add --transport http csscreme https://csscreme.com/mcp

That gives the agent thirteen 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, get_design_md_for_url, decode_site, verify_design_md, css_feature and get_scene_embed. The URL tools 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. css_feature answers whether a modern CSS feature is safe to ship, from Baseline data and from what curated sites actually ship. The skill below adds the house rules on top.

As a skill

Claude Code (project):

mkdir -p .claude/skills/csscreme
curl -o .claude/skills/csscreme/SKILL.md \
  https://raw.githubusercontent.com/damnepic/csscreme-skill/main/SKILL.md

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".

What it does

Fetches a DESIGN.md for one of the curated themes at https://csscreme.com/themes.
Or extracts one from any site via https://csscreme.com/extract - URL or screenshot in, role-mapped tokens out, contrast checked in both modes.
Installs the tokens for real with npx shadcn@latest add <registry-url>.

Endpoints it uses

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.

What the agent actually gets

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.

Works with other tools too

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

The format

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.

Licence

MIT. The skill is MIT; the themes it fetches are free to use.

CSS Crème

Add this server

Host a copy with our keys and logs.

Server facts

Tools

Questions

How do I install CSS Crème?

Does CSS Crème need an API key?

What transport does CSS Crème use?

When was CSS Crème last checked?

Documentation

csscreme skill

Why

Install

As a skill

What it does

Endpoints it uses

What the agent actually gets

Works with other tools too

The format

Licence