Prototyp · Vorschau: alle Server aus der offiziellen Registry, alle 30 Minuten synchronisiert. Bewertungen und Benutzerkonten folgen in einem späteren Schritt.
PopNx MCPMCP-Server für alle, die KI nutzen · in einfachen Worten erklärt

CSS Crème

von damnepicVersion 1.8.1i★ –iLäuft in der Cloud
Name in der Registrycom.csscreme/design-systems

Installieren

Überblick

Beschreibung vom Entwickler (englisches Original)

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

Die drei Säulen von PopNx MCP

Diese drei werden nie zu einer Punktzahl zusammengefasst: Meinungen, Messungen und Beliebtheit sind verschiedene Dinge.

Was du damit machen kannst

Für diesen Server haben wir noch keine Zusammenfassung in einfacher Sprache geschrieben. Unten stehen die Fakten, die wir aus der Registry gelesen haben.

  • Verbindung: Läuft in der Cloud
  • Transport: Streamable HTTP
  • Kategorie: Design, Bilder & Audio

Installation

Wähle die KI-App, die du nutzt, und kopiere die Einstellungen.

Bevor du installierst

Du brauchst

Welche App nutzt du?

Wähle oben deine App. Wir merken sie uns, damit der Button beim nächsten Mal „In … installieren“ anzeigt.

Funktioniert in Claude im Web, auf dem Desktop und auf dem Handy:

  1. Öffne Settings → Connectors
  2. Tippe auf Add custom connector
  3. Füge die Adresse unten ein und tippe auf Add
  4. Wenn eine Anmeldung verlangt wird, melde dich beim Dienst des Entwicklers an
SettingsConnectors1+ Add2https://…3
https://csscreme.com/mcp

Führe das in deinem Terminal aus

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

In Cursor öffnen

Oder kopier die Einstellungen selbst

In .cursor/mcp.json in deinem Projekt oder in ~/.cursor/mcp.json einfügen

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

Dein Browser fragt, ob er die App öffnen darf, dann zeigt die App die Einstellungen und bittet dich um Bestätigung. Schlüsselwerte bleiben leer, damit du sie selbst einträgst.

In VS Code öffnen

Oder kopier die Einstellungen selbst

In .vscode/mcp.json in deinem Projekt einfügen

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

Dein Browser fragt, ob er die App öffnen darf, dann zeigt die App die Einstellungen und bittet dich um Bestätigung. Schlüsselwerte bleiben leer, damit du sie selbst einträgst.

ChatGPT verbindet sich nur mit Servern im Internet:

  1. Öffne ChatGPT im Web → Settings → Connectors (Apps)
  2. Tippe auf Create oder Add (bei manchen Tarifen musst du zuerst Developer mode unter Advanced einschalten)
  3. Füge die Adresse unten ein, gib ihr einen Namen und speichere
  4. Wenn eine Anmeldung verlangt wird, melde dich beim Dienst des Entwicklers an
SettingsConnectors1+ Create2https://…3
https://csscreme.com/mcp

Menünamen können sich je nach Tarif und mit der Zeit leicht unterscheiden.

Deine Auswahl bleibt in einem Cookie auf diesem Gerät; kein Konto nötig.

Diese Einstellungen werden aus dem Registry-Eintrag des Entwicklers erzeugt. Wenn in der README etwas anderes steht, folge der README.

Was er kann

Tool-Namen und -Beschreibungen genau so, wie der Server sie am 8. Nov. 2026 gemeldet hat. Geschrieben hat sie der Entwickler, nicht wir; wir zeigen sie als reinen Text.

  • 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.

  • list_themes

    Browse the full catalogue of curated themes and templates. Use when the user wants to see options rather than search for one.

  • 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 a

  • 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.

  • 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.

  • get_install_command

    Return the exact `npx shadcn@latest add ` 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_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 d

  • 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:

  • 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 man

  • 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,

  • 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. O

  • 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 s

  • 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

Basischecksi

Wir prüfen Informationen, die jeder sehen kann; den Code haben wir nicht gelesen. Checks, die nicht zutreffen, werden nicht mitgezählt. · Geprüft am 9. Nov. 2026

  • ✓ Bestanden

    Entwickler passt zum Repo

    Der Registry-Name wurde über die Domain csscreme.com bestätigt (die Registry prüft, wem die Domain gehört)

  • … Noch nicht geprüft

    Wird noch gepflegt

    Dieses Repo haben wir noch nicht von GitHub gelesen

  • … Noch nicht geprüft

    Hat eine Lizenz

    Dieses Repo haben wir noch nicht von GitHub gelesen

  • ✓ Bestanden

    Endpunkt antwortet

    Antwort in 461 ms (HTTP 200)

  • – Nicht zutreffend

    Anmeldung mit OAuth

    Keine Anmeldung nötig

  • ✓ Bestanden

    Keine versteckten Anweisungen in Tool-Beschreibungen

    Wir haben 13 Tool-Beschreibungen gelesen und keine versteckten Anweisungen an die KI gefunden

Im Vergleich mit anderen in Design, Bilder & Audioi

  • Mehr Sterne als 0 % der anderen 2819 Server in dieser Kategorie
  • Neuer in der Registry veröffentlicht als 38 % der anderen 2819 Server in dieser Kategorie
  • Basischecks gleich gut wie oder besser als bei 100 % der anderen 2819 Server in dieser Kategorie

Verglichen mit allen aktiven Servern dieser Kategorie in der Registry. Sterne zählen nur, wenn dem Herausgeber das Repo gehört.

Häufige Fragen

Ist CSS Crème sicher?

Er hat 3 von 3 zutreffenden Basischecks bestanden. Den Code haben wir nicht gelesen. Bevor du einen Schlüssel oder Token hinzufügst, sieh nach, welche Zugriffe der Server verlangt, und nutze einen Schlüssel, der nur die Berechtigungen hat, die du brauchst.

Welche Schlüssel oder Codes braucht er?

Die Registry nennt keinen erforderlichen Schlüssel, manche Server bitten dich aber bei der ersten Nutzung, dich anzumelden.

Läuft er auf meinem Computer oder in der Cloud?

Er läuft in der Cloud des Entwicklers. Du verbindest dich übers Internet, ohne etwas zu installieren, aber was du sendest, läuft über die Server des Entwicklers.

Wird er noch gepflegt?

Das GitHub-Repo wurde zuletzt – geändert, und die neueste Version (1.8.1) kam vor 44 Tagen in die Registry.

Welche Apps können ihn nutzen?

Apps, die MCP unterstützen, etwa Claude Desktop, Claude Code, Cursor und VS Code. Er verbindet sich per URL, also funktionieren auch Apps, die Remote-MCP-Server akzeptieren, zum Beispiel ChatGPT im Entwicklermodus.

Was kann ich stattdessen nutzen?

In derselben Kategorie: Figma Context MCP, Claude Real Video, Figma MCP Server

Alternativen

Server derselben Kategorie von anderen Entwicklern, sortiert nach Sternen.

So liest du eine Karte:↓ Downloads pro Wochei★ GitHub-SterneiDrei Säulen: Bewertungen · Checks · NutzungiAktualisiert = neueste Version in der Registry veröffentlichti

Figma Context MCP

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

von GLipsWeit verbreitet↓ 161.192/Wo.★ 16.165Aktualisiert vor 5 Monaten

Läuft auf deinem Computer

Claude Real Video

Let any LLM watch a video locally — and search everything it has ever watched.

von HUANGCHIHHUNGLeoWeit verbreitet↓ 1106/Wo.★ 2284Aktualisiert vor 2 Monaten

Läuft auf deinem Computer

Figma MCP Server

The Figma MCP server brings Figma design context directly into your AI workflow.

von figmaWeit verbreitet★ 2152Aktualisiert vor 13 Monaten

Läuft in der Cloud✓ mcp.figma.com

README vom Entwickler

README öffnen

Unverändert aus dem Repo des Entwicklers übernommen. PopNx MCP hat den Inhalt weder geprüft noch empfiehlt es ihn. HTML, Bilder und Skripte wurden entfernt. Links führen von dieser Website weg.

csscreme skill

A Claude Code skill that gives a coding agent a real design system before it writes UI: semantic tokens, measured WCAG contrast, and rules it can be held to.

Free. No account, no API key, no paid tier.

Why

An agent asked for UI with no design system does the same thing every time: invents a palette, mixes three or four corner radii, adds a second font nobody asked for, and ships contrast that was never checked. The result is recognisable on sight, and no amount of prompt rewording fixes it, because the problem is missing input rather than weak instruction.

A file fixes it. Tokens the agent must use, ratios that were computed rather than asserted, and numbered rules that can be diffed against what actually got built. "Use only these six roles" is checkable. "Make it clean" is not.

Install

Fastest: connect the MCP server (free, no account, no key):

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

That gives the agent thirteen tools with no files to manage: search_themes, list_themes, get_design_md, get_theme_tokens, get_install_command, get_agent_rules, how_to_use, decode_url, get_design_md_for_url, decode_site, verify_design_md, css_feature and get_scene_embed. The URL tools are the ones worth knowing about: point the agent at a live URL and it decodes that site into the same format, then checks its own generated UI against the file afterwards. css_feature answers whether a modern CSS feature is safe to ship, from Baseline data and from what curated sites actually ship. The skill below adds the house rules on top.

As a skill

Claude Code (project):

mkdir -p .claude/skills/csscreme

curl -o .claude/skills/csscreme/SKILL.md \ https://raw.githubusercontent.com/damnepic/csscreme-skill/main/SKILL.md

Claude Code (all projects): same, into ~/.claude/skills/csscreme/.

Then ask for UI as normal. The skill fires on things like "build a dashboard", "make this look less generic", or "match the design of stripe.com".

What it does

  1. Fetches a DESIGN.md for one of the curated themes at https://csscreme.com/themes.
  2. Or extracts one from any site via https://csscreme.com/extract - URL or screenshot in, role-mapped tokens out, contrast checked in both modes.
  3. Installs the tokens for real with npx shadcn@latest add .

Endpoints it uses

URLReturns
csscreme.com/d/ .mdDESIGN.md for a curated theme
csscreme.com/d/t/ .mdDESIGN.md for a template theme
csscreme.com/t/ .mdDESIGN.md for an extracted theme
csscreme.com/r/ .jsonshadcn/ui registry item
csscreme.com/t/ .jsonshadcn/ui registry item, extracted
csscreme.com/mcpMCP server (JSON-RPC 2.0 over POST)

All CORS-open and cacheable, served as text/markdown or application/json.

What the agent actually gets

A DESIGN.md is a contract rather than a description. Eight fields: semantic colour roles in hex and OKLCH, the full shadcn token set in light and dark, two font families, one radius token, an explicit spacing scale, WCAG contrast ratios that were computed rather than asserted, numbered rules each checkable against the tables above them, and paste-ready CSS variables.

The contrast section is the part worth reading twice. If a colour pair fails AA, the file says FAILS WCAG instead of quietly shipping it. Nothing in the file is an adjective the agent has to interpret.

Works with other tools too

The files are plain Markdown, so nothing here is Claude-specific. Per-tool wiring for Cursor, Codex, v0 and Lovable: https://csscreme.com/ai/design-md

The format

Full field spec, with a worked example generated at build time: https://csscreme.com/ai/design-md

Nobody owns the DESIGN.md file name, us included. The useful part here is the generator and the measured contrast, not the noun.

Licence

MIT. The skill is MIT; the themes it fetches are free to use.

PopNx fragen