MCP setup · Cline
CSS Crème in Cline
One command connects Cline 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 cline -n csscreme -g- Where it is written
~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
The settings file lives inside VS Code’s extension storage, which is why the path is so long. The MCP Servers panel has an "Edit config" button that opens it for you.
-
Or write it by hand
The same result without running anything, in
~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json:{ "mcpServers": { "csscreme": { "url": "https://csscreme.com/mcp", "disabled": false } } } -
Confirm it connected
Open the Cline panel, then MCP Servers, then Installed.
csscremeshould be listed and enabled.Then try it. Ask Cline: “Use csscreme to find a calm fintech dashboard theme, then pull its DESIGN.md.” It should call
search_themes, thenget_design_md.
What Cline 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