CSS Crème MCP for coding agents
Give your agent a design system, not a guess.
Connect your coding agent to 52 design systems it can search, read and install. It studies real tokens before it builds, so the output follows a system instead of inventing one.
Free, ungated, no account and no API key. The nearest equivalent requires a paid plan.
claude mcp add --transport http csscreme https://csscreme.com/mcp Any client that speaks remote MCP can use it. Endpoint: https://csscreme.com/mcp
This runs an actual tools/call against https://csscreme.com/mcp from your
browser. Nothing is installed and nothing is faked; what comes back is what your agent would get.
Try
Works with
Eleven tools
The endpoint answers tools/list itself, so this is a description rather
than a specification. Ask your agent to call them; you should not need to. Each one has its own
anchor, so a link like /ai/mcp#verify_design_md lands on the tool.
search_themes First call when the user has no design system yet. Describe what you are building ("calm fintech dashboard") and get matching design systems back, each with its DESIGN.md URL and install command.
{"name":"search_themes","arguments":{"query":"calm fintech dashboard","mode":"light","limit":4}} list_themes When the user wants options rather than one answer. Browse the whole catalogue, filtered by theme or template and light or dark.
{"name":"list_themes","arguments":{"kind":"theme","mode":"dark"}} get_design_md Before writing any UI. Save it at the repo root. Pull the full DESIGN.md: roles, tokens, typography, measured contrast, the fingerprint, and the rules to follow.
{"name":"get_design_md","arguments":{"id":"deep-ocean"}} get_theme_tokens After the components are written and the tokens need to land. Fetch the shadcn registry item and paste-ready CSS variables when it is time to write globals.css.
{"name":"get_theme_tokens","arguments":{"id":"deep-ocean","format":"both"}} how_to_use Once per project, for the wiring. Ask where the file belongs for a given editor, since every tool expects it somewhere different.
{"name":"how_to_use","arguments":{"tool":"claude-code"}} get_install_command When the user says "install it" and the id is known. The exact one-line install for a theme the agent has already chosen, plus its registry, DTCG and rules URLs.
{"name":"get_install_command","arguments":{"id":"deep-ocean"}} get_agent_rules Once, so the rules apply every session instead of one message. A block for CLAUDE.md, AGENTS.md or .cursor/rules that makes every future session read DESIGN.md before touching UI.
{"name":"get_agent_rules","arguments":{"id":"deep-ocean"}} decode_url When the user says "match the design of <site>", or has fetched a page as markdown and needs what that markdown lost. Read a live site's CSS and return its design tokens: declared custom properties, colours by frequency, font stacks, radii, spacing values and the framework it was built with. Also returns the Drop Report: roughly how many words a markdown reader would keep, against the design decisions it would throw away. Reads stylesheets, does not render, and says how much it found. Pass format for one artefact from the same read: md (DESIGN.md), tokens (DTCG with the declared names by scope), css, tailwind, registry (npx shadcn add), agents, aliases (every value mapped back to its declared names) or figma (a use_figma script). Pass expect with a brand hex to get the nearest declared value and its distance.
{"name":"decode_url","arguments":{"url":"https://csscreme.com"}} get_design_md_for_url When the user says "match <site>" and you are about to write UI. Save it at the repo root. A complete DESIGN.md for any public URL: roles with provenance, measured contrast, the tokens the site itself declares, the type scale with step ratios, colour frequency, radii, spacing, an elevation ladder, breakpoints, the z-index ladder, interaction-state counts, motion and dark mode.
{"name":"get_design_md_for_url","arguments":{"url":"https://stripe.com"}} decode_site When the question is whether a site is really on a design system, rather than what one page happens to use. Read a sample of pages from one site and report what is consistent across them: the tokens, colours, fonts, radii and spacing found on every page read, and the ones found on only some. Counts, never a score.
{"name":"decode_site","arguments":{"url":"https://stripe.com","pages":5}} verify_design_md At the start of a session when a DESIGN.md is already present. Pass the Fingerprint line from a DESIGN.md already in the repo; get back "current" or the tokens that changed. A stale copy is worse than none.
{"name":"verify_design_md","arguments":{"id":"deep-ocean","fingerprint":"fnv1a-b613a475"}} What changes
Your agent stops guessing
Without a design system an agent falls back on the average of everything it has read: an invented palette, several corner radii, a second font nobody asked for. With one it works from your tokens, and you can check the output against them.
Every number is measured
Each DESIGN.md carries real WCAG contrast ratios computed from the tokens themselves. When a pair fails AA the file says so instead of shipping it quietly. Nothing in it is an adjective the agent has to interpret.
Not limited to a fixed library
A curated catalogue can only answer for the sites somebody added in advance. Point our decoder or extractor at any live page and it produces a DESIGN.md for that page, then hands your agent the same contract shape.
It installs for real
Every theme is also a shadcn/ui registry item. After the agent writes the components, one command writes the tokens into globals.css. The loop closes instead of stopping at a suggestion.
Installing it
Claude Code
claude mcp add --transport http csscreme https://csscreme.com/mcpEverything else
Pick your client and paste the block. There is no token in any of them, because there is nothing to authenticate.
Claude Desktop claude_desktop_config.json
{
"mcpServers": {
"csscreme": {
"type": "http",
"url": "https://csscreme.com/mcp"
}
}
}Cursor .cursor/mcp.json, or the global one
{
"mcpServers": {
"csscreme": {
"url": "https://csscreme.com/mcp"
}
}
}VS Code .vscode/mcp.json
{
"servers": {
"csscreme": {
"type": "http",
"url": "https://csscreme.com/mcp"
}
}
}Cline cline_mcp_settings.json
{
"mcpServers": {
"csscreme": {
"url": "https://csscreme.com/mcp",
"disabled": false
}
}
}Windsurf ~/.codeium/windsurf/mcp_config.json
{
"mcpServers": {
"csscreme": {
"serverUrl": "https://csscreme.com/mcp"
}
}
}Then just ask
“Build a settings page for a calm fintech dashboard.” The agent searches, reads the DESIGN.md, and follows its rules. You do not have to name the tools.
Questions
Is the CSS Crème MCP really free?
Yes. There is no account, no API key and no plan. The endpoint is https://csscreme.com/mcp, it answers tools/list to anyone, and the demo on this page calls it from your browser. The nearest equivalent requires a paid plan and an OAuth login.
What does an agent get from it that it cannot get from a prompt?
A contract instead of adjectives. Each DESIGN.md carries the full token set in light and dark, typography, radius, spacing, WCAG contrast ratios computed from the tokens themselves, and numbered rules the output can be checked against. If a colour pair fails AA, the file says so.
How does an agent know its DESIGN.md is still current?
Every DESIGN.md carries a Fingerprint line, a hash of its token set. The verify_design_md tool takes that fingerprint and answers "current" or returns the tokens that changed. Competing files are static snapshots with no way to tell.
Which clients work with it?
Any client that speaks remote MCP over HTTP: Claude Code, Cursor, VS Code, Windsurf and Codex among them. There is a one-click install for Cursor and VS Code above, and a one-line command for Claude Code.
Can it decode a site that is not in the catalogue?
Not through the MCP yet; the server reads static build-time data, which is why it needs no key. Point the decoder or the extractor on this site at any URL and hand your agent the resulting DESIGN.md; it has the same shape.
What it does not do
It does not make an agent a designer. It removes one specific failure: inventing a visual system because nobody supplied one. Layout, hierarchy, information design and whether the screen is any good remain yours.
The server is stateless and reads static build-time data, which is why it needs no key and cannot lose your work: it has nothing of yours to lose. If you want a design system from a page that is not in the catalogue, use the decoder or the extractor and hand your agent the resulting file.
Full format spec: what a DESIGN.md holds and why.
Machine-readable manifest, in the official registry format:
/.well-known/mcp/server.json