MCP server

CSS Crème

com.csscreme/design-systems

Checked 26 Oct 2026, 08:29 UTC · Connected to it and listed its tools

Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.

Website Source

At a glance

Type

MCP server

Publisher

csscreme.com (verified by the MCP Registry)

Status

Working at last check

Tools

13

Token cost

About 3,613 tokens per request

Sets up in

Claude Code, Claude Desktop, Codex, Gemini CLI, Cursor, VS Code, Antigravity, ChatGPT, OpenAI API, Grok

Last checked

26 Oct 2026, 08:29 UTC

Connect it to your agent

Add to CursorAdd to VS CodeVS Code Insiders

Opens the app, which shows the server and asks you to confirm. For other apps, copy the setup below.

Claude Code

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

Claude Desktop

Settings → Connectors → Add custom connector, and paste the URL.

Codex (config.toml)

[mcp_servers.design-systems]
url = "https://csscreme.com/mcp"

Gemini CLI

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

Cursor

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

VS Code

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

Antigravity

agy mcp add design-systems https://csscreme.com/mcp

ChatGPT

Settings → Apps & Connectors → Advanced settings: turn on Developer mode, then Create a connector and paste the URL. Which plans can do this varies.

OpenAI API (Responses tools)

{"type":"mcp","server_label":"design-systems","server_url":"https://csscreme.com/mcp","require_approval":"always"}

Grok (xAI API tools)

{"type":"mcp","server_label":"design-systems","server_url":"https://csscreme.com/mcp"}

Tools

• css_feature ~406 tokens
  Answers 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 the open web-features dataset at build time. Second, how many of CSS Crème's cur
• decode_site ~307 tokens
  Read 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 appear on every page read, and which appear on only some. One page shows what a
• decode_url ~968 tokens
  Fetch 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 framework it appears to be built with. Also returns a "drop" report: roughly how many wo
• get_agent_rules ~132 tokens
  Return 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 restating it, and carries the token fingerprint so drift is detectable.
• get_design_md ~159 tokens
  Fetch 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. Read this before writing any UI. Save it at the repo root as DESIGN.md so it ap
• get_design_md_for_url ~318 tokens
  Read 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), font families, the type scale with the ratio between steps, colour frequency, g
• get_install_command ~108 tokens
  Return 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_scene_embed ~452 tokens
  Returns 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 in the browser, with no models or images to load. Give it the `roles` (and option
• get_theme_tokens ~145 tokens
  Get 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 tokens into globals.css.
• how_to_use ~98 tokens
  Explains 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.
• list_themes ~94 tokens
  Browse the full catalogue of curated themes and templates. Use when the user wants to see options rather than search for one.
• search_themes ~236 tokens
  Find 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 first when the user has no design system defined.
• verify_design_md ~190 tokens
  Every 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 instead of following a stale one. Call this at the start of a session when a DESIGN

Browse

• Claude tools
• Lovable tools
• Converting to Markdown
• Docker and Kubernetes
• Design tools

Related MCP servers

• Standby Design
  Generate design systems: OKLCH colors, fluid type scales, spacing, shape, icon and motion tokens.
• Cookie Compliance
  Add a cookie consent banner that blocks trackers before consent and records proof of consent.
• Designesy
  Design quality gate for AI-generated UI: score any URL on 45 deterministic checks, A–F grade.
• Screenrove
  Real product UI captures for design reference, competitor analysis, and coding agents.
• Raven
  Design intelligence for coding agents: audits, design systems, and a taste profile agents consult.
• Inspo
  Real production websites for coding agents: palettes, fonts, fold autopsies and reference JSX.
• Jean — Molecular Biology & Genomics
  Validated molecular biology tools: cloning, primers, CRISPR, Sanger, alignment, qPCR, phylogenetics
• Googleapis
  Interact with the Stitch API using natural language commands.

Badge for your README

[![AptLynx](https://aptlynx.net/badge/com.csscreme/design-systems.svg)](https://aptlynx.net/servers/com.csscreme/design-systems)

Listing text is written by the maker; AptLynx lists tools and does not vouch for them. Find another tool · Browse by topic · For agents