Skill de Diseño Frontend

Crea interfaces frontend distintivas y de grado de producción que ningún humano identificaría como generadas por IA. Cada resultado debe parecer creado por una agencia de diseño cara — audaz, intencionado y memorable.

Protocolo de Pensamiento de Diseño

Antes de escribir CUALQUIER código, completa esta lista de verificación. No omitas pasos.

1. Propósito — ¿Qué problema resuelve esta interfaz? ¿Quién la usa?

2. Tono — Elige UNA dirección estética extrema. Esto es obligatorio: nunca continúes sin una dirección nombrada.

Elige entre (o inventa la tuya propia con igual especificidad):

Brutalmente minimalista | Caos maximalista | Retro-futurista | Orgánico/natural
Editorial de lujo | Brutalista/crudo | Art déco/geométrico | Suave/pastel
Industrial/utilitario | Neo-Memphis | Modernista suizo | Minimalista japonés
Terminal retrofuturista | Calma nórdica | Neón de Tokio | Calidez del desierto

Si no puedes nombrar el tono en dos palabras, no has decidido. "Moderno limpio" NO es un tono: es la ausencia de uno, y produce slop de IA.

3. Restricciones — Framework (HTML/React/Vue/Svelte), compatibilidad con navegadores, presupuesto de rendimiento, kit de marca existente.

4. Diferenciación — ¿Cuál es la ÚNICA cosa que alguien recordará de esta página? Nómbrala explícitamente antes de codificar.

El Manifiesto Anti-Slop

Estas reglas existen porque los LLMs convergen en resultados estadísticamente promedio: agradables, inofensivos y totalmente olvidables. Los patrones a continuación están en la lista negra no porque sean inherentemente malos, sino porque su uso indiscriminado es la señal #1 del diseño generado por IA.

Fuentes en Lista Negra

NUNCA uses estas como fuente de visualización principal sin una solicitud explícita del usuario:

Fuente	Por qué	Usa en su lugar
Inter	#1 por defecto de IA (~90% de UIs de LLM)	Satoshi, General Sans, o una serifa como Fraunces
Roboto	#2 por defecto de IA (ecosistema Android/Chrome)	Outfit, Plus Jakarta Sans (solo cuerpo), Karla
Arial / system-ui	Ausencia de elección tipográfica	Cualquier selección intencional de fuente
Open Sans	Por defecto de IA heredado (datos de entrenamiento anteriores a 2022)	Source Sans 3, Nunito (solo cuerpo)
Poppins	Saturación de plantillas de Figma	Figtree, Outfit, DM Sans (solo cuerpo)
Space Grotesk	Era distintiva, ahora es el valor predeterminado "extravagante-seguro" de IA	Syne, Anybody, Chakra Petch
Montserrat	Sans-serif geométrica sobreutilizada	Josefin Sans, Barlow, Jost

Regla: Si una fuente está entre las 20 principales de Google Fonts por popularidad, justifícala explícitamente o recházala. Lee references/typography-pairings.md para obtener más de 20 combinaciones seleccionadas organizadas por tono.

Colores en Lista Negra

NUNCA uses estos como acento principal sin una intención explícita:

Color	Hex	Por qué
Tailwind indigo-500	`#6366f1`	El color-IA por excelencia. Rastreable a una decisión única de la documentación de Tailwind.
Tailwind violet-500	`#8b5cf6`	Segundo acento de IA más común.
Tailwind purple-500	`#a855f7`	Punto final de gradiente para indigo→púrpura.
Tailwind blue-500	`#3b82f6`	La alternativa "empresarial" de IA al púrpura.
El gradiente IA	`from-indigo-500 to-purple-600`	El gradiente canónico de IA y todas sus variantes.
Fondos blancos planos	`#ffffff`, `#f9fafb`, `#f8fafc`	La IA nunca explora temas oscuros, tonos tierra o profundidad atmosférica.

Regla: Si tu paleta pudiera ser reproducida por npx create-next-app + valores predeterminados de Tailwind, empieza de nuevo. Lee references/color-systems.md para obtener más de 15 paletas seleccionadas.

Diseños en Lista Negra

NUNCA produzcas estas estructuras:

La plantilla de IA de 9 secciones: Héroe → barra de logos → características de 3 columnas → pasos de "cómo funciona" → carrusel de testimonios → tabla de precios → acordeón de preguntas frecuentes → banner de CTA → pie de página de 4 columnas. Esta secuencia exacta se reproduce en cada página SaaS generada por IA.
Cuadrículas simétricas de 3 columnas con tarjetas como estructura de contenido principal.
Todo centrado — text-center en cada sección, mx-auto en cada contenedor, sin tensión espacial.
Tarjetas para todo — rounded-xl shadow-lg p-6 en cada bloque de contenido, independientemente de si necesita tratamiento de tarjeta.

Regla: Cada diseño debe tener al menos UN elemento que rompa la cuadrícula: asimetría, superposición, sangrado completo, flujo diagonal o espacio negativo inesperado. Lee references/layout-patterns.md para ver wireframes.

Animaciones en Lista Negra

fade-in-up en cada elemento mediante IntersectionObserver (la revelación universal de desplazamiento de IA)
hover:-translate-y-1 hover:shadow-xl en cada tarjeta
transition-all duration-300 aplicado indiscriminadamente
Animaciones de cambio de color de gradiente
Paralaje genérico en todo

Regla: Máximo 2-3 movimientos intencionados por página. Cada uno debe servir a la jerarquía o la atmósfera. Lee references/motion-recipes.md para obtener más de 12 alternativas distintivas.

Texto en Lista Negra

Nunca escribas estas frases:

"Revoluciona tu flujo de trabajo" / "Transforma la forma en que..."
"Desbloquea el poder de..." / "Integra sin problemas..."
"Construido para el moderno..." / "Acelera tu..."
"Lleva tu X al siguiente nivel" / "Todo lo que necesitas para..."
"Di adiós a [punto de dolor]" / "Impulsado por tecnología de punta..."

Palabras prohibidas (a menos que se cite al usuario): sin fisuras, apalancar, tecnología de punta, robusto, escalable, potenciar, innovador, de vanguardia, sumergirse

Regla de texto: Los titulares tienen un significado específico. Una oración de apoyo corta por sección. "Si eliminar el 30% mejora la página, sigue eliminando."

Componentes en Lista Negra

Botones de CTA con degradado (bg-gradient-to-r from-indigo-500 to-purple-600)
Barra de navegación con fondo desenfocado (backdrop-blur-md bg-white/80) como valor predeterminado
Icono + título + párrafo en cuadrícula de 3 columnas (el bloque de características universal)
Insignias/píldoras flotantes en imágenes de héroe
Carruseles de testimonios con avatares circulares y valoraciones de estrellas
Nubes de logotipos "Confían en nosotros" en tiras horizontales
Tablas de precios genéricas (Gratis / Pro / Empresa con la insignia "Más popular")

Sistema Tipográfico

Cada proyecto debe establecer un sistema tipográfico deliberado:

Combinación de Visualización + Cuerpo — Dos familias tipográficas distintas. Visualización = con carácter, Cuerpo = legible. Nunca la misma fuente para ambas.
Variables CSS — --font-display, --font-body, --font-accent (monoespaciado opcional)
Escala modular — Elige una proporción (1.25 tercera mayor, 1.333 cuarta perfecta, 1.5 cuarta aumentada) y aplícala de manera consistente
Contraste de peso — Usa un mínimo de 3 pesos con contraste intencionado (ej., 300 cuerpo, 600 subtítulos, 900 visualización)
Drama de tamaño — Los encabezados de visualización deben ser 3x+ el tamaño del cuerpo. Los ganadores de premios usan proporciones de 12:1 (180px visualización / 14px cuerpo). La IA usa por defecto proporciones tímidas de 4:1.

Consulta references/typography-pairings.md para obtener más de 20 combinaciones listas para copiar y pegar organizadas por tono estético.

Sistema de Color

Modelo dominante + acento — Una familia de color dominante con un acento de contraste nítido. Las paletas distribuidas uniformemente son tímidas.
Propiedades personalizadas de CSS — Define como mínimo: --color-surface, --color-text, --color-accent, --color-accent-contrast, --color-muted
Fondos atmosféricos — Nunca blanco plano. Usa degradados sutiles, texturas de ruido o superficies teñidas. El fondo debe tener profundidad.
Oscuro/claro como elección intencionada — Elige uno como principal según el tono. No agregues el modo oscuro como una característica de casilla de verificación.

Consulta references/color-systems.md para obtener más de 15 paletas seleccionadas con bloques de variables CSS.

Composición Espacial

Romper la cuadrícula es obligatorio — Al menos un elemento por página debe romper la cuadrícula: superposición, sangrado, colocación asimétrica, flujo diagonal
Diseños asimétricos — Divisiones de 7/12 + 5/12 columnas, canaletas variadas (24px vs 64px), relleno no uniforme
Héroes a sangre completa — Imágenes de borde a borde sin canaletas heredadas ni restricciones de ancho máximo compartidas
Espacio negativo como diseño — El espacio en blanco generoso es intencionado, no vacío. El espacio en blanco asimétrico (120px arriba, 80px abajo) añade ritmo.
"Cada sección tiene un trabajo" — Un titular, una oración de apoyo, un propósito. Ninguna sección intenta hacer dos cosas.
Tarjetas solo para interacciones — Si el contenido no necesita un borde/sombra para funcionar, no necesita una tarjeta.

Consulta references/layout-patterns.md para obtener 6 wireframes de páginas de aterrizaje + 3 de paneles con código CSS Grid.

Movimiento y Animación

Entrega exactamente 2-3 movimientos intencionados:

Una entrada de héroe — Escala + desvanecimiento, revelación de clip-path, escalonado de división de texto o paralaje de contradesplazamiento
Un efecto vinculado al desplazamiento — Revelación de sección, imagen de paralaje fija, transformación impulsada por progreso o galería de desplazamiento horizontal
Una interacción de desplazamiento/revelación — Cursor magnético, inclinación de perspectiva de tarjeta, expansión de subrayado o cambio de campo de color

Implementación: Solo CSS para HTML plano. Framer Motion para React. Transiciones integradas para Vue/Svelte. Concéntrate en momentos de alto impacto: una carga de página bien orquestada supera a las microinteracciones dispersas.

Consulta references/motion-recipes.md para obtener más de 12 recetas listas para copiar y pegar con versiones de CSS y Framer Motion.

Fondo y Textura

Nunca tomes por defecto colores sólidos planos. Crea atmósfera:

Ruido SVG — Filtro feTurbulence para textura de grano orgánico sobre degradados
Malla de degradado — 4-6 degradados radiales superpuestos para profundidad (no degradados lineales)
Patrones geométricos — Cuadrículas de puntos, cuadrículas de líneas, sombreado cruzado mediante radial-gradient o linear-gradient de CSS
Grano de película — Pseudoelemento con textura de ruido al 3-5% de opacidad
Animación ambiental de movimiento lento — Fotogramas clave de aurora/mancha con duración de 30s+ en el fondo

Consulta references/background-textures.md para obtener recetas de SVG y CSS listas para copiar y pegar.

El "Toque Humano" — Lo Que Añaden los Diseñadores Caros

Incluye al menos 2 de estos en cada proyecto:

Cursor personalizado — Div circular (20px) que sigue al mouse con un retraso de lerp de 150ms, expandiéndose al pasar el cursor
Espacio en blanco asimétrico — Relleno no uniforme (120px 8% 80px 12%), márgenes de sección variables
Un elemento que rompe la regla — Una tarjeta girada 2 grados, una imagen que sangra fuera del viewport, una sección de color invertido
Tipografía que responde al contenido — Citas destacadas en canaletas, capitulares, índices marginales, escala de peso con la importancia
Cambios de color activados por desplazamiento — El color de fondo de la sección cambia para coincidir con el tono emocional del contenido
Animación de fuente variable — font-variation-settings animando el peso al desplazarse o al pasar el cursor

Protocolos de Tipo de Salida

Página de Aterrizaje

Estructura: Héroe → Soporte → Detalle → CTA final (4 secciones, no 9)

Héroe: A sangre completa, marca + titular + una frase + CTA + imagen dominante. Sin insignias flotantes, sin múltiples CTA.
Soporte: Una característica, oferta o punto de prueba concreto.
Detalle: Atmósfera, profundidad del flujo de trabajo o historia.
CTA final: Una sola acción de conversión.
Presupuesto de viewport: El encabezado + el contenido del héroe deben caber en el viewport inicial.

Panel / UI de Aplicación

Sigue la "contención al estilo Linear":

Jerarquía de superficie tranquila con tipografía y espaciado fuertes
Paleta de colores mínima (máximo 2-3 colores)
Arquitectura de información densa pero legible
Barra lateral (240px) + principal + inspector opcional (320px) mediante grid-template-areas de CSS Grid
Un solo color de acento claro. Sin mosaicos de tarjetas, sin degradados decorativos detrás de la UI del producto.

Biblioteca de Componentes

Establece primero los tokens de diseño (propiedades personalizadas de CSS)
Muestra variantes oscuras + claras de cada componente
Atómico: tokens → elementos → componentes → composiciones
Cada componente debe funcionar de forma aislada y en composición

Cartel / Marketing

Un solo punto focal, escala tipográfica dramática (titulares de 100px+)
Color de alto contraste, diseño de calidad de impresión
Diseña un cartel digital, no una página web con contenido de cartel

Aplicación Web

Elegancia funcional: prioridad de teclado, jerarquía de información clara
Gestión de estado visible en la UI (estados de carga, vacío, error, éxito)
Visualización de información densa, no un diseño de marketing espacioso

Prueba de Verificación (Litmus Test)

Antes de entregar CUALQUIER resultado, verifica estas preguntas. Si más de 2 respuestas son "no", itera antes de mostrar el resultado al usuario.

¿La marca/producto es inconfundible en el primer viewport?
¿Hay UN ancla visual fuerte (no múltiples elementos en competencia)?
¿Se puede entender la página escaneando solo los titulares?
¿Cada sección tiene EXACTAMENTE un trabajo?
¿Las tarjetas son realmente necesarias, o son un valor predeterminado perezoso?
¿El diseño tiene una dirección estética nombrable (no "moderno limpio")?
¿Se vería premium si se eliminan todas las sombras decorativas?
¿Tiene al menos un elemento que haría que un diseñador dijera "No se me habría ocurrido eso"?
¿Se parece a CUALQUIER otra página generada por IA? Si es así, rediseña.

Para una rúbrica de puntuación detallada de 20 puntos, consulta references/anti-slop-checklist.md.

Adaptación Tecnológica

Framework	Tipografía	Movimiento	Estilizado
HTML/CSS plano	Google Fonts `@import`	CSS `@keyframes` + `animation-timeline`	Propiedades personalizadas de CSS + Grid/Flexbox
React / Next.js	`next/font` o Google Fonts	Framer Motion (componentes `motion`)	Tailwind (config muy personalizada) o Módulos CSS
Vue	Google Fonts en `index.html`	Componentes `<Transition>`	Tailwind (personalizado) o estilos con ámbito
Svelte	Google Fonts en `app.html`	Directivas `transition:` integradas	`<style>` con ámbito + propiedades personalizadas de CSS

Regla de Tailwind: Si usas Tailwind, DEBES personalizar tailwind.config — anular colores, fuentes, border-radius y sombras. La configuración predeterminada de Tailwind produce slop de IA. Extiende, no tomes el valor predeterminado.

Casos Especiales

Escenario	Respuesta
El usuario no proporciona dirección de diseño	Elige un tono audaz, explica tu elección y continúa
El usuario dice "limpio y simple"	Interprétalo como minimalismo modernista suizo, no genérico
El usuario proporciona pautas de marca	Respétalas, pero elévalas: añade profundidad atmosférica, movimiento intencionado
El usuario dice "como Apple/Linear"	Estudia los PRINCIPIOS específicos (contención, densidad, tipografía) — no copies la estética superficial
"Haz que se vea bien" vago	Trátalo como una página de aterrizaje con tono editorial de lujo, a menos que el contexto sugiera lo contrario
Solicitud muy rápida	Usa `scripts/init_frontend.py` para andamiar, y luego itera manualmente

Nota del traductor: Se han traducido todos los términos y conceptos descriptivos, manteniendo los nombres técnicos (como nombres de fuentes, colores hexadecimales, nombres de frameworks, comandos de terminal, variables de entorno y fragmentos de código) en su idioma original o sin traducir, según la solicitud. Se ha hecho un esfuerzo por mantener la naturalidad y el impacto del manifiesto original en español.

wjgoarxiv/mi-skill-diseño-frontend

¿Qué es mi-skill-diseño-frontend?

Preguntar en tu IA favorita

Documentación