MCP setup · Anthropic
CSS Crème in Claude Code
One command connects Claude Code to 12 tools that search real design systems, pull a DESIGN.md with measured contrast, and decode any public site into tokens. Free, no account, no API key.
-
Run one command
claude mcp add --transport http csscreme https://csscreme.com/mcpClaude Code has its own command, so you do not need the installer at all. Run it in the project directory.
Prefer the installer that works in every client?
npx -y add-mcp https://csscreme.com/mcp -a claude-code -n csscreme- This project only
.mcp.json- Every project (add -g)
~/.claude.json
For every project on this machine:
npx -y add-mcp https://csscreme.com/mcp -a claude-code -n csscreme -gProject scope writes
.mcp.json, which you can commit so the whole team gets the server. Global scope is yours alone. -
About writing it by hand
Claude Code spells a remote server in its own way, and we have not verified that shape line by line, so this page does not print one. A config block that is nearly right is the thing that makes people give up. Run the command above and read what it wrote to
.mcp.json. -
Confirm it connected
Run
/mcpinside Claude Code.csscremeshould be listed as connected with 12 tools.Then try it. Ask Claude Code: “Use csscreme to find a calm fintech dashboard theme, then pull its DESIGN.md.” It should call
search_themes, thenget_design_md. -
Make the design system stick
Connecting the server is half of it. The other half is telling Claude Code to read the DESIGN.md at the start of every session, not just this one. How Claude Code reads a DESIGN.md →
What Claude Code can now do
search_themesFirst call when the user has no design system yet.list_themesWhen the user wants options rather than one answer.get_design_mdBefore writing any UI. Save it at the repo root.get_theme_tokensAfter the components are written and the tokens need to land.how_to_useOnce per project, for the wiring.get_install_commandWhen the user says "install it" and the id is known.get_agent_rulesOnce, so the rules apply every session instead of one message.decode_urlWhen the user says "match the design of <site>", or has fetched a page as markdown and needs what that markdown lost.css_featureBefore writing CSS that uses anything newer than flexbox, so the code is right for today and not for the model's training date.get_design_md_for_urlWhen the user says "match <site>" and you are about to write UI. Save it at the repo root.decode_siteWhen the question is whether a site is really on a design system, rather than what one page happens to use.verify_design_mdAt the start of a session when a DESIGN.md is already present.
The full MCP page, with a live try-it panel, the
limits and the changelog.
Endpoint: https://csscreme.com/mcp