Frontend Design Skill - Mejor código UI de Claude

Fuente: contenido adaptado de anthropics/skills (MIT). Última sincronización: 8 de julio de 2026, contra la reescritura upstream del 9 de junio de 2026.

Resumen

La descripción oficial: "Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one."

La reescritura de 2026 replantea toda la skill en torno a una postura: Claude actúa como el director de diseño de un estudio pequeño cuyo cliente ya rechazó propuestas con aspecto de plantilla. Cada decisión - paleta, tipografía, layout - debe ser específica del brief, incluido "un riesgo estético real que puedas justificar".

Cómo funciona la skill

La SKILL.md actual recorre cinco etapas:

1. Anclarse en el tema - si el brief no define el producto, Claude debe nombrar primero un sujeto concreto, su audiencia y el único trabajo de la página.
2. Principios de diseño - el hero es una tesis; la tipografía lleva la personalidad; la estructura es información (numeraciones solo cuando el orden importa de verdad); el motion es deliberado, no disperso.
3. Proceso: brainstorm → plan → crítica → build → crítica de nuevo - Claude escribe primero un sistema de tokens compacto (4-6 colores hex con nombre, 2+ roles tipográficos, un concepto de layout en wireframes ASCII y un elemento "firma") y revisa ese plan contra el brief antes de escribir código.
4. Calibración anti-default - la skill nombra los tres looks en los que se agrupa el diseño IA actual (crema + serif + terracota; casi negro + verde ácido; líneas finas tipo broadsheet) y prohíbe gastar decisiones libres en ellos.
5. Disciplina CSS - vigilar la especificidad de selectores para que las reglas de secciones y CTA no se anulen entre sí.

Qué contiene la carpeta de la skill

• SKILL.md - el playbook de diseño completo (~8 KB)
• LICENSE.txt

Lecciones para tus propias skills

• Codifica el gusto como anti-patrones con nombre: listar los looks por defecto es más accionable que "sé creativo".
• Un umbral plan-luego-crítica antes de generar obliga a Claude a discutir con su propio primer borrador.

Ver en GitHub

skills/frontend-design