Prototipo · Versión preliminar: todos los servidores del registro oficial, sincronizados cada 30 minutos. Inicia sesión con Google para escribir reseñas.
PopNx MCPServidores MCP para quienes usan IA · explicados con palabras sencillas

CSS Crème

de damnepicversión 1.8.1i★ 0iSe ejecuta en la nube
Nombre en el registrocom.csscreme/design-systems

Cómo instalar

What it does

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

  • Connects Se ejecuta en la nube
  • Account or key No key needed
  • Category Diseño, imágenes y audio

Instalación

Elige la app de IA que usas y copia la configuración.

Pasó 5/5 revisiones · Lo que preguntas pasa por el servidor del autor (csscreme.com)

Primero: ¿qué IA usas?

Elige tu app y los pasos aparecen abajo.

Funciona con Claude · unos 2 min

Sin clave y sin instalar nada · Configúralo una vez en claude.ai o en la app de escritorio y úsalo en el chat · las cuentas gratis pueden añadir 1 · en Team/Enterprise lo añade un Owner

  1. Abre la página Connectors de Claude

    CustomizeConnectors

    CustomizeConnectors1+ Add2https://…3Add4
  2. Pulsa “+ Add” → “Add custom connector” y completa estos 2 campos

    Copia cada valor al campo con el mismo nombre en Claude y pulsa Continue

    Name · NombreCSS Crème
    Remote MCP server URL · Direcciónhttps://csscreme.com/mcp

    Deja Authentication como lo detectó Claude y pulsa Add

  3. Actívalo en un chat

    +ConnectorsCSS Crème

  4. Pruébalo

    Usa CSS Crème y dime qué puedes hacer por mí; luego muéstrame una cosa

    ✓ Si Claude dice que está usando CSS Crème o muestra una herramienta de CSS Crème en la respuesta, ya está conectado

Nombres de menú comprobados con la ayuda de Anthropic el 11 nov 2026 · tu pantalla puede variar un poco según la versión

Funciona con ChatGPT solo en planes de empresa

ChatGPT Business, Enterprise o Edu en la web, añadido por un administrador o propietario del espacio · Con Free, Plus o Pro: tu plan de ChatGPT aún no puede conectar MCP

  1. Abre la página para añadir MCP en ChatGPT web

    Plugins+Add custom MCP server

    ChatGPTPlugins1+2https://…3Create4
  2. Escribe el nombre y la dirección

    Pon un nombre, pega la dirección en Connection, marca el aviso de riesgo y pulsa Create as a plugin

    Name · NombreCSS Crème
    Connection · Direcciónhttps://csscreme.com/mcp
  3. Elige CSS Crème en un chat

    Abre un chat nuevo y elige CSS Crème en tus plugins antes de escribir

  4. Pruébalo

    Usa CSS Crème y dime qué puedes hacer por mí; luego muéstrame una cosa

    ✓ Si ChatGPT dice que está usando CSS Crème o muestra una herramienta de CSS Crème en la respuesta, ya está conectado

Nombres de menú comprobados con la ayuda de OpenAI el 11 nov 2026 · tu pantalla puede variar un poco según la versión

Funciona con Claude Code · unos 2 min

Sin clave y sin instalar nada

  1. Abre la Terminal

    Mac: pulsa Command+Espacio y escribe Terminal · Windows: abre PowerShell

  2. Pega este comando y pulsa Enter

    claude mcp add --transport http --scope user design-systems https://csscreme.com/mcp
  3. Escribe /mcp en Claude Code

    Deberías ver CSS Crème en la lista como conectado

  4. Pruébalo

    Usa CSS Crème y dime qué puedes hacer por mí; luego muéstrame una cosa

    ✓ Si Claude Code dice que está usando CSS Crème o muestra una herramienta de CSS Crème en la respuesta, ya está conectado

Nombres de menú comprobados con la ayuda de Anthropic el 11 nov 2026 · tu pantalla puede variar un poco según la versión

Funciona con Cursor · unos 2 min

Sin clave y sin instalar nada

  1. Pulsa este botón para abrir Cursor

    Abrir en Cursor

    Cursor te pedirá confirmar; pulsa Install

  2. Abre el chat de IA de Cursor en modo Agent

  3. Pruébalo

    Usa CSS Crème y dime qué puedes hacer por mí; luego muéstrame una cosa

    ✓ Si Cursor dice que está usando CSS Crème o muestra una herramienta de CSS Crème en la respuesta, ya está conectado

Nombres de menú comprobados con la ayuda de Cursor el 11 nov 2026 · tu pantalla puede variar un poco según la versión

Funciona con VS Code · unos 2 min

Sin clave y sin instalar nada

  1. Pulsa este botón para abrir VS Code

    Abrir en VS Code

    VS Code te pedirá confirmar; pulsa Install

  2. Abre el chat de IA de VS Code en modo Agent

  3. Pruébalo

    Usa CSS Crème y dime qué puedes hacer por mí; luego muéstrame una cosa

    ✓ Si VS Code dice que está usando CSS Crème o muestra una herramienta de CSS Crème en la respuesta, ya está conectado

Nombres de menú comprobados con la ayuda de VS Code el 11 nov 2026 · tu pantalla puede variar un poco según la versión

Otras apps que usan MCP, como Windsurf, Zed o Gemini CLI, añaden servidores de forma distinta. Míralo en la lista de apps

Ver todas las apps que usan MCP →

Dirección para apps que se conectan por la web

Direcciónhttps://csscreme.com/mcp

La configuración JSON está en “Para desarrolladores”, abajo

¿Te atascaste? Pregunta a quien usa CSS Crème💬 Conversación →
Para desarrolladores: comandos de Terminal y configuración JSON

Por la web

Claude Code

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

Cursor (~/.cursor/mcp.json)

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

VS Code (mcp.json)

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

Esta configuración se genera a partir de la ficha del creador en el registro. Si el README dice otra cosa, sigue el README.

De un vistazo

Descargas por semanai
No está en npm/PyPI
Dominio verificado
✓ csscreme.com
Conexión
Se ejecuta en la nube
Transporte
streamable-http
Última versióni
1.8.1
Publicado en el registroi
26 sept 2026
Último cambio de códigoi
23 oct 2026
Creador
damnepic
Sitio web
csscreme.com
Estado en el registro
Activo

Qué apps pueden usarlo

Según cómo se conecta este servidor y la documentación de cada app, comprobado el 10 nov 2026.

Se conectan por internet en

ClaudeChatGPTGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatOpen WebUIRaycast

Todas las apps, con ventajas y desventajas →

Qué puede hacer

Nombres y descripciones de las herramientas tal como los informó el servidor el 8 nov 2026. Los escribió el creador, no nosotros; los mostramos como texto sin formato.

  • 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

Revisiones básicasi

Revisamos información que cualquiera puede ver; no hemos leído el código. Las revisiones que no aplican no se cuentan. · Revisado el 12 nov 2026

  • ✓ Superada

    El creador coincide con el repo

    El nombre en el registro se verificó con el dominio csscreme.com (el registro comprueba quién es dueño del dominio)

  • ✓ Superada

    Sigue en mantenimiento

    Último cambio de código: hace 20 días

  • ✓ Superada

    Tiene licencia

    Usa MIT

  • ✓ Superada

    El endpoint responde

    Respondió en 461 ms (HTTP 200)

  • – No aplica

    Inicio de sesión con OAuth

    No hace falta iniciar sesión

  • ✓ Superada

    Sin instrucciones ocultas en las descripciones de herramientas

    Leímos 13 descripciones de herramientas y no encontramos instrucciones ocultas para la IA

Conversación

Pregunta, comparte un consejo o avisa de que no funciona. Ordenado por lo que la gente marcó como útil.

Aún no hay publicaciones. Sé la primera persona en preguntar o compartir.

Lo publicado aquí lo escriben usuarios, no el equipo de PopNx.

Inicia sesión con Google para publicar

Reseñas de usuarios

Aún no hay reseñas

Inicia sesión con Google para escribir una reseña

Comparado con otros en Diseño, imágenes y audioi

  • Más estrellas que el 0% de los otros 2946 servidores de esta categoría
  • Publicado en el registro más recientemente que el 35% de los otros 2946 servidores de esta categoría
  • Revisiones básicas iguales o mejores que el 100% de los otros 2946 servidores de esta categoría

Comparado con todos los servidores activos de esta categoría en el registro. Las estrellas solo cuentan cuando quien lo publica es dueño del repo.

Preguntas frecuentes

¿Es seguro CSS Crème?

Superó 5 de 5 revisiones básicas aplicables. No hemos leído el código. Antes de agregar una clave o un token, revisa qué acceso pide el servidor y usa una clave que tenga solo los permisos que necesitas.

¿Qué claves o códigos necesita?

El registro no indica ninguna clave obligatoria, aunque algunos servidores te piden iniciar sesión la primera vez que los usas.

¿Se ejecuta en mi computadora o en la nube?

Se ejecuta en la nube del creador. Te conectas por internet sin instalar nada, pero lo que envías pasa por los servidores del creador.

¿Sigue en mantenimiento?

El repo de GitHub cambió por última vez hace 20 días, y la última versión (1.8.1) llegó al registro hace 2 meses.

¿Qué apps pueden usarlo?

Las apps compatibles con MCP, como Claude Desktop, Claude Code, Cursor y VS Code. Se conecta por URL, así que también funciona en apps que aceptan MCP remoto, como ChatGPT Business o superior.

¿Qué puedo usar en su lugar?

En la misma categoría: Figma Context MCP, AutoClip, Next AI Draw.io

Otros de la misma categoría

Servidores de la misma categoría hechos por otros creadores, ordenados por estrellas.

Cómo leer una tarjeta:↓ Descargas por semanai★ Estrellas de GitHubiTres pilares: reseñas · revisiones · usoiActualizado = fecha en que se publicó la última versión en el registroi

Figma Context MCP

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

de GLipsMuy usado↓ 152,1 mil/sem★ 16,2 milActualizado hace 5 meses

Se ejecuta en tu computadora

AutoClip

Clip long videos into short clips with covers and captions. Local CLI and MCP.

de zhouxiaokaMuy usado↓ 205/sem★ 10,3 milActualizado hace 15 días

Se ejecuta en tu computadora

Next AI Draw.io

draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand

de DayuanJiangMuy usado↓ 21,7 mil/sem★ 36,9 mil Estrellas de todo el repositorioActualizado hace 5 días

Se ejecuta en tu computadora

README del creador

Abrir el README

Copiado tal cual del repo del creador. PopNx MCP no lo ha revisado ni lo respalda. Se quitaron HTML, imágenes y scripts. Los enlaces llevan fuera de este sitio.

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.