En mi servidor de hosting de Opus Growth
[nombre del servidor], crea un sitio de varias páginas para
[nombre del negocio] que no cargue nada de JavaScript y que haga su movimiento y sus transiciones entre páginas con las funciones CSS propias del navegador. Negocio:
[qué hace, para quién], ciudad:
[ciudad, barrio]. Servicios o productos:
[lista]. Trabajos: [para cada uno: nombre, material o alcance, duración, problema que resuelve, enlace de la imagen]. Contacto:
[correo],
[teléfono],
[número de WhatsApp],
[dirección]. Dominio:
[dominio].
Páginas: inicio (hero, trabajos recientes, proceso, preguntas frecuentes), trabajos (/isler/), nosotros (/hakkimizda/), contacto (/iletisim/, sin formulario), privacidad (/gizlilik/) y 404.html.
Estilo: editorial y natural. Una tipografía serif para los titulares (por ejemplo Zodiak) con una fuente de texto serena (por ejemplo Switzer), un fondo en tono lino, un único acento oscuro, mucho espacio. Reserva el atrevimiento para las tarjetas de trabajos.
Reglas de CSS moderno (mejora progresiva; en un navegador sin soporte la página debe verse estática pero completa):
1. No cargues ningún archivo JavaScript; nada de GSAP, Lenis ni Swiper. El menú móvil funciona con `<details>`.
2. Transiciones entre páginas (View Transitions entre páginas del mismo origen): escribe `@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }` y mantén la duración en torno a 0,35 s. Dale a la barra superior view-transition-name: site-header. Dale a la imagen de una tarjeta de trabajo de la página de inicio y a la misma imagen en la página de trabajos el mismo view-transition-name único, para que la imagen crezca hasta su lugar en la página nueva. Usa cada nombre una sola vez por página.
3. Animaciones basadas en scroll: una línea de progreso arriba que crece con scaleX mediante `animation-timeline: scroll(root)` (display:none por defecto, visible solo si hay soporte); en las tarjetas y los títulos de sección, `animation-timeline: view()` con `animation-range: entry 0% entry 70%` usando solo translateY; en la imagen del hero, un escalado y un desplazamiento suaves mientras está a la vista. No uses opacity: los elementos que quedan atenuados bajo la pantalla fallan la comprobación de contraste de Lighthouse. Pon todas estas reglas dentro de `@supports (animation-timeline: scroll())` y `prefers-reduced-motion: no-preference`.
4. Container queries: convierte la tarjeta de trabajo en un componente con `container-type: inline-size`. Con `@container (min-width: 34rem)`, la imagen va arriba en un contenedor estrecho y al lado del texto en uno ancho. La misma tarjeta es estrecha en una cuadrícula de tres columnas en la página de inicio y ancha en una sola columna en la página de trabajos. El núcleo de Tailwind 3 no tiene clases de container queries; escribe estas reglas como CSS normal en app.css.
5. El nivel de encabezado de la tarjeta debe encajar con la página donde se encuentra: en la página de trabajos pon un h2 entre el h1 y los h3 de las tarjetas. Cuando faltaba en la demo, Accesibilidad bajó a 98 por heading-order.
6. En la página de trabajos, la primera imagen de tarjeta que entra en la primera pantalla no es lazy y lleva fetchpriority="high".
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 activo en el servidor, avísame primero, porque la configuración sobrescribe index.html y la carpeta assets. Muestra una vista previa de scaffold_site con confirm=false y llámalo 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, rejilla, elemento distintivo, lenguaje de movimiento y las librerías que NO se cargarán) en un ART.md corto 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 a continuación sigue el proceso 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 solo archivo con `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify`. Quita de todas las páginas el script cdn.tailwindcss.com y el tailwind.config en línea, y enlaza solo `/assets/site.css`. Vuelve a compilar después de cada cambio en el HTML.
3. Aloja las fuentes tú mismo. Lee el CSS de las familias de Fontshare que elegiste, descarga con site_fetch el archivo woff2 de cada peso en `assets/fonts/` y escribe las reglas @font-face con `font-display: swap` en `assets/app.css`; design-check busca ahí una fuente personalizada. Comprueba el nombre de font-family en el CSS que descargaste, porque Fontshare puede devolver otra familia cuando un peso no existe. Haz preload de la fuente del titular de la primera pantalla y de la fuente del texto en todas las páginas 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" en los precios.
4. Haz que el menú y el pie de página sean 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 pongas extensión .html a las plantillas y usa marcadores como `
[[NAV]]` en lugar de `{{...}}`; de lo contrario design-check y seo-check las leen como páginas sin terminar. Construye el menú móvil sin JS con `<details>`. Deja el nombre del negocio, la dirección y el teléfono en el pie como texto simple.
5. Convierte las imágenes mientras las descargas con site_fetch: escribe la misma foto en archivos separados con resize="480x", "800x" y "1200x", image_format="webp", quality=65. Dale a cada `<img>` srcset, sizes, width y height. La imagen principal de la primera pantalla lleva fetchpriority="high" y nunca es lazy; las demás llevan loading="lazy" decoding="async". Si la imagen principal llena la pantalla del móvil, sirve en móvil un recorte más ancho y ligero 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 todas las páginas. Sin él, el navegador registra un 404 y Mejores prácticas 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 dale a cada botón type="button".
SEO, AEO y GEO:
1. Usa URL de directorio con barra final (/isler/, /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 (inicio: WebPage y FAQPage; trabajos: CollectionPage con un CreativeWork por pieza dentro de hasPart (con material si se conoce); nosotros: AboutPage; contacto: ContactPage; BreadcrumbList en las páginas interiores. El subtipo de LocalBusiness más específico en site.config.js) en bloques `<script type="application/ld+json">` separados y enlázalo con el grafo base mediante @id. No escondas BreadcrumbList dentro de un @graph; dale su propio bloque, porque es la única forma de que seo-check lo vea.
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 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 unas preguntas frecuentes propias de la página con `<details>` y márcalas como FAQPage. Muestra la organización que publica 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 incluye fechas lastmod reales. llms.txt contiene un resumen exacto del sitio en dos frases 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 lo des 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". Para aprobar: en móvil, Rendimiento de al menos 95 y Accesibilidad, Mejores prácticas y SEO en 100; en escritorio, las cuatro de al menos 95. En una página que falle, usa resources=true para encontrar el archivo que la frena, corrígelo y vuelve a medir. Después ejecuta seo_audit en la página de inicio con strategy="mobile" y runs=2. La lista de solicitudes de red no debe contener ningún host distinto de tu propio dominio.
4. Sin desplazamiento horizontal con anchos de 360, 390, 768 y 1440 px, áreas táctiles de al menos 44 px, sin errores en la consola.
Comprobación de soporte: site_preview captura con el movimiento desactivado, así que no puede mostrar las transiciones. Dime cómo comprobar en Chrome que la imagen crece hasta su lugar cuando hago clic en un trabajo de la página de inicio, que la línea superior se llena al hacer scroll, que la tarjeta cambia de disposición al estrechar y ensanchar la ventana, y que la página se abre completa en un navegador sin estas funciones.
Tras publicar: muestra una vista previa de la regla `/assets/* Cache-Control: public, max-age=31536000, immutable` con site_headers y aplícala tras mi aprobación; a partir de ahí, cambia el nombre de los archivos CSS o JS cuando cambien (site-v2.css y así sucesivamente). Envía sitemap.xml con gsc_submit_sitemap y revisa la página de inicio con gsc_url_inspect. Termina con una tabla de puntuaciones por página (página, cuatro puntuaciones móviles, cuatro de escritorio, LCP, CLS), los resultados de los controles y la lista de correcciones que aplicaste.
