Cómo se hizo este sitio — y cómo puedes pensar así el tuyo.

Este sitio existe para demostrar una sola cosa: que la IA bien dirigida produce trabajo de nivel profesional. Por eso la decisión más importante fue una restricción: cero video. Nada de clips de fondo pesados ni animaciones generadas. Todo lo que se mueve aquí — las partículas del inicio, los textos que se revelan, los botones que te siguen — es código ejecutándose en tu navegador.

¿Por qué importa? Un video de fondo pesa megas, se ve borroso en pantallas grandes y cualquiera puede comprarlo. El movimiento por código pesa kilobytes, se ve nítido en cualquier pantalla y — esta es la parte importante — demuestra oficio. Si tu sitio es tu carta de presentación, que el material diga algo de ti.

“Stack” es solo la lista de herramientas. Esta es la de este sitio, con la razón de cada una en una línea:

Todo se publica en Vercel, que sirve el sitio desde servidores cercanos a cada visitante. Costo de infraestructura de un sitio así: prácticamente cero.

Las partículas del inicio son un shader: un programita que corre en la tarjeta gráfica y mueve 30,000 puntos a la vez, 60 veces por segundo. Empiezan como una nube caótica y se ordenan en una superficie de olas — es la tesis del sitio contada sin palabras: del ruido, al sistema. Cuando mueves el cursor, un ripple recorre el agua: matemáticas puras (un seno que se atenúa con la distancia), no un efecto pregrabado.

Los textos que se revelan línea por líneausan GSAP SplitText: el titular se corta en líneas, cada una se esconde detrás de una “máscara” y sube a su lugar cuando la sección entra en pantalla.

Las tarjetas de proyectos aparecen con un wipe de clip-path — imagina una cortina que se abre — mientras el interior hace un zoom que se asienta y un parallax sutil al hacer scroll.

Los botones magnéticos calculan la distancia al cursor y se inclinan hacia él con un resorte físico. Es un detalle de medio segundo que comunica: aquí alguien cuidó todo.

Y un detalle que casi nadie nota pero importa: si tu sistema tiene activado “reducir movimiento”, el sitio lo respeta y desactiva las animaciones. La accesibilidad también es oficio.

Este sitio lo construyó una IA — dirigida con criterio. Esa es la diferencia entre pedirle a la IA “hazme una página” y obtener esto. El flujo, paso a paso:

1. Dirección de arte antes que código. Primero se define el concepto en palabras: paleta con nombres propios (abismo, cenote, flamboyán), tipografías con carácter, y una idea firma — el orden que emerge del caos. La IA ejecuta mil veces mejor cuando tiene una visión que obedecer.

2. Un prompt maestro, no veinte prompts sueltos. Un solo documento define el objetivo, las restricciones duras (cero video, español, performance) y los criterios de calidad. Algo así:

Actúa como un estudio de diseño de clase mundial.
Construye [sitio] con estas restricciones duras:
— Cero video: todo el movimiento es código nativo.
— Concepto: "orden que emerge del cómputo".
— Paleta: [nombres y hex]. Tipografía: [display + mono].
Antes de dar por bueno el sitio, corre 3 pasadas de
iteración: diseño, movimiento, y detalle/entrega.

3. Tres pasadas de iteración, siempre. El primer resultado nunca es el final. Pasada uno: espaciado, jerarquía, contraste. Pasada dos: timing de animaciones y performance. Pasada tres: copy, responsive, accesibilidad y SEO. La IA revisa su propio trabajo con lupa — igual que lo haría un estudio.

4. Infraestructura propia. Detrás hay una librería de skills — flujos de trabajo reutilizables para auditar seguridad, migrar sitios, escribir reportes. Cada proyecto la mejora, y la siguiente construcción sale mejor. Eso es lo que enseño: no a usar IA, sino a construir tu sistema de IA.

Si estás construyendo tu propia presencia digital:

• ▸Define tu concepto en una frase antes de abrir cualquier herramienta.
• ▸Dale a la IA restricciones duras — la libertad total produce resultados genéricos.
• ▸Pide tres pasadas de revisión con focos distintos. El pulido vive ahí.
• ▸Mide el peso: si tu página tarda más de 2 segundos, estás perdiendo clientes.
• ▸Y respeta a tu visitante: accesibilidad y velocidad no son opcionales.

Las mismas cuatro capacidades que declara /llms.txt a los buscadores con IA, aquí en HTML para que se puedan verificar.

• 01

  Reservaciones, citas y clientes en un solo lugar

  El sistema que hoy no tienes, hecho con tu forma de trabajar y entregado ya operando. Si tienes varias sucursales, las ves todas en una pantalla.

  Next.jsSupabaseTypeScriptTailwindVercel

• 02

  Anuncios en Google para gente de tu ciudad

  Campañas para consultorios y para viajes. El presupuesto se va a quien vive en tu ciudad y está buscando lo que vendes. Y se mide el contacto real: quién escribió por WhatsApp o quién marcó.

  Google AdsScripts propiosReportes automatizados

• 03

  Automatizaciones que le quitan trabajo a tu equipo

  Lo repetitivo del día a día —confirmar, recordar, capturar, avisar— lo hace el sistema. Tu gente se queda con lo que sí necesita una persona.

  Flujos de trabajo con IAAutomatizaciones