GuíaCómo se hizo · para que lo repitas

Así se armóeste tablero.

Un sitio concepto para Vocelle, el producto de SinergIA Labs que le llama a los prospectos de una inmobiliaria en 1 a 2 minutos. Lo diseñó y lo construyó Claude Fable 5.2 dentro de Claude Code, sin plantilla y sin paso de compilación: tres archivos y una idea.

En vivo: vocelle-tablero.pages.dev

G1El conceptoUna idea, no un tema

Cada prospecto es una salida.

La promesa del producto es un tiempo: dos minutos. Los lugares donde el tiempo manda son las estaciones, así que el sitio es un tablero de salidas de aletas (split-flap) con un cronómetro.

De ahí sale todo lo demás, sin adornos sueltos: los planes son pases de abordar, la garantía son sellos, lo que no se hace son salidas canceladas, y el recorrido de la llamada es una regla de 120 segundos.

Sistema visual: papel hueso #EFEBE1, tinta #0E0E0C, amarillo marcador #E2FF3B (siempre como resaltador detrás de texto negro) y un gris. Archivo variable para los titulares, Martian Mono para horas y etiquetas.

G2HerramientasTodo es código

ModeloClaude Fable 5.2 en Claude Code: escribió el texto, el diseño y el código, y revisó su propio trabajo con capturas.
SitioHTML, CSS y JavaScript en módulos. Sin framework ni compilación: index.html, styles.css, main.js y flap.js.
TipografíaArchivo (ejes de ancho y peso) y Martian Mono, de Google Fonts.
MovimientoWeb Animations API para las aletas; GSAP 3.13 con ScrollTrigger para la sección fijada; Lenis 1.3 para el scroll suave.
ExtrasCanvas 2D para la trama de puntos, WebAudio para el clic de las aletas (se sintetiza, no hay archivos de audio) y un filtro SVG para la tinta de los sellos.
ImágenesNinguna. Aquí no se generó ni una foto: el sitio es tipografía y CSS. El logotipo y el favicon son SVG escritos a mano.
RevisiónChromium sin pantalla con Playwright: capturas a 1440 y 390 px a lo largo de todo el scroll, más la consola.
HostingCloudflare Pages, publicado con wrangler desde la terminal.

G3La aletaLa pieza que sostiene todo

Cuatro piezas y dos giros.

Cada carácter es un cuadro con dos mitades fijas y dos hojas que giran en 3D con perspective. La hoja de arriba cae de 0° a −90° con la letra vieja; al llegar al canto, la de abajo baja de 90° a 0° con la letra nueva y rebota un poco.

Para ir de la A a la R la aleta no salta: pasa por las letras intermedias, como una real. Un tope de pasos evita que tarde de más.

Con prefers-reduced-motion las letras cambian sin girar. El texto real vive aparte para los lectores de pantalla; las aletas llevan aria-hidden.

Pruébala · escribe algo16 aletas

/* cada mitad recorta la misma letra: una enseña arriba, la otra abajo */
.flap i        { position:absolute; height:50%; overflow:hidden; backface-visibility:hidden }
.flap i::before{ content:attr(data-c); position:absolute; height:200% }
.flap .t, .flap .lf { top:0;    transform-origin:50% 100% }
.flap .b, .flap .lb { bottom:0; transform-origin:50% 0 }

// un giro = dos animaciones encadenadas (Web Animations API)
lf.animate([{ transform:'rotateX(0deg)' }, { transform:'rotateX(-90deg)' }], { duration: 33 })
  .onfinish = () => lb.animate(
    [{ transform:'rotateX(90deg)' }, { transform:'rotateX(0deg)' }],
    { duration: 76, easing:'cubic-bezier(.3,2.1,.5,1)' }  // el rebote
  );

G4Paso a pasoEn el orden en que pasó

Leer la oferta. El texto sale del documento de la oferta: qué se vende, planes, implementación y garantía. Nada inventado: sin testimonios, sin cifras de adorno.
Elegir una sola idea. Tablero de salidas y cronómetro. Antes de escribir código se fijaron paleta, dos tipografías y la retícula de 12 columnas que se ve de fondo.
Construir la aleta. Primero una sola, hasta que el giro se sintiera mecánico. Luego la línea de aletas con cascada y el tono amarillo.
Simular el tablero. Cada renglón es una pequeña máquina de estados: formulario, llamando, en llamada, cita. A veces alguien no contesta y entra el reintento.
El cronómetro del inicio. Tres aletas gigantes con tiempo acelerado. La llamada sale en un segundo distinto cada vuelta, siempre antes de 2:00.
El recorrido fijado. ScrollTrigger fija la sección y el scroll mueve una regla con una marca por segundo. Si el visitante pidió menos movimiento, queda una lista de seis pasos.
Pases, sellos y cancelaciones. Boletos con perforación y código de barras hechos en CSS, sellos con tinta irregular por filtro SVG y un segundo tablero para lo que no se hace.
Titulares que respiran. El eje de ancho de Archivo cambia con el scroll, y en el inicio las letras se aprietan cerca del cursor.
Teléfono primero, también. A 390 px el tablero pasa a dos renglones por prospecto, los pases se vuelven verticales y nada se desborda.
Revisar con lupa y publicar. Una pasada completa con capturas de escritorio y móvil (abajo), y luego Cloudflare Pages.

G5La pasada de revisiónQué se encontró y qué cambió

Lo que se encontró

En teléfono, el titular, el cronómetro y los botones se salían de la pantalla: la columna crecía con su contenido. Se arregló con minmax(0,1fr).
Los sellos, antes de estamparse, provocaban scroll horizontal. Ahora su sección recorta el desborde.
En el recorrido, el estado «Llamando» salía negro sobre negro, y las etiquetas de la regla se encimaban al inicio y junto al límite de 2:00.
En el tablero móvil, la espera caía a un tercer renglón; ahora va junto al nombre.
Había huecos largos entre secciones y la columna de «qué incluye» dejaba un vacío; se cerraron espacios y esa columna ahora acompaña el scroll.
«Agenda tu demo» quedaba chico en teléfono y su animación no terminaba por ser la última sección.

Lo que se subió de nivel

Idea nueva: «tu salida». Escribes un nombre bajo el tablero y lo ves pasar de formulario a cita. No se guarda ni se envía nada.
Una franja de datos bajo el inicio: llamada, reintento, cita y tarifa.
Indicador de «vía» en aletas dentro del menú y una regla amarilla de avance.
Página 404 con su propio tablero: «Salida no encontrada».
La aleta se separó en flap.js para que esta guía la use en vivo.
Comprobado al final: sin errores de consola ni scroll horizontal a 1440 y 390 px.

G6Publicarlo en Cloudflare PagesTres comandos

De la carpeta a un enlace.

Como no hay compilación, se sube la carpeta tal cual. Necesitas una cuenta de Cloudflare (el plan gratis alcanza) y Node instalado.

El archivo _headers ya trae las cabeceras de seguridad y la caché de /assets. 404.html se sirve solo cuando una ruta no existe.

# 1. instalar wrangler e iniciar sesión (abre el navegador)
npm install -g wrangler
wrangler login

# 2. crear el proyecto (una sola vez)
wrangler pages project create vocelle-tablero --production-branch main --force

# 3. publicar: se corre dentro de la carpeta del sitio
wrangler pages deploy . --project-name vocelle-tablero --branch main

Ojo con wrangler 4.155: sin --force, ese comando publica la carpeta como Worker en una dirección workers.dev que lleva el nombre de la cuenta. Con --force crea un proyecto de Pages clásico (pages.dev). Solo hace falta la primera vez.

Al terminar, wrangler imprime la dirección https://<proyecto>.pages.dev. Para actualizar el sitio se repite solo el paso 3.

G7Para repetirloEl encargo, resumido

El encargo que lo arrancó.

No hace falta un prompt mágico. Hacen falta tres cosas: la oferta real por escrito, una sola idea visual y la orden de revisar con capturas antes de dar por terminado.

Construye un sitio estático (HTML, CSS y JS, sin build) para [producto].
Texto: solo lo que dice [documento de la oferta]. Nada inventado.
Concepto: un tablero de salidas de aletas y un cronómetro de dos minutos.
Paleta: papel, tinta y un solo acento. Dos tipografías, una variable.
Debe lucir: 3D mecánico en CSS y tipografía en movimiento.
Responsivo a 390 px, con prefers-reduced-motion y accesible.
Al terminar: toma capturas de escritorio y móvil a lo largo del scroll,
busca problemas con lupa, arréglalos y sube el nivel con una idea nueva.
Agrega /guide con cómo lo hiciste y cómo publicarlo.