En mi servidor de hosting de Opus Growth
[nombre del servidor], crea un sitio multipágina y rápido para
[nombre del estudio] con el aire de los sitios de estudios creativos que aparecen en Awwwards. Estudio:
[qué diseña, para quién], ciudad y distrito:
[ciudad, distrito], equipo:
[número de personas, nombres y cargos]. Servicios:
[3 servicios]. Trabajos: [para cada uno, nombre del cliente, tipo de trabajo, año, una frase sobre el reto, otra sobre la solución, las piezas entregadas, enlace a la imagen]. Contacto:
[email],
[teléfono],
[número de WhatsApp],
[dirección]. Dominio:
[dominio]. Preferencia de color:
[color o "elígelo tú"].
Páginas: inicio (/: hero con titular enorme, marquesina de servicios en movimiento, trabajos seleccionados, qué hacemos, proceso, FAQ, llamada a la acción final), trabajos (/isler/: el reto, qué hicimos y qué entregamos en cada proyecto), estudio (/studyo/: equipo y reglas de trabajo), contacto (/iletisim/), privacidad y KVKK (/gizlilik/) y 404.html. Sin formulario en la página de contacto; indica email, teléfono y un enlace de WhatsApp con mensaje prellenado, además de una lista de lo que conviene incluir en el primer mensaje. Si no hay cifras aprobadas por el cliente, describe los resultados de forma cualitativa y no escribas porcentajes ni cifras de crecimiento.
Estilo: estudio creativo al estilo Awwwards. Fondo blanco roto, texto negro y un único color de señal usado solo como fondo (con texto negro encima, contraste mínimo de 4,5:1). Una tipografía display de Fontshare que aguante tamaños muy grandes (por ejemplo Clash Display 600) y una tipografía de texto sobria (por ejemplo Ranade). El titular del hero ocupa la pantalla con clamp entre 3.2rem y 12.5rem y espaciado de letras ajustado, sin desbordarse a 360 px. La lista de trabajos es un conjunto de filas con imágenes grandes y títulos grandes en una cuadrícula asimétrica que alterna columnas 7/5 y 5/7.
Reglas de movimiento (lo más difícil, síguelas al pie de la letra):
1. Librerías: GSAP 3.13 core, ScrollTrigger, SplitText y Lenis, solo en las páginas de inicio y trabajos. Ningún script en las páginas de estudio, contacto y privacidad. No cargues Swiper, WebGL ni vídeo.
2. SplitText: el h1 above the fold es el elemento LCP, así que nunca lo empieces oculto ni deslizándose hacia arriba. El h1 empieza visible en un color tenue que aun así cumple el contraste AA, y SplitText lleva sus líneas al color completo una a una (type "lines", mask "lines", aria "auto"). Reserva la entrada de línea enmascarada con deslizamiento hacia arriba para los h2 below the fold y reprodúcela con ScrollTrigger once:true. Divide el texto después de document.fonts.ready para que los saltos de línea sean correctos.
3. Marquesina infinita: escribe los nombres de los servicios una sola vez en el HTML. Sin JS y con movimiento reducido, la lista se muestra como un grupo estático que hace salto de línea; reduce ese estado estático en móvil, porque en la demo ocupaba la pantalla como un muro de seis líneas. JS duplica el grupo una vez, marca la copia con aria-hidden y mueve x en un bucle sin fin; se acelera brevemente con la velocidad del scroll y se detiene mientras la marquesina está fuera de pantalla. El movimiento de más de cinco segundos necesita un botón "Pausar" visible según WCAG 2.2.2 (type="button", aria-pressed), mostrado solo mientras la marquesina realmente se mueve. El foco dentro de la marquesina también la pausa.
4. Botones magnéticos: solo en dispositivos que cumplan `(hover: hover) and (pointer: fine)`; usa gsap.quickTo para mover la transformación x e y entre un 30 y un 40 por ciento de la distancia del puntero al centro del botón, con retorno elástico cuando el puntero se va. El área clicable del botón no debe cambiar.
5. Estela de imágenes con el cursor: solo escritorio, bajo la misma condición de puntero fino, en la zona del hero. JS añade al hero una capa con aria-hidden y pointer-events:none, situada DEBAJO del titular (z-index). Las imágenes de la estela no deben descargarse al cargar la página; las miniaturas WebP de 280 px se cargan con el primer movimiento del puntero. Cada 90 px de recorrido del puntero aparece en el puntero la siguiente imagen del pool, crece desde pequeña, luego se desliza hacia abajo y se desvanece; muévela con transform, no con left/top.
6. Activa Lenis solo en dispositivos con `(pointer: fine)` y conduce su ciclo desde gsap.ticker; los dispositivos táctiles mantienen el scroll nativo. En los enlaces internos de la página, mueve el foco al destino tras el scroll.
Configuración y trampas conocidas (cada una costó puntos o rompió algo en la medición de la demo; no te saltes ninguna):
1. Si ya hay un sitio en vivo en el servidor, avísame primero, porque la configuración inicial sobrescribe index.html y la carpeta assets. Previsualiza scaffold_site con confirm=false y llama con confirm=true tras mi aprobación. Después lee site_design_guide y site_seo_guide. Antes de escribir código, pon la dirección de diseño (tipografía, color, cuadrícula, elemento distintivo, lenguaje de movimiento y las librerías que NO se cargarán) en un ART.md breve fuera de assets y muéstramelo.
2. Compila Tailwind, no lo cargues desde el CDN. Instala `npm i -D tailwindcss@3` con site_run_command y background=true, y vigílalo con site_command_status. Las rutas content de `tailwind.config.js` deben cubrir todos los archivos HTML, todas las plantillas y todos los archivos JS que escriben clases. `_src/tw.css` contiene una 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 las páginas y enlaza solo `/assets/site.css`. Recompila tras cada cambio de HTML.
3. Aloja las fuentes en local. Primero comprueba que la familia de Fontshare que elijas tiene las letras turcas (ş, ğ, ı, İ, ç, ö, ü): en la demo Tanker no tenía la ı sin punto y Outfit no tenía ş, ğ ni İ, así que esas letras caerían en otra fuente en los titulares. Descarga el woff2 de cada peso por separado con site_fetch en `assets/fonts/`, escribe las reglas @font-face con `font-display: swap` en `assets/app.css` (design-check busca ahí la fuente personalizada) y verifica el nombre de font-family en el CSS descargado. Precarga en cada página las fuentes de titulares y de texto usadas above the fold con `<link rel="preload" as="font" type="font/woff2" crossorigin>`, antes de la hoja de estilos; no precargues más de dos archivos, porque precargar un tercer peso en la demo alargó el LCP móvil 0,2 segundos. La mayoría de las fuentes de Fontshare no tienen el signo ₺, así que escribe "TL" en 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 -->` en cada página, añadiendo aria-current="page" al enlace activo. Las plantillas no deben terminar en .html y deben usar marcadores como `
[[NAV]]` en lugar de `{{...}}`. Construye el menú móvil sin JS con `<details>`. Mantén el nombre de la organización, la dirección y el teléfono como texto plano en el pie, y haz que cada área táctil mida al menos 44x44 px, incluidos los enlaces del pie y de las migas de pan.
5. Convierte las imágenes mientras las descargas con site_fetch: escribe la misma foto con resize="480x", "800x" y "1200x", image_format="webp", quality=65 en archivos separados. site_fetch nunca recorta; cuando una foto de Unsplash necesite otra proporción, descarga la versión recortada añadiendo a su URL parámetros como `?w=1600&h=1200&fit=crop`. Da a cada `<img>` srcset, sizes y un width y height que coincidan con la proporción real. La imagen principal above the fold lleva fetchpriority="high" y no es lazy; las demás llevan loading="lazy" decoding="async". Si la imagen principal llena la pantalla en móvil, sirve un recorte más pequeño con `<picture>`.
6. Escribe la versión SVG del logotipo como favicon.svg con site_write_file y añade `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` a cada página. Sin favicon el navegador registra un 404 y Best Practices baja a 96.
7. Reglas del validador HTML: empieza con un `<!DOCTYPE html>` en mayúsculas, usa ` ` para los espacios en el texto visible de los enlaces tel:, no uses nunca el atributo style="", da type="button" a cada botón y no pongas un `<details>` dentro de un `<figure>` después de su figcaption.
8. Descarga las librerías de movimiento (GSAP, ScrollTrigger, SplitText, Lenis) de jsdelivr a `assets/vendor/` con site_fetch, fija la versión y cárgalas solo en las páginas de inicio y trabajos. No uses `<script defer>`; pon un pequeño cargador al final de la página que espere al evento load, dos llamadas a requestAnimationFrame y luego requestIdleCallback, y añada los scripts en orden con async=false. 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"; sin `anim` el cargador no descarga nada. Define los estados iniciales ocultos solo bajo `.anim` y añade una animación CSS de red de seguridad que revele todos los elementos ocultos a los 2,5 segundos por si la librería nunca llega. En demos anteriores, las librerías con defer llevaron el LCP móvil a 3,2 segundos; con este cargador las páginas midieron entre 99 y 100. Llama data-reveal al atributo de los elementos que se revelan con el scroll; design-check solo reconoce el movimiento por ese nombre.
SEO, AEO y GEO:
1. Usa URLs estilo directorio con barra final (/isler/, /studyo/, /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 (inicio WebPage y FAQPage; trabajos CollectionPage con un CreativeWork por proyecto en hasPart; estudio AboutPage con entradas Person para el equipo; contacto ContactPage; BreadcrumbList en las páginas interiores. Para un estudio con oficina, businessType ProfessionalService en site.config.js) en bloques `<script type="application/ld+json">` separados y enlázalos con el grafo base mediante @id. No anides BreadcrumbList dentro de @graph; déjalo en su propio bloque, porque es la única forma en que seo-check lo detecta.
2. Mantén los títulos en 60 caracteres o menos (seo-check marca como error todo lo que pase de 65), las descripciones entre 120 y 158 caracteres, un h1 por página y ningún nivel de encabezado omitido (un h3 justo después del h1 bajó la accesibilidad a 98). 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 FAQs específicas de cada página con `<details>` y márcalas como FAQPage. Muestra la organización editora y una fecha de "Última actualización" en `<time>`.
4. En robots.txt, anota y justifica tu decisión 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. Da a sitemap.xml fechas lastmod reales. llms.txt contiene un resumen exacto del sitio en dos frases, los datos clave y una lista de las páginas importantes.
5. Sin invenciones: no escribas reseñas, valoraciones, premios, número de clientes, certificados, horarios, coordenadas ni precios sin preguntarme. Deja fuera del schema cualquier campo que no conozcas.
Puertas de control (en orden; no digas "hecho" hasta que todas se superen):
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 restante) y `npx html-validate "**/*.html"` (0 errores).
2. Revisa cada página con site_preview usando view="mobile" y view="desktop". site_preview captura la página con el movimiento desactivado (reduced-motion); si falta contenido en esa captura, el estado sin movimiento está roto. Las imágenes lazy más abajo pueden salir en blanco en la captura de página completa; no lo cuentes como error, pero revisa sus rutas.
3. Ejecuta core_web_vitals con strategy="mobile" y strategy="desktop" para cada página. Criterio de aceptación: en móvil, Performance de al menos 95 y Accessibility, Best Practices y SEO en 100; en escritorio, las cuatro de al menos 95. Si una página no llega, encuentra el archivo lento con resources=true, corrígelo y mide de nuevo. Después ejecuta seo_audit en la página de inicio con strategy="mobile" y runs=2. No debe quedar ninguna dirección externa a tu propio dominio en la lista de peticiones de red.
4. Sin scroll horizontal a 360, 390, 768 y 1440 px, áreas táctiles de al menos 44 px y sin errores de consola. El sitio también debe verse impecable dentro de un marco de 390x790 y de 1440x898, como en las páginas de prompts.
Revisión del movimiento: site_preview no puede mostrar movimiento, así que indícame qué debo mirar en mi propio navegador. En escritorio, las líneas del titular del hero deben oscurecerse una tras otra, la marquesina debe moverse, acelerarse con el scroll y detenerse con el botón Pausar, los botones deben inclinarse levemente hacia el puntero, al mover el puntero sobre el hero deben quedar imágenes que aparecen y se desvanecen detrás, y el texto debe permanecer siempre por encima de las imágenes. En móvil no debe haber estela ni efecto magnético, y el scroll sigue siendo nativo. Con reducir movimiento activado en el sistema operativo no debe moverse nada y la marquesina se muestra como una lista estática. El anillo de foco debe verse en todas partes al tabular.
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, versiona el nombre del archivo cada vez que cambie el CSS o el JS (site-v2.css, etc.). Envía sitemap.xml con gsc_submit_sitemap y comprueba la página de inicio con gsc_url_inspect. Por último, entrégame: una tabla de puntuaciones por página (página, cuatro puntuaciones móvil, cuatro de escritorio, LCP, CLS), los resultados de las puertas de control, el resultado de las interacciones que probaste en un navegador y la lista de correcciones que aplicaste.
