Crea un sitio corporativo, multipágina y totalmente estático para mi negocio en mi servidor de hosting de Opus Growth
[nombre del servidor]. Negocio:
[nombre del negocio],
[sector, p. ej. estudio de ingeniería y arquitectura],
[ciudad/zona de servicio]. Servicios:
[servicios con una breve descripción de cada uno]. Teléfono:
[teléfono], correo:
[correo], dirección:
[dirección], dominio:
[dominio]. Preferencia de color:
[preferencia de color/marca, o "a tu elección"]. Fotos: [dónde están las fotos reales, o "usa fotos de stock adecuadas"].
Este sitio da prioridad a la velocidad y la accesibilidad. Ni una sola línea de JavaScript en ninguna página; GSAP, Lenis y Swiper no se cargan nunca. Todo, incluidos el menú, el menú móvil y las preguntas frecuentes, funciona con HTML y CSS.
La dirección de diseño es "plano de dibujo técnico":
1. Tipografía: una fuente grotesca compacta para los títulos de Fontshare (p. ej. Cabinet Grotesk 800) y una fuente de texto sobria (p. ej. General Sans 400 y 600). Tres archivos de fuente como máximo.
2. Color: fondo claro en tono papel, texto en tinta oscura, un gris secundario y un único color de acento como señal. El acento aparece solo en etiquetas, líneas finas y el botón principal. Todos los colores de texto alcanzan al menos 4,5:1 de contraste.
3. Rejilla: 12 columnas, secciones separadas por líneas de 1 píxel; sin sombras, esquinas redondeadas ni degradados.
4. Elemento distintivo: bajo la imagen de la primera pantalla, una franja de cuatro celdas con el aspecto del cajetín de un plano de arquitectura (p. ej. tipo de proyecto, normativa aplicada, escala, número de hoja), y una cuadrícula milimétrica muy tenue dibujada solo con CSS detrás de la primera pantalla.
5. Movimiento: ninguno. Tampoco duraciones de transición; solo el subrayado y el color cambian al instante al pasar el cursor.
Páginas y su schema:
1. index.html: una primera pantalla cuyo párrafo inicial responda directamente a "qué haces, para quién, dónde", tres tarjetas de servicio (cada una enlaza a su sección), un proceso de cuatro pasos (numerados "Paso 1" con un contador CSS, no 01/02), dos ejemplos de proyectos, una banda con el teléfono. WebPage.
2. hizmetler.html: una sección por servicio; el primer párrafo responde a "cuándo hace falta, qué hace", luego una lista del alcance, duración típica y entregables. WebPage más un Service por servicio (provider #business, areaServed).
3. projeler.html: ejemplos con tipo de edificio, método y resultado; nombres de clientes solo con permiso. CollectionPage.
4. hakkimizda.html: quiénes somos, nuestras reglas de trabajo, dónde trabajamos. AboutPage.
5. sss.html: al menos seis preguntas reales dentro de <details>. WebPage y FAQPage.
6. iletisim.html: teléfono, correo y dirección dentro de <address>, un enlace al mapa; omite el horario si no lo conoces. ContactPage con mainEntity #business.
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. Preparació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 de fuentes, colores con sus ratios de contraste, rejilla, elemento distintivo, decisión sobre el movimiento, lista de páginas) y muéstramela.
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 marca, contacto y seo para seo-stamp.mjs; nunca se carga en el navegador.
3. El menú y el 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>Menú</summary>; el menú de escritorio y el móvil son dos elementos <nav> distintos con aria-label diferentes.
4. Aloja tú mismo las fuentes. Este sitio usa tres archivos de fuente 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 cursiva) con site_fetch a _kaynak/fontshare.css, léelo con site_read_file y toma solo las URL woff2 de la familia que has pedido; 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; al principio, luego @font-face, el anillo de foco, el enlace de salto, 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 en silencio el diseño 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">, luego una línea preload por cada archivo de fuente usado en la primera pantalla (títulos, acento y texto; 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 aumenta 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 en la consola baja la puntuación de 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 el diseño real, width y height (CLS cero) y un texto alt con sentido y honesto. fetchpriority="high" va solo en la imagen que Lighthouse señala 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 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 propio de cada página: en todas una entidad WebPage con @id (o AboutPage, ContactPage, CollectionPage, ProfilePage), datePublished y dateModified, isPartOf #site, about #business o #org, y breadcrumb apuntando a un BreadcrumbList; además un Service por servicio en la página de servicios 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 nivel superior y pasa por alto un BreadcrumbList dentro de @graph. Enlaza los nodos con @id. No inventes nunca horarios, coordenadas, valoraciones, reseñas, premios, cifras de clientes ni certificados; omite los campos que no conozcas.
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 entre 48 y 60 caracteres, las descripciones entre 145 y 158, únicos en cada página. Sin rayas largas ni medias, sin eslóganes típicos, sin promesas vacías. Si algo del sitio no es real, dilo claramente: es ficticio.
Controles. Tras 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 advertencias. Si avisa de "gövde kısa" (cuerpo demasiado corto), añade texto real, no relleno.
3. node design-check.mjs: 0 errores. La única advertencia admisible es "Hiç hareket yok" (ningún movimiento); es una decisión deliberada de este sitio, 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 zona 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 audita después 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 de al menos 95. Ninguna petición puede salir del sitio. Si el LCP es alto, usa resources=true para encontrar el archivo que lo frena: normalmente líneas preload colocadas antes de la hoja de estilos, o un fetchpriority dado a una imagen que no es el elemento LCP. Si el CLS supera 0,1, busca una fuente de la primera pantalla sin preload.
No des el trabajo por terminado hasta que todo esto se cumpla.
Tras publicar, envía https://
[domain]/sitemap.xml con gsc_submit_sitemap
