MCP setup · Microsoft

CSS Crème in VS Code

One command connects VS 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

npx -y add-mcp https://csscreme.com/mcp -a vscode -n csscreme

This project only
.vscode/mcp.json

Every project (add -g)
~/Library/Application Support/Code/User/mcp.json

For every project on this machine: npx -y add-mcp https://csscreme.com/mcp -a vscode -n csscreme -g

The one that catches people: VS Code names the top-level key servers, not mcpServers. Pasting a Cursor config here silently does nothing.

Or write it by hand

The same result without running anything, in .vscode/mcp.json:

{
  "servers": {
    "csscreme": {
      "type": "http",
      "url": "https://csscreme.com/mcp"
    }
  }
}

Confirm it connected

Open the Chat view in Agent mode and click the tools button. csscreme should be in the list.

Then try it. Ask VS Code: “Use csscreme to find a calm fintech dashboard theme, then pull its DESIGN.md.” It should call search_themes, then get_design_md.

What VS 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

Other clients

Claude Code Claude Desktop Cursor Codex Windsurf Gemini CLI Cline GitHub Copilot CLI Zed OpenCode Goose

CSS Crème in VS Code

Run one command

Or write it by hand

Confirm it connected

What VS Code can now do

Other clients