Designer Skill MCP

Name: Designer Skill MCP
Author: PyModel

de PyModelversión 0.27.0i★ 52iSe ejecuta en tu computadora

Nombre en el registroio.github.PyModel/designer-skill-mcp

Cómo instalar

What it does

UI design MCP: design references, intent routing, anti-slop static detector and gate. No API key.

Connects Se ejecuta en tu computadora
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ó 3/3 revisiones · Funciona en tu computadora · ✓ Comandos revisados el 13 nov 2026

Primero: ¿qué IA usas?

ClaudeWeb · app · móvilChatGPTWebClaude CodeTerminalCursorEditor de códigoVS CodeEditor de códigoOtrasOtras apps

Elige tu app y los pasos aparecen abajo.

Funciona con Claude, pero hay que preparar algo antes

Instala Node.js en tu computadora primero (una sola vez) · Solo en la app de Claude para computadora (Windows o Mac), no en la web ni en el móvil

Que la IA lo instale

Copia este mensaje en un chat de Claude. La IA revisa tu equipo, te dice qué archivo va a cambiar y espera tu visto bueno cada vez.

Instala el MCP server Designer Skill MCP para Claude en este equipo, en este orden: 1) Comprueba Node.js con node -v. Si falta, dime que lo instale desde https://nodejs.org/en/download; no lo instales tú. 2) Usa solo esta configuración (ya revisada por PopNx MCP): { "mcpServers": { "designer-skill": { "command": "npx", "args": [ "-y", "@pymodel/designer-skill-mcp" ] } } } 3) Dime la ruta completa del archivo que vas a cambiar o el comando que vas a ejecutar y espera mi visto bueno. 4) No hace falta clave. 5) Haz lo acordado y comprueba que las herramientas de Designer Skill MCP aparecen de verdad.

Este mensaje no lleva tu clave. Si hace falta una, la IA te pedirá que la pegues tú en el archivo o en el campo de la app.

1
Instala Node.js (si no lo tienes)
¿Ya está instalado? Compruébalo primero · Abre la Terminal, escribe este comando y pulsa Enter
node -v
- Aparece un número de versión, p. ej. v26.13.1 = ya está instalado, sáltate este paso
- Aparece "command not found" (en Windows, "is not recognized") = aún no está instalado, o acabas de instalarlo y debes cerrar y volver a abrir la Terminal
Cómo abrir la Terminal
Mac: pulsa ⌘ + Espacio, escribe Terminal y pulsa Enter
Windows: abre Inicio, escribe Windows PowerShell y elige Abrir
Si no está instalado: Abre la página oficial de descargas, elige la versión LTS y el instalador de clics: .pkg en Mac · .msi en Windows. Haz doble clic y sigue hasta el final. No necesitas ningún comando curl
Abrir la página de descarga de Node.js ↗
Al terminar, cierra la Terminal, ábrela de nuevo y ejecuta el mismo comando. Debe aparecer un número de versión: node -v
Se instala una vez y sirve para todo lo que usa Node.js
Hecho
Abre el archivo de configuración de la app de Claude de escritorio
SettingsDeveloperEdit Config
Hecho

Pega esta configuración y guarda el archivo

{
  "mcpServers": {
    "designer-skill": {
      "command": "npx",
      "args": [
        "-y",
        "@pymodel/designer-skill-mcp"
      ]
    }
  }
}

Hecho

Cierra Claude y vuelve a abrirlo
Hecho
Pruébalo
Usa Designer Skill MCP y dime qué puedes hacer por mí; luego muéstrame una cosa
✓ Si Claude dice que está usando Designer Skill MCP o muestra una herramienta de Designer Skill MCP 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

ChatGPT todavía no puede conectar Designer Skill MCP

Designer Skill MCP se instala en tu computadora, pero ChatGPT solo conecta servidores que funcionan en la web

Lo que puedes hacer en su lugar

A · Usa una app que pueda conectar Designer Skill MCP

Pasos para Claude →Instala Node.js en tu computadora primero (una sola vez) · Solo en la app de Claude para computadora (Windows o Mac), no en la web ni en el móvil
Pasos para Claude Code →Instala Node.js en tu computadora primero (una sola vez)
Pasos para Cursor →Instala Node.js en tu computadora primero (una sola vez)
Pasos para VS Code →Instala Node.js en tu computadora primero (una sola vez)

B · Otros en Diseño, imágenes y audio que funcionan con ChatGPT

Elegidos entre los más usados de la misma categoría, solo los que se conectan con una dirección y sin clave

Pascal 3D Editor✓ ChatGPT
Semiotic✓ ChatGPT
TypeUI✓ ChatGPT

Funciona con Claude Code, pero hay que preparar algo antes

Instala Node.js en tu computadora primero (una sola vez)

Que la IA lo instale

Copia este mensaje en un chat de Claude Code. La IA revisa tu equipo, te dice qué archivo va a cambiar y espera tu visto bueno cada vez.

Instala el MCP server Designer Skill MCP para Claude Code en este equipo, en este orden: 1) Comprueba Node.js con node -v. Si falta, dime que lo instale desde https://nodejs.org/en/download; no lo instales tú. 2) Usa solo esta configuración (ya revisada por PopNx MCP): claude mcp add --scope user designer-skill -- npx -y @pymodel/designer-skill-mcp 3) Dime la ruta completa del archivo que vas a cambiar o el comando que vas a ejecutar y espera mi visto bueno. 4) No hace falta clave. 5) Haz lo acordado y comprueba que las herramientas de Designer Skill MCP aparecen de verdad.

Este mensaje no lleva tu clave. Si hace falta una, la IA te pedirá que la pegues tú en el archivo o en el campo de la app.

1
Instala Node.js (si no lo tienes)
¿Ya está instalado? Compruébalo primero · Abre la Terminal, escribe este comando y pulsa Enter
node -v
- Aparece un número de versión, p. ej. v26.13.1 = ya está instalado, sáltate este paso
- Aparece "command not found" (en Windows, "is not recognized") = aún no está instalado, o acabas de instalarlo y debes cerrar y volver a abrir la Terminal
Cómo abrir la Terminal
Mac: pulsa ⌘ + Espacio, escribe Terminal y pulsa Enter
Windows: abre Inicio, escribe Windows PowerShell y elige Abrir
Si no está instalado: Abre la página oficial de descargas, elige la versión LTS y el instalador de clics: .pkg en Mac · .msi en Windows. Haz doble clic y sigue hasta el final. No necesitas ningún comando curl
Abrir la página de descarga de Node.js ↗
Al terminar, cierra la Terminal, ábrela de nuevo y ejecuta el mismo comando. Debe aparecer un número de versión: node -v
Se instala una vez y sirve para todo lo que usa Node.js
Hecho
Abre la Terminal
Mac: pulsa Command+Espacio y escribe Terminal · Windows: abre PowerShell
Hecho

Pega este comando y pulsa Enter

claude mcp add --scope user designer-skill -- npx -y @pymodel/designer-skill-mcp

Hecho

Escribe /mcp en Claude Code
Deberías ver Designer Skill MCP en la lista como conectado
Hecho
Pruébalo
Usa Designer Skill MCP y dime qué puedes hacer por mí; luego muéstrame una cosa
✓ Si Claude Code dice que está usando Designer Skill MCP o muestra una herramienta de Designer Skill MCP 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, pero hay que preparar algo antes

Instala Node.js en tu computadora primero (una sola vez)

Que la IA lo instale

Copia este mensaje en un chat de Cursor. La IA revisa tu equipo, te dice qué archivo va a cambiar y espera tu visto bueno cada vez.

Instala el MCP server Designer Skill MCP para Cursor en este equipo, en este orden: 1) Comprueba Node.js con node -v. Si falta, dime que lo instale desde https://nodejs.org/en/download; no lo instales tú. 2) Usa solo esta configuración (ya revisada por PopNx MCP): { "mcpServers": { "designer-skill": { "command": "npx", "args": [ "-y", "@pymodel/designer-skill-mcp" ] } } } 3) Dime la ruta completa del archivo que vas a cambiar o el comando que vas a ejecutar y espera mi visto bueno. 4) No hace falta clave. 5) Haz lo acordado y comprueba que las herramientas de Designer Skill MCP aparecen de verdad.

Este mensaje no lleva tu clave. Si hace falta una, la IA te pedirá que la pegues tú en el archivo o en el campo de la app.

1
Instala Node.js (si no lo tienes)
¿Ya está instalado? Compruébalo primero · Abre la Terminal, escribe este comando y pulsa Enter
node -v
- Aparece un número de versión, p. ej. v26.13.1 = ya está instalado, sáltate este paso
- Aparece "command not found" (en Windows, "is not recognized") = aún no está instalado, o acabas de instalarlo y debes cerrar y volver a abrir la Terminal
Cómo abrir la Terminal
Mac: pulsa ⌘ + Espacio, escribe Terminal y pulsa Enter
Windows: abre Inicio, escribe Windows PowerShell y elige Abrir
Si no está instalado: Abre la página oficial de descargas, elige la versión LTS y el instalador de clics: .pkg en Mac · .msi en Windows. Haz doble clic y sigue hasta el final. No necesitas ningún comando curl
Abrir la página de descarga de Node.js ↗
Al terminar, cierra la Terminal, ábrela de nuevo y ejecuta el mismo comando. Debe aparecer un número de versión: node -v
Se instala una vez y sirve para todo lo que usa Node.js
Hecho
Pulsa este botón para abrir Cursor
Abrir en Cursor
Cursor te pedirá confirmar; pulsa Install
Hecho
Abre el chat de IA de Cursor en modo Agent
Hecho
Pruébalo
Usa Designer Skill MCP y dime qué puedes hacer por mí; luego muéstrame una cosa
✓ Si Cursor dice que está usando Designer Skill MCP o muestra una herramienta de Designer Skill MCP 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, pero hay que preparar algo antes

Instala Node.js en tu computadora primero (una sola vez)

Que la IA lo instale

Copia este mensaje en un chat de VS Code. La IA revisa tu equipo, te dice qué archivo va a cambiar y espera tu visto bueno cada vez.

Instala el MCP server Designer Skill MCP para VS Code en este equipo, en este orden: 1) Comprueba Node.js con node -v. Si falta, dime que lo instale desde https://nodejs.org/en/download; no lo instales tú. 2) Usa solo esta configuración (ya revisada por PopNx MCP): { "servers": { "designer-skill": { "type": "stdio", "command": "npx", "args": [ "-y", "@pymodel/designer-skill-mcp" ] } } } 3) Dime la ruta completa del archivo que vas a cambiar o el comando que vas a ejecutar y espera mi visto bueno. 4) No hace falta clave. 5) Haz lo acordado y comprueba que las herramientas de Designer Skill MCP aparecen de verdad.

Este mensaje no lleva tu clave. Si hace falta una, la IA te pedirá que la pegues tú en el archivo o en el campo de la app.

1
Instala Node.js (si no lo tienes)
¿Ya está instalado? Compruébalo primero · Abre la Terminal, escribe este comando y pulsa Enter
node -v
- Aparece un número de versión, p. ej. v26.13.1 = ya está instalado, sáltate este paso
- Aparece "command not found" (en Windows, "is not recognized") = aún no está instalado, o acabas de instalarlo y debes cerrar y volver a abrir la Terminal
Cómo abrir la Terminal
Mac: pulsa ⌘ + Espacio, escribe Terminal y pulsa Enter
Windows: abre Inicio, escribe Windows PowerShell y elige Abrir
Si no está instalado: Abre la página oficial de descargas, elige la versión LTS y el instalador de clics: .pkg en Mac · .msi en Windows. Haz doble clic y sigue hasta el final. No necesitas ningún comando curl
Abrir la página de descarga de Node.js ↗
Al terminar, cierra la Terminal, ábrela de nuevo y ejecuta el mismo comando. Debe aparecer un número de versión: node -v
Se instala una vez y sirve para todo lo que usa Node.js
Hecho
Pulsa este botón para abrir VS Code
Abrir en VS Code
VS Code te pedirá confirmar; pulsa Install
Hecho
Abre el chat de IA de VS Code en modo Agent
Hecho
Pruébalo
Usa Designer Skill MCP y dime qué puedes hacer por mí; luego muéstrame una cosa
✓ Si VS Code dice que está usando Designer Skill MCP o muestra una herramienta de Designer Skill MCP 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 →

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

¿Te atascaste? Pregunta a quien usa Designer Skill MCP💬 Conversación →

Para desarrolladores: comandos de Terminal y configuración JSON

Instalado en tu computadora

Claude Code

claude mcp add --scope user designer-skill -- npx -y @pymodel/designer-skill-mcp

Claude Desktop (claude_desktop_config.json)

{
  "mcpServers": {
    "designer-skill": {
      "command": "npx",
      "args": [
        "-y",
        "@pymodel/designer-skill-mcp"
      ]
    }
  }
}

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "designer-skill": {
      "command": "npx",
      "args": [
        "-y",
        "@pymodel/designer-skill-mcp"
      ]
    }
  }
}

VS Code (mcp.json)

{
  "servers": {
    "designer-skill": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@pymodel/designer-skill-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

Estrellas de GitHub i: 52
Descargas por semanai: 109/sem
Licencia i: MIT
Conexión: Se ejecuta en tu computadora
Transporte: stdio
Última versióni: 0.27.0
Categoríai: Diseño, imágenes y audio
Publicado en el registroi: 13 nov 2026
Último cambio de códigoi: 13 nov 2026
Creador: PyModel
Paquetes: npm: @pymodel/designer-skill-mcp
Repo: PyModel/designer-skill
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 ejecutan en tu computadora en

Claude Goose LM Studio Msty Studio Cherry Studio Cursor VS Code + GitHub Copilot Visual Studio Windsurf (Devin Desktop)Zed Kiro Cline Continue JetBrains AI Assistant Claude Code Codex CLI Gemini CLI OpenCode nodecode Warp LibreChat Raycast

Todas las apps, con ventajas y desventajas →

Qué puede hacer

Se ejecuta en tu computadora; la lista de herramientas aparece en tu app de IA después de instalarlo.

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 16 nov 2026

✓ Superada
El creador coincide con el repo
El nombre en el registro se verificó con la cuenta de GitHub PyModel, dueña del repo
✓ Superada
Sigue en mantenimiento
Último cambio de código: hace 3 días
✓ Superada
Tiene licencia
Usa MIT
– No aplica
El endpoint responde
Este se ejecuta en tu computadora; no hay endpoint en internet
– No aplica
Inicio de sesión con OAuth
Se ejecuta en tu computadora y usa ajustes locales en su lugar
… Aún sin revisar
Sin instrucciones ocultas en las descripciones de herramientas
Se ejecuta en tu computadora; solo podemos leer listas de herramientas de endpoints en internet

Vulnerabilidades publicadas (OSV.dev)

Sin entradas en OSV.dev para @pymodel/designer-skill-mcp@0.27.0

Solo revisa esta versión del paquete, no todas sus dependencias · revisado 15 nov 2026

Qué revisamos → · JSON

Creadores: pedir otra revisión o avisar de un dato erróneo

Iniciar sesión

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 para publicar

Reseñas de usuarios

Aún no hay reseñas

Inicia sesión para escribir una reseña

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

Más estrellas que el 96% de los otros 3098 servidores de esta categoría
Publicado en el registro más recientemente que el 91% de los otros 3098 servidores de esta categoría
Revisiones básicas iguales o mejores que el 100% de los otros 3098 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 Designer Skill MCP?

Superó 3 de 3 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 tu computadora. Tu app de IA lo inicia cuando hace falta, y los datos no pasan por los servidores del creador (a menos que el propio servidor llame a un servicio en línea).

¿Sigue en mantenimiento?

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

¿Qué apps pueden usarlo?

Las apps compatibles con MCP, como Claude Desktop, Claude Code, Cursor y VS Code. También necesitas Node.js en tu computadora.

¿Qué puedo usar en su lugar?

En la misma categoría: Pascal 3D Editor, Figma MCP Server, Remocn: Remotion MCP server, Harness, ChatCut

Alternativas parecidas

Misma categoría, otros creadores, comandos ya revisados. Primero los oficiales, luego 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

Pascal 3D Editor

Create, inspect, validate, and save editable 3D building scenes with Pascal's MCP server.

de pascalorgMuy usado↓ 1 mil/sem★ 25,5 mil Estrellas de todo el repositorioActualizado hace 3 días

Computadora o nube✓ del servicio · pascal.app

Instalar

Figma MCP Server

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

de figmaMuy usado★ 2,2 milActualizado hace 13 meses

Se ejecuta en la nube✓ del servicio · mcp.figma.com

Cómo conectar

Remocn: Remotion MCP server

Hosted MCP for Remotion videos: search Remocn components, read docs, plan a video, preview it.

de RemocnEn crecimiento★ 1,7 milActualizado hace 6 días

Se ejecuta en la nube✓ del servicio · remocn.dev

Cómo conectar

Harness

Start Claude Code and Codex agents the person can watch, wait for them and read their answers.

de autonomous-aiEn crecimiento↓ 109/sem★ 1,5 milActualizado hace 28 días

Se ejecuta en tu computadora✓ harness.autonomous.ai

Instalar

ChatCut

AI video editor for agents: cut footage, add captions and motion graphics, export editable edits.

de ChatCut-IncEn crecimiento★ 1 milActualizado hace 17 días

Se ejecuta en la nube✓ del servicio · chatcut.io

Cómo conectar

Pascal 3D Editor — En la nube o instalado en tu equipo · Sin clave
Figma MCP Server — Funciona en la nube, sin instalar nada · Sin clave · En el directorio de Claude
Remocn: Remotion MCP server — Funciona en la nube, sin instalar nada · Sin clave
Harness — Se instala en tu equipo · Sin clave
ChatCut — Funciona en la nube, sin instalar nada · Sin clave

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.

Plug-and-play MCP. UI superpowers for your agent.

Setup · How it works · References · Tools · Development

Setup

Paste into your agent (Claude Code, Codex, Cursor, any MCP client). It installs the skill, wires the MCP and verifies the tools:

Add designer-skill alongside Niblet Designer UI. The designer core is keyless: it routes requests, loads guidance and runs supplemental static checks. Niblet optionally supplies real screens and licensed materials; the host owns implementation and rendered verification.

Install or refresh the skill into the user skill directory (not this project):

npx skills add PyModel/designer-skill --skill designer-skill -g -y

Add the local MCP using this client's native MCP configuration, in the user-level (not project-level) config:

Name: designer-skill Transport: stdio Command: npx Args: -y @pymodel/designer-skill-mcp@latest

No API key is needed. Do not add one.

Verify: list the designer-skill server's tools and confirm get_preflight_brief, dispatch_intent, review_and_gate are present. Do not run a sample check.

When setup is complete, confirm the skill is installed and the three named tools are exposed. On UI work: call get_preflight_brief, use dispatch_intent and load only relevant guidance. If an unresolved visual question warrants retrieval, use the separately configured niblet server's discovered tools. Prefer its image content for inspection; designer-skill's catalogue wrappers return metadata or routing guidance only. Run review_and_gate as supplemental static evidence, then perform the required rendered, functional and accessibility checks in the host. Never treat static success as UI PASS. Preserve audit/plan scope. Continue an active authorized task; otherwise report designer-skill ready, and report Niblet paired only if its tools were actually observed.

No Niblet? Continue from local product evidence; catalogue retrieval is optional.

Or pick one:

	Install
🟣 Claude Code plugin (skill + MCP)	`/plugin marketplace add PyModel/designer-skill` then `/plugin install designer-skill@pymodel`
🟢 Codex plugin	`codex plugin marketplace add PyModel/designer-skill`, then install designer-skill from pymodel in `/plugins`
⚫ Cursor plugin	Install from the marketplace; ships `mcp.json`, skills, `/designer-setup` · `/designer-status`
🔵 MCP only, any client	`claude mcp add designer-skill -- npx -y @pymodel/designer-skill-mcp` (same args for `codex mcp add`, `pythinker mcp add --transport stdio`)
🟠 Skill only	`npx skills add PyModel/designer-skill --skill designer-skill` or copy `skills/designer-skill/` into `~/.claude/skills/` / `~/.codex/skills/`

Canonical MCP config (mcp.json):

{ "mcpServers": { "designer-skill": { "command": "npx", "args": ["-y", "@pymodel/designer-skill-mcp@latest"] } } }

@latest tracks npm; teams pin @pymodel/designer-skill-mcp@0.22.0. Plugin skill content updates separately (/plugin update …). MCP registry name: io.github.PyModel/designer-skill-mcp. Requires Node 22+.

Per-client config (VS Code, Codex TOML, Kilo, Open Code, Claude Desktop, Pythinker, Pi)

VS Code .vscode/mcp.json (1.99+):

{ "servers": { "designer-skill": { "type": "stdio", "command": "npx", "args": ["-y", "@pymodel/designer-skill-mcp"] } } }

Codex CLI ~/.codex/config.toml:

[mcp_servers.designer-skill]

command = "npx" args = ["-y", "@pymodel/designer-skill-mcp"]

Open Code opencode.json:

{ "mcp": { "designer-skill": { "type": "local", "command": ["npx", "-y", "@pymodel/designer-skill-mcp"] } } }

Claude Desktop, Cursor (`.cursor/mcp.json`), Kilo Code (`mcp_settings.json`), Pythinker (`~/.pythinker/mcp.json`): the canonical mcpServers JSON above. Pythinker verify: pythinker mcp test designer-skill (guide).

Pi: the same JSON, or register the skill natively: { "skills": [{ "path": "/path/to/skills/designer-skill/SKILL.md" }] }

Local checkout: replace npx with "command": "node", "args": ["/abs/path/to/designer-skill-mcp/dist/index.js"].

How it works

flowchart LR

A[Prompt] --> B[get_preflight_brief] B --> C[dispatch_intent] C --> D[get_reference] D --> E[Build / polish UI] E --> F[review_and_gate] F -->|FAIL: fix| E F -->|static checks pass| G[Rendered checks by the host] classDef start fill:#f8fafc,stroke:#94a3b8,color:#18181b classDef route fill:#eff6ff,stroke:#3b82f6,color:#1e3a8a classDef know fill:#faf5ff,stroke:#7c3aed,color:#4c1d95 classDef work fill:#fff7ed,stroke:#e87a3d,color:#7c2d12 classDef gate fill:#ecfdf5,stroke:#10b981,color:#065f46 classDef host fill:#fff1f2,stroke:#e11d48,color:#881337 class A start class B,C route class D know class E work class F gate class G host

🔵 Route	🟣 Know	🟢 Check
`dispatch_intent` maps "make it pop" or "it feels off" to design verbs and at most four references.	24 designer references (type, color, motion, a11y, anti-slop, redesign, worst-case data, dependency selection…) plus 26 `ux/*` references (forms, collaboration, canvas, AI, i18n…).	A 44-rule deterministic detector backs `review_and_gate`, which reports each required rule as ran, unsupported, unresolved or waived.

The gate is static only: overall status is FAIL or NOT_VERIFIED, never a rendered-readiness pass. Rendered, accessibility and performance checks stay NOT_RUN until the host supplies evidence.

Niblet ecosystem

Owner	Responsibility
`designer-skill`	One entry point for scope, routing, craft/UX guidance and verification reporting
Niblet platform	Real-screen catalogue, recorded design references and license-recorded materials
Niblet MCP	Reference images and material retrieval; hosted `get_ui_component` provides React source
Agent host	Authorized file/dependency changes, browser/native interaction, rendered inspection and evidence

Discover tools per server: the same find_ui_references name on designer-skill is a text-only REST wrapper, not Niblet's image-delivering tool. Prefer Niblet MCP for reference inspection and materials. Do not call both providers for the same question or infer connectivity from installation. Consult niblet-catalogue for deployment differences, bounds and licensing.

Use one product-grounded design contract. Niblet's surface modes (Persuade, Operate, Read, Experience) describe the user's job; designer-skill's execution modes (audit, plan, refine, implement, system) describe permitted work. They are independent: an Operate surface can receive a read-only audit or an authorized refinement. Existing product tokens, components and real content win over reference aesthetics. Component retrieval does not authorize dependency installation or source writes, and neither MCP certifies rendered quality.

Example: *"Use designer-skill to redesign this pricing page without breaking functionality."* → get_preflight_brief → dispatch_intent → get_reference → edit → review_and_gate.

Built with it: pythinker.com

References

File	Use when	Tier
`design-principles`	Typography, spacing, color, layout, hierarchy	🔵 core
`differentiation-playbook`	Being distinctive: inverse test, layout menu, named references	🔵 core
`aesthetic-systems`	Picking a look: 5 systems with palettes, fonts, shadows	🔵 core
`motion-and-interaction`	Timing, springs, scroll, reduced motion	🔵 core
`engineering-and-performance`	Tokens, a11y, responsive, Core Web Vitals	🔵 core
`avoid-ai-slop`	Ban list, category-reflex checks, completeness contract	🔵 core
`refactor-and-redesign`	Audit → diagnose → redesign without breaking behavior	🔵 core
`command-playbook`	Intent → verb dispatch	🔵 core
`verification-and-recovery`	Evidence rules, gate statuses, failure triage	🔵 core
`interaction-design`	Fitts/Hick/Miller, forms, navigation, errors, loading	🔴 extended
`visual-critique`	Seven-dimension critique	🔴 extended
`design-systems`	Token architecture, component specs, theming	🔴 extended
`project-init`	Discovery interview, PRODUCT.md, DESIGN.md	🔴 extended
`craft-flow`	Scope-adaptive implementation and evidence workflow	🔴 extended
`live-mode`	Authorized source variants using host-discovered preview tools	🔴 extended
`css-techniques`	Modern CSS: container queries, `:has()`, `clamp()`, logical props	🔴 extended
`motion-vocabulary`	Map a feel word ("the bouncy thing") to the standard motion term	🔴 extended
`fluid-input-principles`	Gesture-first fluid-interface principles translated for web	🔴 extended
`native-web`	Platform-correct mobile web: tap, viewport, safe areas, zoom	🔴 extended
`worst-case-data`	Design and verify against extreme real data, not demo values	🔴 extended
`variant-prototyping`	Time-boxed side-by-side variants for genuinely open decisions	🔴 extended
`dependency-selection`	Method for choosing or adding a UI dependency, not a picks list	🔴 extended
`niblet-catalogue`	Optional real-screen references and materials via Niblet; advisory, unconfigured-safe	🔴 extended
`craft-provenance`	Historical capability mapping and attribution; load only when needed	🔴 extended

Plus 26 ux/* references, authored in skills/ux-designer/ and vendored at skills/designer-skill/reference/ux/ (generated by node scripts/sync-ux.mjs, checked by test), so a designer-skill-only install is self-contained. Each SKILL.md is a short router with a one-line description; references load only when a task needs them.

Phrase	Verbs	Reads

| "make it pop" | `ampl

Solo se muestra el principio; lee el resto en el repo

Designer Skill MCP

What it does

Instalación

Instala Node.js (si no lo tienes)

Abre el archivo de configuración de la app de Claude de escritorio

Pega esta configuración y guarda el archivo

Cierra Claude y vuelve a abrirlo

Pruébalo

Lo que puedes hacer en su lugar

Instala Node.js (si no lo tienes)

Abre la Terminal

Pega este comando y pulsa Enter

Escribe /mcp en Claude Code

Pruébalo

Instala Node.js (si no lo tienes)

Pulsa este botón para abrir Cursor

Abre el chat de IA de Cursor en modo Agent

Pruébalo

Instala Node.js (si no lo tienes)

Pulsa este botón para abrir VS Code

Abre el chat de IA de VS Code en modo Agent

Pruébalo

Instalado en tu computadora

De un vistazo

Qué apps pueden usarlo

Qué puede hacer

Revisiones básicasi

El creador coincide con el repo

Sigue en mantenimiento

Tiene licencia

El endpoint responde

Inicio de sesión con OAuth

Sin instrucciones ocultas en las descripciones de herramientas

Vulnerabilidades publicadas (OSV.dev)

Conversación

Reseñas de usuarios

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

Preguntas frecuentes

Alternativas parecidas

Pascal 3D Editor

Figma MCP Server

Remocn: Remotion MCP server

Harness

ChatCut

README del creador

Setup

How it works

Niblet ecosystem

References