Crea un sitio de aspecto tradicional para nuestro negocio familiar en mi servidor de hosting de Opus Growth
[server name]. Negocio:
[business name],
[what we make, e.g. olive oil or Turkish delight],
[city],
[founding year and generation, only if true]. Productos: [for each, name, pack size, short description and the published price, or "no price"]. Pasos de producción:
[short list]. Cómo se hacen los pedidos:
[phone, shop, delivery]. Teléfono:
[phone], correo electrónico:
[email], dirección de la tienda:
[address], dominio:
[domain]. Fotos de familia y de archivo:
[where they are, or "none"].
El aspecto es antiguo, la construcción es nueva. Debe parecerse a una etiqueta antigua, un letrero de tienda o un libro de cosecha, pero las páginas tienen que abrirse sin fallos en el móvil, no cargar nada de JavaScript y cada página debe medirse. El aspecto antiguo nunca es excusa para una legibilidad o un contraste deficientes.
La dirección de diseño es tradicional:
1. Tipografía: una sola familia serif clásica de Fontshare (por ejemplo Gambetta 400, 400 cursiva, 600). Versalitas con font-variant-caps: all-small-caps y mucho espaciado entre letras en el menú, los botones y las etiquetas; títulos centrados.
2. Color: fondo en tono papel, texto marrón tinta, un marrón secundario y un color principal (por ejemplo verde oliva), con un segundo color cálido solo en etiquetas pequeñas. Todo con un contraste de al menos 4.5:1.
3. Textura: una textura de papel para el fondo como data URI SVG con feTurbulence dentro del CSS; sin archivo de imagen extra ni petición extra.
4. Elemento distintivo: un marco de etiqueta antigua, una caja de doble filete con adornos en las esquinas (border, outline-offset y ::before, ::after), y un pequeño adorno dibujado en SVG inline entre secciones (por ejemplo una ramita de olivo), aria-hidden.
5. Maquetación: centrada y estrecha; productos en tarjetas de etiqueta enmarcadas, una columna en móvil.
6. Movimiento: ninguno.
7. Fotos: usa el archivo familiar si existe. Si no, puedes usar fotos de archivo de dominio público o con licencia abierta, pero indica la fuente y la licencia en el pie de foto y nunca las presentes como propias de la familia.
Páginas y su schema:
1. index.html: una primera pantalla enmarcada cuyo párrafo de apertura responda a "quién, qué hace, dónde, cómo vende", etiquetas de producto, una sección de familia, cómo pedir. WebPage. Define en site.config.js el subtipo de negocio más adecuado (por ejemplo Store o FoodEstablishment).
2. urunler.html: cada producto en su propia tarjeta de etiqueta con nombre, tamaño de envase, descripción y precio publicado. CollectionPage y un Product por artículo (brand, manufacturer #business, offers con price, priceCurrency, availability). Nunca escribas un precio que yo no te haya dado; si no hay precio, omite offers por completo.
3. hikayemiz.html: la historia real, generación por generación. AboutPage.
4. uretim.html: los pasos desde la cosecha o la materia prima hasta el envase, la definición oficial de calidad del producto y la normativa en que se basa (por ejemplo el Turkish Food Codex). WebPage y HowTo.
5. sss.html: seis preguntas reales sobre pedidos, entrega y conservación. FAQPage.
6. iletisim.html: teléfono de pedidos, dirección de la tienda, enlace al mapa; omite el horario si cambia con la temporada. ContactPage.
7. kvkk.html (aviso de privacidad) y 404.html.
Reglas técnicas. Síguelas al pie de la letra, porque los controles de más abajo miden exactamente esto:
1. Configuración. Ejecuta primero scaffold_site como vista previa, muéstrame la lista de archivos e instala con confirm=true cuando yo lo apruebe. Después lee completas site_design_guide y site_seo_guide. Antes de escribir código, redacta la dirección en _kaynak/ART.md (sensación, combinación tipográfica, colores con sus ratios de contraste, rejilla, elemento distintivo, decisión sobre el movimiento, lista de páginas) y enséñamela.
2. Elimina el JavaScript. Ninguna página de este sitio carga JavaScript. Quita de todas las páginas el script cdn.tailwindcss.com, la línea tailwind.config, las etiquetas de GSAP, ScrollTrigger, SplitText, Lenis y Swiper y las etiquetas script de motion.js, chrome.js y site.config.js; borra assets/chrome.js y assets/motion.js. Conserva assets/site.config.js, pero solo como fuente de brand, contact y seo para seo-stamp.mjs; nunca se carga en el navegador.
3. Menú y pie de página son HTML estático. Los componentes <site-nav> y <site-footer> los dibuja JavaScript, así que los rastreadores de búsqueda y de IA no pueden ver el menú, los enlaces internos ni los datos de contacto. Escribe la cabecera en _kaynak/ust.inc y el pie (nombre, dirección, teléfono, correo, todos los enlaces de página, aviso de privacidad, "Web: Opus Growth") en _kaynak/alt.inc. Usa la extensión .inc para que seo-stamp y html-validate no traten los fragmentos como páginas. Cada página lleva los marcadores <!-- ust:bas --><!-- ust:son --> y <!-- alt:bas --><!-- alt:son -->. Después escribe con site_write_file un script de Node sin dependencias en _kaynak/parca-bas.mjs: estampa ambos fragmentos entre los marcadores en cada archivo HTML, añade aria-current="page" al enlace del menú de la página actual y reescribe sitemap.xml usando el dateModified del JSON-LD de cada página como lastmod (omitiendo 404 y las páginas noindex). Construye el menú móvil sin JavaScript con <details><summary>Menu</summary>; el menú de escritorio y el móvil son dos elementos <nav> distintos con aria-label diferentes.
4. Aloja las fuentes tú mismo. Este sitio usa una familia serif clásica y tres archivos como máximo. Descarga el CSS de Fontshare (https://api.fontshare.com/v2/css?f[]=family@400,600&display=swap, código de peso 401 para la cursiva) con site_fetch en _kaynak/fontshare.css, léelo con site_read_file y toma solo las URL woff2 de la familia que pediste; el servicio a veces añade una familia que no solicitaste. Descarga cada woff2 con site_fetch en assets/fonts/. Pon las reglas @font-face (font-display: swap) dentro de assets/app.css, porque design-check.mjs solo busca una fuente personalizada en ese archivo. No uses las predeterminadas Inter, Roboto, Poppins ni Montserrat.
5. Compila Tailwind. assets/app.css pasa a ser el origen de Tailwind: @tailwind base; @tailwind components; @tailwind utilities; arriba del todo, luego @font-face, el anillo de foco, el skip link, una regla prefers-reduced-motion y tus propias clases de componente dentro de @layer components. Nunca des a una clase de componente el nombre de una utilidad de Tailwind (list-item, table, grid, container, hidden y similares), porque el choque rompe el diseño en silencio tras compilar. Escribe tailwind.config.js en la raíz (content: ["./*.html", "./**/*.html", "./_kaynak/*.inc"], colores y fontFamily). Ejecuta "npx --yes tailwindcss@3 -i assets/app.css -o assets/site.css --minify" con site_run_command y background=true, y espera con site_command_status. El <head> de cada página contiene, en este orden: un único <link rel="stylesheet" href="/assets/site.css">, después una línea preload por cada archivo de fuente usado en la primera pantalla (títulos, acento y cuerpo; as="font" type="font/woff2" crossorigin). Las líneas preload colocadas antes de la hoja de estilos retrasan el CSS y alargan el LCP; una fuente de la primera pantalla sin preload se intercambia tarde, desplaza la página y sube el CLS, y <link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">. La línea del favicon es obligatoria: sin ella el navegador pide /favicon.ico, recibe un 404 y el error de consola baja Best Practices.
6. Imágenes. Descarga las fotos con site_fetch usando resize e image_format="webp" en varios anchos (480, 800, 1200 y 1600 para la imagen de la primera pantalla, 480, 800 y 1200 para el resto; calidad entre 60 y 75, más baja para fotos con mucho detalle). Cada <img> lleva srcset, sizes acordes con la maquetación real, width y height (CLS cero) y un texto alternativo significativo y honesto. fetchpriority="high" va solo en la imagen que Lighthouse señale como elemento LCP, y esa imagen no es lazy; todas las demás usan loading="lazy". Si el elemento LCP es texto, ninguna imagen lleva fetchpriority. Prepara también assets/img/logo.png, un assets/img/og.jpg de 1200x630 y assets/img/favicon.svg.
7. Reglas de HTML (valores por defecto de html-validate). <!DOCTYPE html> en mayúsculas; sin atributo style en línea (incluido el style="background:var(--brand)" del kit, usa una clase en su lugar); en lugar de espacios normales en el texto de los enlaces tel:; un type en cada <button>; sin espacios al final de línea; tablas con <thead>, <tbody> y th scope. Los enlaces dentro de párrafos van subrayados; los enlaces del menú, el pie, las migas de pan y los botones tienen un área táctil de al menos 44x44 píxeles (min-h-
[44px] min-w-
[44px]).
8. Datos estructurados. Rellena el bloque seo de site.config.js (siteUrl, description, logo, imagen og, tipo de negocio, campos de dirección) y ejecuta "node seo-stamp.mjs" con site_run_command; estampa Organization, WebSite y, donde corresponda, un subtipo de LocalBusiness, además de las etiquetas canonical y OG. Añade a mano el schema específico de cada página: en todas un nodo WebPage con @id (o AboutPage, ContactPage, CollectionPage, ProfilePage), datePublished y dateModified, isPartOf #site, about #business o #org, y breadcrumb que apunte a un BreadcrumbList; además un Product con Offer por artículo en la página de productos, HowTo en la de producción y FAQPage en la de preguntas frecuentes. Escribe cada nodo en su PROPIO bloque <script type="application/ld+json"> y no uses un envoltorio @graph, porque seo-check.mjs solo lee el @type de primer nivel y no ve un BreadcrumbList dentro de @graph. Enlaza los nodos con @id. Nunca inventes horarios, coordenadas, valoraciones, reseñas, premios, cifras de clientes ni certificados; omite los campos desconocidos.
9. Acceso para IA. Escribe robots.txt: todo el sitio abierto, solo /_kaynak/ cerrado; Allow: / para GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended y Bingbot; tu decisión sobre CCBot con el motivo como comentario; la línea Sitemap al final. Añade llms.txt en la raíz: un resumen correcto del negocio en dos frases, las páginas importantes con una línea cada una y los datos de contacto. Escribe 404.html (noindex, con los marcadores de cabecera y pie).
10. Redacción. Cada página tiene al menos 150 palabras de texto original dentro de <main>, y el primer párrafo responde directamente a la pregunta principal de la página. Los títulos tienen de 48 a 60 caracteres y las descripciones de 145 a 158, únicos en cada página. Sin rayas largas ni medias, sin eslóganes manidos, sin promesas vacías. Si algo del sitio no es real, di claramente que es ficticio.
Controles. Después de cada cambio, ejecútalos con site_run_command en este orden y no avances hasta que cada uno salga limpio:
1. node _kaynak/parca-bas.mjs, node seo-stamp.mjs, la compilación de Tailwind (de nuevo si añadiste clases).
2. node seo-check.mjs: 0 errores y 0 avisos. Si avisa "gövde kısa" (cuerpo demasiado corto), añade texto real, no relleno.
3. node design-check.mjs: 0 errores. El único aviso admitido es "Hiç hareket yok" (sin movimiento); el estilo clásico lo exige, así que explica el motivo en el informe.
4. npx --yes html-validate "**/*.html": 0 errores.
5. Revisa cada página con site_preview en view="mobile" y view="desktop", y comprueba además la página de inicio a 360 y 768 píxeles. Corrige cualquier desbordamiento horizontal, título apretado o área táctil menor de 44 píxeles y vuelve a mirar.
6. Mide cada página con core_web_vitals en strategy="mobile" y strategy="desktop", y después audita la página de inicio y la más larga con seo_audit. Objetivo: en móvil, Accessibility, Best Practices y SEO en 100 y Performance de al menos 95; en escritorio, las cuatro d
