mukulmunda41-create/diseño-web-futurista

Diseño Web Futurista

Un método de trabajo para sitios web de marketing de una sola página que se sientan dirigidos, no generados: un brief claro, un sistema de diseño único, secciones construidas y verificadas individualmente, imágenes que coinciden como una sola sesión fotográfica, y un pequeño y deliberado presupuesto de movimiento cinematográfico.

Por qué los sitios web salen genéricos

Cada detalle que una solicitud deja abierto se llena con la opción estadísticamente más probable. Por lo tanto, una solicitud de una línea produce el sitio web promedio: título centrado, degradado suave, una fila de tarjetas redondeadas idénticas. La mayor parte del trabajo real ocurre antes de cualquier código. Precisar las preguntas abiertas (audiencia, la única acción deseada, la sensación, las tipografías, la paleta), luego construir en incrementos lo suficientemente pequeños como para inspeccionarlos visualmente.

Mantén claros los roles. El usuario es dueño de lo que se construye. Tú eres dueño de cómo. Y ningún trabajo está terminado hasta que alguien lo haya mirado en un navegador a lo ancho de un teléfono.

Por dónde empezar

Situación	Ir a
Sitio nuevo, carpeta vacía o casi vacía	Fase 1, luego directamente hacia abajo
Sitio existente, una sección para añadir o reconstruir	Leer las reglas del proyecto, luego la rutina de sección en la Fase 5
"Hazlo cinematográfico / 3D / con scroll"	Fase 7 y references/cinematic-moves.md
Imágenes, video de héroe o prompts para ellos	references/assets.md
El sitio se ve genérico o hecho por IA	Auditarlo contra "Señas de un sitio genérico" en references/design-system.md, luego Fase 3
Ajustes móviles, pulido, formulario, despliegue, dominio, SEO	references/ship.md

Abre un archivo de referencia al llegar a su fase, no antes. Cada uno es independiente.

Las fases

1. Brief

Un solo párrafo, escrito antes de cualquier código, que cubre tres puntos: la audiencia, la única cosa que un visitante debería hacer, y la sensación deseada (tres adjetivos y una comparación, por ejemplo "tranquilo, preciso, generoso, como un estudio bien gestionado en una mañana de entre semana").

Cuando el usuario no ha proporcionado esto, solicítalo en un solo mensaje. Cuando ha dicho que simplemente continúes, redacta el brief tú mismo, indícalo como una suposición en una línea y procede. Las decisiones posteriores (el botón dominante, qué secciones existen, qué movimiento justifica su peso) se resuelven todas releyendo este párrafo. Esa es la razón por la que no se puede saltar.

2. Plan

Escribe la lista de secciones de arriba a abajo. Cada entrada da el propósito de la sección en una oración y nombra el activo del que depende. Detén la construcción. Antes de que exista algo, cambiar de dirección es gratis, así que para trabajos que abarcan varios archivos, presenta el plan y espera la aprobación. Usa el modo de planificación donde el agente lo tenga.

Un orden de ejecución típico: navegación, héroe, franja de confianza, la oferta, historia o proceso, testimonios de clientes, precios cuando sea relevante, preguntas frecuentes, llamado a la acción de cierre, pie de página. Elimina las secciones cuyo propósito no puedas establecer. Para un negocio real, nunca inventes clientes, reseñas o estadísticas; omite la sección o solicita el material genuino.

3. Sistema de diseño

Fija la apariencia una sola vez para todo el sitio y regístrala. Presenta tres direcciones candidatas en una página de vista previa básica, para que la elección se haga visualmente. Cada una empareja una tipografía de título con una tipografía de lectura, asigna cinco colores hexadecimales a roles (página, tinta, primario, acento, silenciado), y resume su estado de ánimo en una oración. Codifica la ganadora en los tokens de tema del proyecto, luego elimina la página de vista previa. Las páginas de exploración son andamios: si se quedan en el proyecto, se publican con el sitio.

references/design-system.md tiene el detalle, el vocabulario y una plantilla.

4. Reglas del proyecto

Coloca las reglas permanentes en el archivo de reglas que el agente actual carga al inicio (CLAUDE.md, AGENTS.md, GEMINI.md). Reutiliza un archivo existente; de lo contrario, crea el correcto para este agente. Dado que se carga en cada sesión, mantenlo breve: qué es el sitio, el stack, el sistema de diseño, algunas reglas fijas.

Valores predeterminados razonables cuando el proyecto aún no tiene opinión:

• Stack: Next.js y Tailwind CSS. Para widgets interactivos (acordeón, diálogo, menú, inputs), instala una biblioteca de componentes accesible como shadcn/ui; no los programes manualmente.
• Cada componente en su propio archivo bajo components/.
• Primero el teléfono. 390px es el ancho que nada puede romper.
• Solo copia genuina. Sin lorem ipsum, sin "Característica uno".
• Obtén aprobación antes de añadir un paquete y explica su propósito.
• Movimiento reducido significa todo el movimiento: desplazamiento suave, transiciones de hover e iconos incluidos, no solo los efectos de exhibición.

Las reglas permanentes pertenecen a este archivo. La tarea actual, no.

5. Construir sección por sección

Pedir una página completa de una vez devuelve una página de secciones mediocres sin un punto de partida claro para las reparaciones. Construye una sección, verifícala, continúa. Una vez que el patrón está establecido, las secciones de cierre más simples (citas, preguntas, llamado a la acción de cierre, pie de página) pueden agruparse. Cualquier cosa visualmente importante se construye sola.

La rutina de sección, para cada sección añadida o reconstruida:

1. Lee primero las reglas de diseño y los tokens.
2. Confirma el contenido. Donde los datos importen (precios, afirmaciones, citas), pregunta. En otros lugares, escribe copia genuina y marca las líneas que inventaste.
3. Dale a la sección un archivo de componente propio.
4. Renderiza a tres anchos: teléfono (390px), tableta (768px), portátil (1440px). Repara desbordamientos, envolturas feas y malos recortes.
5. Compara los espacios arriba y abajo con los de las secciones adyacentes.
6. Cierra con un informe breve: la sección, su ruta de archivo y lo que necesita la vista del usuario.

Invierte el mayor esfuerzo en el héroe, ya que determina si los visitantes se desplazan en absoluto. Especifica cada detalle importante:

• Un título de aproximadamente ocho palabras como máximo que indique lo que se ofrece, una sola oración de apoyo y una navegación que contenga la marca, un puñado de enlaces y un solo botón.
• Un botón principal claro: relleno, de color de acento, vinculado a la acción del brief. La acción secundaria se convierte en un enlace de texto discreto. Dos botones de igual peso indican que no se tomó ninguna decisión.
• Copia colocada lejos del sujeto focal del visual, decidida para escritorio y teléfono de forma independiente.
• Para copia sobre video o fotografía, resuelve la legibilidad localmente con una máscara degradada bajo el texto. No oscurezcas todo el visual.
• Evalúa la primera pantalla a partir de una captura de pantalla a lo ancho de teléfono y escritorio. Una banda grande vacía, un elemento solitario que parece clip art, o un visual demasiado oscuro para distinguirlo significa que el héroe no está terminado, incluso mientras el activo real sigue siendo un marcador de posición: el sustituto debe mantener la composición hasta entonces.

Cada botón va a algún lugar. Cada llamado a la acción necesita un destino real: un enlace a una tienda o proceso de pago, una página de reserva, un formulario, una dirección de correo electrónico. Cuando se desconoce el destino, usa el objetivo honesto más cercano (la sección de producto, un enlace mailto) y enumera cada botón no cableado en tu informe. Un botón que se desplaza silenciosamente a la misma página parece terminado y no lo está.

Con la página ensamblada, desplázate de principio a fin, identifica la sección más débil (siempre hay una) y propón dos alternativas para ella en rutas de vista previa. Una vez que se elige una, elimina las otras variantes y sus rutas.

6. Visuales

Un diseño fuerte no puede rescatar imágenes débiles. Comienza con una lista de tomas corta de alrededor de siete activos y mantén una sola línea de estilo (luz, lente, paleta) constante en todas ellas. Las fórmulas de prompts, la guía de video de héroe y la preparación web viven en references/assets.md.

Sin un generador de imágenes o video conectado, proporciona al usuario los prompts y continúa con marcadores de posición claramente marcados. Nunca gastes créditos de generación sin aprobación.

7. Movimientos cinematográficos

Cinco técnicas están en el menú: un video de fondo lento en el héroe, movimiento vinculado a la posición de desplazamiento, una sección que se fija mientras su contenido cambia, profundidad de paralaje y un objeto 3D renderizado en vivo. Gasta con moderación: el video del héroe y no más de dos del resto, cada uno posicionado donde aclare algo o cree una sensación específica. Usar todas las técnicas a la vez se lee como un reel de demostración, agota al visitante y diluye cada efecto.

Cada técnica necesita alternativas elegantes: un diseño normal bajo movimiento reducido, una imagen estática en teléfonos pequeños y una página que sobreviva si el efecto falla. Después, mide el coste. Las recetas y los límites de seguridad están en references/cinematic-moves.md; léelo antes de escribir código de scroll o 3D.

8. Teléfono, pulido, formulario, lanzamiento

Los teléfonos representan la mayoría de las visitas. Realiza una pasada dedicada a 390px, una pasada de consistencia y una verificación de velocidad; luego conecta el formulario, despliega y trabaja a través de la lista de verificación de lanzamiento. Consulta references/ship.md.

Hábitos de trabajo

Estos se mantienen en todo momento.

• Un cambio por ronda. Cuando se te pida una corrección, altera eso y solo eso. Un diff más amplio que la solicitud oculta qué edición ayudó, y "ordenar" algo con lo que el usuario estaba contento es una regresión.
• Mira antes de informar. Carga la página e inspecciónala en varios anchos antes de darla por terminada. Los diseños pueden cumplir todas las reglas y aun así verse mal.
• Convierte los comentarios vagos en un problema con nombre. "Se siente pesado" es manejable: determina si el espaciado, el peso o el contraste son responsables, dilos y ajusta solo eso. Si el usuario no puede articular una preferencia, coloca dos o tres variantes en rutas de vista previa con una descripción de una línea cada una. Las personas eligen más fácilmente de lo que especifican.
• Rastrea las sorpresas hasta lo que no se especificó. Cuando el resultado no es lo que el usuario esperaba, encuentra la pregunta abierta detrás de él y resuélvela en el archivo de reglas, para que no se parchee a mano de nuevo.
• Corrige los errores en la raíz y declara la causa en una línea.
• Guarda los estados de trabajo. En un proyecto git donde el usuario quiere commits, haz commit después de cada paso de trabajo con un mensaje que tenga sentido semanas después.
• Protege claves y datos. Los secretos pertenecen a .env.local y se mantienen fuera de los archivos fuente y el historial de git. Cuando un formulario se niega a guardar, repara la regla de acceso. Nunca deshabilites la seguridad para que funcione.
• Informa con honestidad. Declara lo que se verificó, lo que no se pudo (un iPhone físico, el dominio de producción) y qué copia es inventada. Una confirmación en pantalla no prueba nada; la fila almacenada sí.
• Verifica versiones. Para GSAP, Three.js, React Three Fiber, Motion y Lenis, consulta la documentación actual sobre versiones compatibles en lugar de confiar en la memoria, y señala la incertidumbre.

Archivos de referencia

Archivo	Léelo cuando
references/design-system.md	Elegir tipografías, colores y espaciado; convertir palabras de estilo vagas en concretas; auditar una página de aspecto genérico
references/assets.md	Escribir prompts de imágenes o video, mantener la consistencia visual, comprimir medios para la web
references/cinematic-moves.md	Añadir un video héroe, historia de scroll fijada, paralaje, acento 3D, video con scroll, o una historia completa de scroll 3D en vivo
references/ship.md	Colocar medios, la pasada de teléfono, pulido, velocidad, el formulario de contacto, despliegue, dominio, SEO y la lista de verificación de lanzamiento