Diseña como un profesional con Claude Code sin que parezca hecho por una IA
Pídele a Claude Code una página sin más indicaciones y muchas veces te va a salir la misma: la tipografía de siempre, un degradado morado, tarjetas dentro de tarjetas y animaciones que rebotan. No es que no sepa: es que nadie le dio criterio. Estas 3 skills gratuitas y de código abierto se lo dan en tres capas: cómo pensar el diseño antes de empezar, qué está mal en lo que ya hizo y cómo se siente el movimiento.
- 01Qué esPor qué Claude diseña genérico
- 02Qué esLas 3 skills, una por una
- 03Paso a pasoCómo instalarlas
- 04DecidirEl orden importa
- 05Prompts3 prompts para usarlas juntas
- 06DecidirSi algo falla
- 07CuidadoLo honesto
Por qué Claude diseña genérico (y cómo se arregla)
Claude razona muy bien, pero cuando le pides una interfaz sin indicaciones tiende a lo de siempre. El autor de impeccable lo resume así: todos los modelos aprendieron de las mismas plantillas, y sin guía salen las mismas señales en cada proyecto: Inter para todo, degradados de morado a azul, tarjetas dentro de tarjetas, texto gris sobre fondos de color. (README de impeccable)
Imagina que le pides a alguien muy inteligente que dibuje, pero esa persona nunca abrió un libro de arte. Va a hacer su mejor intento, y va a salir correcto pero sin alma. Estas skills son los libros de arte. Una skill es un manual que Claude abre solo cuando la tarea lo pide; si no sabes qué es, empieza por nuestra guía de skills.
Tres capas de criterio, no tres de lo mismo. Una le enseña a pensar el diseño antes de empezar, otra encuentra lo que quedó mal y la tercera revisa cómo se mueve.
Las 3 skills de diseño para Claude Code, una por una
frontend-design
la base · de AnthropicLe enseña a Claude a decidir el diseño antes de escribir código: una dirección estética clara, tipografía y colores con carácter, y detalles visuales pensados, para no caer en lo que parece plantilla. Según su documentación, Claude la usa solo cuando le pides trabajo de interfaz.
Anthropic · licencia Apache 2.0 · se instala como plugin desde el catálogo oficial de Anthropic.
Cuándo NO: si ya tienes un sistema de diseño cerrado (tu marca, tus componentes). Ahí manda lo tuyo: pásaselo en el prompt para que no invente una estética nueva.
impeccable
el detector de erroresUna skill con 24 comandos que se usan como /impeccable audit (revisión técnica: accesibilidad, rendimiento, adaptación a pantallas), /impeccable critique (revisión de diseño) o /impeccable polish (repaso final). Trae además un detector que corre sin IA y sin clave de API, con 61 reglas fijas: degradados morados, rebotes, brillos oscuros, textos demasiado anchos, botones muy chicos para el dedo, espacios apretados.
Paul Bakaus · licencia Apache 2.0 · más de 72.000 estrellas en GitHub al 29-09-2026 · nació a partir de frontend-design.
Cuándo NO: como única prueba de calidad. Su propio autor avisa que un escaneo limpio es evidencia, no prueba: igual hay que mirar la página en varias pantallas.
design-motion-principles
el revisor de animacionesRevisa y crea animaciones combinando tres miradas que no siempre están de acuerdo, tomadas del trabajo publicado de tres diseñadores: la de Emil Kowalski (contención y velocidad: «¿esto debería animarse?»), la de Jakub Krehel (acabado de producción: «¿es lo bastante sutil?») y la de Jhey Tompkins (experimentación: «¿qué podría llegar a ser?»). Según tu proyecto, le da más peso a una u otra.
Kyle Zantos · licencia MIT · dos modos: crear y revisar. Al revisar busca lo que debería animarse y no lo hace, y marca los tics de animación hecha por IA.
Cuándo NO: si tu página no tiene animaciones ni estados que cambien. Ahí no tiene qué revisar.
Fuentes: plugin frontend-design · skill frontend-design · impeccable · design-motion-principles
Cómo instalar las 3 skills en Claude Code
1. frontend-design, desde el catálogo oficial de Anthropic
Claude Code agrega ese catálogo (claude-plugins-official) solo, la primera vez que lo abres en la terminal. Dentro de una sesión:
/plugin install frontend-design@claude-plugins-official- El comando no instala de golpe: abre el panel
/pluginen los detalles del plugin. - Mira «Context cost»: cuánto suma a cada mensaje (Every turn) y cuánto cuando Claude la abre (When invoked). Solo aparece en plugins del catálogo oficial.
- Elige «Install for you (user scope)» para tenerla en todos tus proyectos de ese equipo.
- Lee el final del resumen: «Plugin is now active», o
/reload-pluginssi pide recargar.
Create distinctive, production-grade frontend interfaces…1
Every turn · When invoked2
Los textos son los de la documentación de Claude Code en inglés; la forma exacta del panel puede variar según tu versión. En la pestaña Installed de /plugin ves después lo que tienes instalado.
2. impeccable, con su instalador
Desde la carpeta de tu proyecto. El instalador detecta tus herramientas y te pregunta si la quieres solo en ese proyecto o en todos. Te recomendamos agregar --no-hooks la primera vez (te explicamos por qué en «Lo honesto»):
npx impeccable install --no-hooksDespués, una sola vez por proyecto, corre /impeccable init: le cuenta a la skill para quién es el producto y en qué tono habla, y lo guarda en un archivo PRODUCT.md que usan los demás comandos. También se puede instalar como plugin con /plugin marketplace add pbakaus/impeccable y eligiéndolo en /plugin.
3. design-motion-principles, a mano
Su autor recomienda npx skills add kylezantos/design-motion-principles. Si prefieres no usar otra herramienta más, la instalación manual es copiar la carpeta a tus skills personales:
git clone https://github.com/kylezantos/design-motion-principles.git && mkdir -p ~/.claude/skills && cp -r design-motion-principles/skills/design-motion-principles ~/.claude/skills/Es para la terminal de macOS, Linux o Git Bash en Windows. Lo que está en ~/.claude/skills/ queda disponible en todos tus proyectos, y Claude Code lo detecta sin reiniciar. Solo si esa carpeta no existía cuando abriste la sesión, corre /reload-skills.
Fuentes: Install and manage plugins · Extend Claude with skills · impeccable (Installation · Usage) · design-motion-principles (Installation)
El orden importa: cuándo usar cada una
| Paso | Skill | Cuándo |
|---|---|---|
| 1 | frontend-design | Antes de que Claude escriba la primera línea: le da la dirección visual |
| 2 | impeccable | Con la primera versión ya hecha: npx impeccable detect encuentra los errores obvios y /impeccable audit o critique los que piden criterio |
| 3 | design-motion-principles | Si la página tiene animaciones, menús que se abren o estados que cambian: revisión final del movimiento |
El detector de impeccable también se puede correr solo, sin abrir Claude, sobre una carpeta, un archivo o una página publicada:
npx impeccable detect src/Si termina sin hallazgos devuelve 0, si encontró problemas devuelve 2, y si no pudo revisar algo, 1. Para revisar una página publicada necesita Chrome, Chromium o Edge instalado.
Fuente: README de impeccable (sección CLI).
3 prompts para usar las skills de diseño juntas
Son nuestros, no de los autores de las skills.
Primero el sistema, después el código
Cuándo usarlo: al empezar una página, una landing o un panel nuevo.
Corrige solo lo que marcó el detector
Cuándo usarlo: con la primera versión ya hecha y visible.
Para excepciones que quieras conservar (tu fuente de marca, por ejemplo), impeccable permite dejarlas anotadas con npx impeccable ignores.
Revisión final del movimiento
Cuándo usarlo: cuando la página ya está bien quieta y quieres revisar cómo se mueve.
Por defecto entrega un informe HTML con ejemplos animados en la carpeta motion-audits/; si lo prefieres en la terminal, agrega --terminal.
Si algo falla: errores comunes y qué hacer
| Qué notas | Por qué pasa | Qué hacer |
|---|---|---|
| Sigue usando la tipografía de siempre | frontend-design no está instalada o no está activa | Revisa en /plugin, pestaña Installed, y nómbrala en el prompt: «usa frontend-design» |
| El mismo error aparece una y otra vez | Claude rehace todo en vez de corregir lo que ya tenía | Pídelo explícito: «corrige solo lo que marcó impeccable, no empieces de cero» |
| El detector no marca nada, pero se siente raro | Cumple las reglas pero le falta personalidad | Pide /impeccable critique o /impeccable bolder, o un detalle con carácter en UN elemento, no en todos |
| Se ve bien pero «muerto» | Nadie revisó el movimiento | design-motion-principles busca justo eso: lo que debería animarse y no lo hace |
| Funciona, pero no se siente tuyo | Las skills dan criterio general, no conocen tu marca | Pásale tus colores, fuentes y tono en el prompt, o guárdalos con /impeccable init |
Lo honesto
- El automatismo de impeccable viene activado por defecto. Si lo instalas sin
--no-hooks, te ofrece un automatismo (hook) que revisa cada archivo de interfaz que Claude edita, y la opción por defecto es sí. Según su propio README, en Claude Code ese automatismo corre aunque le niegues permisos al modelo, y la primera vez puede descargar el motor del detector. Por eso te sugerimos empezar sin él y activarlo cuando ya lo conozcas. - Hay solapamiento. impeccable nació a partir de frontend-design, así que parte de sus consejos se repiten. La idea de usar las tres juntas y en ese orden es nuestra, no de sus autores.
- La guía es para Claude Code. No probamos subir estas skills a la app de Claude (web o escritorio). Si solo usas el chat, puedes adaptar los prompts de arriba, pero sin las skills el efecto es menor.
- design-motion-principles no es de esos tres diseñadores. Su README aclara que es una interpretación de su trabajo publicado, sin su participación ni su aval. Su último cambio es del 30-05-2026.
- Dos son de terceros. Un plugin puede ejecutar código con tus permisos de usuario, venga del catálogo que venga (lo dice la documentación de Claude Code). impeccable y design-motion-principles no son de Anthropic: revisa lo que instalas. Te enseñamos cómo en la guía de skills.
- Las cifras caducan. Las estrellas en GitHub (más de 72.000 impeccable, unas 1.150 design-motion-principles al 29-09-2026) miden popularidad, no calidad. Y el número de comandos y reglas de impeccable cambia con cada versión.
Primero el criterio, después el código, y al final la revisión: frontend-design le da dirección, impeccable encuentra lo que quedó mal y design-motion-principles revisa cómo se mueve. Ninguna conoce tu marca, así que pásasela siempre. Y antes de un diseño grande, conviene revisar qué modelo de Claude usar para ese trabajo.
¿Y ahora qué?
Tres formas de seguir, según lo que prefieras.
El mensaje para tu grupo
¿Le sirve a alguien de tu equipo o de tu grupo? Cópialo tal cual o ábrelo directo en WhatsApp.
Te paso esta guía: Diseña como un profesional con Claude Code. Que lo que hagas no parezca hecho por una IA. https://iactn.com/arsenal/disena-como-profesional/Fuentes, leídas el 29-09-2026
- plugins/frontend-design · catálogo oficial de plugins de Anthropic. Qué hace, que Claude la usa sola en trabajo de interfaz, licencia Apache 2.0.
- skills/frontend-design · repositorio de skills de Anthropic. Descripción de la skill y su licencia (LICENSE.txt, Apache 2.0).
- pbakaus/impeccable · README. 24 comandos, 61 reglas del detector,
npx impeccable detecty sus códigos de salida, instalación,--no-hooks, el automatismo y su origen en frontend-design. Licencia Apache 2.0 y estrellas al 29-09-2026. - kylezantos/design-motion-principles · README. Las tres miradas, los dos modos, el informe en
motion-audits/, instalación, créditos y licencia MIT. - Install and manage plugins · Claude Code Docs. El catálogo oficial se agrega solo, el panel
/plugin, «Context cost», los tres alcances y la pestaña Installed. - Plugins overview · Claude Code Docs. Un plugin corre con tus permisos de usuario, sea del catálogo que sea.
- Extend Claude with skills · Claude Code Docs. Las skills personales en
~/.claude/skills/sirven en todos tus proyectos y se detectan sin reiniciar;/reload-skills.