Cómo crear interfaces web únicas con la skill frontend-design de Claude Code

Esto es lo que vas a aprender aun que seas un cero en diseño:

• Qué hace la skill frontend-design y por qué la necesitas
• Cómo escribir prompts que generan diseños con personalidad (y no más de lo mismo)
• Técnicas para iterar hasta conseguir lo que tienes en la cabeza
• Cómo evitar el “AI slop” (esos diseños genéricos que huelen a inteligencia artificial desde lejos)
• Ejemplos reales de prompts que funcionan
• Los tres looks que hoy delatan a una IA (uno de ellos se parece sospechosamente a esta web)
• El plan que la skill escribe antes de tocar el código: color, tipo, layout y firma
• Por qué el texto de tu interfaz también es diseño

Un aviso antes de nada: Anthropic reescribió la skill entera en junio de 2026 y no fue un retoque de comas. Pasó de ser un generador de interfaces vistosas (“implementa código con atención extrema al detalle estético”) a ser criterio de diseño (“guía para tomar decisiones visuales intencionadas”). Cambió la descripción, cambió el proceso y cambió la lista de cosas que huelen a IA. He actualizado este post con todo eso, pero la forma de escribir prompts sigue siendo la misma, así que si ya la tenías interiorizada no tienes que desaprender nada.

Si no sabes qué es una skill en Claude Code, te recomiendo que primero leas Skills para programadores: extiende las capacidades de tu agente de IA. Ahí te cuento cómo funcionan estas extensiones que transforman a tu asistente de IA en algo mucho más potente.

Aprenderás a hacer diseños para HTML como este que ves en la captura (tipo brutalista), te dejo el prompt 👇

Primero quiero que entres en webreactiva.com y captures la idea general, los colores y los estilos.
Luego con la skill frontend-design quiero que generes una versión de estilo brutalist.

Instalación rápida de la skill ¶

La skill frontend-design se instala con un solo comando:

npx skills add https://github.com/anthropics/skills --skill frontend-design

Este comando funciona con más de 30 agentes de IA: Claude Code, Gemini CLI, OpenCode y muchos más. Las skills son un estándar abierto que no depende de un único proveedor, así que puedes usar la misma skill con el agente que prefieras. Si quieres saber qué agente se adapta mejor a tu forma de trabajar, revisa la comparativa de agentes de IA para programación.

El problema que resuelve esta skill ¶

Pídele a cualquier IA que te haga una landing page y obtendrás algo así:

🧨 Última oprtunidad para recibir la dinamita que mereces sobre programación con IA el próximo domingo: Suscríbete gratis a Web Reactiva en https://webreactiva.com/newsletter

• Tipografía Inter
• Gradiente de azul a púrpura
• Layout de tres columnas
• Botones con bordes redondeados
• Sombras sutiles por todos lados

No está mal. Funciona. Pero es exactamente igual que las otras 500 landing pages que se han generado con IA esta semana.

La skill frontend-design existe para romper con eso. No es un generador automático de diseños bonitos. Es más bien un conjunto de directrices que hacen que Claude piense como un diseñador con criterio propio antes de escribir una sola línea de código. Si prefieres un entorno visual en lugar de la terminal, Anthropic ha sacado una superficie aparte para eso y la conté a fondo tras probar Claude Design con Web Reactiva. Y si lo que buscas es un formato portable para que cualquier agente lea tu identidad visual, échale un ojo a DESIGN.md, la especificación abierta de Google Labs que complementa muy bien a esta skill. Ese mismo truco de leer tu web para sacar paleta y tipografía lo aplica diagram-design a los diagramas, así que tus arquitecturas dibujadas dejan de desentonar con tus interfaces.

La versión actual arranca poniéndote en un papel concreto: eres el director de diseño de un estudio pequeño conocido por que ningún cliente se parece a otro. Y ese cliente ya ha rechazado propuestas que le sonaban a plantilla. Está pagando por un punto de vista, no por una maqueta correcta. De ahí sale la instrucción más incómoda de toda la skill: asume un riesgo estético real, uno que puedas justificar.

Cuando activas esta skill, Claude se pregunta cosas que tú probablemente no le habrías pedido:

• ¿De qué va esto en realidad y para quién? (si no se lo dices, lo decide y te lo dice)
• ¿Cuál es la personalidad de esta interfaz?
• ¿Qué la hace diferente de las demás?
• ¿Cómo puedo evitar las decisiones predecibles?
• ¿Qué tipografía tiene carácter propio?
• ¿Cuál va a ser la firma, ese único elemento por el que se recuerde la página?

Fíjate en la primera y en la última, que son nuevas. La primera se llama “aterrízalo en el sujeto”: el mundo propio de aquello que diseñas —sus materiales, sus herramientas, sus objetos, su jerga— es de donde salen las decisiones que no podría haber tomado ninguna otra web. Si diseñas para una tienda de café de especialidad, el diseño debería oler a báscula, a filtro y a tueste, no a “SaaS con tres beneficios”.

El resultado es código funcional (HTML, CSS, React, lo que necesites) con decisiones de diseño intencionadas. No perfectas siempre a la primera, pero con un punto de partida mucho más interesante. Si tu proyecto usa React, puedes complementar esta skill con React Doctor para asegurarte de que el código generado sigue las buenas prácticas.

Curso gratis · paso a paso

Primero el plan, luego el código: el ciclo aplicado a tu proyecto

Lo que ahora hace la skill con el diseño (escribir un plan, criticarlo y solo entonces construir) tiene nombre cuando lo aplicas al resto del código: Spec Driven Development. En este curso gratis recorres el ciclo entero con OpenSpec sobre un proyecto real, en modo asistido.

Entra en el curso gratis →

Instalación como plugin ¶

La instalación para Claude:

claude plugins add claude-plugins-official/frontend-design

Una vez instalada, tienes dos formas de activarla:

1. Automática: Claude detecta que estás pidiendo algo de frontend y aplica la skill
2. Explícita: Escribes /frontend-design antes de tu petición para garantizar que se active

Mi recomendación es usar la forma explícita cuando quieras resultados con personalidad. Si solo necesitas un botón rápido, la automática funciona bien.

Para verificar que está instalada, escribe / en Claude Code y busca frontend-design en la lista de skills disponibles.

🛠️ Importante: Las skills modifican el comportamiento de Claude para tareas específicas. Sin frontend-design, Claude generará código funcional pero predecible. Con la skill, cada decisión de diseño pasa por un filtro de “¿esto es memorable o es más de lo mismo?”

Por qué tus prompts actuales no funcionan ¶

Seamos honestos. La mayoría escribimos prompts como este:

Hazme una landing page para mi app

Y luego nos sorprendemos de que el resultado sea genérico.

La skill frontend-design está diseñada para aprovechar el contexto que le des. Si no le das contexto, tiene que inventarlo. Y cuando una IA inventa contexto, elige el camino seguro: Inter, gradientes, layouts predecibles.

Un prompt efectivo responde estas preguntas:

• ¿Para quién es? No es lo mismo diseñar para adolescentes que para abogados corporativos
• ¿Qué debe sentir el usuario? Calma, urgencia, confianza, diversión
• ¿Qué tecnología usar? HTML puro, React, Tailwind, CSS vanilla
• ¿Qué lo hace memorable? El diferenciador que no quieres que se pierda

La diferencia entre un diseño genérico y uno con personalidad está en esos cuatro puntos. Vamos a ver cómo estructurar un prompt que los incluya todos.

Primero quiero que entres en webreactiva.com y captures la idea general, los colores y los estilos.
Luego con la skill frontend-design quiero que generes una versión de estilo retro.

Anatomía de un prompt que funciona ¶

Te voy a mostrar la estructura que uso para conseguir resultados decentes a la primera (o al menos a la segunda):

[Contexto del proyecto]
[Qué necesitas]
[Tono y estética]
[Restricciones técnicas]
[Diferenciador]

Parece simple, pero cada sección tiene su función.

Contexto del proyecto ¶

Aquí describes el problema que resuelve tu producto y quién lo va a usar. No hace falta que escribas un ensayo, pero sí que Claude entienda el terreno donde se mueve.

Esto ha cambiado un poco con la última versión: si no concretas el sujeto, la skill lo concreta ella y te lo dice antes de diseñar (un sujeto, una audiencia, un único trabajo que tiene que hacer la página). Es mejor que inventárselo en silencio, pero sigue siendo peor que decírselo tú. Si Claude tiene memoria de proyectos anteriores contigo, también la usa como pista.

Mal:

Es una app de productividad

Bien:

Una app de gestión del tiempo para freelancers que odian
los calendarios tradicionales. El público son diseñadores
y developers que trabajan por proyectos, no por horarios fijos.

Qué necesitas ¶

Sé específico con las secciones, elementos y funcionalidades. Si necesitas un hero, dilo. Si quieres una tabla comparativa, menciónala.

Necesito una landing page con:
- Hero con headline y un CTA destacado
- Sección de 3 beneficios principales
- Comparativa vs la competencia (tabla)
- Pricing con 2 planes
- Footer con enlaces básicos

Tono y estética ¶

Esta es la parte donde la skill brilla. En lugar de decir “que sea bonito”, describe el ambiente que quieres crear. Las metáforas funcionan muy bien aquí.

Mal:

Quiero algo moderno y minimalista

Bien:

El tono debe ser como el lobby de un hotel boutique japonés:
mucho espacio vacío, materiales naturales, nada superfluo.
Sofisticación sin frialdad.

O también:

Piensa en una revista de arquitectura de los 90s:
tipografía condensed, alto contraste, layouts asimétricos,
nada de bordes redondeados.

Restricciones técnicas ¶

Claude necesita saber con qué herramientas trabajas. No es lo mismo generar HTML puro que un componente React con Tailwind. Si no tienes claro qué stack elegir para tu proyecto, la comparativa práctica de 5 stacks para desarrollo web te ayuda a decidir.

TECH: React + Tailwind CSS
SIN: Librerías externas de animación
ACCESIBILIDAD: WCAG 2.1 AA obligatorio
RESPONSIVE: Mobile-first, breakpoints en 375px, 768px, 1280px

Diferenciador ¶

Esta es la pregunta que hace que la skill trabaje de verdad: ¿qué quieres que la gente recuerde de esta interfaz?

DIFERENCIADOR: Quiero que la página se sienta "viva".
Microinteracciones en cada hover, elementos que respiran
con animaciones sutiles, como si la interfaz tuviera pulso propio.

O:

DIFERENCIADOR: La tipografía debe ser la estrella.
Una familia display con personalidad que haga que el headline
se quede grabado en la memoria.

Lleva tus skills al siguiente nivel

Crea tus propias skills para que tu agente las cargue cuando toque

frontend-design es solo una skill. Una vez entiendes la anatomía, puedes escribir las tuyas para CSS, accesibilidad o cualquier disciplina. Te llevas la guía para crear SKILL.md productivas con progressive disclosure y plantillas listas.

Abrir la guía →

Plantillas SKILL.md descargables incluidas

Ejemplo completo de un prompt efectivo ¶

Vamos a juntar todo en un caso real. Imagina que tienes una app de meditación llamada “Stillpoint” y necesitas su landing page.

/frontend-design

Necesito una landing page para Stillpoint, una app de meditación
dirigida a ejecutivos estresados (30-50 años).

CONTEXTO: La propuesta es "meditaciones de 3 minutos para personas
que no tienen tiempo". El público no quiere nada new-age ni infantil.
Buscan resultados rápidos con un enfoque pragmático.

SECCIONES:
- Hero con headline potente y un botón de descarga
- 3 beneficios clave (con iconos minimalistas)
- Testimonial de un CEO o similar
- CTA final con enlace a App Store

TONO: Un spa de lujo japonés. Minimalista pero cálido.
Nada de colores chillones. La sensación debe ser de calma
y profesionalismo a partes iguales.

TECH: HTML + CSS + JS vanilla
RESPONSIVE: Mobile-first obligatorio

DIFERENCIADOR: Quiero que la propia página sea una experiencia
de calma. Animaciones muy sutiles, mucho espacio negativo,
quizás un efecto de respiración en algún elemento. Que visitarla
ya te baje las pulsaciones.

Con este nivel de detalle, la skill tiene material para tomar decisiones con criterio. No vas a conseguir perfección a la primera, pero el punto de partida será mucho más interesante que el template genérico de siempre.

💡 Truco: Si tienes referencias visuales, inclúyelas. “Inspírate en la web de Aesop” o “Quiero algo en la línea de la estética de Linear” dan pistas muy claras sobre la dirección.

El plan antes del código: color, tipo, layout y firma ¶

Este es el cambio más importante de la nueva versión y el que más te va a servir. La skill ya no salta al código. Trabaja en dos pasadas.

En la primera escribe un sistema de tokens compacto con cuatro apartados:

1. Color: la paleta descrita como 4-6 valores hex con nombre. No “tonos cálidos”: los seis colores, escritos.
2. Tipo: las tipografías para dos roles o más. Una display con carácter usada con moderación, una de cuerpo que la acompañe y, si hace falta, una de utilidad para pies de foto y datos.
3. Layout: el concepto de composición, con descripciones de una frase y wireframes en ASCII para comparar alternativas antes de escribir CSS.
4. Firma: el único elemento por el que se va a recordar la página.

En la segunda pasada revisa ese plan contra el encargo con una pregunta muy concreta: si me hubieran dado un encargo parecido, ¿habría llegado a lo mismo? Si la respuesta es que sí, eso es un valor por defecto disfrazado de decisión, y toca cambiarlo y explicar por qué. Solo cuando el plan sobrevive a su propia crítica empieza a escribir código, y cada color y cada tipografía salen de ahí.

Lo interesante para ti es que puedes intervenir justo en medio:

Antes de escribir una línea de código, dame el plan:
paleta (4-6 hex con nombre), tipografías por rol,
concepto de layout con wireframe ASCII y cuál es la firma.

Paro ahí. No generes nada hasta que te lo apruebe.

Aprobar un plan de quince líneas cuesta un minuto. Revisar 600 líneas de CSS para descubrir que la dirección no era esa cuesta la tarde. Es exactamente el mismo razonamiento que hay detrás del Spec Driven Development y frameworks como OpenSpec o spec-kit, solo que aplicado a decisiones visuales en vez de a funcionalidades.

🔑 La skill te pide expresamente que hagas casi toda esta exploración “en el pensamiento” y que solo le enseñes ideas al usuario cuando tengas confianza en que van a gustar. Traducido: si le pides tres propuestas completas maquetadas, estás gastando tokens en algo que la skill prefiere resolver antes de la primera línea de HTML.

El proceso de iteración ¶

El primer resultado casi nunca es el definitivo. Y está bien.

La clave está en dar feedback específico. “No me gusta” no ayuda a nadie. “El hero es demasiado oscuro y el botón se pierde” sí.

Tipos de ajustes que puedes pedir ¶

Color y contraste:

Me gusta la estructura, pero el fondo es muy oscuro.
Cámbialo a tonos más cálidos: beige arena o crema.
El botón necesita más contraste, ahora se pierde.

Tipografía:

La tipografía del hero es demasiado agresiva para una app
de meditación. Busca algo más suave pero que mantenga
la sofisticación. Nada de sans-serif genéricas.

Animaciones:

Las animaciones son muy rápidas. Quiero que todo se sienta
más lento y contemplativo. Dobla la duración de las transiciones
y elimina cualquier efecto de bounce.

Espaciado:

La sección de beneficios se siente apretada.
Necesita más aire entre cada elemento.
Duplica el padding vertical entre cards.

Pedir alternativas:

El diseño funciona, pero quiero explorar otras direcciones.
Dame 2 variaciones:
1. Versión más brutalista y editorial
2. Versión más orgánica con formas curvas

La técnica del “preservar y cambiar” ¶

Cuando iteras, es útil ser explícito sobre lo que quieres mantener:

MANTENER: La estructura general, la paleta de colores,
la tipografía del body

CAMBIAR:
- El headline necesita más peso visual
- Añade un segundo CTA en la sección de beneficios
- El footer está muy cargado, simplifícalo

Esto evita que Claude rehaga todo desde cero cuando solo necesitas ajustes puntuales.

🔄 Regla de las 3 iteraciones: Si después de tres rondas de feedback no estás acercándote al resultado, probablemente el problema está en la dirección estética inicial. Mejor replantear el tono desde cero que seguir ajustando detalles.

Cómo evitar el “AI slop” ¶

El término “AI slop” describe esos diseños que gritan “me hizo una IA” desde el primer vistazo. Sabes a lo que me refiero: las ilustraciones de personas sin rasgos definidos, los gradientes púrpura-azul de hace dos años, las tipografías genéricas. Esos son los tells visuales; hay otro más difícil de ver, el estructural —que todas las páginas repitan la misma silueta—, y ahí entra Hallmark, la skill anti-slop que rompe el molde de la forma.

La skill frontend-design está pensada para evitar esto, pero necesita tu ayuda. Si quieres un catálogo exhaustivo de esas señales que delatan a una IA, la colección Taste Skill las tiene listadas con nombre y apellidos. Estas son las trampas más comunes y cómo esquivarlas.

Los tres looks que delatan a una IA en 2026 ¶

Aquí viene lo más jugoso de la actualización. La skill ahora incluye una calibración explícita: dice cuáles son, hoy, los tres aspectos alrededor de los que se acumula el diseño generado por IA.

1. Crema y serif: fondo crema cálido (cerca de #F4F1EA), una serif de mucho contraste para los titulares y un acento terracota.
2. Casi negro y un neón: fondo negro tirando a carbón con un único acento brillante, verde ácido o bermellón.
3. Periódico: layout de diario, filetes de un píxel, cero border-radius y columnas densas.

Lo importante no es que sean feos. Los tres funcionan para algún encargo. El problema es que aparecen sin importar de qué va la página, que es la definición exacta de un valor por defecto. Como dice la skill: donde el encargo deje un eje libre, no gastes esa libertad en uno de estos tres.

Y ahora la parte incómoda, que la cuento porque tiene gracia: el tercero se parece bastante a la web que estás leyendo. Cero border-radius, filetes finos, densidad de contenido. Y el acento terracota del primero, ya puestos. Web Reactiva llegó ahí por decisiones tomadas a mano hace años, pero eso ya no importa mucho: si tu identidad coincide con uno de los defaults, hoy tienes que sostenerla con más carácter en los detalles.

La otra mitad de la regla es la que salva estos casos: si tu encargo fija una dirección visual, esa dirección manda siempre, incluso cuando lo que pides es uno de los tres looks. Pedir “quiero broadsheet, filetes finos y esquinas rectas” es una decisión tuya y la skill la respeta al pie de la letra. Lo que no debe hacer es acabar ahí por inercia.

⚠️ Esto se mueve rápido. Estos tres looks son los de ahora, igual que hace dos años el delator era el degradado azul-púrpura. Cuando actualices la skill, vuelve a leerte este párrafo suyo: es el termómetro más honesto de por dónde va el rebaño.

Trampa 1: No especificar el tono ¶

Si no dices qué personalidad quieres, Claude elige el camino seguro. Y el camino seguro es el diseño genérico de startup SaaS que has visto mil veces.

Solución: Siempre incluye una metáfora o referencia de tono. “Como una galería de arte contemporáneo” o “Como una cafetería de especialidad en Berlín” son mucho más útiles que “moderno y limpio”.

Trampa 2: Dejar que elija la tipografía ¶

Inter, Roboto, Open Sans. Son seguras, legibles, y absolutamente olvidables.

Ojo con un detalle de la actualización: la versión antigua ponía a Inter y a Arial en una lista negra explícita. La nueva ya no nombra a ninguna. Lo que dice ahora es que no uses las mismas familias a las que recurrirías en cualquier otro proyecto, y que el tratamiento tipográfico sea una parte memorable del diseño y no un mero vehículo para entregar el texto. Es mejor criterio, pero también más difuso, así que la lista negra concreta la tienes que poner tú.

Solución: Pide tipografías con personalidad o al menos con restricciones:

TIPOGRAFÍA: Nada de Inter, Roboto ni Open Sans.
Busca algo con carácter. Una serif moderna para headlines,
una sans humanista para el body. Que la elección tipográfica
sea una declaración de intenciones.

Trampa 3: Aceptar el layout por defecto ¶

El grid de 12 columnas con secciones alternando izquierda-derecha es cómodo. También es predecible.

Solución: Si quieres algo diferente, pídelo:

LAYOUT: Evita el grid simétrico típico. Quiero asimetría
controlada, elementos que se salgan de la cuadrícula,
superposiciones intencionadas. Piensa en una revista
de diseño, no en una plantilla de Bootstrap.

Hay un subapartado nuevo de esta trampa que merece la pena: la estructura es información. Los recursos estructurales (numeraciones, antetítulos, separadores, etiquetas) tienen que codificar algo cierto sobre el contenido, no decorarlo. El ejemplo que pone la skill es el clásico 01 / 02 / 03 que has visto en mil landings: solo vale si el contenido es de verdad una secuencia, como un proceso real o una línea temporal donde el orden le dice algo al lector. Tres beneficios que podrías barajar como cartas no llevan número.

Y otro que también cambia el hero: la portada de una página es una tesis. Abre con lo más característico del mundo del sujeto, sea un titular, una imagen, una animación o una demo en vivo. El número gigante con etiqueta pequeña, sus tres estadísticas de apoyo y el acento en degradado son literalmente la respuesta de plantilla; úsalos solo si de verdad son lo mejor para ese caso.

Trampa 4: Animaciones genéricas ¶

Fade-in al hacer scroll, bounce en los botones, todo con la misma duración. Es el kit de animaciones que viene por defecto en cualquier tutorial.

Aquí la skill ha dado un giro de 180 grados. La versión anterior te empujaba a añadir movimiento, texturas de grano, mallas de degradado y sombras dramáticas para “crear atmósfera”. La actual dice lo contrario: piensa dónde y si la animación sirve al sujeto, porque a menudo menos es más y el exceso de animación es justo lo que hace que un diseño parezca hecho por una IA. Un momento bien orquestado suele funcionar mejor que veinte efectos repartidos.

Solución: Sé específico con el comportamiento:

ANIMACIONES:
- Solo en carga inicial y hover, nada de scroll animations
- Duración máxima 0.3s
- Easing: ease-out siempre, nunca bounce
- El hero puede tener un stagger sutil en la entrada
- Los botones solo cambian de color, sin transformaciones

Trampa 5: Colores “de IA” ¶

Los gradientes de azul a púrpura fueron el delator de 2024. Hoy la firma visual de “esto lo hizo una IA” se ha mudado a los tres looks de arriba: el crema con serif y terracota, el negro con un neón y el periódico. Si no has leído ese apartado, vuelve, porque es el que de verdad importa para elegir paleta.

Solución: Define una paleta con restricciones:

COLORES:
- Máximo 3 colores más neutros
- Fondo: blanco roto (#FAF9F6) o similar
- Acento principal: un verde oliva apagado
- Acento secundario: terracota suave
- Prohibido: gradientes, neones, azules eléctricos

Gasta tu atrevimiento en un solo sitio ¶

La otra gran incorporación de la actualización es una sección de contención que resume así el equilibrio: que la firma sea lo único memorable y que todo lo demás esté callado y disciplinado. Cualquier decoración que no sirva al encargo, fuera. La skill cita el consejo de Coco Chanel: antes de salir de casa, mírate al espejo y quítate un complemento.

Ojo, que no es una invitación a la tibieza. La frase que viene justo después es “no arriesgar también es un riesgo”. La idea es concentrar, no rebajar.

Debajo hay un suelo de calidad que la skill exige sin anunciarlo en la interfaz: responsive hasta móvil, foco de teclado visible y prefers-reduced-motion respetado. Esto es interesante para cómo escribes tu prompt, porque significa que ya no necesitas pedirlo (aunque yo lo sigo pidiendo, porque recordárselo sale gratis). Y añade un detalle práctico: que Claude se critique a sí mismo mientras construye tomando capturas si su entorno se lo permite. Literalmente dice que una imagen vale mil tokens.

Cuando termines, hazte una captura de la página en 375px
y otra en 1280px, míralas y dime qué cambiarías.
Luego aplica solo el cambio más importante.

Si trabajas con Claude Code y tienes el MCP de Chrome DevTools instalado, esta parte funciona de verdad: mira el resultado en el navegador en vez de suponerlo.

El copy también es diseño ¶

La sección más larga de las nuevas no va de píxeles: va de palabras. Y es la que menos gente va a aprovechar, porque casi nadie le pide texto a una skill de diseño.

El planteamiento es que las palabras aparecen en una interfaz por un único motivo, hacerla más fácil de entender y por lo tanto de usar. Son material de diseño, no decoración. Si le pides una landing sin darle textos, Claude se los inventa, y un copy de plantilla hace que un diseño parezca de plantilla aunque la tipografía sea preciosa.

Estas son las reglas que trae, y funcionan igual de bien aunque escribas tú el texto:

• Escribe desde el lado del usuario de la pantalla. Nombra las cosas por lo que la persona controla y reconoce, nunca por cómo está construido el sistema. Alguien gestiona sus notificaciones, no la configuración de sus webhooks.
• Voz activa por defecto. Un botón dice exactamente qué pasa al pulsarlo: “Guardar cambios”, no “Enviar”.
• La misma acción conserva su nombre en todo el flujo. Si el botón dice “Publicar”, el aviso posterior dice “Publicado”. Ese vocabulario es la señalización con la que la gente aprende a moverse por tu producto.
• Errores y estados vacíos son dirección, no atmósfera. Explican qué ha pasado y cómo arreglarlo, con la voz de la interfaz y no la de una persona. Los errores no piden perdón y nunca son vagos. Una pantalla vacía es una invitación a hacer algo.
• Registro conversacional y afinado: verbos llanos, mayúscula solo al principio de la frase, cero relleno.
• Cada elemento hace un único trabajo. Una etiqueta etiqueta y un ejemplo demuestra. Nada hace dos cosas a la vez de tapadillo.

Lo práctico: mete una sección COPY en tu prompt. Cuesta tres líneas y evita el “Descubre el poder de” en el titular.

COPY: Escríbelo tú, pero con estas reglas.
Voz activa y botones que dicen qué hacen ("Guardar cambios",
no "Enviar"). Sin superlativos ni palabras de marketing.
El estado vacío propone una acción, no da pena.

Casos de uso y enfoques recomendados ¶

No todos los proyectos necesitan el mismo tratamiento. Aquí tienes una guía rápida según el tipo de interfaz.

Landing page de producto ¶

El caso más común. Aquí la skill puede lucirse porque hay mucho margen para decisiones creativas.

Énfasis: Tono muy definido, diferenciador claro, libertad para experimentar con tipografía y layout.

Prompt tipo:

/frontend-design

Landing page para [producto] dirigida a [audiencia específica].

[Contexto de 2-3 líneas sobre el producto]

TONO: [Metáfora clara: "como una galería de arte",
"como una revista de moda de los 90", etc.]

SECCIONES: [Lista de secciones necesarias]

TECH: [Stack específico]

DIFERENCIADOR: [Qué quieres que recuerden]

Dashboard o aplicación interna ¶

Aquí la usabilidad importa más que la creatividad. La skill sigue siendo útil para evitar interfaces aburridas, pero con restricciones.

Énfasis: Jerarquía visual clara, estados de componentes bien definidos, consistencia sobre originalidad.

Prompt tipo:

/frontend-design

Dashboard para [descripción de la app] usado por [tipo de usuario].

FUNCIONALIDADES:
- [Lista de elementos y widgets necesarios]

TONO: Profesional pero no corporativo aburrido.
Piensa en Notion o Linear: limpio pero con personalidad.

TECH: React + [librería de estilos]

PRIORIDAD: Usabilidad y claridad. Las animaciones solo
para feedback de interacción, nada decorativo.

Portfolio o sitio personal ¶

Aquí tienes libertad total. Es el lugar para pedir cosas arriesgadas.

Énfasis: Originalidad máxima, experimentación con layout y animaciones, la personalidad del propietario debe estar presente.

Prompt tipo:

/frontend-design

Portfolio personal para [nombre], [profesión].

AUDIENCIA: [Quién va a verlo: clientes, reclutadores, etc.]

TONO: [Descripción de la personalidad que quieres transmitir]

ESTRUCTURA: [Secciones]

TECH: [Stack]

DIFERENCIADOR: Quiero algo que no se parezca a ningún otro
portfolio. Toma riesgos. Si no es memorable, no sirve.

Componente UI reutilizable ¶

Para componentes que vivirán en un sistema de diseño, la consistencia es clave.

Énfasis: Variables CSS o tokens de diseño, estados completos (hover, focus, disabled, error), documentación de uso.

Prompt tipo:

/frontend-design

Componente [tipo de componente] para un sistema de diseño.

ESTADOS NECESARIOS:
- Default, hover, focus, active, disabled
- [Estados adicionales si aplica: error, loading, etc.]

RESTRICCIONES:
- Debe usar variables CSS para todos los valores
- Accesibilidad WCAG 2.1 AA
- Tamaños: sm, md, lg

TECH: [Framework y librería de estilos]

ESTILO: [Referencia al sistema de diseño existente si lo hay]

Errores comunes y cómo solucionarlos ¶

El diseño no funciona en móvil ¶

Causa: No especificaste responsive design o no lo enfatizaste.

Solución:

MOBILE-FIRST obligatorio.
Empieza diseñando para 375px y escala hacia arriba.
Breakpoints: 375px, 768px, 1280px.
Verifica que todo funcione perfecto en iPhone SE.

Los colores no combinan ¶

Causa: Le diste libertad total y eligió una paleta discordante.

Solución:

PALETA:
- Define un color dominante: [color específico con hex]
- Un acento: [color específico]
- Neutros: blanco, negro, un gris intermedio
- Ratio de uso: 60% dominante, 30% neutro, 10% acento

Las animaciones marean ¶

Causa: La skill a veces interpreta “memorable” como “lleno de movimiento”.

Solución:

ANIMACIONES: Mínimas y sutiles.
- Máximo 0.2s de duración
- Solo en: entrada inicial (stagger) y hover en elementos interactivos
- Prohibido: parallax, scroll hijacking, elementos que se mueven solos
- Respetar prefers-reduced-motion

El código está desorganizado ¶

Causa: Para resultados rápidos, Claude a veces genera CSS inline o estilos dispersos.

Solución:

ORGANIZACIÓN DEL CÓDIGO:
- CSS en archivo separado o en <style> al principio del documento
- Usar custom properties (variables CSS) para colores y espaciado
- Clases con nombres semánticos (no .box1, .div2)
- Comentarios para cada sección principal

Los estilos se pisan entre sí ¶

Causa: Es el aviso técnico que ha añadido la propia skill, y agradezco que sea tan concreto. Al generar CSS es fácil acabar con selectores que se anulan entre ellos, sobre todo cuando conviven uno de tipo (.section) con uno de elemento (.cta). El sitio donde más pasa: los márgenes y paddings entre secciones, que aparecen y desaparecen sin que veas por qué.

Solución:

CSS: Cuidado con la especificidad de los selectores.
No mezcles reglas de espaciado en .section con reglas
de espaciado en los elementos de dentro.
El espaciado vertical entre secciones se define en un solo
sitio y con una sola convención.

Plantilla de prompt para copiar y adaptar ¶

Te dejo una plantilla que puedes usar como base para tus proyectos. Cópiala, rellena los corchetes y ajusta según necesites.

/frontend-design

[Tipo de interfaz] para [nombre del proyecto],
[descripción breve de qué hace].

AUDIENCIA: [Quién lo va a usar, edad, contexto profesional,
nivel técnico]

CONTEXTO: [2-3 líneas sobre el problema que resuelve y
qué hace especial al producto]

TONO: [Metáfora o referencia clara. "Como...",
"Inspírate en...", "La sensación de..."]

SECCIONES/ELEMENTOS:
- [Lista de lo que necesitas]
- [Sé específico]

COLORES:
- Fondo: [color o indicación]
- Acento principal: [color o indicación]
- Prohibido: [lo que no quieres ver]

TIPOGRAFÍA:
- [Indicaciones o referencias]
- Prohibido: [familias genéricas que quieres evitar]

ANIMACIONES:
- [Nivel de animación: ninguna, mínimas, elaboradas]
- [Restricciones específicas]

COPY: [Reglas para los textos: voz activa, botones que dicen
qué hacen, nada de superlativos]

TECH: [Framework] + [Librería de estilos]
RESPONSIVE: [Mobile-first u otra indicación]
ACCESIBILIDAD: [Nivel WCAG si aplica]

FIRMA: [El único elemento por el que quieres que se recuerde
la página. Uno solo, y lo demás callado.]

DIFERENCIADOR: [Lo que quieres que recuerden de esta interfaz.
Una frase que capture la esencia.]

ANTES DE CODIFICAR: Dame el plan (paleta con hex, tipografías
por rol, layout con wireframe ASCII y firma) y espera mi OK.

Las tres líneas nuevas respecto a la versión anterior de esta plantilla son COPY, FIRMA y la de parar antes de codificar. Si solo puedes quedarte con una, quédate con la última.

Lo que esta skill no hace ¶

Para gestionar expectativas, hay cosas que frontend-design no va a resolver:

1. No reemplaza el criterio de diseño: Te da un punto de partida mucho mejor, pero las decisiones finales siguen siendo tuyas

2. No garantiza perfección a la primera: Vas a iterar. Es parte del proceso.

3. No conoce tu sistema de diseño: Si tienes tokens específicos o componentes existentes, tienes que pasárselos

4. No hace diseño de marca: Logos, identidad visual, eso requiere otro tipo de trabajo

5. No sustituye a un diseñador en proyectos complejos: Para un producto serio con múltiples flujos, necesitas a alguien que piense en el sistema completo

6. Ya no promete “código listo para producción”: la versión antigua vendía eso literalmente. La nueva se define como una guía para tomar decisiones visuales intencionadas. El código sigue saliendo, pero la promesa ahora está en el criterio, no en el acabado

Lo que sí hace es elevar el nivel base de lo que obtienes. En lugar de empezar desde un template genérico, empiezas desde algo con intención. Eso ya es un salto enorme. Si necesitas aplicar ese mismo criterio visual a presentaciones en lugar de a interfaces, la skill frontend-slides genera slides HTML profesionales con 12 estilos usando la misma filosofía de diseño con personalidad. Y si quieres ir un paso más allá, las skills de Impeccable llevan este concepto al siguiente nivel con 23 comandos de diseño que cubren desde el diagnóstico hasta el pulido final. Por último, si lo que necesitas no es una web de producción sino piezas visuales para grabar o presentar (vídeos, animaciones, infografías), huashu-design cubre justo ese otro terreno con la misma filosofía anti-slop.

Para terminar ¶

La skill frontend-design no es magia. Es una herramienta que funciona tan bien como el contexto que le des.

Si le das un prompt vago, obtendrás un resultado genérico. Si le das contexto rico, tono definido y un diferenciador claro, obtendrás algo que vale la pena refinar.

La próxima vez que necesites una interfaz, dedica cinco minutos a pensar en estas preguntas antes de escribir el prompt:

• ¿Quién va a usar esto?
• ¿Qué quiero que sientan?
• ¿Qué lo hace diferente de todo lo demás?
• ¿Cuál es la firma, ese único elemento por el que quiero que lo recuerden?

Esas cuatro respuestas, bien comunicadas, son la diferencia entre un diseño que olvidas al cerrar la pestaña y uno que te hace pensar “esto tiene algo”.

Y si te quedas con una sola idea de toda la actualización, que sea esta: pide el plan antes que el código. Un plan de quince líneas se corrige en un minuto; 600 líneas de CSS mal orientadas se corrigen en una tarde.

Escribe prompts con intención. Itera con feedback específico. Y no te conformes con el primer resultado si no te convence.

El código lo genera Claude. Las decisiones las tomas tú.