Frontend Design: interfaces que no parecen hechas por una IA
Las páginas generadas por IA se reconocen enseguida: fondo crema con acento terracota, tarjetas redondeadas idénticas, una etiqueta en mayúsculas sobre cada título. Frontend Design nombra esas costumbres y pide al agente que primero plantee colores, tipos y maquetación, los contraste con el encargo y solo después programe.
Empieza por fijar el tema, el público y la función principal de la página, y saca las decisiones visuales del oficio y el lenguaje del sector.
Exige un plan antes del código: de cuatro a seis colores hex con nombre, papel de cada tipografía, boceto ASCII y principios propios.
Describe cinco grupos de rasgos típicos del diseño generado, desde el kit de tarjetas SaaS hasta la flecha añadida a cada botón.
Marca reglas tipográficas: una o dos familias, escala clara, líneas de menos de 80 caracteres y nada de resaltar una sola palabra.
Trata también los textos de interfaz: voz activa, el mismo verbo en el botón y en el aviso, errores que explican sin pedir perdón.
Cuándo usarla
Las landings que hace tu agente se parecen todas y el cliente quiere una identidad que no se confunda con otra.
Vas a rehacer una interfaz existente y quieres más carácter sin perder foco de teclado, contraste ni movimiento reducido.
El encargo no dice qué producto es, así que el agente debe proponer tema y público antes de diseñar.
Pídale al agente
Diseña la portada de una librería de viejo en Valencia, sin fondo crema ni terracota
Antes de programar, enséñame el plan: paleta en hex, tipografías y boceto ASCII del hero
Reescribe los botones y mensajes de error del formulario de pago en voz activa y sencilla
Preguntas
¿Cómo se instala la skill Frontend Design?
Con npx skills add anthropics/skills@frontend-design. En Claude Code también vale añadir el repositorio como marketplace con /plugin marketplace add anthropics/skills.
¿Frontend Design prohíbe el modo oscuro o la maquetación tipo periódico?
No. Los presenta como opciones por defecto, no como errores, y si el encargo pide ese estilo de forma explícita, manda el encargo.
¿Frontend Design es una librería de componentes?
No incluye componentes ni código. Es un método de trabajo y unos principios con los que el agente elige paleta, tipografía, retícula y animación para cada encargo.
