TL;DR Anthropic publicó un skill oficial (
frontend-design, dentro del plugin del mismo nombre) que carga ~400 tokens de guía sobre tipografía, color, movimiento y composición justo cuando pides una UI. Lo instalas con dos comandos y se activa solo. Pero no basta con instalarlo: el propio skill dice "it is critical that you think outside the box!", porque incluso con la guía cargada Claude tiende a converger al centro estadístico. La diferencia entre UI "made by AI" y UI que pasa por humana no es el skill — es el skill + un design brief explícito.
Si tus pantallas en Claude Code siguen saliendo con fuente Inter, gradiente morado sobre fondo blanco y un layout de 3 tarjetas idénticas, no es Claude — es convergencia distribucional. El modelo predice tokens según el centro estadístico de su training data, y el centro estadístico del diseño web es exactamente eso: lo "seguro." Anthropic lo reconoce abiertamente en su blog del skill.
La solución que Anthropic publicó es un skill oficial empaquetado dentro de un plugin. Cuando pides "diséñame una landing", el skill se carga automáticamente e inyecta ~400 tokens de guía: paleta, tipografía, motion, composición. Es además un ejemplo real de las 5 reglas Anthropic-grounded para crear skills — su descripción es marcadamente "pushy", reparte el detalle en archivos auxiliares (progressive disclosure), y se mantiene bajo 500 líneas.
Resultado de instalarlo:
> /plugin marketplace add anthropics/claude-code
✓ Added marketplace: anthropics/claude-code
> /plugin install frontend-design@claude-code-plugins
✓ Installed frontend-design (1 skill: frontend-design)
> Diseña una landing para una startup de smart contract audits
[Skill frontend-design activado automáticamente]
⠋ Eligiendo dirección estética...
⠋ Aplicando tipografía no-Inter...
⠋ Construyendo motion orquestado...
Las 4 dimensiones que el skill carga en contexto
| Dimensión | Qué te empuja a usar | Qué te empuja a evitar |
|---|---|---|
| Tipografía | Pares display + body distintivos (Playfair Display, Bricolage Grotesque, IBM Plex Mono…) | Inter, Roboto, Arial |
| Color & tema | Variables CSS, dominantes + acentos afilados, paletas de temas IDE o referencias culturales | Gradientes morados sobre blanco, paletas "AI-blue" |
| Movimiento | Animaciones CSS, reveals escalonados, orquestación de carga | Micro-interacciones dispersas y sin propósito |
| Composición / fondos | Asimetría, gradientes en capas, texturas, depth atmosférico | Layouts de tarjetas predecibles, fondos planos |
Instalación
# Añade el marketplace oficial de Anthropic
/plugin marketplace add anthropics/claude-code
# Instala el plugin frontend-design
/plugin install frontend-design@claude-code-plugins
# Verifica
/plugin list
A partir de ahí, el skill se invoca solo cuando pides frontend. No hay comando manual.
Por qué instalarlo no basta
El propio SKILL.md incluye una frase reveladora: "it is critical that you think outside the box!" Anthropic sabe que aunque cargues 400 tokens de guía, Claude sigue convergiendo. Lo que hace el skill es subir el suelo de calidad estética, no garantizar que el resultado sea distintivo.
La comunidad lo refleja: en Reddit hay un hilo recurrente, "Anyone else struggling with the official frontend-design skill?", donde los desarrolladores reportan UIs que ahora están "mejor tipografiadas" pero siguen sintiéndose AI-generated. El patrón se repite: skill instalado, prompt genérico, output mediano-bueno pero no memorable.
El skill funciona como un coautor con buen gusto — no como un sustituto del brief. Si tú no le das audiencia + dirección estética extrema + constraints, te da el promedio mejorado.
El prompt que sí funciona
Combina el skill con un design brief explícito en cada petición:
> Diseña una landing para una startup de auditorías de smart contracts.
> Audiencia: founders y CTOs de protocolos DeFi.
> Tono: brutalista, tipografía mono dominante, fondo casi negro
> con acentos verde fosforito.
> NO uses: gradientes morados, Inter, layouts de tarjetas, micro-interacciones.
> Constraint: una sola HTML page, vanilla CSS, sin JS pesado.
Sin brief, el skill te da un brief genérico — y genérico es lo que querías evitar.
Cuándo NO usarlo
- Cuando ya tienes un design system establecido. El skill empuja hacia "algo distintivo"; si tu producto vive en Material UI, Tailwind UI o un sistema corporativo, el skill estorba — quieres consistencia, no rupturas. Desinstálalo o pásalo a no-activación en ese repo.
- Cuando solo cambias un detalle. Para "cambia el color del botón a verde" no quieres reabrir el debate estético. Combina con Plan Mode sin el skill activo para que Claude no reescriba tu sistema.
- Cuando trabajas con tests visuales (snapshots de Storybook, Chromatic). El skill quiere reescribir; tus snapshots quieren estabilidad. Vas a romper más tests de los que arreglas.
Referencia
| Comando | Qué hace |
|---|---|
/plugin marketplace add anthropics/claude-code |
Añade el marketplace oficial de Anthropic |
/plugin install frontend-design@claude-code-plugins |
Instala el plugin (carga el skill frontend-design) |
/plugin list |
Verifica que está instalado |
| (sin comando) | Claude lo invoca solo cuando pides UI frontend |
/plugin uninstall frontend-design@claude-code-plugins |
Lo quitas si te estorba en un repo concreto |
Documentación oficial: Frontend Design plugin · Source en GitHub · Improving frontend design through Skills (Anthropic blog)
Relacionado: el mismo instinto de diseño vive en el skill
artifact-designque Claude carga al publicar un artifact en Claude Code.