Crea un sitio de producto de varias páginas con fondo aurora, tarjetas de cristal esmerilado y temas claro y oscuro para
[AI product name] en el sitio
[server name] de mi servidor de hosting de Opus Growth. Producto:
[what it does, for whom]. Cómo funciona:
[three steps]. Qué produce o hace:
[4 to 6 features]. Datos y seguridad: [where data is stored, for how long, whether it is used for model training]. Prueba o vía de registro:
[trial length, sign-up URL]. Contacto:
[email],
[phone],
[WhatsApp number],
[address]. Dominio:
[domain]. Colores de marca:
[colours, or "you choose"]. Capturas o fotos del producto:
[links, or "none"].
Páginas: inicio (/), funciones (/ozellikler/), seguridad (/guvenlik/), contacto (/iletisim/), privacidad (/gizlilik/) y 404.html. Secciones del inicio en orden: hero (h1, introducción de dos frases, dos botones y la tarjeta de producto que es el elemento distintivo), tres pasos, para quién es (con una foto), preguntas frecuentes y una llamada a la acción final. En los productos de IA, la página de seguridad es la mitad de la decisión de compra; explica con claridad la retención de datos, el acceso y el entrenamiento de modelos. Sin formulario en la página de contacto, porque el servidor solo sirve archivos estáticos.
Estilo: aurora y cristal. Una luz suave y multicolor que se desplaza lentamente en el fondo (la aurora), con el contenido sobre tarjetas de cristal esmerilado. Sin paleta de morado a azul; elige tres tonos suaves acordes con la marca, como menta, albaricoque y azul hielo. Tipografía: una serif display suave de Fontshare (por ejemplo Gambetta 500) con una tipografía de texto serena (por ejemplo Synonym 400 y 600). Usa el efecto de cristal solo en las superficies de las tarjetas; no ahogues la página en cristal. Sin canvas, WebGL, vídeo, GSAP, Lenis ni Swiper. El único JavaScript es un pequeño selector de tema en línea. Elemento distintivo: una tarjeta de cristal en el hero con un ejemplo real en HTML de lo que hace el producto (por ejemplo, una decisión y una tarea extraídas de la transcripción de una reunión).
Reglas de aurora, cristal y tema (donde este estilo rompe con más facilidad el rendimiento y el contraste):
1. Haz la aurora en CSS puro: una capa `position: fixed` con aria-hidden, dos pseudoelementos (::before y ::after) y tres radial-gradients grandes dentro de ellos. Anima solo con transform (translate3d, rotate, scale) en un bucle `alternate` de 25 a 35 segundos y añade `will-change: transform`. No animes el gradiente en sí, background-position ni filter: blur; todos ellos repintan en cada fotograma. Pon la animación dentro de `@media (prefers-reduced-motion: no-preference)`; con movimiento reducido la aurora se detiene pero sigue visible.
2. Define los colores como variables CSS (--bg, --fg, --mute, --line, --card, --solid, --acc, --accfg y los tonos de la aurora) y apunta los colores de Tailwind a ellas (por ejemplo colors: {bg: "var(--bg)"}). Escribe los valores oscuros tanto bajo `:root
[data-theme="dark"]` como bajo `@media (prefers-color-scheme: dark) { :root:not(
[data-theme="light"]) }`, para que el tema del sistema se aplique incluso con JavaScript desactivado.
3. Selector de tema: un script de una línea en `<head>`, después de la hoja de estilos, lee la elección guardada en localStorage, escribe data-theme en `<html>` y añade la clase `js`; como se ejecuta antes del primer pintado, la página nunca parpadea en el tema equivocado. Envuelve el acceso a localStorage en try. Un pequeño script al final de la página cambia el tema al hacer clic, guarda la elección y actualiza el botón cuando cambia el tema del sistema. El botón es un `<button type="button">` real con `aria-pressed` en true mientras el modo oscuro está activo, y conserva su nombre accesible ("Tema oscuro") incluso cuando en móvil solo se muestra el icono. Oculta el botón sin JavaScript (`html:not(.js) .theme-toggle { display: none }`). Añade también `<meta name="color-scheme" content="light dark">`.
4. Mantén la tarjeta de cristal en una sola clase `.glass`: primero un fondo sólido (--solid) y después, dentro de `@supports (backdrop-filter: blur(1px))`, un fondo translúcido con `backdrop-filter: blur(18px) saturate(140%)` (con el prefijo -webkit- para Safari). Bajo `@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)` la tarjeta pasa a ser sólida y la aurora se oculta. No uses la utilidad backdrop-blur en el HTML; design-check avisa de "glassmorphism everywhere" cuando ve más de cinco en una página.
5. Mide el contraste en AMBOS temas. Lighthouse solo audita el tema claro; si no compruebas el oscuro por separado, el texto tenue del modo oscuro se cuela. Haz el fondo translúcido de la tarjeta lo bastante opaco para mantener el texto por encima de 4.5:1 incluso sobre el color más brillante de la aurora (en la demo, blanco al 66 por ciento en claro y verde oscuro al 58 por ciento en oscuro). Cambia el color del texto del botón de acento según el tema (blanco sobre verde pino oscuro en claro, verde oscuro sobre menta pálido en oscuro).
6. Da a la tarjeta del hero su entrada solo con transform y un atributo data-reveal (design-check reconoce el movimiento por ese atributo); nunca ocultes ni atenúes el h1, porque es el elemento LCP.
Configuración y trampas conocidas (cada una costó puntos o falló una verificación en la medición de la demo, no te las saltes):
1. Si ya hay un sitio en vivo en el servidor, avísame primero, porque la configuración sobrescribe index.html y la carpeta assets. Haz primero una vista previa de 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, redacta 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, 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 cdn.tailwindcss.com, el tailwind.config en línea, chrome.js y motion.js, y enlaza solo `/assets/site.css`. Recompila después de cada cambio de HTML. Como los colores del tema son variables, los atajos de opacidad de Tailwind (como bg-fg/50) no funcionan; define una variable aparte si necesitas un color translúcido.
3. Autoaloja las fuentes. 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 la fuente personalizada ahí. 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 pon 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 de página en 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 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 al descargarlas 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 above the fold 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 de HTML: empieza cada documento con un `<!DOCTYPE html>` en mayúsculas, usa comillas dobles en los atributos, usa ` ` para los espacios en el texto visible de los enlaces tel:, no uses nunca un 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".
SEO, AEO y GEO:
1. Usa URLs en forma de directorio con barra final (/ozellikler/, /guvenlik/, /iletisim/, /gizlilik/ o sus equivalentes en tu idioma). Rellena el bloque seo de site.config.js y ejecuta `node seo-stamp.mjs`. Para una empresa de software sin tienda física, establece localBusiness:false en site.config.js. Esquemas por página: inicio WebPage y FAQPage; funciones SoftwareApplication (applicationCategory, operatingSystem, featureList) y FAQPage; seguridad WebPage y FAQPage; contacto ContactPage; BreadcrumbList en las páginas interiores. No listes un certificado de seguridad ni un documento de cumplimiento que no tengas; si tienes uno, indica su número y fecha de vigencia. 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; mantenlo 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 un error), descripciones de 145 a 158 caracteres, un solo h1 por página. El contenido principal de cada página tiene al menos 150 palabras. En la demo, las páginas de contacto y privacidad salieron con 84 y 116 palabras al primer intento y se completaron con información real, como "qué ocurre durante la prueba" y "con quién se comparten los datos".
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 preguntas frecuentes propias de la página con `<details>` y márcalas 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 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 tiene un lastmod real. llms.txt tiene un resumen preciso del sitio en dos frases y una lista de las páginas importantes.
5. Nada de invenciones: no escribas reseñas, valoraciones, premios, número de clientes, certificados, horarios, coordenadas, precios ni cifras del producto sin preguntarme. Deja fuera del esquema por completo cualquier campo que no conozcas.
Verificaciones (en orden; no digas "listo" hasta que todas 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 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; 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 revisa sus rutas. Comprueba también el tema oscuro: como site_preview no puede cambiar el tema del sistema, ejecuta una auditoría de contraste en modo oscuro (por ejemplo, la regla color-contrast de axe-core con prefers-color-scheme: dark), o pon temporalmente el oscuro como predeterminado y haz una vista previa.
3. Ejecuta core_web_vitals para 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 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 a 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 ejecutar movimiento ni cambiar de tema, dime qué debo comprobar en mi propio navegador: la luz del fondo se desplaza muy lentamente; al hacer clic en el selector el tema cambia, la elección se mantiene al cambiar de página y la página nunca parpadea en el otro tema mientras carga; si el sistema operativo está en modo oscuro, el sitio se abre en oscuro; con reducir movimiento activado la aurora se detiene; con reducir transparencia activado las tarjetas pasan a ser sólidas; con JavaScript desactivado el selector se oculta pero el tema del sistema se sigue aplicando.
Tras publicar: haz una vista previa de la regla `/assets/* Cache-Control: public, max-age=31536000, immutable` con site_headers y aplícala cuando yo lo apruebe; a partir de entonces, versiona el nombre del archivo cada vez que cambie el CSS o el JS (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. Al final entrégame: una tabla de puntuaciones por página (página, cuatro puntuaciones en móvil, cuatro en escritorio, LCP, CLS), los resultados de las verificaciones y la lista de correcciones que aplicaste.
