Crea una página direct-to-consumer de producto y algunas páginas de apoyo para
[nombre de la marca], mi marca de un solo producto, en el sitio
[nombre del servidor] de mi servidor de hosting de Opus Growth. Producto:
[nombre del producto, qué hace, para quién]. Precio:
[precio]. Colores o variantes: [para cada una, un nombre, un código de color y un enlace a una foto hecha desde el MISMO ángulo y sobre el MISMO lienzo]. Especificaciones: [dimensiones, material, peso y cifras de rendimiento con sus condiciones de prueba]. Modelos a comparar:
[tus otros modelos y sus cifras]. Enlace de compra:
[URL de la tienda y parámetro de variante]. Envío, devoluciones y garantía:
[plazos y condiciones]. Contacto:
[email],
[teléfono],
[número de WhatsApp],
[dirección]. Dominio:
[dominio].
Páginas: inicio del producto (/), garantía y devoluciones (/garanti-ve-iade/), contacto (/iletisim/), privacidad (/gizlilik/) y 404.html. Secciones del inicio en este orden: hero (escaparate 3D a la izquierda; a la derecha etiqueta, h1, introducción de dos frases, precio, selector de color, botón de compra y un resumen de envío, devoluciones y garantía), tres secciones breves sobre cómo funciona el producto, una tabla de especificaciones (#ozellikler), una tabla de comparación de tamaños o modelos (#karsilastir), FAQ (#sss). El menú enlaza a estas secciones dentro de la página, además de a las páginas de garantía y contacto. Este sitio no tiene carrito ni checkout; el botón de compra lleva a la página de la tienda con la variante seleccionada, y la página lo dice con claridad.
Estilo: una página de producto direct-to-consumer limpia y moderna. Fondo blanco roto cálido, un único color de marca que combine con el producto, un botón de compra negro y redondeado y tablas limpias. Tipografía: una grotesca de display compacta de Fontshare (por ejemplo Familjen Grotesk 500 y 700) con una fuente de texto legible (por ejemplo Ranade 400 y 500). La foto del producto es la protagonista; reserva lo más llamativo para el escaparate 3D. No se cargan GSAP, Lenis ni Swiper; el único JavaScript es un script en línea de menos de 1 KB que inclina el escaparate.
Reglas del escaparate 3D, el selector de color y la barra de compra (síguelas al pie de la letra):
1. Construye el escaparate 3D con CSS: `perspective: 1100px` en el contenedor, `transform: rotateX(var(--rx, 3deg)) rotateY(var(--ry, -7deg))` y `transform-style: preserve-3d` en la tarjeta interior, y una transición de transform de 0,3 segundos. Sin JavaScript y en pantallas táctiles, la tarjeta se queda en esta pose ligeramente inclinada. Dos pequeñas insignias (por ejemplo la capacidad y una cifra de rendimiento) flotan delante de la tarjeta con `translateZ(60px)` y son aria-hidden; la misma información también está en el texto. Coloca sobre la imagen un brillo suave que siga al puntero (un radial-gradient controlado por --gx y --gy).
2. El script de inclinación va en línea al final de la página y solo se ejecuta cuando `matchMedia("(pointer: fine) and (prefers-reduced-motion: no-preference)")` coincide. En pointermove transforma la posición del puntero dentro de la tarjeta a un rango de -0,5 a 0,5, fija --ry en 8 grados como máximo y --rx en 6 como máximo, y limita las escrituras con requestAnimationFrame; en pointerleave elimina las variables y vuelve a la pose por defecto. Solo cambia transform, el diseño nunca se desplaza. Añade un atributo data-reveal="tilt" al contenedor del escaparate para que design-check reconozca el movimiento.
3. Construye el selector de color sin JavaScript: dentro de un `<fieldset>` y un `<legend>`, un `<input type="radio" name="colour">` real por variante envuelto en un `<label>` de 44x44 píxeles; el radio está oculto visualmente (sr-only), el punto de color recibe un doble anillo mediante `input:checked + .dot` y un anillo de foco mediante `input:focus-visible + .dot`; las teclas de flecha cambian el color. Todas las imágenes de variante se apilan en la misma caja con `aspect-ratio` usando `position: absolute; inset: 0`, y solo cambia `opacity`, de modo que el diseño nunca se desplaza al cambiar de color (CLS 0 en la demo). Refleja la elección con `.product:has(#r-colour:checked)` en la imagen, en el nombre del color en la leyenda y en el enlace de compra. Si el navegador no admite :has, se mantienen visibles la imagen, el nombre y el enlace de la variante por defecto.
4. La imagen de la variante por defecto es el elemento LCP: fetchpriority="high", sin lazy. Las demás imágenes de variante llevan loading="lazy" decoding="async". Las fotos de las variantes deben estar hechas desde el mismo ángulo, sobre el mismo lienzo y con el mismo encuadre; de lo contrario el producto salta al cambiar de color. Pregúntame en lugar de intentar igualar fotos con ángulos distintos recortándolas.
5. No dejes que el valor de `display` de una clase de botón como `.btn-buy` anule la visibilidad de los enlaces de compra de cada variante. En la demo, la regla `.vb { display: none }` fue anulada por `.btn-buy { display: inline-flex }` más abajo, y se mostraron los cuatro botones de compra a la vez; escribe la regla con un selector más específico como `.product :is(.vb)` y comprueba en el navegador que solo se muestra un botón.
6. Barra de compra fija en móvil: por debajo de 768 píxeles, una barra `position: fixed; bottom: 0` con el nombre y el precio del producto, el nombre del color seleccionado y un único botón "Comprar" (de al menos 48 píxeles). Mantén el texto del botón corto y en una sola línea (`whitespace-nowrap`); pon el nombre del color dentro del botón como texto sr-only para los lectores de pantalla. Da al body un padding inferior igual a la altura de la barra para que esta nunca tape el contenido ni el pie de página, y comprueba que el último enlace al final de la página queda por encima de la barra. La barra está oculta en escritorio.
7. Tablas: la tabla de especificaciones lleva `<th scope="row">` como encabezados de fila, un `<caption>` oculto visualmente y una frase que indica las condiciones de prueba (por ejemplo temperatura ambiente, tapa cerrada). En la tabla de comparación compara solo tus propios modelos, sin nombres de competidores ni afirmaciones sobre ellos; resalta con un color de fondo el modelo a la venta, pero no dependas solo del color. Envuelve la tabla en `<section aria-label="..." tabindex="0" class="overflow-x-auto">` para que nunca desborde en pantallas estrechas; no escribas role="region", porque html-validate lo marca como prefer-native-element.
Configuración y trampas conocidas (cada una costó puntos o hizo fallar 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. Haz primero una vista previa de scaffold_site con confirm=false y después llama con confirm=true cuando yo lo apruebe. Luego lee site_design_guide y site_seo_guide. Antes de escribir código, redacta la dirección de diseño (tipografía, color, rejilla, elemento distintivo, lenguaje de movimiento y las bibliotecas 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 sigue 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 de cdn.tailwindcss.com, el tailwind.config en línea, chrome.js y motion.js, y enlaza solo `/assets/site.css`. Vuelve a compilar tras cada cambio de HTML. Si defines los puntos de color con clases de valor arbitrario como `bg-
[#28385C]`, se compilan porque aparecen en el HTML.
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 above the fold (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 que el menú y el pie de página sean 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 -->` en 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 de página como texto plano, y haz que los enlaces del pie y de las migas de pan tengan al menos 44 píxeles de alto.
5. Convierte las imágenes al descargarlas con site_fetch: guarda 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 above the fold lleva fetchpriority="high" y no es lazy; da fetchpriority solo al verdadero elemento LCP, y loading="lazy" decoding="async" al resto. Descarga las imágenes de variante en 4:5 con resize="480x", "720x" y "960x".
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 de 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. Una auditoría de áreas táctiles puede marcar el radio oculto visualmente como de 1 píxel; el área táctil real es el label que lo rodea. Mide que el label tenga al menos 44x44 píxeles y anota el motivo en el informe.
SEO, AEO y GEO:
1. Usa URLs de estilo directorio con barra final (/garanti-ve-iade/, /iletisim/, /gizlilik/ o sus equivalentes en tu idioma). Rellena el bloque seo de site.config.js y ejecuta `node seo-stamp.mjs`. Para una marca sin tienda física, pon localBusiness:false en site.config.js. Página de inicio: ItemPage (mainEntity el producto), el schema del producto y FAQPage. Schema del producto: con una sola variante, Product y Offer; con variantes de color, un ProductGroup (productGroupID, variesBy https://schema.org/color, brand, description, material) y dentro de hasVariant un Product por color (sku, color, image) con una Offer (price, priceCurrency TRY, availability, itemCondition, la URL de tienda de la variante como url, seller @id, shippingDetails con OfferShippingDetails y hasMerchantReturnPolicy con MerchantReturnPolicy). Publica la misma MerchantReturnPolicy con su @id en un bloque propio en la página de garantía y devoluciones. Añade GTIN, valoraciones o reseñas solo si tengo valores reales. Escribe cada schema 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 trata más de 65 como error), 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 garantía y devoluciones, privacidad y contacto quedaron en 141, 124 y 106 palabras al primer intento y se completaron con información real como "pasos para devolver", "con quién se comparten los datos" y "qué necesita una reclamación de garantía".
3. El primer párrafo de cada página responde directamente a la pregunta de esa página, y el h1 está formulado como esa pregunta. Escribe la FAQ propia de la página con `<details>` y márcala como FAQPage. Muestra la organización editora y una fecha de "Última actualización" con `<time datetime>`.
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 un lastmod real. llms.txt tiene un resumen exacto del sitio en dos frases y una lista de las páginas importantes.
5. Nada de inventar: no escribas reseñas, valoraciones, premios, número de clientes, certificados, horarios, coordenadas, precios ni cifras del producto sin preguntarme. Deja fuera del schema cualquier campo que no conozcas.
Gates (en orden; no digas "hecho" hasta que pasen todos):
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 para cada página con strategy="mobile" y strategy="desktop". Aceptación: en móvil Performance de al menos 95 y Accessibility, Best Practices y SEO de 100; en escritorio las cuatro de al menos 95, con objetivo de 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 página de inicio 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 con 360, 390, 768 y 1440 píxeles de ancho, áreas táctiles de al menos 44 píxeles, sin errores de consola.
Comprobación de interacción: como site_preview no puede mostrar movimiento ni clics, dime qué debo mirar en mi propio navegador: en escritorio, al mover el ratón sobre el producto la tarjeta se inclina hacia el puntero con las insignias flotando delante, y vuelve a la pose inclinada cuando el ratón sale; al hacer clic en un punto de color o pulsar una tecla de flecha cambian la imagen, el nombre del color y el enlace de compra sin que nada en la página se desplace; con JavaScript desactivado el selector de color sigue funcionando; en un móvil la barra inferior está siempre visible y no tapa los enlaces del final de la página; con reducción de movimiento activada la tarjeta no se inclina.
Después de 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 siempre 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. 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.
