01 · ¿Qué herramientas necesitás para que Claude Code no diseñe genérico?
El ranking completo · criterio, números y verificación visual
Ningún artículo en español sobre diseñar webs con Claude nombra estas cinco herramientas juntas, ni trae el comando de instalación de cada una. Eso es lo que resuelve esta guía: un ranking concreto, con link y comando, de lo que instalé para que Claude Code deje de tirar el mismo layout violeta con Inter en todos lados.
El orden importa porque cada herramienta ataca una capa distinta del problema:
- La skill de Emil Kowalski pone criterio sobre cuándo y cómo animar.
- Impeccable suma vocabulario operativo: 23 comandos slash y 7 dominios de referencia.
- Taste fija números concretos de densidad visual y motion en vez de dejarlos a criterio libre.
- El MCP de Figma Dev Mode conecta contexto de diseño real desde un archivo de Figma.
- El MCP de Playwright le da a Claude ojos para revisar lo que generó antes de que lo apruebes vos.
| # | Herramienta | Qué ataca | Instalación |
|---|---|---|---|
| 1 | Skill de Emil Kowalski | Criterio de animación | clonar repo de GitHub |
| 2 | Impeccable | Vocabulario operativo (23 comandos) | npx skills add pbakaus/impeccable |
| 3 | Taste | Números fijos de densidad y motion | npx add-skill Leonxlnx/taste-skill |
| 4 | MCP de Figma Dev Mode | Contexto de diseño real | conectar servidor MCP por SSE |
| 5 | MCP de Playwright | Verificación visual del resultado | claude mcp add playwright npx @playwright/mcp@latest |
Si ya instalaste un stack de skills de diseño para Claude Code y el resultado sigue sintiéndose de IA, lo más probable es que te falten las dos últimas: nadie te está mostrando lo que realmente se generó.
¿Quieres que tus devs entreguen 3x más con Claude Code?
Sin reescribir el repo. Sin formaciones largas. Sin tocar tu stack.
Agendar llamadaMarcas que confiaron en Claura
- Bissu Abogados
- Isha Judd
- Luxom Developments
- RE/MAX Patagon
- Bitget Wallet
- SpacePal
- Margaret Bissu
- Soy Andina
02 · ¿Qué hace la skill de Emil Kowalski?
Criterio antes de animar · cuatro preguntas obligatorias
Emil Kowalski (Linear, ex Vercel, autor del sitio emilkowal.ski) publicó su propia skill de diseño en github.com/emilkowalski/skills. Adentro vive emil-design-eng, que antes de dejar que Claude anime cualquier cosa le exige responder cuatro preguntas: si la animación es necesaria, qué comunica, con qué curva de easing y a qué velocidad.
Esto corta de raíz el default más común de Claude sin skill: aplicar transition: all 0.3s a todo, sin pensar si hace falta.
Cómo se instala:
Para quien ya se cansó de que Claude anime todo con el mismo timing, sin importar el contexto.
03 · ¿Qué suma Impeccable sobre una skill de diseño base?
El vocabulario operativo · 23 comandos, 7 dominios
Impeccable, creada por Paul Bakaus (github.com/pbakaus/impeccable) bajo licencia Apache 2.0, no reemplaza una skill de criterio estético: la extiende. Suma 23 comandos slash (critique, polish, bolder, quieter, entre otros) y 7 dominios de referencia (typography, color, spatial, motion, interaction, responsive, UX writing) que Claude lee on demand cuando el comando los necesita.
Instalación una sola línea, agnóstica de agente:
Ya cubrimos Impeccable a fondo, con la lista completa de los 23 comandos, en la guía de 3 skills para mejorar el diseño de Claude. Si todavía no la instalaste, ese es el punto de partida natural antes de seguir con el resto de este ranking.
04 · ¿Para qué sirve Taste y qué fija en números?
Densidad visual, motion y varianza · con valores fijos, no a criterio libre
Taste (repo design-taste-frontend, de Leonxlnx) resuelve un problema distinto al de las dos anteriores. Una skill de criterio estético te dice qué dirección tomar. Taste fija el número exacto en el que esa dirección se mantiene estable entre componentes:
Le pedís a Claude "hacelo minimalista" tres veces en la misma sesión y te devuelve tres densidades distintas: a veces vacío, a veces saturado de elementos.
DESIGN_VARIANCE, MOTION_INTENSITY y VISUAL_DENSITY quedan fijados como referencia numérica. El mismo prompt repite la misma densidad componente tras componente.
Cómo se instala:
Para cuando ya tenés la dirección estética resuelta (Emil Kowalski, Impeccable) y lo que falta es consistencia entre componentes de un mismo proyecto.
05 · ¿Cómo conectás el MCP de Figma Dev Mode a Claude Code?
Contexto de diseño real · no una aproximación genérica
Las tres piezas anteriores del ranking le dan a Claude criterio. Esta y la siguiente le dan contexto y verificación. El Dev Mode MCP Server de Figma se habilita desde Preferencias en la app de escritorio de Figma y se conecta a Claude Code como servidor MCP por SSE, según la guía oficial de Figma.
Pasos:
- Abrí Figma Desktop, andá a Preferencias y activá "Enable Dev Mode MCP Server".
- Conectalo a Claude Code:
Con esto conectado, Claude Code deja de inventar medidas o adivinar un design system desde cero: lee las specs reales del archivo de Figma que tengas abierto.
Para cuando ya existe un diseño aprobado en Figma y necesitás que el código lo respete al pixel.
06 · ¿Cómo usás el MCP de Playwright para revisar lo que generó?
El cierre del stack · que Claude vea lo que hizo, no que lo describa
El MCP de Playwright expone herramientas de navegación y captura de pantalla (browser_navigate, browser_take_screenshot, browser_snapshot) que Claude Code usa directamente, sin que vos tengas que abrir el navegador a mirar por él.
Cómo se instala:
Una vez conectado, el pedido cambia de forma: en vez de "hacé un hero más interesante" sin contexto, le pedís "navegá a localhost:3000, sacá una captura del hero y decime si se ve genérico de IA". Claude deja de confiar en su propia descripción de lo que generó y pasa a revisar el resultado real, antes de que lo veas vos.
07 · ¿En qué orden instalás y usás las cinco herramientas?
El flujo completo · de cero a un componente verificado
El orden no es arbitrario. Cada herramienta asume que la anterior ya está instalada:
- Skill de Emil Kowalski: instalala primero si tu problema es motion sin criterio.
- Impeccable: sumala para tener vocabulario operativo (
critique,polish,bolder) sobre esa base. - Taste: agregala cuando el problema pase de "no sé qué dirección tomar" a "la dirección cambia cada vez que genero algo nuevo".
- MCP de Figma: conectalo cuando ya exista un diseño aprobado en Figma que el código tenga que respetar.
- MCP de Playwright: cerralo siempre al final, antes de aprobar cualquier componente que Claude haya generado.
Un flujo real, de principio a fin, se ve así:
Cinco herramientas, un solo flujo. El resultado deja de depender de que vos mires cada componente a mano.
08 · ¿Esto reemplaza armar el sitio o el bot con una agencia?
Honestidad antes de cerrar · dónde termina este stack
Este ranking resuelve un problema puntual: que el componente o la web que Claude Code genera no se vea genérico de IA. No resuelve estrategia de contenido, distribución, CRM con agentes ni el resto del sistema de marketing que corre detrás de un sitio. En Claura armamos ese sistema completo para marcas (design systems y landing pages a medida, auditados con criterio técnico antes de publicarlos) y este mismo stack de criterio primero, verificación visual después, es parte de cómo lo hacemos puertas adentro antes de aprobar cualquier entrega.
Sin skill de criterio, sin valores numéricos fijos y sin verificación visual, cada componente nuevo es una apuesta a que salió bien.
Con las cinco herramientas instaladas, cada componente pasa por el mismo filtro antes de llegar a producción, se note o no en el resultado final.
09 · ¿Cuál es el combo final?
Los próximos 15 minutos
Si vas a instalar algo hoy, este es el orden:
- Clonar la skill de Emil Kowalski desde github.com/emilkowalski/skills.
- Correr
npx skills add pbakaus/impeccable. - Correr
npx add-skill Leonxlnx/taste-skill. - Habilitar el Dev Mode MCP Server en Figma Desktop y conectarlo con
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse. - Conectar Playwright con
claude mcp add playwright npx @playwright/mcp@latest.
Cinco herramientas, cero costo de licencia en las tres skills, instalación de pocos minutos cada una. Si recién estás armando tu stack de skills de diseño, arrancá por la guía de 3 skills para mejorar el diseño de Claude, después sumá este ranking completo. Y si querés ver el panorama entero de skills de Claude por categoría, está la guía de 50 Claude skills de 2026. Si lo que buscás es que Claude te resuelva piezas visuales sin pelearte con un editor de diseño, también podés mirar cómo conectar Claude con Canva para diseñar sin diseñador.
Aplícalo a tu caso
Pídeselo a tu agente
Copia este prompt y pégalo en Claude o ChatGPT. Te pregunta lo que necesita saber de tu caso y arma el plan con los pasos de esta guía.
Quiero aplicar a mi caso la guía "5 herramientas para que tu web no parezca hecha con IA" de Claura.
Guía: https://claura-ai.com/resources/5-herramientas-web-no-parezca-ia
Mi caso: a qué me dedico, qué herramientas uso y qué quiero lograr
La guía cubre:
- ¿Qué herramientas necesitás para que Claude Code no diseñe genérico?
- ¿Qué hace la skill de Emil Kowalski?
- ¿Qué suma Impeccable sobre una skill de diseño base?
- ¿Para qué sirve Taste y qué fija en números?
- ¿Cómo conectás el MCP de Figma Dev Mode a Claude Code?
- ¿Cómo usás el MCP de Playwright para revisar lo que generó?
- ¿En qué orden instalás y usás las cinco herramientas?
- ¿Esto reemplaza armar el sitio o el bot con una agencia?
Lee la guía (si no puedes abrir el link, trabaja con los temas de arriba). Si te falta información sobre mi caso, hazme hasta 3 preguntas antes de empezar. Después arma un plan para aplicar la guía paso a paso a mi caso y dime qué puedo hacer hoy en menos de una hora.¿Prefieres que lo armemos nosotros? Agenda una llamada
¿Quieres que tus devs entreguen 3x más con Claude Code?
Sin reescribir el repo. Sin formaciones largas. Sin tocar tu stack.
Agendar llamadaMarcas que confiaron en Claura
- Bissu Abogados
- Isha Judd
- Luxom Developments
- RE/MAX Patagon
- Bitget Wallet
- SpacePal
- Margaret Bissu
- Soy Andina
Preguntas frecuentes sobre diseño con Claude Code
Porque el modelo, sin contexto extra, resuelve el camino más probable estadísticamente: paleta violeta, Inter como fuente, layout centrado con un botón. Es el promedio de internet, no una decisión de diseño. Las cinco herramientas de este ranking (ver el detalle de cada una más arriba) no reemplazan tu criterio: le dan a Claude Code un criterio explícito, numérico y verificable antes de que genere o apruebe un componente. Si ya instalaste un stack de skills de diseño y seguís viendo resultados genéricos, probablemente te falte la parte de verificación visual, que es la que efectivamente revisa lo que el modelo generó en vez de confiar en su propia descripción de lo que hizo. La skill de Emil Kowalski es el primer paso lógico: pone criterio sobre cuándo animar antes de pensar en cualquier otra cosa.
Se pueden instalar sueltas, pero se complementan en capas distintas y el salto de calidad es mayor cuando se apilan. La skill de Emil Kowalski pone criterio sobre cuándo animar, Impeccable suma 23 comandos slash sobre esa base, Taste fija valores numéricos de densidad visual y motion en vez de dejarlos a criterio libre del modelo, y los MCP de Figma y Playwright conectan contexto de diseño real y verificación visual del resultado. Si vas a empezar por una sola, instalá primero la de Emil Kowalski o Impeccable, que ya cubrimos en la guía de 3 skills para mejorar el diseño de Claude, y sumá Taste y los dos MCP cuando quieras pasar de "se ve mejor" a "se ve verificado".
Taste (nombre del repo design-taste-frontend, de Leonxlnx) no describe un estilo estético como "editorial" o "brutalist". Fija valores numéricos de referencia para tres variables que normalmente el modelo decide libremente cada vez: varianza de diseño (cuánto se aleja un componente del patrón anterior), intensidad de motion (cuánta animación entra en pantalla) y densidad visual (cuántos elementos compiten por atención). En vez de pedirle a Claude "hacelo minimalista" y recibir un resultado distinto cada sesión, Taste le da un rango numérico fijo que se repite igual en cada generación. Es el equivalente a pasar de un brief verbal a un brief con métricas. Funciona mejor combinado con una skill de criterio estético como la de Emil Kowalski o Impeccable, que deciden la dirección, mientras Taste fija los números que mantienen esa dirección consistente entre componentes.
Porque generar código y tener contexto de diseño real son cosas distintas. El Dev Mode MCP Server de Figma se habilita desde Preferencias en la app de escritorio y se conecta a Claude Code como servidor MCP por SSE, según la guía oficial de Figma. Una vez conectado, Claude Code puede leer specs reales de un archivo de Figma (tokens, auto layout, componentes) en vez de inventar medidas o adivinar un design system desde cero. Es el paso que falta cuando ya tenés un diseño aprobado en Figma y necesitás que el código lo respete al pixel, no una aproximación genérica. Para el paso siguiente, que es verificar visualmente lo que Claude terminó generando, el MCP de Playwright cumple ese rol.
El MCP de Playwright expone herramientas de navegación y captura de pantalla (browser_navigate, browser_take_screenshot, browser_snapshot) que Claude Code puede usar directamente, sin que vos tengas que abrir el navegador y describir lo que ves. Se instala con claude mcp add playwright npx @playwright/mcp@latest y una vez conectado le podés pedir a Claude algo como "navegá a localhost:3000, sacá una captura y decime si el hero se ve genérico de IA". El modelo deja de confiar en su propia descripción de lo que generó y pasa a mirar el resultado real, igual que lo haría un diseñador que revisa su propio trabajo antes de mandarlo a producción. Es el cierre natural del flujo completo de instalación y uso que armamos más arriba.
Fuentes e inspiración
Mira los posts originales donde desarrollamos estas ideas en redes.
