CSS Crème

Connect it to your AI

Claude Code

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

Claude, ChatGPT, Cursor and other apps

Add it as a custom connector with this URL (Streamable HTTP):

https://csscreme.com/mcp

Cursor, VS Code and other apps (mcp.json)

{
  "mcpServers": {
    "design-systems": {
      "url": "https://csscreme.com/mcp"
    }
  }
}

Tools it offers

13 tools, as the server itself reported during our check on Oct 31, 2026.

• search_themesFind 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 f
• list_themesBrowse the full catalogue of curated themes and templates. Use when the user wants to see options rather than search for one.
• get_design_mdFetch 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.
• get_theme_tokensGet 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
• how_to_useExplains 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_commandReturn 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_rulesReturn 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 r
• decode_urlFetch 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 framewor
• css_featureAnswers 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
• get_design_md_for_urlRead 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),
• decode_siteRead 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
• verify_design_mdEvery 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 ins
• get_scene_embedReturns 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 i

Questions