CSS Crème
Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.
| Endpoint | https://csscreme.com/mcp (streamable-http) |
|---|---|
| Registry version | 1.8.1 |
| Now | 13 tools · grade C (79) · pin ts_949cf351b5bf480717d01a7cb1b764bd · protocol 2025-06-18 |
| First / last listed | 2026-10-29 02:00 UTC / 2026-10-29 02:00 UTC |
| Grade over time | 2026-10-29: C (79), 13 tools |
Is this your server? Own a server? ToolFit hosted watch re-checks it every 24 h ($0.25 per 30 days) or 6 h ($0.60) and sends you an HMAC-signed webhook when its tools or grade change: POST https://api.youraitools.co/toolfit/v1/watch. To opt out, see About & opt-out.
Tools: search_themes list_themes get_design_md get_theme_tokens how_to_use get_install_command get_agent_rules decode_url css_feature get_design_md_for_url decode_site verify_design_md get_scene_embed
search_themes | 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. params: query*, kind, mode, limit |
list_themes | Browse the full catalogue of curated themes and templates. Use when the user wants to see options rather than search for one. params: kind, mode |
get_design_md | 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. params: id* |
get_theme_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. params: id*, format |
how_to_use | 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. params: tool |
get_install_command | 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. params: id* |
get_agent_rules | 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. params: id* |
decode_url | 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 params: url*, maxAge, format, expect, expectSpec |
css_feature | 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 params: feature |
get_design_md_for_url | 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, in params: url*, maxAge |
decode_site | 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 cou params: url*, pages, maxAge |
verify_design_md | 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. params: id*, fingerprint* |
get_scene_embed | 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, eac params: season, time, roles, colors, palette, mode |
Entries describe changes in tool definitions. They are not statements about a server, its quality or its author. The grade measures how the tool definitions fit model providers (token cost, schema compatibility, confusable names) as scored by the ToolFit engine at the time of the listing. JSON: append .json. Opt-out: how or hello@youraitools.co.