🧩 Qué es / qué hace
Definición precisa basada en el SKILL.md — lo que el frontend-design entrega y lo que la diferencia de cualquier respuesta estándar de Claude.
🎯 Definición oficial
frontend-design crea interfaces frontend distintas y de calidad production-grade, con un diseño de alta calidad. La descripción exacta: "Crea interfaces frontend distintivas, listas para producción y con alta calidad de diseño."
- • Apto para producción y funcional — no es un prototipo. El código generado va directamente a uso real.
- • Visualmente impactante y memorable — cada generación tiene identidad propia. No hay plantillas repetidas.
- • Punto de vista estético coherente — la skill elige una dirección (minimalismo brutalista, editorial, retrofuturista, art déco…) y la ejecuta con precisión.
- • Refinamiento meticuloso de cada detalle — espaciado, peso tipográfico, microinteracciones, composición espacial.
✓ Qué HACE frontend-design
- ✓Elige una dirección estética y ejecútala con intención
- ✓Varía las fuentes, los temas y la composición entre generaciones
- ✓Usa Motion library en React cuando está disponible
- ✓Aplica gradientes, texturas y sombras dramáticas como atmósfera
✗ Lo que el skill PROHÍBE
- ✗Fuentes genéricas: Inter, Roboto, Arial, system-ui
- ✗Esquemas trillados: gradiente morado sobre fondo blanco
- ✗Diseños predecibles sin contexto específico
- ✗Space Grotesk como elección predeterminada entre generaciones
🎣 Cuándo se activa
Los desencadenantes exactos de la descripción: las solicitudes que hacen que Claude active el skill frontend-design automáticamente.
📋 Disparadores de la description (texto exacto del SKILL.md)
El skill se activa cuando el usuario pide que construir web components, páginas, artefactos, pósteres o aplicaciones. Ejemplos citados literalmente en la description:
Ejemplos reales de solicitudes que activan el skill:
Creación de página
"crea una landing page para mi SaaS de análisis de datos"
Componente React
"haz una tarjeta de producto en React con Tailwind y shadcn"
Estilización/embellecimiento
"haz que este formulario se vea mejor" / "embellece este dashboard"
Dashboard HTML puro
"crea un panel de métricas en HTML/CSS sin framework"
💡 Consejo práctico
El skill es independiente del framework: funciona con HTML/CSS puro, React, Vue y cualquier stack de UI. Lo que siempre aporta es el razonamiento de diseño antes del código — Purpose, Tone, Constraints, Differentiation.
🚀 Cómo mejora tus páginas
Valor concreto que se entrega en el resultado final: qué cambia en la práctica cuando la skill está activa.
✓ CON frontend-design
- ✓Tipografía con carácter: una fuente display y una fuente de texto combinadas según el contexto
- ✓Una animación de entrada orquestada con revelaciones escalonadas crea más deleite que 10 microinteracciones dispersas
- ✓Diseños asimétricos, superposiciones, elementos que rompen la cuadrícula
- ✓CSS variables para una paleta coherente, colores dominantes con acentos nítidos
✗ SIN el skill (respuesta predeterminada)
- ✗Inter en todos los tamaños, sin una jerarquía visual real
- ✗Transiciones genéricas al pasar el cursor por todo, sin impacto
- ✗Cuadrícula de 3 columnas iguales, padding uniforme, sin asimetría
- ✗Paleta de 5 colores distribuidos de manera uniforme, sin predominio
📐 Principios de estética frontend (del SKILL.md)
Tipografía
Fuentes hermosas, únicas e interesantes. Pares: display + texto refinado. Opciones inesperadas y llenas de carácter.
Color y tema
CSS variables para mantener la coherencia. Los colores dominantes con acentos nítidos superan a las paletas tímidas distribuidas de forma uniforme.
Movimiento
CSS-only para HTML puro. Motion library para React. Un momento bien orquestado vale más que microinteracciones dispersas.
Composición espacial
Diseños inesperados. Asimetría. Superposición. Flujo diagonal. Elementos que rompen la cuadrícula.
💡 El principio del punto de vista
El SKILL.md es explícito: «Tanto el maximalismo audaz como el minimalismo refinado funcionan; la clave es intencionalidad, no intensidad." El skill no impone un estilo: elige uno y lo ejecuta con precisión para ese contexto.
⚙️ Cómo funciona por dentro
Stack, enfoque, etapas internas y dependencias reales descritas en SKILL.md.
🧠 Design Thinking — Fase 1 (SIEMPRE antes del código)
Antes de escribir una línea de código, la skill plantea 4 preguntas obligatorias:
Purpose
¿Qué problema resuelve esta interfaz? ¿Quién la usa?
Tone
Elige un extremo: minimalismo brutal, maximalismo, retrofuturista, orgánico, lujo, editorial, brutalista, art déco, suave/pastel…
Restricciones
Requisitos técnicos: framework, rendimiento, accesibilidad.
Diferenciación
¿Qué hará que esta página sea INOLVIDABLE? Algo que el usuario recuerde.
Fase 2 — Implementación (stack compatible):
HTML/CSS/JS puro
Página estática. Animaciones con CSS keyframes. Sin dependencia de build.
React + Tailwind + shadcn
Stack moderno. Usa Biblioteca de movimiento (Framer Motion) para animaciones cuando esté disponible.
Vue, otros
El skill se describe como independiente del framework: "HTML/CSS/JS, React, Vue, etc."; aplica el mismo enfoque de pensamiento de diseño.
⚠️ Atención: complejidad proporcional a la visión
El SKILL.md es explícito: «Los diseños maximalistas necesitan código elaborado con animaciones extensas. Los diseños minimalistas necesitan contención, precisión y atención a los detalles de espaciado». No existe una implementación genérica: el código generado siempre refleja la dirección estética elegida.
💬 Ejemplo práctico + PROMPT listo
Prompts reales para pegar en Claude Code y activar el skill de inmediato.
🖥️ Escenario: landing page para SaaS de analítica
Objetivo: crear una landing page de nivel de producción en HTML/CSS/JS puro para una herramienta de analítica, con estética editorial, tipografía llamativa y una animación de entrada orquestada.
/frontend-design
Cria uma landing page em HTML/CSS/JS puro para um SaaS de analytics chamado "Prism".
Direção estética: editorial/magazine — dark mode com tipografia serifada no hero,
corpo em sans-serif geométrica sem-clichê. Paleta: quase-preto + laranja elétrico
como acento único. Layout assimétrico no hero: headline enorme à esquerda, mock
de dashboard inclinado à direita. Animação de entrada: staggered reveal da headline
em 3 partes com animation-delay. Nenhuma fonte genérica (não Inter, não Roboto).
Seções: Hero / Features 3 colunas / Pricing / CTA final.
Sem dependências externas além de Google Fonts./frontend-design
Cria um card de produto React para e-commerce de sneakers premium.
Stack: React + Tailwind + shadcn + Motion library (Framer Motion).
Tom: luxo refinado — fundo quase-preto, acentos dourados, tipografia
condensada display para o nome do produto. Hover: imagem escala 1.08 com
sombra neon dourada. Clique no CTA: micro-animação de "add to bag" com
ícone que se transforma em ✓. Sem purple gradient, sem card genérico.💡 Cómo potenciar el prompt
Cuanto más especificas la dirección estética y los antipatrones que debes evitar, más el skill puede diferenciarse de lo genérico. «Editorial» + «con serifas» + «sin Inter» es mucho más eficaz que solo «bonito».
🧬 Combina con / límites
Cómo el frontend-design cómo encaja en el ecosistema de la Trilha 1 y cuándo no usarlo.
+ impeccable
Usa frontend-design para construir, después impeccable para pulir. impeccable audita el código ya generado: elimina inconsistencias, corrige la accesibilidad, mejora los microtextos. Es el «refinamiento posterior a la generación».
+ theme-factory
O theme-factory (Ruta 2) define tokens de diseño: paleta, tipografía, espaciado. Úsalo ANTES para crear el sistema; después, usa frontend-design para construir componentes dentro de ese sistema.
+ web-artifacts-builder
O web-artifacts-builder (Módulo 1.3) monta la estructura de varios archivos del proyecto — rutas, layout, configs. Frontend-design entra después, dando estilo a cada página desde un punto de vista estético.
Flujo de producción recomendado — Trilha 1:
define tokens
estructura el proyecto
construye con estética
pulido final
⚠️ Cuándo NO usar frontend-design
- ✗ Código backend / lógica de negocio pura — la skill es exclusivamente de front-end. Para APIs, bases de datos y autenticación: no hay beneficio.
- ✗ Prototipado rápido sin preocuparse por lo visual — si necesitas primero la funcionalidad básica, el Design Thinking obligatorio puede ser una carga.
- ✗ Sistemas de diseño ya definidos con reglas estrictas — si el proyecto tiene una guía de estilo externa muy restrictiva, la libertad creativa de la skill entra en conflicto.
- ✗ Video, 3D, audio — para esos medios, usa la Trilha 3 (Mídia): animation-designer, 3d-animation-creator, remotion.
📋 Resumen del Módulo 1.1
Qué aprendiste:
- ✓frontend-design crea interfaces production-grade distintivas — no genéricas.
- ✓Se activa con pedidos de web components, pages, dashboards, React, HTML/CSS o «beautify».
- ✓Siempre se ejecuta Design Thinking antes del código: Purpose, Tone, Constraints, Differentiation.
- ✓Admite HTML puro, React + Tailwind + shadcn, Motion library, Vue y otros.
- ✓Prohíbe Inter/Roboto/Arial, el gradiente morado genérico y los diseños predecibles sin contexto.
- ✓Combina con impeccable (para pulir), theme-factory (tokens) y web-artifacts-builder (estructura).
Conceptos centrales del skill:
Próximo módulo:
1.2 ✨ impeccable
El skill de pulido: cómo auditar y refinar el código ya generado para eliminar inconsistencias, mejorar la accesibilidad y elevar la calidad final.