davila7/claude-code-templates

Diseño Web Premium

Crea componentes React (.jsx) que parezcan sacados de Awwwards, el tipo de trabajo que hace que la gente pregunte "¿quién diseñó esto?". Son sitios donde cada píxel es intencional, cada animación está coreografiada y la impresión general es que se involucró talento creativo serio y un presupuesto considerable.

El Problema Estético de la IA

La mayoría de los sitios web generados por IA comparten un ADN reconocible. Evitarlo requiere saber exactamente cómo se ve.

La Lista Negra — Nunca Hagas Esto

Pecados tipográficos

• Inter, Poppins, Montserrat, Raleway, Space Grotesk, Outfit como fuentes principales — estas gritan "plantilla de IA". (Nota: Inter Tight es una familia de fuentes separada con métricas diferentes y está permitida).
• Usar una sola familia de fuentes para todo.
• Tamaños de fuente uniformes con jerarquía predecible (64px → 32px → 18px → 14px).
• Interletraje y altura de línea predeterminados en todas partes.
• Bloques de texto centrados en todas partes, especialmente párrafos de varias líneas.

Pecados de color

• Gradientes de púrpura a azul (el cliché de diseño de IA más grande).
• Índigo/violeta como color de marca principal sin razón contextual.
• Fondo blanco + un color de acento + texto gris (el kit de inicio SaaS).
• Gradientes en botones o tarjetas sin motivo.
• Usar opacidad o superposiciones semitransparentes como sustituto de elecciones de color reales.
• Colores de acento neón sobre fondos oscuros (el aspecto de "portafolio de desarrollador").

Pecados de layout

• Héroe → cuadrícula de 3 columnas de características → testimonios → CTA → pie de página (la página de inicio SaaS predeterminada).
• Héroe → barra de estadísticas → cuadrícula de trabajo → división de dos columnas sobre nosotros → CTA → pie de página (la página de inicio "IA premium" — igual de formulista).
• CUALQUIER orden de secciones de arriba a abajo predecible que se pueda intercambiar entre sitios. Cada sitio debe tener su propio ADN estructural único — diferente número de secciones, diferente lógica de ordenamiento, secciones que no encajan perfectamente en categorías.
• Cuadrículas perfectamente simétricas con tarjetas de igual tamaño.
• Todo centrado, todo contenido en un contenedor de ancho máximo.
• Rectángulos redondeados con sombras como elemento de UI principal.
• Tarjetas de icono + encabezado + párrafo en una fila de 3 o 4.
• Héroe genérico con titular + subtítulo + dos botones uno al lado del otro.
• Secciones de héroe estáticas y planas con solo texto — las secciones de héroe deben ser experiencias espaciales inmersivas.

Pecados de movimiento

• Elementos que aparecen desde abajo al hacer scroll (el efecto AOS sobreutilizado).
• Transiciones idénticas en todo (misma duración, mismo easing, misma dirección).
• Efectos hover que solo escalan o agregan una sombra.
• Spinners de carga en lugar de pantallas esqueleto o revelaciones coreografiadas.

Pecados de imagen y decoración

• Formas de blob como decoración de fondo.
• Formas geométricas flotantes (círculos, triángulos) como "elementos de diseño".
• Fondos genéricos de malla degradada.
• Cuadrículas de fotos de stock con proporciones uniformes.
• Emojis o iconos de línea genéricos como marcadores de sección.

---

Cómo se Ve lo Caro Realmente

El diseño web premium comunica artesanía a través de la contención, la sorpresa y la atención obsesiva al detalle.

Tipografía como Identidad

La tipografía es el #1 diferenciador entre un sitio web de $500 y uno de $50,000.

Filosofía de selección de fuentes:

• Usa fuentes serif o display distintivas para titulares — fuentes con personalidad y opinión. Buenos puntos de partida: Playfair Display, Cormorant Garamond, DM Serif Display, Fraunces, Instrument Serif para serifas. Para sans-serif que no estén sobreexplotadas: Syne, General Sans, Satoshi, Switzer, Cabinet Grotesk, Nacelle, Inter Tight, IBM Plex Sans, Manrope, Archivo, Work Sans, Instrument Sans.
• Combina una fuente display con carácter con una fuente de cuerpo neutral pero refinada.
• Fuentes monoespaciadas como tipografía de acento (para etiquetas, categorías, fechas) agregan una cualidad editorial — JetBrains Mono, IBM Plex Mono, Space Mono.
• Mezcla pesos dramáticamente — un titular en peso 900 junto a un cuerpo en peso 300 crea tensión visual.

Ejecución tipográfica:

• clamp() para escalado de tipo fluido en lugar de saltos de punto de interrupción.
• Contraste de tamaño dramático — los titulares pueden tener 8vw+ en escritorio.
• Interletraje negativo en titulares grandes (-0.03em a -0.06em).
• Altura de línea generosa en el cuerpo (1.6–1.8), ajustada en titulares (0.9–1.1).
• Alineación mixta — cuerpo alineado a la izquierda con etiquetas ocasionales alineadas a la derecha o encabezados asimétricos.
• max-width en párrafos (45–75ch) y text-wrap: balance en encabezados.
• Micro-etiquetas en mayúsculas con interletraje amplio (0.1em+) para categorías, fechas, metadatos.

Color como Atmósfera

• Empieza con blanco y negro. Agrega color solo cuando se gane su lugar.
• Un tono dominante con intención — "¿qué territorio emocional reclama este color?".
• Blancos rotos y grises cálidos (no #ffffff o #000000 puros) se sienten más diseñados — prueba #FAFAF8, #F5F0EB, #1A1A1A, #0D0D0D.
• Paletas monocromáticas o análogas con un momento de contraste se leen como más sofisticadas que los esquemas arcoíris.
• Temas oscuros bien hechos: no solo "blanco sobre gris oscuro" sino capas de fondo consideradas con matices cálidos o fríos sutiles.
• El color usado con moderación impacta más — un solo enlace rojo en un mar de blanco y negro es más poderoso que el rojo en todas partes.

Layout como Narración

El #1 modo de fallo de este skill es producir sitios que se ven diferentes en la superficie pero comparten la misma estructura subyacente — un héroe, tres secciones editoriales, una cita destacada, un formulario, un colofón. Después de un lote de sitios, esto empieza a sentirse como una plantilla con diferentes colores. Combate esto activa y deliberadamente.

La regla de unicidad del ADN estructural:

Antes de escribir cualquier marcado, nombra el concepto estructural principal en voz alta — una sola frase nominal, como "manuscrito índice" o "diorama horizontal sticky". Dentro de un lote de sitios, no pueden compartir el mismo concepto estructural principal. Si el sitio anterior fue una narrativa de scroll sticky, este no lo es. Si el sitio anterior fue una división vertical 33/67, este no lo es. La idea estructural es lo primero que nota el usuario — variar el color sin variar la estructura es cosmético.

Catálogo de ADN Estructural

Estas son estructuras primarias distintas. Cada invocación del skill debe elegir un concepto y comprometerse con él. No mezcles dos estructuras en un mismo sitio (se diluye ambas).

1. Manuscrito Índice — Una única columna editorial larga, sin secciones. Un ritmo tipográfico de arriba a abajo. Toda la página se lee como un solo manuscrito que resulta ser un sitio web. (Bueno para: el menú de un chef, la carta de un perfumista, un manifiesto).
2. Diorama Horizontal Sticky — La página es un scroll vertical largo, pero lo que ves mientras haces scroll es una escena que se desplaza horizontalmente. Usa position: sticky + translateX impulsado por el scroll. (Bueno para: una línea de tiempo de encargos, un proceso por etapas, una colección de artefactos).
3. División Permanente en Dos Paneles — La página siempre está dividida 50/50 (o 38/62); un panel es sticky, el otro se desplaza. La navegación ocurre dentro de un panel, nunca desplazando toda la página. (Bueno para: un archivo con un índice que se actualiza en vivo, el catálogo de un bibliotecario).
4. Secuencia de Diapositivas — "Diapositivas" de altura completa de viewport, una por pantalla, con scroll snap. Cada diapositiva es una composición completamente diferente. (Bueno para: la monografía de un fotógrafo, un recorrido de galería, un look-book editorial).
5. Objeto Escenificado sobre un Pedestal — Un solo sujeto 3D/imagen se sienta centrado, rotable, y el resto de la página es marginalia que orbita alrededor del objeto. (Bueno para: una casa de un solo producto — un reloj, un frasco, una botella).
6. Narrativa Fijada (Scrollytelling) — Una sección de 2 a 4 pantallas de altura se fija en su lugar mientras su contenido avanza a través de estados discretos (intercambios de imagen, intercambios de texto, progreso). Se usa una vez en la página como su pieza central. (Bueno para: un perfil de misión, un proceso de producción, un estudio de colapso de edificio).
7. Navegación Horizontal — El scroll principal de la página es horizontal. Las secciones se leen de izquierda a derecha. El scroll vertical está desactivado o reservado para revelaciones de detalles. (Bueno para: un archivo horológico, el ala de un museo, la pizarra de un estudio de cine).
8. Barra Lateral + Columna — Una barra lateral persistente a la izquierda nunca se desplaza (navegación, metadatos, pie de página continuo); la columna derecha es todo el sitio. (Bueno para: un bufete de abogados, un instituto de investigación, una editorial académica).
9. Puertas de Capítulo — Divisores de capítulo de viewport completo entre zonas tonales muy diferentes. Cada capítulo tiene su propio color de fondo, peso tipográfico y ritmo de layout. La página cambia de carácter a medida que desciendes. (Bueno para: un estudio multidisciplinario, una retrospectiva).
10. Libro Mayor / Registro — La página se presenta como un documento antiguo — un conocimiento de embarque, un registro, el manifiesto de un barco. Las filas tabulares dominan; la tipografía se lee como un libro mayor. (Bueno para: una lista de espera, un registro de lote, el manifiesto de una expedición).
11. Collage / Rompe-Cuadrícula — Una cuadrícula asimétrica al estilo de revista con rupturas deliberadas — imágenes sobredimensionadas que sangran en las columnas, citas destacadas que cruzan los medianiles, notas al pie en los márgenes. (Bueno para: publicaciones editoriales, revistas culturales, estudios creativos).
12. Objeto Único, Sin Cromo — El sitio es solo el sujeto, rotable, con una sola frase corta debajo. Sin navegación, sin pie de página, casi sin UI. (Bueno para: el lanzamiento de una obra única de un artista, una obra declarativa).
13. Pizarra de UI de Producto — El héroe es una simulación realista de la interfaz del propio producto (azulejos de tablero, vista de diff, paleta de comandos). Usado por marcas de tecnología/AI cuyo producto ES una UI. (Bueno para: IDEs de AI, herramientas de desarrollador).
14. Cuadrícula de Azulejos de Tablero — Toda la página está estructurada como un tablero de aspecto vivo con contadores en vivo, sparklines, pips pulsantes. (Bueno para: infraestructura, ciberseguridad, observabilidad).
15. Línea de Tiempo de Conversación — La página reproduce una conversación/transcripción/llamada simulada mientras el usuario se desplaza. Las llamadas de características se anclan a momentos específicos. (Bueno para: voz AI, plataformas de soporte, entrevistas legales).

Cómo elegir el concepto:

• Empieza desde el hecho central del cliente. Un restaurante cuya identidad completa es un menú de nueve platos quiere un Manuscrito Índice. Un relojero cuya identidad es la precisión y un solo calibre quiere un Objeto Escenificado sobre un Pedestal. Una empresa de expediciones cuya marca es un viaje anual quiere una Narrativa Fijada.
• Rechaza el concepto si es el que se usó la última vez en esta sesión. Elige el siguiente mejor.
• Escribe el concepto y una oración de justificación antes de escribir cualquier JSX. Mantenlo visible en el archivo de prompt.

Principios de layout (aplica dentro del concepto estructural que elijas):

• Rompe la cuadrícula intencionalmente. Momentos de ancho completo seguidos de columnas de texto estrechas. Imágenes sobredimensionadas que se salen de la pantalla. Divisiones asimétricas de dos columnas (60/40, 70/30).
• El espacio en blanco generoso no es espacio desperdiciado — es una señal de lujo. Padding de 8rem+ entre secciones.
• Secciones de desplazamiento horizontal para portafolios o galerías (bien hechas, no como patrón de navegación principal — a menos que hayas elegido deliberadamente Navegación Horizontal).
• Elementos superpuestos — texto sobre imágenes, imágenes que salen de sus contenedores, elementos que cruzan los límites de las secciones.
• Elementos sticky que acompañan el scroll — una etiqueta que se queda mientras el contenido se desplaza.

Micro-patrones específicos que se leen como premium:

• Cuadrículas de mampostería o escalonadas para contenido visual en lugar de cuadrículas uniformes.
• Texto que se superpone a imágenes con mix-blend-mode para efecto editorial.
• Secciones numeradas o indexadas con una progresión visible.
• Un sistema de cuadrícula visible (líneas o columnas sutiles) que el diseño rompe ocasionalmente.
• Contenido que se transforma al hacer scroll — no solo aparece, sino que se transforma, escala, reposiciona.
• Filas tabulares / de libro mayor para listas (lotes, manifiestos, registros) en lugar de cuadrículas de tarjetas.
• Campos de formulario que parecen partes de un documento editorial, no un formulario SaaS — etiquetas en monoespaciado pequeño sobre entradas serif, sin contornos, solo bordes inferiores.

Repeticiones prohibidas (dentro de una sesión del skill):

• No des a dos sitios una sección de proceso de "columna izquierda sticky + columna derecha con scroll". Elígelo para uno; inventa algo más para el otro.
• No abras dos sitios con un héroe asimétrico 33/67. Si uno lo hizo, el siguiente abre con un escenario centrado, o un fondo a sangre completa, o un libro mayor, o ningún héroe.
• No termines dos sitios con el mismo par de "formulario de consulta + cuadrícula de colofón". Varía el movimiento final.

Variedad de barra de navegación — un modo de fallo silencioso a tener en cuenta.

El defecto más fácil es una barra superior con grid-template-columns: auto 1fr auto con "marca a la izquierda, algo centrado, algo alineado a la derecha, mix-blend-mode: difference". Después de tres sitios, empieza a leerse como una firma — no una elección de diseño. En cada sesión, varía la navegación sustancialmente:

• Sin navegación (marcas de Objeto Único, Sin Cromo).
• Navegación integrada en la barra lateral sticky (marcas de Barra Lateral + Columna).
• Barra de comandos fija en la parte inferior con estilo de lanzador ⌘K (marcas de producto tecnológico — Cursor / Linear / Arc).
• Marca de palabra centrada en línea con pestañas extendidas debajo como una tira secundaria.
• Índice de desplazamiento horizontal de ancho completo que también funciona como navegación.
• Navegación tipo marquesina — tira continua de desplazamiento con nombres de sección.
• Navegación vertical izquierda escrita de abajo a arriba.
• Navegación tipo barra de estado con un pip operativo en vivo.
• Tira de marquesina (precios de referencia, métricas) más una barra superior delgada.

Elige la navegación que pertenece a la marca y al ADN estructural — no uses por defecto la barra superior de tres columnas.

Evita el defecto editorial-lujoso.

Este skill gravita, bajo presión, hacia: fondo crema cálido, serif display (Fraunces / Cormorant), metadatos monoespaciados, un solo acento de latón, micro-etiquetas en mayúsculas con interletraje amplio, símbolos de viñeta ◦. Es una estética real, apropiada para alta costura, perfumería, alta cocina, relojería. No es apropiada para tecnología, IA, ciberseguridad, electrónica de consumo, SaaS o herramientas de desarrollo — y usar repetidamente este defecto hace que cada sitio en un lote parezca hecho por la misma agencia.

Si el campo es tecnología, la estética debe inclinarse hacia: fondos blanco puro o casi negro (no crema); sans-serifs neo-grotescas (estilo Söhne, Inter Tight, IBM Plex Sans, Instrument Sans) como tipografía display; color usado con moderación y en el espacio de gama de la industria (azules duros, verdes técnicos, ámbar de terminal); layouts tabulares y tipo tablero; animaciones sutiles (desplazamiento de 1px, opacidad, no rebotes o escalas elásticas); navegaciones tipo barra de comandos o barra de estado con indicadores en vivo; nada de cuero, nada de texturas de papel, nada de ornamentación de carruaje. Un sitio para una empresa de agentes de IA no debería verse como un club de caballeros; debería verse como un panel de control de misión.

Animación como Coreografía

Filosofía: La animación debe sentirse motivada, no decorativa. Cada transición debe tener un porqué — y ese porqué generalmente es "esta información cambió" o "este contenido se está revelando".

Patrones de animación premium:

• Revelación progresiva: El contenido se despliega en el orden en que se lee — etiqueta, luego titular, luego cuerpo. No todo a la vez.
• Transiciones de personaje de línea: Para titulares, que las letras aparezcan una por una desde una opacidad y un ligero desplazamiento. Esto se siente como una máquina de escribir o una imprenta.
• Desplazamiento de imagen: Las imágenes que se revelan se deslizan desde el costado en lugar de aparecer — y la imagen se desplaza dentro de su marco a una velocidad diferente (efecto parallax).
• Animaciones de scroll físico: Elementos que reaccionan a la velocidad del scroll — un fondo que se mueve más lento, un elemento decorativo que se mueve más rápido.
• Movimiento no lineal: Diferentes duraciones, diferentes easings para diferentes elementos. No todo usa cubic-bezier(0.65, 0, 0.35, 1).
• Hover con intención: Los botones se llenan, las imágenes se inclinan o aumentan el zoom, los enlaces se subrayan desde el centro, no un simple cambio de color.
• Transiciones de página: Si es una SPA, una transición real entre vistas (desvanecimiento, diapositiva, revelación de cortina) — no un cambio instantáneo.

Imagen y Medios como Material

La elección y el tratamiento de las imágenes diferencian inmediatamente un diseño premium de uno genérico.

Directrices de imágenes:

• Contenido sobre decoración: Cada imagen debe tener una razón para estar allí — retratos, artefactos, escenas de proceso, detalles de productos. Sin imágenes de relleno.
• Variedad de formatos: Mezcla horizontales, verticales y cuadradas. No todas las imágenes en una cuadrícula necesitan la misma proporción.
• Superposición de texto: El texto sobre imágenes debe ser legible — usa fondos de texto, mix-blend-mode o coloca el texto en las partes más simples de una imagen.
• Sin imágenes predeterminadas: No uses imágenes de relleno de Unsplash/Pexels. Si el proyecto requiere imágenes, déjalas como marcadores de posición con indicaciones de reemplazo, o usa degradados/texturas abstractas.
• Bordes y marcos: Las imágenes sangradas se sienten modernas; las imágenes con bordes se sienten editoriales — elige una intención.
• Tratamiento en escala de grises: Hacer que todas las imágenes sean en escala de grises con un solo elemento en color crea un punto focal poderoso.

Guía de Implementación

Este skill traduce estas directrices en componentes React con HTML semántico y CSS Modules o Tailwind CSS. Las estructuras están diseñadas para ser responsivas, con animaciones impulsadas por scroll donde sea apropiado y una orquestación cuidadosa de tipografía, color y espacio. Cada sitio debe comenzar con una elección deliberada de estructura de ADN, justificada por la identidad y el propósito del cliente, y ejecutada con la atención al detalle que distingue al diseño web verdaderamente premium.