Skill frontend-design para Claude Code

Anthropic distribuye una skill llamada frontend-design que cambia cómo Claude Code aborda el trabajo de interfaz. Aquí tienes qué hace, cómo instalarla y cómo combinarla con los prompts de este sitio para que el resultado parezca tu producto y no una demo.

Qué cambia la skill

Sin ella, Claude Code escribe UI igual que escribe todo lo demás: correcta, genérica e idéntica a los últimos veinte proyectos. Hero centrado, tres tarjetas de funcionalidades, esquinas redondeadas, un acento violeta. La skill añade una pasada de diseño antes de la de código. Claude elige una dirección, se compromete con una pareja tipográfica, decide una cuadrícula y una escala de espaciado, y solo entonces escribe el marcado. También le dice al modelo qué evitar, que es donde está la mayor parte del valor.

Cambia las decisiones que se toman antes de escribir, no el CSS. No incluye ninguna librería de componentes.

Instalarla

Las skills viven en una carpeta skills que Claude Code lee al arrancar. Anthropic publica frontend-design en su repositorio de skills; añádela igual que cualquier otra skill:

git clone https://github.com/anthropics/skills
cp -r skills/frontend-design .claude/skills/

Déjala dentro del proyecto si quieres que vaya en el control de versiones junto con el código, o en ~/.claude/skills/ para todos los proyectos. Reinicia la sesión para que cargue y luego invócala por su nombre al empezar el trabajo de UI: "Usa la skill frontend-design para construir la página de ajustes."

Combinarla con un prompt de estilo

La skill decide la composición. No conoce tu paleta ni el look que buscas, así que elegirá algo razonable y olvidable. Ahí es donde encaja un prompt de estilo. El orden importa:

1. Pega el prompt de estilo (o el bloque "Para design.md" de una página de estilo) en design.md bajo un encabezado tipo "Dirección de diseño".
2. Arranca la sesión y pide la página nombrando la skill.
3. Cuando necesite un componente concreto, pega un prompt de snippet. La skill respeta los nombres de clase y los valores porque son precisos.

Primero la skill, luego el prompt de estilo, luego los prompts de snippet. Sáltate uno y el modelo rellena el hueco con sus valores por defecto.

Lo que sigue haciendo mal

• Fuentes. Te sugerirá una pareja de webfonts. Di "solo la pila de fuentes del sistema" si te importan los bytes, o nombra las dos familias que tienes licenciadas.
• Movimiento. Tiende a añadir un fade-in al hacer scroll en cada sección. Pide solo estados hover y focus.
• Modo oscuro. Lo ofrece por defecto. Recházalo a menos que la marca lo pida.
• CSS nuevo. Se queda en las funcionalidades seguras de 2019. Los prompts de Nuevo en CSS nombran las más recientes para que las use.

Codex, Cursor y los demás

El formato de skill es específico de Claude Code, pero la idea se traslada. Cursor lee .cursor/rules, Codex lee AGENTS.md. Pega el mismo bloque de dirección de diseño ahí y obtienes casi todo el efecto. La página de Cursor tiene la disposición exacta de archivos.

Empieza con un estilo: Suizo, Neobrutalismo o la lista completa.