English Français العربية

CSS Crème

Official registry Media and design

Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.

Source code Website Documentation

What can you do with CSS Crème?

Install

Add this to your client's MCP configuration (Claude Desktop: claude_desktop_config.json; Cursor: .cursor/mcp.json; VS Code and others use the same "mcpServers" shape).

Remote (streamable-http)
Claude Code 
claude mcp add --transport http css-cr-me 'https://csscreme.com/mcp'
JSON configuration (Claude Desktop, Cursor, VS Code) 
{
    "mcpServers": {
        "css-cr-me": {
            "type": "http",
            "url": "https://csscreme.com/mcp"
        }
    }
}

Documentation

From the project's README on GitHub, refreshed weekly. Links open on GitHub.

Contents
  1. csscreme skill
  2. Why
  3. Install
  4. What it does
  5. Endpoints it uses
  6. What the agent actually gets
  7. Works with other tools too
  8. The format
  9. Licence

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

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

Endpoints it uses

URLReturns
csscreme.com/d/<slug>.mdDESIGN.md for a curated theme
csscreme.com/d/t/<slug>.mdDESIGN.md for a template theme
csscreme.com/t/<id>.mdDESIGN.md for an extracted theme
csscreme.com/r/<slug>.jsonshadcn/ui registry item
csscreme.com/t/<id>.jsonshadcn/ui registry item, extracted
csscreme.com/mcpMCP 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.

Frequently asked questions

What is CSS Crème?

Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.

How do I install CSS Crème?

It runs as a remote server. In Claude Code: claude mcp add --transport http css-cr-me 'https://csscreme.com/mcp'. For other clients, paste the JSON configuration from this page into their MCP settings.

Does CSS Crème need an API key?

Its registry entry lists no required key or secret. Some features may still need an account with the service it connects to.

Is CSS Crème open source?

Yes. Its code is on GitHub under the MIT license.

Who maintains CSS Crème?

It is published by damnepic. AI.tn lists it but does not maintain or endorse it.

From the official MCP Registry. Listing is not an endorsement: review a server's code and permissions before giving it access to your data.