🥇 Skill #1 — La Skill de diseño frontend (tu gusto, embotellado)
Lo que te llevarás: la única Skill que hace que cualquier cosa que construyas parezca un producto real en vez de una demo de hackathon — instalada, activada y demostrándose en tu sitio actual en 10 minutos.
Si solo instalas una Skill en tu vida, es esta. La mayoría de builds de las Etapas 3 y 4 funcionan bien — solo que no parecen terminados. Fuente genérica, diez grises al azar, botones flotando en el vacío, tres colores de acento peleándose. No porque Claude no sepa diseñar — porque nadie le dio el brief. Una Skill de diseño frontend es ese brief embotellado: le enseña las reglas que un diseñador de producto senior aplicaría en un proyecto real de cliente — una paleta cohesiva, una escala tipográfica real, espacio deliberado, jerarquía que lleva el ojo, y —lo que casi todos se saltan— contención.
El resultado no es más ruidoso. Es más silencioso, más calmado, más caro. El mismo sitio, diez minutos después, de repente parece algo que pondrías con orgullo en una tarjeta.
Qué hace, en concreto (en una pasada)
- Audita tu layout actual contra reglas de diseño reales (ratios de contraste, ritmo de espaciado, escala tipográfica, alineación).
- Elige un color primario, un acento y los neutros alrededor — se acabó el arcoíris.
- Fija una escala tipográfica real (normalmente 4–6 tamaños máx.) y bloquea el interlineado para que los párrafos respiren.
- Aprieta el espaciado en un sistema — típicamente incrementos de 4px u 8px — para que nada quede «casi alineado».
- Sustituye ilustraciones de relleno y bloques con pinta de stock por componentes que se sienten intencionados.
- Te devuelve un antes/después funcional sobre el mismo contenido, para que la mejora sea innegable.
Instalarla — pasos exactos
frontend-design es un movimiento de Claude Code. Usa la pestaña Code y
/plugin (abajo). (Las skills integradas de Anthropic se activan aparte en Customize → Skills.)- En Claude Code, escribe
/plugin→ Enter. - Ve a Discover y busca
frontend-design(está enclaude-plugins-official, ya presente). - Lee la descripción de una línea antes de instalar — que sea la Skill de diseño/UI, no un envoltorio genérico de «hazlo bonito».
- Instálala explícitamente:
/plugin install frontend-design@claude-plugins-official(o Enter y alcance User para que funcione en todos los proyectos). /reload-pluginspara activarla. Este es el paso que los principiantes olvidan.- Si Discover está vacío o «not found»:
/plugin marketplace update claude-plugins-official; si/plugines desconocido, actualiza Claude Code y reinicia.
Cómo invocarla
Puedes nombrarla directamente («usa la frontend-design skill para…») o describir el trabajo y Claude la cogerá. El primer prompt más limpio:
Cómo saber que está funcionando — 3 señales
- Claude anuncia qué Skill usa («Loading frontend-design skill…») antes de tocar código. Si no lo ves, no la cogió — repite
/reload-plugins. - Lo primero que hace es auditar, no editar. Una Skill de diseño real diagnostica antes de recetar. Si salta a «cambio el botón a azul», está improvisando, no «skilleando».
- La salida usa menos colores y fuentes que el original, no más. La contención es la firma.
Lo que los principiantes hacen mal
- Pedir «moderno y limpio y atrevido y minimal y futurista». Son seis contradicciones en un respiro. Elige una sensación y comprométete.
- Ejecutarla una vez y parar. Una pasada de diseño es iterativa. Tras el primer barrido, empuja: «aprieta más el hero», «los testimonios pesan». Esa 2ª ronda es donde pasa de «mejor» a «wow».
- Mezclar la Skill con ediciones a mano en el mismo minuto. Deja que la Skill termine una pasada, luego tú retocas.
- Olvidar publicar el antes/después. La prueba es la comparación. Pídela siempre.
📋 Prompts (traducidos)
/reload-plugins y confirma que está activa.Añadido al cuaderno: 7 de julio de 2026. Traducción al español para estudio personal.