Crea un sitio de moda o estilo de vida tipo lookbook, de varias páginas y con transiciones de imagen entre páginas, para
[brand name] en el sitio
[server name] de mi servidor de hosting de Opus Growth. Marca:
[qué fabrica, dónde, para quién]. Nombre de la temporada o colección:
[nombre]. Productos: [de cada uno nombre, categoría, color, material, precio y enlace a la foto]. Tabla de tallas:
[medidas, o "ninguna"]. Cómo compra la gente: [dirección del taller o tienda, número de WhatsApp, enlace a la tienda si existe]. Envíos y devoluciones:
[si los hay]. Contacto:
[email],
[teléfono],
[dirección]. Dominio:
[domain]. Fotos del lookbook:
[enlaces].
Páginas: inicio del lookbook (/), colección (/koleksiyon/), una página independiente por producto (/urun/
[product-name]/), taller o sobre nosotros (/atolye/), contacto (/iletisim/) y 404.html. Secciones de la home: hero (h1, breve presentación de la marca, dos botones y una foto principal vertical y alta), debajo un lookbook de tres fotos donde cada foto enlaza a un producto, la historia del material o de la confección y las preguntas frecuentes. Página de colección: filtros por categoría y la cuadrícula de productos. Página de producto: imagen grande, nombre, precio, un primer párrafo que diga qué es el producto, una lista de material, color, tallas y cuidados, un recuadro "¿Cómo compro?", la tabla de tallas y dos productos de la misma colección. Sin carrito y sin checkout; la compra se hace por WhatsApp, en la tienda o en el taller, y todas las páginas de producto lo dicen con claridad.
Estilo: moda editorial, como un lookbook impreso. Fondo en tono tela, fotos a sangre con esquinas rectas, líneas finas de 1 píxel, pequeñas etiquetas en mayúsculas con espaciado entre letras y mucho espacio en blanco. Tipografía: una serif de moda de alto contraste de Fontshare (por ejemplo Melodrama 400 y 600) con un cuerpo de texto grotesk sereno (por ejemplo Archivo 400 y 500). Un solo color de acento (por ejemplo arcilla) únicamente para los anillos de foco y el hover. Distribuye el trío del lookbook en 5, 4 y 3 columnas de una cuadrícula de 12 columnas con un desplazamiento vertical escalonado. Hay dos elementos distintivos: la transición de imagen entre páginas y la vista rápida con Flip en la cuadrícula de la colección. No se cargan Lenis, Swiper, ScrollTrigger ni SplitText.
Reglas de la transición de página y de Flip (síguelas al pie de la letra):
1. View Transitions entre documentos: escribe `@view-transition { navigation: auto; }` en `assets/app.css`. La imagen de la tarjeta de la colección y la imagen principal de la página de producto llevan el MISMO view-transition-name; defínelo con una clase de propiedad arbitraria de Tailwind (`
[view-transition-name:u-product-name]`), no con style="". Cada nombre puede aparecer solo una vez por página, porque el navegador cancela la transición cuando dos elementos comparten nombre; las tarjetas de "la misma colección" de una página de producto pueden llevar los nombres de sus propios productos. Dale al menú superior `view-transition-name: site-header` para que se mantenga quieto durante la transición. Duración del grupo 0,5 segundos, fundido cruzado del root 0,3 segundos. Dentro de `@media (prefers-reduced-motion: reduce)` escribe `@view-transition { navigation: none; }`. Los navegadores sin soporte simplemente navegan con normalidad; no escribas un fallback en JavaScript.
2. Carga GSAP y Flip solo en la página de colección; ninguna otra página lleva script. Descarga el core de GSAP 3.13 y el plugin Flip desde jsdelivr a `assets/vendor/` con site_fetch y fija la versión. 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". Un pequeño cargador al final de la página espera al evento load, a dos llamadas a requestAnimationFrame y a requestIdleCallback, no descarga nada si falta `anim` y, si no, añade en orden gsap.min.js, Flip.min.js y un archivo diminuto con `gsap.registerPlugin(Flip)`, con async=false.
3. Separa la interacción de Flip: `assets/koleksiyon.js` (defer) ejecuta el filtro y la vista rápida TAMBIÉN sin Flip. En cada cambio, si Flip y `anim` están presentes, toma primero `Flip.getState(cards)`, cambia el DOM y luego llama a `Flip.from(state, {duration: 0.6, ease: "power3.inOut", nested: true})`; si no, aplica el cambio al instante. Así, un visitante que no quiere movimiento puede seguir usando el filtro y la vista rápida.
4. Filtro: los botones "Todos" y de categoría van en un contenedor con `role="group"` y un aria-label, cada uno con `aria-pressed`. Las tarjetas que no coinciden reciben `hidden`; en Flip usa `absolute: true`, onEnter para las tarjetas que entran (opacity y scale de 0,92 a 1) y onLeave para las que salen. Un elemento `aria-live="polite"` anuncia el resultado, por ejemplo "3 productos mostrados".
5. Vista rápida (la imagen pasa de la cuadrícula al detalle): cada tarjeta tiene un botón "Vista rápida" con `aria-expanded` y `aria-controls` y un panel de detalle con `hidden` (descripción, consejo de estilismo, enlace a la página del producto). Al abrirla, la tarjeta ocupa todo el ancho con `grid-column: 1 / -1` y en escritorio se divide en dos columnas, imagen a la izquierda y detalles a la derecha; Flip anima el crecimiento de la imagen desde la miniatura hasta la vista grande. Actualiza el `sizes` de la imagen abierta para la vista grande, de modo que se cargue un archivo mayor. Solo hay una tarjeta abierta a la vez, el texto del botón pasa a ser "Cerrar" y el foco se mueve al panel, que lleva tabindex="-1".
6. Sin JavaScript, los botones de filtro y de vista rápida se ocultan (`.js-only` solo se muestra bajo `.js`), y todos los enlaces de tarjetas y de páginas de producto siguen funcionando. El enlace principal de la tarjeta siempre va a la página del producto; la vista rápida es un botón aparte.
Configuración y trampas conocidas (cada una restó puntos o falló un gate en la medición de la demo, no te las saltes):
1. Si ya hay un sitio publicado en el servidor, avísame primero, porque la configuración inicial sobrescribe index.html y la carpeta assets. Primero previsualiza scaffold_site con confirm=false y luego llama con confirm=true cuando yo lo apruebe. Después lee site_design_guide y site_seo_guide. Antes de escribir código, escribe 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 breve ART.md 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 haz seguimiento con site_command_status. Las rutas content de `tailwind.config.js` deben cubrir todos los archivos HTML, incluidas las subcarpetas, las plantillas `_src/*.tpl` y cualquier archivo JS que escriba clases. `_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 las páginas el script cdn.tailwindcss.com, el tailwind.config en línea, chrome.js y motion.js, y enlaza solo `/assets/site.css`. Recompila tras cada cambio de HTML. Añade también `assets/koleksiyon.js` a la lista de content, porque escribe clases como `is-open`.
3. Aloja las fuentes en tu propio servidor. Lee el CSS de Fontshare con una petición por familia y peso (`https://api.fontshare.com/v2/css?f[]=family@weight`), descarga cada archivo woff2 en `assets/fonts/` con site_fetch y escribe las reglas @font-face con `font-display: swap` en `assets/app.css`; design-check busca ahí la fuente personalizada. Precarga TODOS los pesos usados por encima del pliegue (títulos, texto y botones) en cada página con `<link rel="preload" as="font" type="font/woff2" crossorigin>` y coloca estas líneas antes del enlace a la hoja de estilos. La mayoría de las fuentes de Fontshare no tienen el signo ₺, así que escribe los precios con "TL".
4. Haz el menú y el pie como HTML estático. 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 activo. No pongas extensión .html a las plantillas y usa marcadores como `
[[NAV]]` en lugar de `{{...}}`. Construye el menú móvil con `<details>` y sin JS. Mantén el nombre del negocio, la dirección y el teléfono en el pie como texto plano, y haz que los enlaces del pie y de las migas de pan midan al menos 44 píxeles de alto.
5. Convierte las imágenes mientras las descargas con site_fetch: escribe la misma foto en archivos separados con resize="480x", "800x" y "1120x" (o los anchos que necesite la página), image_format="webp" y quality=65. Da a cada `<img>` srcset, sizes y un width y height que coincidan con la proporción real. La imagen principal sobre el pliegue lleva fetchpriority="high" y no es lazy; da fetchpriority solo al elemento LCP real, y loading="lazy" decoding="async" al resto.
6. Escribe un pequeño `favicon.svg` en la raíz del sitio y añade `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` a cada página; si hay un logo en PNG, crea un apple-touch-icon con site_fetch, resize="180x180" e image_format="png". Sin favicon, el navegador registra un 404 para /favicon.ico y Best Practices baja a 96.
7. Reglas del validador HTML: empieza cada documento con un `<!DOCTYPE html>` en mayúsculas, entrecomilla los atributos con comillas dobles, usa ` ` para los espacios en el texto visible de los enlaces tel:, no uses nunca el atributo style="" (si necesitas una variable CSS, usa una clase de propiedad arbitraria de Tailwind como `
[--r:-4deg]`), da a cada botón type="button", no pongas aria-label en elementos sin rol como `<ul>` o `<div>`, y usa `<section aria-label="...">` en lugar de role="region".
8. Descarga las imágenes de producto con site_fetch en proporción vertical 4:5 con resize="400x", "640x" y "960x"; mantén todas las fotos de producto en la misma proporción para que la cuadrícula quede pareja y la transición de Flip no dé saltos. La imagen principal de una página de producto es el elemento LCP de esa página y lleva fetchpriority="high".
9. Comprueba los dígitos de la fuente de títulos: en la demo, el cero de Melodrama aparecía tachado y "2026" en el h1 se leía de lejos como "2Ø26". Mantén los números fuera de los títulos con la fuente display, o escribe los dígitos con la fuente del texto.
SEO, AEO y GEO:
1. Usa URLs tipo directorio con barra final (/koleksiyon/, /urun/
[product-name]/, /atolye/, /iletisim/ o sus equivalentes en tu idioma). Rellena el bloque seo de site.config.js y ejecuta `node seo-stamp.mjs`. Si hay un taller o tienda físicos, define en site.config.js el businessType más específico (por ejemplo ClothingStore) y la dirección; añade el horario de apertura solo si yo te lo doy. Esquemas por página: home WebPage y FAQPage; colección CollectionPage y un ItemList con la url de cada producto; cada página de producto ItemPage y Product (name, description, image, sku, color, material, category, brand y un Offer con price, priceCurrency TRY, availability, itemCondition, url y seller @id); taller AboutPage; contacto ContactPage; BreadcrumbList en las páginas interiores (Lookbook, Colección, producto). Aunque no haya checkout, el Offer lleva el precio correcto y el estado de stock; si te doy condiciones de envío y devolución, añade shippingDetails y hasMerchantReturnPolicy al Offer. No inventes reseñas ni valoraciones (aggregateRating). Escribe cada esquema específico de página en su propio bloque `<script type="application/ld+json">` y enlázalo 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. Títulos de 48 a 60 caracteres (seo-check considera error más de 65), descripciones de 145 a 158 caracteres, un h1 por página. El contenido principal de cada página tiene al menos 150 palabras. En la demo, las páginas de taller y contacto salieron con 113 y 95 palabras al primer intento y se completaron con información real, como "qué hacemos en el taller" y "qué incluir cuando nos escribes". En las páginas de producto, escribe las frases compartidas (cuidados, tejido) como elementos de lista cortos y redacta la descripción por separado para cada producto; seo-check avisa de contenido duplicado cuando las páginas comparten más del 50 por ciento de sus frases.
3. El primer párrafo de cada página responde directamente a la pregunta de la página, y el h1 se formula como esa pregunta. Escribe las FAQ 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 datetime>`.
4. En robots.txt, escribe tu decisión con el 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 un lastmod real. llms.txt incluye un resumen exacto del sitio en dos frases y una lista de las páginas importantes.
5. Nada de invenciones: no escribas reseñas, valoraciones, premios, cifras de clientes, certificados, horarios, coordenadas, precios ni datos de producto sin preguntármelo. Deja fuera del esquema cualquier campo que no conozcas.
Gates (en orden; no digas "hecho" hasta que todos pasen):
1. Con site_run_command, ejecuta en orden `node chrome-stamp.mjs`, la compilación de Tailwind, `node seo-stamp.mjs`, `node seo-check.mjs` (0 errores, 0 avisos), `node design-check.mjs` (0 errores; justifica cualquier aviso restante) 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; si el contenido no está completo en esa captura, el estado sin movimiento está roto. Las imágenes lazy más abajo pueden salir en blanco en una captura de página completa; no lo cuentes como error, pero comprueba sus rutas.
3. Ejecuta core_web_vitals en cada página con strategy="mobile" y strategy="desktop". 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, con objetivo 100. 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 home con strategy="mobile" y runs=2. La lista de peticiones de red no debe contener ninguna dirección fuera de tu propio dominio (los enlaces a la tienda y a WhatsApp son enlaces, no peticiones).
4. Sin desplazamiento horizontal a 360, 390, 768 y 1440 píxeles de ancho, áreas táctiles de al menos 44 píxeles, sin errores en la consola.
Comprobación de la interacción: como site_preview no puede mostrar movimiento, dime qué debo mirar en mi propio navegador: en Chrome o Edge, al hacer clic en un producto de la colección la imagen crece desde su tarjeta hasta su lugar en la página del producto mientras el menú se queda quieto; en Firefox la página simplemente se abre; al pulsar un filtro las tarjetas se deslizan a su nuevo orden; "Vista rápida" abre la tarjeta dentro de la cuadrícula y la imagen crece; con reducir movimiento activado, las mismas acciones ocurren al instante; con JavaScript desactivado todos los productos son visibles. En una comprobación local también vi que `document.documentElement.matches(':active-view-transition')` devolvía true en la página del producto durante la transición; puedes ejecutar la misma comprobación.
Tras publicar: previsualiza con site_headers la regla `/assets/* Cache-Control: public, max-age=31536000, immutable` y aplícala cuando yo lo apruebe; a partir de entonces, versiona el nombre del archivo cada vez que cambien el CSS o el JS (site-v2.css y así sucesivamente). Envía sitemap.xml con gsc_submit_sitemap y revisa la home con gsc_url_inspect. Al final entrégame: una tabla de puntuaciones por página (página, las cuatro puntuaciones en móvil, las cuatro en escritorio, LCP, CLS), los resultados de los gates y la lista de correcciones que aplicaste.
