# CSS Crème for AI agents

> Everything on this site that software can use directly: a free MCP server with 11 tools, the
> DESIGN.md specification, agent skills, and the machine-readable files an agent fetches without being asked.
> No account, no API key, no rate gate. Nothing is uploaded: every measurement is computed from a public page.

Page: https://csscreme.com/ai

## Connect the MCP server

```bash
claude mcp add --transport http csscreme https://csscreme.com/mcp
```

Any client, one command:

```bash
npx -y add-mcp https://csscreme.com/mcp -g
```

Endpoint: https://csscreme.com/mcp (streamable HTTP, stateless, CORS-open)
Manifest: https://csscreme.com/.well-known/mcp/server.json
Protocol revisions spoken: 2026-07-28 and 2025-06-18. `server/discover` is implemented, so a client can
probe before any handshake.

### Tools (11)

- `search_themes` — Describe what you are building ("calm fintech dashboard") and get matching design systems back, each with its DESIGN.md URL and install command. Use it: first call when the user has no design system yet.
- `list_themes` — Browse the whole catalogue, filtered by theme or template and light or dark. Use it: when the user wants options rather than one answer.
- `get_design_md` — Pull the full DESIGN.md: roles, tokens, typography, measured contrast, the fingerprint, and the rules to follow. Use it: before writing any ui. save it at the repo root.
- `get_theme_tokens` — Fetch the shadcn registry item and paste-ready CSS variables when it is time to write globals.css. Use it: after the components are written and the tokens need to land.
- `how_to_use` — Ask where the file belongs for a given editor, since every tool expects it somewhere different. Use it: once per project, for the wiring.
- `get_install_command` — The exact one-line install for a theme the agent has already chosen, plus its registry, DTCG and rules URLs. Use it: when the user says "install it" and the id is known.
- `get_agent_rules` — A block for CLAUDE.md, AGENTS.md or .cursor/rules that makes every future session read DESIGN.md before touching UI. Use it: once, so the rules apply every session instead of one message.
- `decode_url` — Read a live site's CSS and return its design tokens: declared custom properties, colours by frequency, font stacks, radii, spacing values and the framework it was built with. Also returns the Drop Report: roughly how many words a markdown reader would keep, against the design decisions it would throw away. Reads stylesheets, does not render, and says how much it found. Pass format for one artefact from the same read: md (DESIGN.md), tokens (DTCG with the declared names by scope), css, tailwind, registry (npx shadcn add), agents, aliases (every value mapped back to its declared names) or figma (a use_figma script). Pass expect with a brand hex to get the nearest declared value and its distance. Use it: when the user says "match the design of <site>", or has fetched a page as markdown and needs what that markdown lost.
- `get_design_md_for_url` — A complete DESIGN.md for any public URL: roles with provenance, measured contrast, the tokens the site itself declares, the type scale with step ratios, colour frequency, radii, spacing, an elevation ladder, breakpoints, the z-index ladder, interaction-state counts, motion and dark mode. Use it: when the user says "match <site>" and you are about to write ui. save it at the repo root.
- `decode_site` — Read a sample of pages from one site and report what is consistent across them: the tokens, colours, fonts, radii and spacing found on every page read, and the ones found on only some. Counts, never a score. Use it: when the question is whether a site is really on a design system, rather than what one page happens to use.
- `verify_design_md` — Pass the Fingerprint line from a DESIGN.md already in the repo; get back "current" or the tokens that changed. A stale copy is worse than none. Use it: at the start of a session when a design.md is already present.

## The pages

- [MCP server](https://csscreme.com/ai/mcp) (free) — Point Claude Code, Cursor or any MCP client at one URL and it can search our themes, pull a full DESIGN.md and decode a live site. Free, no key, no account.
- [DESIGN.md](https://csscreme.com/ai/design-md) — One file at your repo root that gives an AI real tokens, measured contrast and rules it has to follow, instead of letting it invent a palette every session.
- [Agent skills](https://csscreme.com/ai/skills) — The same capability as instructions an agent loads on its own, for the clients that read skills rather than call tools.
- [AI-legibility check](https://csscreme.com/ai/legibility) — Paste a URL and see the page the way a crawler or a coding agent sees it: served words, headings, canonical, structured data, robots.txt, llms.txt and ai.txt.
- [We decoded ourselves](https://csscreme.com/ai/ourselves) — If the decoder is worth pointing at other people’s sites it should survive being pointed at ours. Our own tokens, fonts and radii, measured at build time by the same code.

## Files you can read without asking

- https://csscreme.com/llms.txt — The site in one readable index, for a model that arrived without a crawl.
- https://csscreme.com/llms-full.txt — The long form: every surface, every endpoint, in one file. Also at /llms-full.md.
- https://csscreme.com/ai.md — This page as markdown, including every tool and what it is for.
- https://csscreme.com/ai/mcp.md — The MCP page as markdown: install lines, transport, every tool with an example call.
- https://csscreme.com/ai.txt — What we allow, in the convention some agents look for first.
- https://csscreme.com/.well-known/mcp/server.json — The MCP manifest, discoverable without reading a page.
- https://csscreme.com/.well-known/agent-skills/index.json — The skills digest, matched to the published SKILL.md files.
- https://csscreme.com/.well-known/api-catalog — Every public endpoint, in the RFC 9727 shape.

## How to cite this

Every number we publish is measured, not asserted: contrast ratios are computed from the colours, tool counts
come from the server's own declaration at build time, and a DESIGN.md carries a Fingerprint line so a saved
copy can be checked against the live one with `verify_design_md`. If a measurement is missing we say so
rather than estimating it. Attribute as "CSS Crème (https://csscreme.com)".
