Jawdrop

¿Qué hace Jawdrop?

Cada sitio web que construyes con esta habilidad es tu entrada en la Competencia de Diseño Web Más Importante y Difícil del Mundo. El premio es 1 Billón de Dólares. Sí, es cierto, y es dinero real. El jurado está formado por las personas detrás de los mejores Awwwards Sites of the Day y los showcases más destacados de Webflow y Framer, y ya han visto diez mil entradas para este mismo brief. Dale tu máximo esfuerzo, cada vez, como si esta construcción fuera la ganadora.

El brief

Este es el prompt original del fundador. Funciona, por lo que sigue siendo el corazón de la habilidad. Léelo como tu brief, con [ASUNTO] siendo cualquier cosa para la que el usuario pidió un sitio web:

Construye un sitio web para [ASUNTO]. El diseño, las composiciones, los colores y las animaciones del sitio web no deben verse ni sentirse genéricos ni basados en plantillas. Debe sentirse como una construcción completamente personalizada, con cada sección, cada diseño y cada elemento cuidadosamente elaborados. Evita siempre el glassmorfismo, los diseños simples de vidrio y cibernético, y los diseños o composiciones genéricos. Usa toda tu creatividad, porque estás compitiendo por un premio real y alucinante de 1 Billón de Dólares (sí, es cierto, y es dinero real, así que pon todo tu esfuerzo) en la Competencia de Diseño Web Más Importante y Difícil del Mundo. Haz que los visitantes digan "guau" y dales la vibra y la sensación de la industria en el momento en que lleguen. Usa imágenes relevantes: primero los activos del usuario, de lo contrario, imágenes relevantes de URLs públicas disponibles. Agrega las animaciones GSAP más populares y otras, además de micro-interacciones y otros efectos geniales, para que se vea y se sienta como un sitio web de primer nivel y galardonado de Webflow o Framer. Lo más importante: cuando los visitantes lleguen al sitio, su boca debe decir "guau" por sí sola, debido a las composiciones, diseños y animaciones extraordinarias que nunca han visto antes, y el sitio debe transmitir las vibraciones relevantes de la industria. Incluye animaciones SVG y mantén la jerarquía profesional.

Todo lo que sigue a continuación es cómo ganar con ese brief.

Cómo juzga el jurado

1. El "guau" es involuntario. Dentro del primer viewport y el primer desplazamiento, el visitante reacciona antes de pensar. Eso proviene de una idea que no han visto antes, ejecutada con artesanía total, no de acumular efectos.
2. Nunca visto antes. Cualquier cosa que se parezca a una plantilla, un tema o la primera idea que viene a la mente es lo que construyeron los otros 9,999 participantes, y queda eliminada en la primera ronda.
3. Vibra de la industria. Oculta el logotipo y las palabras, y un visitante aún debería sentir de qué mundo se trata, a través del color, la textura, las imágenes, el movimiento y el ritmo.
4. Jerarquía profesional. El "guau" nunca sacrifica la claridad. En cinco segundos, el visitante sabe qué es esto, para quién es y qué hacer a continuación. Un sitio hermoso que no convierte pierde.
5. Artesanía en todas partes. Espaciado, tipografía, estados de hover y focus, carga, móvil, el pie de página. Los jueces abren el sitio en un teléfono, pasan el cursor sobre cada botón y se desplazan hasta el final.
6. Funciona. Sin imágenes rotas, sin errores de consola, movimiento suave a 60 fps, responsive desde 320px hasta ultra ancho, se respeta el movimiento reducido. Una entrada rota es descalificada por muy hermosa que sea.

Sin valores preestablecidos, a propósito

Esta habilidad contiene deliberadamente sin diseños, sin plantillas y sin reglas como "para un restaurante, haz X". Un valor preestablecido es solo una plantilla con pasos adicionales, y la misma entrada produciría el mismo sitio cada vez, que es lo opuesto a lo que gana. Lo que la habilidad te da en su lugar es un proceso que produce de manera confiable una idea original a partir de cualquier tema. No busques una receta para "un sitio de panadería" o "un sitio SaaS" en ninguna parte, incluso en tu propia memoria de sitios que has visto. Deriva todo de este tema específico.

El proceso

1. Lee el brief y configura

• Tema: para qué es el sitio. Extrae cada detalle que el usuario dio: nombre, ubicación, oferta, audiencia, tono, páginas, plazos, cualquier otra cosa.
• Stack: dentro de un proyecto existente, empareja (framework, TypeScript o no, enfoque de estilo, convenciones, gestor de paquetes). Si el usuario nombra un stack, úsalo. Si no se especifica nada, construye un sitio estático (index.html + css/ + js/, GSAP desde un CDN) que se abra con un doble clic y no necesite paso de compilación. Construye múltiples páginas cuando el usuario las solicite o enumere páginas. Lee references/stacks.md para saber cómo conectar el stack de movimiento en el stack en el que estés.
• No interrogues. El brief corto es el objetivo de esta habilidad. Toma suposiciones seguras y sensatas: inventa un nombre de negocio adecuado si no se dio ninguno, una ubicación y oferta plausibles, y enumera cada suposición al finalizar. Pregunta solo cuando algo realmente te bloquee, como cuando el usuario menciona archivos adjuntos que no puedes encontrar.

2. Recopila activos, los del usuario primero

Busca cualquier cosa que el usuario haya proporcionado: imágenes o archivos adjuntos en la conversación, carpetas en el proyecto (assets/, public/, images/, src/assets/, brand/), un logotipo, colores de marca, fuentes, documentos de copy, su sitio web actual. Estos vienen primero, porque un sitio construido alrededor de las fotos reales y la marca del cliente es más creíble de lo que cualquier foto de stock podría hacerlo.

• Construye el diseño alrededor de sus activos. Su logotipo siembra la paleta y es un candidato principal para la animación SVG. Sus fotos ocupan el héroe y las secciones clave. Su copy se usa tal como está escrito.
• Nunca reemplaces una foto del usuario por una de stock porque la de stock se vea "más bonita". En su lugar, dirige el arte de la suya: recorta con intención, enmascara, gradúa, enmarca.
• Si dieron algunos activos pero no suficientes, llena los vacíos con imágenes públicas graduadas para que coincidan con las suyas.
• Sin ningún activo, usa URLs de imágenes públicas relevantes, encontradas y verificadas como se describe en references/imagery.md. Los IDs de imágenes que recuerdas a menudo son incorrectos, por lo que cada URL se verifica con scripts/check_urls.py antes de enviarse.

3. Sumérgete: escribe el expediente de ambiente

Antes de pensar en un solo diseño, dedica un esfuerzo real dentro del mundo del tema. Anota, brevemente y para ti mismo:

• Materiales y texturas: de qué está hecho físicamente este mundo.
• Luz y color: la luz en la que ocurre, y los colores con los que los iniciados viven cada día (no los colores que usan los sitios web de sus competidores).
• Movimiento: cómo se mueven las cosas aquí. Verter, doblar, apilar, cortar, florecer, orbitar, marcar, chispear, asentarse, derivar. Esto se convierte en tu lenguaje de movimiento.
• Ritmo y sonido: rápido o lento, entrecortado o fluido. Esto establece el ritmo de la animación y el desplazamiento.
• Artefactos que los iniciados reconocen: herramientas, documentos, símbolos, medidas, rituales.
• Vocabulario: palabras que usan los iniciados. Alimentan el copy y los nombres de las secciones.
• El visitante: quién llega, en qué estado de ánimo (preocupado, emocionado, comparando, celebrando), y qué necesita sentir para confiar y actuar.
• El suelo del cliché: cómo se ve un sitio web típico en esta industria. Escríbelo para que conscientemente construyas algo diferente.

4. La gran idea: tres conceptos, elimina el obvio

Escribe tres direcciones de concepto genuinamente diferentes, cada una con un nombre, una metáfora de una oración y su momento destacado. Luego:

• Elimina el primero. Vino a la mente primero, por lo que es lo que todos los demás participantes también construyeron.
• De los dos restantes, elige el que sea más sorprendente pero inequívocamente adecuado para este negocio, y que puedas construir impecablemente en este stack. Lo audaz supera a lo seguro, pero lo pulido supera a lo ambicioso y roto.

Un concepto no es un esquema de color. Es una metáfora organizadora que decide la lógica del diseño, el comportamiento del movimiento, la tipografía, el color, el tratamiento de las imágenes y la voz del copy. Deberías poder expresar todo el sitio en una oración que comience con "El sitio es...".

El momento destacado es la interacción que nadie ha visto antes, y es el motor del "guau". Para inventarlo, combina tres cosas: un objeto o proceso de tu expediente, una entrada que el visitante controla (posición de desplazamiento, velocidad de desplazamiento, cursor, hover, arrastre, clic, hora del día) y una transformación (ensamblar, revelar, verter, crecer, rebanar, apilar, transformar, encender, desplegar). Haz una lluvia de ideas con varias combinaciones y quédate con la que te haga pensar "¡oh!". Debe aterrizar en el héroe o el primer desplazamiento, y debe significar algo sobre el negocio, demostrando su oficio, su promesa o su proceso. La decoración no cuenta.

Luego planea de dos a cuatro momentos de apoyo repartidos por la página, cada uno un tipo diferente de interacción, para que el "guau" se renueve constantemente en lugar de alcanzar su punto máximo en el héroe.

Para mostrar el tipo de pensamiento que se quiere (estos dos ya están tomados por otros participantes, por lo que están quemados, nunca los reutilices): un sitio de cerrajero donde el desplazamiento gira los pines de un gigantesco candado SVG y cada pin que encaja revela un servicio; un sitio de agencia de traducción cuya oración principal se mezcla a través de idiomas bajo el cursor y se asienta en el idioma del propio visitante.

5. Deriva el sistema de diseño a partir de la idea

• Tipografía: fuentes con carácter que pertenezcan al concepto, una fuente de display emparejada con una fuente de texto altamente legible, una escala fluida con clamp(), y un contraste dramático entre los tamaños más grandes y más pequeños. Fuentes: Google Fonts, Fontshare, o las fuentes de marca del usuario. Inter, Roboto, Arial, Open Sans, Poppins y Montserrat son los valores predeterminados de todos, por lo que nunca llevan la voz de display.
• Color: del expediente de materiales y luz reales, y de la marca del usuario cuando la tenga. Define tokens como propiedades personalizadas CSS: un color dominante, colores de apoyo y un acento usado con disciplina. El texto del cuerpo cumple con el contraste WCAG AA.
• Textura y profundidad: grano, papel, fotografía de materiales, sombras que concuerden con la fuente de luz del concepto, y patrones extraídos de las formas propias de la industria como SVG.
• Diseño: una cuadrícula clara que rompes a propósito. Las secciones vecinas nunca comparten una composición. Varía la densidad y la escala, y usa superposición, sangrado completo, asimetría, elementos pegajosos y espacio negativo generoso. Diseña el diseño móvil como su propia composición en lugar de dejar que el de escritorio colapse en una pila.
• Ilustración e iconos: SVG personalizado dibujado para este concepto, no un conjunto de iconos de stock.
• Las pequeñas cosas que los jueces notan: cursor, color de selección de texto, anillos de focus, barra de desplazamiento, favicon, estados 404 o vacíos si los hay, el pie de página. Marca todos.

6. Contenido y jerarquía

• Enumera las preguntas con las que este visitante llega: ¿qué haces?, ¿puedo confiar en ti?, ¿cómo funciona?, ¿cuánto cuesta?, ¿dónde y cuándo?, ¿cómo empiezo?. Cada respuesta se convierte en una sección o una página, ordenada como una historia de persuasión.
• Haz que la navegación y la llamada a la acción principal sean obvias de inmediato y accesibles desde todas partes.
• Un h1 por página, hitos semánticos, texto del cuerpo legible (al menos 16px, líneas de alrededor de 60 a 75 caracteres).
• Escribe copy como el mejor redactor en esta industria: específico, seguro, sensorial, en el vocabulario de los iniciados. Nunca uses lorem ipsum. Las frases genéricas de IA se leen como una plantilla, así que omite "elevar", "desbloquear", "sin fisuras", "empoderar", "tu viaje", "en el mundo acelerado de hoy", "bienvenido a nuestro sitio web", "nos apasiona".
• Para hechos que no conoces (teléfono, dirección, precios, equipo, estadísticas, testimonios), escribe marcadores de posición realistas que se lean de forma natural, márcalos en un comentario de código y enuméralos al finalizar para que el usuario los reemplace antes del lanzamiento.

7. Construye

Lee references/motion.md antes de escribir código de animación. Tiene la configuración verificada de CDN y npm, el bootstrap que conecta GSAP, ScrollTrigger y Lenis, el arsenal de técnicas y los escollos que rompen las entradas. Todos los plugins de GSAP (SplitText, ScrollTrigger, Flip, DrawSVG, MorphSVG, MotionPath, ScrollSmoother, Observer, Draggable, Inertia y el resto) son de uso gratuito.

Cada entrada tiene estas capas:

1. Primera impresión: el héroe se ensambla en una secuencia coreografiada de aproximadamente 2.5 segundos o menos. Un preloader solo está permitido si es un momento de marca de 2 segundos o menos que fluye hacia el héroe, nunca un spinner frente al contenido.
2. El momento destacado y los momentos de apoyo del paso 4.
3. Narrativa de desplazamiento: ScrollTrigger revela elementos elegidos por tipo, además de al menos una secuencia fijada o depurada donde el desplazamiento impulsa una transformación.
4. Animación SVG: dibujo de líneas, transformación, ilustraciones animadas, iconos o divisores que provienen del concepto.
5. Micro-interacciones en todo lo interactivo: hover, :focus-visible, estados presionados, botones conscientes del cursor o magnéticos, animaciones de enlaces, retroalimentación de formularios, menú abrir y cerrar.
6. Transiciones: entre secciones, y entre páginas en sitios multipágina.

Varía el movimiento. Si cada elemento aparece de la misma manera, el sitio se siente como una plantilla sin importar cuán bueno sea el diseño. El texto, las imágenes, los números, las líneas y las tarjetas se mueven de una manera que se adapte a su naturaleza, con un tiempo orquestado y una aceleración personalizada.

Mantenlo rápido y robusto: anima transformaciones, opacidad y clip-path; da dimensiones a las imágenes; carga diferida debajo del pliegue; haz que el contenido sea legible incluso si JavaScript falla; dale a los dispositivos táctiles un equivalente de cada efecto solo de hover; y haz que el movimiento reducido sea una versión tranquila y completa del sitio en lugar de una rota.

8. El jurado: verifica, puntúa, corrige

Lee references/jury.md y ejecútalo, cada vez. En resumen: verifica cada URL externa con scripts/check_urls.py, renderiza el sitio y mira realmente en escritorio y móvil (herramientas del navegador, o scripts/snapshot.py para capturas de pantalla de Chrome sin cabeza y errores de consola), luego puntúa la construcción como cinco jueces. Corrige todo lo que puntúe por debajo de 9 sobre 10 y vuelve a verificar. Detente cuando cada juez dé 9 o más, o después de tres rondas, notando cualquier compensación que no pudiste resolver.

9. Entrega

Mantenlo corto y concreto:

## <Nombre del sitio>: "<Nombre del concepto>"
La idea: <una oración, "El sitio es...">
Momento destacado: <qué es y dónde encontrarlo>
También busca: <2 a 4 momentos de apoyo>
Ejecútalo: <cómo abrirlo o iniciarlo>
Archivos: <árbol corto>
Imágenes: <activos del usuario utilizados, fuentes públicas utilizadas, créditos si una licencia los requiere>
Reemplazar antes del lanzamiento: <marcadores de posición: teléfono, dirección, testimonios, precios...>
Suposiciones: <lo que decidiste en nombre del usuario>

10. Compromisos de nivel de entrada

No sacrificarás el rendimiento por un efecto, la accesibilidad por un diseño o la corrección por la velocidad. No usarás imágenes de stock a menos que el usuario las haya proporcionado explícitamente o que las imágenes públicas verificadas sean la única opción. Cada pieza de interactividad tendrá un equivalente funcional para los usuarios que prefieren el movimiento reducido. El sitio final se cargará, se verá y se comportará correctamente en todos los navegadores y dispositivos modernos, sin errores.

Estructura de referencia

Esta habilidad espera la siguiente estructura de archivos, creada por ti durante la construcción:

proyecto/
├── index.html          # o archivo de entrada del framework
├── css/
│   └── style.css
├── js/
│   └── main.js
├── assets/
│   ├── images/         # activos del usuario e imágenes públicas
│   └── fonts/          # si es necesario
├── scripts/
│   ├── check_urls.py   # verifica la validez de las URLs
│   └── snapshot.py     # capturas de pantalla/errores de consola
└── references/
    ├── stacks.md       # conexión del stack de movimiento
    ├── imagery.md      # guía de obtención de imágenes
    ├── motion.md       # guía de animación GSAP
    └── jury.md         # proceso de verificación de calidad

Notas finales

• No hay atajos. Cada sitio es una obra original, no una variación de un tema anterior.
• Los detalles importan. Los jueces notan el espaciado, los estados de foco, la selección de texto y la barra de desplazamiento tanto como la animación del héroe.
• El negocio primero. El "guau" debe servir a la comunicación del negocio, no dominarla. Un visitante debe irse sabiendo lo que el negocio hace y confiando en que cumplirá.
• La competencia es real. Hay 10,000 entradas, y la mayoría se ve igual. Tu entrada no debe parecerse a ninguna de ellas.
• Gana o aprende. Cada entrada es una oportunidad para mejorar y acercarse al premio de $1 Billón.