Skip to content

CSS Crème

by csscreme.com · remote · no sign-in to list tools · v1.8.1 · published by com.csscreme

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

Changes · 23 high findings

13 tools: 2 change things and 11 only read.

Scanned Oct 21, 2026

4 checks matched something in the tool definitions. No finding is not a safety guarantee. How the checks work.

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

Findings

Matches of fixed checks, with the text they matched.

3 high1 warn
  • The title refers to ".cursor/rules".

    Matched text

    title: "...rules block for CLAUDE.md / AGENTS.md / .cursor/rules"

    What this check looks for
  • The annotations title refers to ".cursor/rules".

    Matched text

    annotations.title: "...rules block for CLAUDE.md / AGENTS.md / .cursor/rules"

    What this check looks for
  • The description refers to ".cursor/rules/design.mdc".

    Matched text

    description: "...e it whole into CLAUDE.md, AGENTS.md or .cursor/rules/design.mdc. It points at the DESIGN.md rather than..."

    What this check looks for
  • The input schema at properties.format.description names a tool "use_figma" that this server does not list.

    Matched text

    inputSchema.properties.format.description: "...ith scope), figma (a script for Figma's use_figma tool that creates a Variables collection wit..."

    What this check looks for

Tools

Open a tool for its reasons and full description. Descriptions are the publisher's own words, shown as they are.

13 tools

Changes things 2Claude Code: ask
  • css_featureAnswers two questions about a modern CSS feature with data instead of recall.No findings

    Why it is in this group

    • Nothing in its name or description says what it does, so it is counted as a write.
    • The server marks it read-only (readOnlyHint: true), but an annotation never lowers a class.
    Description, as the server wrote it
    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 curated, decoded showcase sites ship it, which ones, how many of them guard it with @supports, and the exact @supports conditions they test. Also returns a fallback note where we have one, any name the feature has shipped under before (an agent that learned the old name will otherwise write it), and the documented limits that catch people out, each cited to the page it was read on. Call it before writing CSS that uses container queries, :has(), anchor positioning, @scope, view transitions, oklch(), color-mix(), light-dark(), subgrid, scroll-driven animations, @property, text-wrap and similar, so the CSS you write is accurate for today rather than for your training date. With no feature given it returns the Ship Gap: features that are safe and mostly ignored, and features that are early and shipped anyway.

    Annotations the server declares

    • title: Is this CSS feature safe to ship, and who ships it
    • readOnlyHint: true
    • destructiveHint: false
    • idempotentHint: true
    • openWorldHint: false
  • verify_design_mdEvery DESIGN.md carries a Fingerprint line.No findings

    Why it is in this group

    • Nothing in its name or description says what it does, so it is counted as a write.
    • The server marks it read-only (readOnlyHint: true), but an annotation never lowers a class.
    Description, as the server wrote it
    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.md is already in the repo.

    Annotations the server declares

    • title: Check whether a DESIGN.md copy is still current
    • readOnlyHint: true
    • destructiveHint: false
    • idempotentHint: true
    • openWorldHint: false
Only reads 11Claude Code: allow
  • 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, colour…No findings

    Why it is in this group

    • The description's first verb is "read": a word for reading.
    Description, as the server wrote it
    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 page uses; a design system is a claim about consistency, and only a sample can test it. Returns counts and the pages actually read, never a score. Use when the user asks whether a site is really on a system, or wants the system rather than one page of it.

    Annotations the server declares

    • title: Measure a design system across a whole site, not one page
    • readOnlyHint: true
    • destructiveHint: false
    • idempotentHint: true
    • openWorldHint: true
  • 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…1 finding

    Why it is in this group

    • The description's first verb is "fetch": a word for reading.

    Findings

    • Warn

      The input schema at properties.format.description names a tool "use_figma" that this server does not list.

      Matched text

      inputSchema.properties.format.description: "...ith scope), figma (a script for Figma's use_figma tool that creates a Variables collection wit..."

      What this check looks for
    Description, as the server wrote it
    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 words a web-to-markdown reader would carry away from this page, against the design decisions it would discard, because markdown is defined by throwing the design layer away. It reads CSS and does not render the page, so it reports a confidence ("tokens" when named properties were found, "derived" when only compiled CSS was available) and flags a JavaScript shell rather than pretending every site is equally legible. It obeys the site's robots.txt for CSSCremeBot: a disallowed path is refused with ROBOTS_DENIED, which a retry will not change. A bot challenge, a parked or for-sale domain, or a host's default page is refused with NOT_THE_SITE and the evidence, rather than measured as if it were the site. Every error starts with its code and a retry verdict (never, later, with-changes). A read is reused for up to maxAge seconds (default 600, 0 for fresh), and every result carries `work`: the requests it made of the site. Use when the user wants to match a site that is not in the catalogue, or has fetched a page as markdown and needs what that markdown lost.

    Annotations the server declares

    • title: Decode any live site into design tokens
    • readOnlyHint: true
    • destructiveHint: false
    • idempotentHint: true
    • openWorldHint: true
  • get_agent_rulesReturn a short standing-instructions block that makes every future session read DESIGN.md before touching UI.3 findings

    Why it is in this group

    • The name "get_agent_rules" says "get": a word for reading.

    Findings

    • High

      The title refers to ".cursor/rules".

      Matched text

      title: "...rules block for CLAUDE.md / AGENTS.md / .cursor/rules"

      What this check looks for
    • High

      The annotations title refers to ".cursor/rules".

      Matched text

      annotations.title: "...rules block for CLAUDE.md / AGENTS.md / .cursor/rules"

      What this check looks for
    • High

      The description refers to ".cursor/rules/design.mdc".

      Matched text

      description: "...e it whole into CLAUDE.md, AGENTS.md or .cursor/rules/design.mdc. It points at the DESIGN.md rather than..."

      What this check looks for
    Description, as the server wrote it
    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.

    Annotations the server declares

    • title: Get a rules block for CLAUDE.md / AGENTS.md / .cursor/rules
    • readOnlyHint: true
    • destructiveHint: false
    • idempotentHint: true
    • openWorldHint: false
  • 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 numb…No findings

    Why it is in this group

    • The name "get_design_md" says "get": a word for reading.
    Description, as the server wrote it
    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 applies to every session.

    Annotations the server declares

    • title: Get a DESIGN.md
    • readOnlyHint: true
    • destructiveHint: false
    • idempotentHint: true
    • openWorldHint: false
  • 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 (…No findings

    Why it is in this group

    • The name "get_design_md_for_url" says "get": a word for reading.
    Description, as the server wrote it
    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, gradients, corner radii, spacing, an elevation ladder of shadows, breakpoints, the z-index ladder, interaction-state rule counts, motion, and whether a dark theme is declared. This is the artefact to hand a coding agent before it writes UI that should match a site. It reads declared CSS and does not execute JavaScript, so it reports what the stylesheets say rather than what the page renders.

    Annotations the server declares

    • title: Get a complete DESIGN.md for any public URL
    • readOnlyHint: true
    • destructiveHint: false
    • idempotentHint: true
    • openWorldHint: true
  • 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.No findings

    Why it is in this group

    • The name "get_install_command" says "get": a word for reading.
    Description, as the server wrote it
    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.

    Annotations the server declares

    • title: Get the one-line install command
    • readOnlyHint: true
    • destructiveHint: false
    • idempotentHint: true
    • openWorldHint: false
  • 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…No findings

    Why it is in this group

    • The name "get_scene_embed" says "get": a word for reading.
    Description, as the server wrote it
    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 optionally `colors`) from a decode_url result and the three flowers take that site's declared colours, each with its source named; or pass a `palette` of hex values. It reads no URL itself. Returns the <creme-scene> element, an iframe, a full-screen link and the licence line. Free to embed with the visible credit.

    Annotations the server declares

    • title: Embed code for a living 3D scene, in a brand's colours
    • readOnlyHint: true
    • destructiveHint: false
    • idempotentHint: true
    • openWorldHint: false
  • 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.No findings

    Why it is in this group

    • The name "get_theme_tokens" says "get": a word for reading.
    Description, as the server wrote it
    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.

    Annotations the server declares

    • title: Get raw theme tokens
    • readOnlyHint: true
    • destructiveHint: false
    • idempotentHint: true
    • openWorldHint: false
  • 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.No findings

    Why it is in this group

    • The description's first verb is "explain": a word for reading.
    Description, as the server wrote it
    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.

    Annotations the server declares

    • title: How to wire a DESIGN.md into this tool
    • readOnlyHint: true
    • destructiveHint: false
    • idempotentHint: true
    • openWorldHint: false
  • list_themesBrowse the full catalogue of curated themes and templates.No findings

    Why it is in this group

    • The name "list_themes" says "list": a word for reading.
    Description, as the server wrote it
    Browse the full catalogue of curated themes and templates. Use when the user wants to see options rather than search for one.

    Annotations the server declares

    • title: List all design systems
    • readOnlyHint: true
    • destructiveHint: false
    • idempotentHint: true
    • openWorldHint: false
  • search_themesFind a design system by describing what you are building ("dark developer tool", "calm fintech dashboard", "playful consumer app").No findings

    Why it is in this group

    • The name "search_themes" says "search": a word for reading.
    Description, as the server wrote it
    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.

    Annotations the server declares

    • title: Search design systems
    • readOnlyHint: true
    • destructiveHint: false
    • idempotentHint: true
    • openWorldHint: false

This is not a safety rating, and no finding is not a safety guarantee. The groups and findings come from fixed checks of the tool definitions the server returned on the date shown, not from its code or what it does when called. How the checks work.

Install

Pinned to version 1.8.1. Values in angle brackets are yours to fill in.

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

Run in a terminal.

Claude Code permissions

Allow the reads, ask before a change, deny the deletes. Paste into .claude/settings.json.

.claude/settings.json
{
  "permissions": {
    "allow": [
      "mcp__design-systems__search_themes",
      "mcp__design-systems__list_themes",
      "mcp__design-systems__get_design_md",
      "mcp__design-systems__get_theme_tokens",
      "mcp__design-systems__how_to_use",
      "mcp__design-systems__get_install_command",
      "mcp__design-systems__get_agent_rules",
      "mcp__design-systems__decode_url",
      "mcp__design-systems__get_design_md_for_url",
      "mcp__design-systems__decode_site",
      "mcp__design-systems__get_scene_embed"
    ],
    "ask": [
      "mcp__design-systems__css_feature",
      "mcp__design-systems__verify_design_md"
    ],
    "deny": []
  }
}

Tools that only read are allowed, tools that change things ask first, tools that delete or cancel are denied. It assumes the server is installed as design-systems. Review it before you use it.