Diseña como un profesional en Claude Code
3 skills gratuitas y open source que le dan a Claude criterio visual: qué está técnicamente mal, cómo se siente el movimiento, y qué haría un equipo de diseño top. Sin reescribir prompts, sin cambiar de modelo.
Claude diseña feo por defecto
Claude es brillante razonando pero no nació diseñador. Cuando le pides un sitio o un componente, tiende a entregar gradientes morados sobre blanco, espacios apretados, la misma tipografía de siempre, y animaciones que se sienten mecánicas. No es mala intención — es falta de criterio visual en su entrenamiento por defecto.
Le dan a Claude 3 capas de criterio distintas: una mirada técnica (qué está mal), una de movimiento (cómo se siente al animarse), y una de gusto (qué haría un equipo top).
Una por una
impeccable — anti-slop determinista
Una herramienta de línea de comandos que escanea tu resultado ya renderizado y detecta los errores clásicos de diseño hecho por IA: espaciados apretados, gradientes forzados, tipografía de respaldo incorrecta, animaciones con rebote genérico.
Sin modelo de IA involucrado en el escaneo — solo reglas fijas. Lo que Claude no ve por sí solo, esta herramienta lo encuentra.
design-motion-principles — auditor de animaciones
Combina 3 filosofías de movimiento distintas en un solo auditor: contención y velocidad, acabado de producción, y experimentación con personalidad. Le pasas un componente con animaciones y te devuelve qué corregiría cada mirada — tú eliges cuál aplica según el contexto (productividad, consumo pulido, o portafolio creativo).
frontend-design — la que enseña a no diseñar feo desde el inicio
Le enseña a Claude a pensar en diseño antes de escribir código — qué tipografía, qué paleta, qué movimiento, qué jerarquía. Es la más importante de las 3: si solo puedes instalar una, instala esta. Sin ella, las otras dos pierden contexto.
Las 3 en un comando
Necesitas Claude Code instalado y acceso a la carpeta de skills de tu proyecto.
El orden importa
| Paso | Skill | Cuándo |
|---|---|---|
| 1 | frontend-design | Antes de pedirle a Claude que diseñe — le da el criterio inicial |
| 2 | impeccable | Después del primer render — detecta los errores obvios |
| 3 | design-motion-principles | Si el componente tiene animaciones — auditor final |
Errores comunes
| Qué notas | Por qué pasa | Qué hacer |
|---|---|---|
| Sigue usando la misma tipografía de siempre | No tienes instalada frontend-design, o no la activaste | Revisa la carpeta en ~/.claude/skills/ y dile a Claude en el prompt: "usa la skill frontend-design" |
| El mismo error aparece una y otra vez | Claude vuelve a empezar de cero en vez de corregir lo que ya tenía | Dile expreso: "corrige solo lo que impeccable señaló, no empieces de cero" |
| El auditor dice que está bien, pero se siente raro | Cumple las reglas técnicas pero le falta personalidad | Pídele un pequeño rebote en UN elemento, no en todos — le da chispa |
| Se ve lindo pero "muerto" | Usaste 2 skills pero te olvidaste la de movimiento | Agrega design-motion-principles aunque pienses que no hace falta |
| Funciona, pero no se siente "tuyo" | Las skills dan criterio general, no conocen tu marca | Pasa tus colores, fuentes y tono al prompt |
Nota de uso: esta guía sirve si trabajas con Claude Code o la API de Claude con herramientas. Si usas Claude solo por chat web, puedes copiar los prompts y aplicarlos manualmente — el efecto es menor pero existe.
Regla en una frase: frontend-design da el criterio inicial, impeccable corrige lo obvio, design-motion-principles le da personalidad al movimiento. Las 3 juntas, en ese orden.
Antes de diseñar con Claude Code, vale la pena revisar qué modelo usar para ese trabajo.