Crea un sitio de producto neobrutalista, de varias páginas y sin JavaScript para
[nombre del producto o startup] en el sitio
[nombre del servidor] de mi servidor de hosting de Opus Growth. Producto:
[qué hace y para quién]. Cómo funciona:
[tres pasos]. Funciones principales:
[4 a 6 funciones]. Precios: [nombres de los planes y precios, o "sin página de precios"]. Enlaces de descarga o registro:
[App Store, Google Play o URL de registro]. Contacto:
[email],
[teléfono],
[número de WhatsApp],
[dirección]. Dominio:
[dominio]. Colores de marca:
[colores, o "tú eliges"]. Fotos o capturas reales:
[enlaces, o "ninguna"].
Páginas: inicio (/), cómo funciona (/nasil-calisir/ o /how-it-works/), precios (/fiyat/), nosotros (/hakkimizda/), contacto (/iletisim/), privacidad (/gizlilik/) y 404.html. Secciones de la home en orden: hero (h1, introducción de dos frases, dos botones, etiquetas sticker y el elemento distintivo), franja de categorías, tres pasos, para quién es (con una foto), funciones, preguntas frecuentes y una llamada a la acción final. Sin formulario en la página de contacto; en su lugar email, teléfono, un enlace de WhatsApp con mensaje prellenado y los enlaces de descarga, porque el servidor solo sirve archivos estáticos.
Estilo: neobrutalista, pero como un producto, no como un juguete. Bordes negros gruesos (3 píxeles), sombras duras sin desenfoque (solo negro, desplazadas 4, 6 y 10 píxeles), bloques de color plano y brillante (como máximo cinco colores planos, por ejemplo tomate, limón, menta, azul cielo y lila sobre fondo crema), insignias ligeramente inclinadas que parecen stickers. Tipografía: una fuente display robusta y con carácter de Fontshare (por ejemplo Chubbo) con una grotesca tranquila para el texto (por ejemplo Supreme 400 y 700). Sin degradados, sin efecto cristal, sin sombras suaves y sin mezclas de morado a azul. El sitio no tiene nada de JavaScript; GSAP, Lenis y Swiper no se cargan. Elemento distintivo: a la derecha del hero, una tarjeta de bordes gruesos que dibuja la pantalla principal del producto en HTML real en lugar de una imagen (por ejemplo, los gastos del mes de un hogar y el reparto de cuentas a fin de mes), con stickers pegados alrededor.
Reglas de color, contraste y movimiento (donde este estilo pierde puntos con más facilidad):
1. Escribe el texto en negro sobre cualquier fondo de color y nunca uses texto blanco. Calcula la relación de contraste de cada color frente al negro y ponla en ART.md como tabla; oscurece cualquier color por debajo de 4,5. En la demo, el valor más bajo fue 6,7 sobre el naranja tomate, y accesibilidad dio 100 en todas las páginas.
2. Haz que el anillo de foco sea de 3 píxeles de negro con 3 píxeles de separación, cambiando a amarillo limón en un footer negro. Usa outline-offset para que el anillo de foco no se confunda con el borde grueso.
3. Haz el desplazamiento juguetón de botones y tarjetas solo con transform y box-shadow: al pasar el cursor translate(-2px, -2px) y una sombra más grande, al pulsar translate(4px, 4px) y sin sombra. Los botones miden al menos 48 píxeles de alto, los botones pequeños al menos 44.
4. Pon la inclinación de los stickers en la propiedad independiente `rotate`, no en transform, y define el ángulo con una clase de propiedad arbitraria de Tailwind como `
[--r:-4deg]`. Así los stickers siguen inclinados incluso cuando la regla de reduced-motion restablece transform, y no hace falta ningún atributo style="".
5. Haz la entrada de "golpe" de los stickers solo con `scale` y `translate`, dentro de `@media (prefers-reduced-motion: no-preference)` y con un atributo data-reveal="slap" (design-check reconoce el movimiento por ese atributo). Sin ocultar con opacity, y el h1 nunca se mueve. Con prefers-reduced-motion: reduce, todas las animaciones y transiciones se desactivan.
6. Marca los stickers decorativos con aria-hidden="true"; las insignias que aportan información (por ejemplo "gratis hasta 6 personas") se quedan como elementos de lista normales. En móvil, oculta un sticker decorativo por debajo de 640 píxeles si se superpone con otra insignia en la esquina de la tarjeta; en la demo, el sticker "recibo añadido" tapaba la insignia "3 personas" a 390 píxeles.
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 activo 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 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 ART.md corto 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. Este sitio no tiene archivos JavaScript, así que la lista content no necesita entradas de JS.
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 la fuente personalizada ahí. 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 pon esas 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 footer 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 footer como texto plano, y haz que los enlaces del footer 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 por encima del 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 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:, nunca uses 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".
8. Si el footer tiene fondo negro, haz que sus enlaces sean crema con hover limón, y que cada uno mida al menos 44 píxeles de alto.
SEO, AEO y GEO:
1. Usa URLs de estilo directorio con barra final (/nasil-calisir/, /fiyat/, /hakkimizda/, /iletisim/, /gizlilik/ o sus equivalentes en tu idioma). Rellena el bloque seo de site.config.js y ejecuta `node seo-stamp.mjs`. Para una startup sin tienda física, pon localBusiness:false en site.config.js. Esquemas por página: home WebPage y FAQPage; cómo funciona WebPage y FAQPage; precios SoftwareApplication (applicationCategory, operatingSystem y un Offer por plan) y FAQPage; nosotros AboutPage; contacto ContactPage; BreadcrumbList en las páginas interiores. Como no añadirás reseñas ni valoraciones de usuarios a SoftwareApplication, es posible que Google no muestre un resultado enriquecido de app; no pasa nada, no inventes una valoración. 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 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 nosotros, contacto y privacidad quedaron entre 113 y 148 palabras en el primer intento; añade información real, como "qué incluir en una solicitud de soporte" o "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 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 preguntarme. Deja fuera del esquema cualquier campo que no conozcas.
Gates (en orden; no digas "listo" 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 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 comprueba sus rutas.
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 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 vuelve a medir. 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 de tiendas y 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 interacción: como site_preview no puede mostrar el movimiento, dime qué debo mirar en mi propio navegador: un botón sube y se desplaza hacia la izquierda al pasar el cursor y se hunde en su sombra al pulsar; los stickers aparecen con un suave golpe al cargar la página; al tabular se ve un anillo de foco negro grueso en cada enlace; con reducir movimiento activado en el sistema operativo nada se mueve pero los stickers siguen inclinados; con JavaScript desactivado el menú móvil sigue abriéndose.
Después de publicar: previsualiza 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 home 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 los gates y la lista de correcciones aplicadas.
