En mi servidor de hosting de Opus Growth
[nombre del servidor], crea un sitio de producto oscuro y de varias páginas para
[nombre del producto] que cuente su historia a medida que el visitante hace scroll. Producto:
[qué hace, para quién es]. Los tres pasos que sigue un usuario en el producto:
[tres pasos]. Funciones clave:
[4 a 6 funciones]. Contacto:
[email],
[teléfono],
[número de WhatsApp],
[dirección si hay]. Dominio:
[dominio]. Preferencia de color:
[color o "tú eliges"]. Capturas o fotos reales del producto:
[enlaces o "ninguna"].
Páginas: inicio (/), producto (/urun/), nosotros (/hakkimizda/), contacto (/iletisim/), privacidad (/gizlilik/) y 404.html. Secciones de la home en orden: hero (h1, descripción de dos frases, dos botones, imagen del producto), la historia del producto como elemento distintivo, funciones, para quién es, FAQ y una llamada a la acción final. Sin formulario en la página de contacto; usa email, teléfono y un enlace de WhatsApp con mensaje prellenado, porque el servidor solo sirve archivos estáticos.
Estilo: movimiento oscuro. Fondo oscuro, un único color de acento contenido (no neón), una grotesca display compacta de Fontshare (por ejemplo Cabinet Grotesk) y una fuente de texto serena (por ejemplo Switzer). Sin degradados y sin WebGL; guarda la audacia para la historia del producto.
Reglas de movimiento (la parte más difícil, síguelas al pie de la letra):
1. Librerías: GSAP 3.13 core, ScrollTrigger, SplitText y Lenis. Descárgalas de jsdelivr a `assets/vendor/` con site_fetch y fija la versión. Cárgalas solo en las páginas de inicio y producto; las páginas de nosotros, contacto y privacidad no llevan ningún script. No cargues Swiper.
2. No las añadas con `<script defer>`. Pon un pequeño loader al final de la página: tras el evento load espera dos llamadas a requestAnimationFrame y luego a requestIdleCallback, añade los scripts en orden con async=false y no descarga nada si `<html>` no tiene la clase `anim`. En la demo, las librerías con defer empujaron el LCP móvil a 3,2 s y dejaron Performance en 92; con este loader llegó a 99.
3. Un script de una línea en `<head>` añade la clase `js` a `<html>`, y la clase `anim` salvo que prefers-reduced-motion sea "reduce". Define los estados iniciales ocultos solo bajo `.anim`, de modo que el contenido sea visible desde el principio sin JS o para quienes prefieren menos movimiento, y que las librerías nunca se descarguen para ellos. Como red de seguridad por si una librería no carga, añade una animación CSS que haga visibles todos los elementos ocultos a los 2,5 s. Si el JS llega más tarde, no vuelvas a ocultar contenido visible; construye solo la historia fijada.
4. Entrada de títulos con SplitText: el h1 de la primera pantalla es el elemento LCP, nunca lo empieces oculto. El h1 empieza visible en un color atenuado que aún cumple el contraste AA, y SplitText lleva sus líneas al color completo una tras otra (con las opciones mask y aria activadas). Mantén la entrada de líneas enmascaradas que suben para los h2 más abajo y reprodúcela con el scroll mediante ScrollTrigger.
5. Elemento distintivo: en la historia del producto, usa pin y scrub de ScrollTrigger mediante gsap.matchMedia solo a partir de 768 px de ancho (scrub en torno a 0,6, end "+=180%"). A la izquierda, los tres pasos se activan uno a uno; a la derecha, la pantalla del producto se va completando paso a paso. No atenúes los pasos inactivos con opacity; cambia solo el color del título y la línea del borde. En la demo, los pasos atenuados con opacity fallaron en contraste en escritorio y bajaron Accesibilidad a 95. En móvil no hay pin; los pasos aparecen en el flujo normal. Sin JS, la pantalla del producto muestra su estado final.
6. Activa Lenis solo en dispositivos `(pointer: fine)` para que los táctiles conserven el scroll nativo. Mueve Lenis con gsap.ticker y lleva el foco al destino después de desplazarte a un enlace interno.
7. La pantalla del producto es una figura decorativa con aria-hidden y un figcaption que dice qué muestra. Toda interacción funciona con el teclado y el anillo de foco permanece visible.
Configuración y trampas conocidas (cada una bajó una puntuación en las mediciones de la demo, no te las saltes):
1. Si ya hay un sitio en producción en el servidor, avísame primero, porque la configuración sobrescribe index.html y la carpeta assets. Previsualiza scaffold_site con confirm=false y llámalo con confirm=true tras mi aprobación. Luego lee site_design_guide y site_seo_guide. Antes de escribir código, pon la dirección de diseño (tipografía, color, rejilla, elemento distintivo, lenguaje de movimiento y las librerías que NO se cargarán) en un breve ART.md fuera de assets y muéstramelo.
2. Compila Tailwind en lugar de cargarlo desde el CDN. Instálalo con site_run_command y background=true: `npm i -D tailwindcss@3`, y haz seguimiento con site_command_status. Las rutas content de `tailwind.config.js` deben cubrir todos los archivos HTML, las plantillas y cualquier archivo JS que escriba nombres de clase. `_src/tw.css` contiene la línea `@import "../assets/app.css";` y las tres líneas `@tailwind`; compílalo en un único archivo con `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify`. Elimina el script cdn.tailwindcss.com y el tailwind.config en línea de todas las páginas y enlaza solo `/assets/site.css`. Recompila después de cada cambio de HTML.
3. Aloja las fuentes tú mismo. Lee el CSS de las familias de Fontshare que elegiste, descarga el archivo woff2 de cada peso en `assets/fonts/` con site_fetch y escribe las reglas @font-face con `font-display: swap` en `assets/app.css`; design-check busca ahí una fuente personalizada. Comprueba el nombre font-family en el CSS que descargaste, porque Fontshare puede devolver otra familia cuando un peso no existe. Haz preload de la fuente del título de la primera pantalla y de la fuente de texto en cada página con `<link rel="preload" as="font" type="font/woff2" crossorigin>`; en la demo esto eliminó el desplazamiento de diseño causado por el cambio de fuente (CLS de 0,024 a 0). La mayoría de las fuentes de Fontshare no tienen el glifo ₺, así que escribe "TL" para los precios.
4. Haz el menú y el pie de página en HTML estático. No cargues chrome.js ni site.config.js en las páginas. Escribe un pequeño `chrome-stamp.mjs` que lea la lista de navegación de site.config.js y estampe `_src/header.tpl` y `_src/footer.tpl` entre los marcadores `<!-- nav:start --><!-- nav:end -->` y `<!-- footer:start --><!-- footer:end -->` de cada página, añadiendo aria-current="page" al enlace actual. No des a las plantillas extensión .html y usa marcadores como `
[[NAV]]` en lugar de `{{...}}`, o de lo contrario design-check y seo-check las leerán como páginas sin terminar. Construye el menú móvil sin JS usando `<details>`. Mantén el nombre del negocio, la dirección y el teléfono en el pie como texto plano.
5. Convierte las imágenes al descargarlas con site_fetch: escribe la misma foto en archivos separados con resize="480x", "800x" y "1200x", image_format="webp", quality=65. Da a cada `<img>` srcset, sizes, width y height. La imagen principal de la primera pantalla lleva fetchpriority="high" y nunca es lazy; el resto lleva loading="lazy" decoding="async". Si la imagen principal llena la pantalla del móvil, sirve un recorte más ancho y pequeño en móvil con `<picture>` (en la demo el hero móvil pasó de 89 KB a 43 KB).
6. Crea un favicon PNG de 48 px a partir del logo con site_fetch y añade `<link rel="icon">` a cada página. Sin él, el navegador registra un 404 y Best Practices baja a 96.
7. Reglas del validador HTML: empieza cada documento con un `<!DOCTYPE html>` en mayúsculas (los archivos iniciales del kit usan minúsculas), usa ` ` para los espacios en el texto visible de los enlaces tel:, no uses nunca un atributo style="" y da a cada botón type="button".
SEO, AEO y GEO:
1. Usa URLs de directorio con barra final (/urun/, /hakkimizda/, /iletisim/, /gizlilik/). Rellena el bloque seo de site.config.js y ejecuta `node seo-stamp.mjs`. Escribe el schema específico de cada página (home WebPage y FAQPage; producto SoftwareApplication y FAQPage; nosotros AboutPage; contacto ContactPage; BreadcrumbList en las páginas interiores. Para una empresa de software sin tienda física, pon localBusiness:false en site.config.js) en bloques `<script type="application/ld+json">` separados y enlázalo con el grafo base mediante @id. No entierres BreadcrumbList dentro de un @graph; dale su propio bloque, porque es la única forma en que seo-check lo ve.
2. Títulos de 48 a 60 caracteres (seo-check marca como error todo lo que pase de 65), descripciones de 145 a 158 caracteres, un h1 por página. Cada página necesita al menos 150 palabras de contenido principal; las páginas de contacto y privacidad suelen quedarse cortas.
3. El primer párrafo de cada página responde directamente a la pregunta de la página. Escribe un FAQ específico de la página con `<details>` y márcalo como FAQPage. Muestra la organización editora y una fecha de "Última actualización" con `<time>`.
4. En robots.txt, escribe tu decisión con su motivo para GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended, Bingbot y CCBot, y apunta al sitemap. sitemap.xml lleva fechas lastmod reales. llms.txt contiene un resumen preciso de dos frases del sitio y la lista de páginas clave.
5. No inventes nada: ni reseñas, ni valoraciones, ni premios, ni cifras de clientes, ni certificados, ni horarios, ni coordenadas, ni precios, salvo que yo te los dé. Deja fuera del schema los campos desconocidos.
Controles (en orden; no des el trabajo por terminado hasta que todos pasen):
1. Con site_run_command ejecuta `node chrome-stamp.mjs`, la compilación de Tailwind, `node seo-stamp.mjs`, `node seo-check.mjs` (0 errores, 0 advertencias), `node design-check.mjs` (0 errores; justifica cualquier advertencia que quede) y `npx html-validate "**/*.html"` (0 errores).
2. Revisa cada página con site_preview, view="mobile" y view="desktop". site_preview captura la página con el movimiento desactivado (reduced-motion), así que si falta contenido en esa imagen, el estado sin movimiento está roto. En las capturas de página completa, las imágenes lazy más abajo pueden aparecer vacías; eso no es un error, pero comprueba sus rutas.
3. Ejecuta core_web_vitals en cada página con strategy="mobile" y strategy="desktop". Criterio de aprobación: en móvil, Performance de al menos 95 y Accesibilidad, Best Practices y SEO en 100; en escritorio, las cuatro de al menos 95. En una página que no pase, usa resources=true para encontrar el archivo que la frena, corrígelo y vuelve a medir. Después ejecuta seo_audit en la home con strategy="mobile" y runs=2. La lista de peticiones de red no debe contener ningún host distinto de tu propio dominio.
4. Sin scroll horizontal a 360, 390, 768 y 1440 px de ancho, áreas táctiles de al menos 44 px, sin errores de consola.
Comprobación del movimiento: site_preview no puede mostrar movimiento, así que describe la sección fijada de la home y dime qué comprobar en mi propio navegador: en escritorio la historia del producto debe quedarse pegada arriba mientras los pasos avanzan con el scroll, en un móvil debe fluir sin quedarse pegada, y con reducir movimiento activado en el sistema operativo nada debe moverse y todo debe ser visible.
Tras publicar: previsualiza la regla `/assets/* Cache-Control: public, max-age=31536000, immutable` con site_headers y aplícala tras mi aprobación; a partir de entonces, renombra los archivos CSS o JS cuando cambien (site-v2.css, etc.). Envía sitemap.xml con gsc_submit_sitemap y revisa la home con gsc_url_inspect. Termina con una tabla de puntuaciones por página (página, cuatro puntuaciones móvil, cuatro puntuaciones escritorio, LCP, CLS), los resultados de los controles y la lista de correcciones que aplicaste.
