MCP setup · OpenAI
CSS Crème in Codex
One command connects Codex 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 codex -n csscreme- This project only
.codex/config.toml- Every project (add -g)
~/.codex/config.toml
For every project on this machine:
npx -y add-mcp https://csscreme.com/mcp -a codex -n csscreme -gCodex keeps its config in TOML, not JSON, so do not paste a block from another client. Let the installer write the table.
-
About writing it by hand
Codex spells a remote server in its own way, and we have not verified that shape line by line, so this page does not print one. A config block that is nearly right is the thing that makes people give up. Run the command above and read what it wrote to
.codex/config.toml. -
Confirm it connected
Start a Codex session and ask it to list its MCP tools.
csscremeshould answer with 12.Then try it. Ask Codex: “Use csscreme to find a calm fintech dashboard theme, then pull its DESIGN.md.” It should call
search_themes, thenget_design_md. -
Make the design system stick
Connecting the server is half of it. The other half is telling Codex to read the DESIGN.md at the start of every session, not just this one. How Codex reads a DESIGN.md →
What Codex 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