Construye para mí un sitio editorial de experto en mi servidor de hosting de Opus Growth
[server name]. Yo:
[full name],
[specialism, e.g. export consultant],
[area I serve, or "online"]. Servicios:
[services]. Experiencia: [real experience and the sectors I have worked in; do not invent]. Teléfono:
[phone], correo:
[email], dominio:
[domain]. Temas de las dos primeras guías:
[topic 1],
[topic 2]. Si mi oficina recibe visitas, su dirección:
[address or "none"].
El sitio debe leerse como una publicación que demuestra su experiencia a través de la escritura, no como un folleto. Las guías están en el centro del sitio, porque son lo que los lectores y las respuestas de IA citan.
La dirección de diseño es editorial:
1. Tipografía: una serif con carácter de Fontshare para los títulos (p. ej. Zodiak 700 y 400 cursiva) y una sans tranquila para la interfaz y los textos cortos (p. ej. Author 400 y 600). Cuerpo del artículo en la serif a 19 píxeles, interlineado 1,7, como máximo 68 caracteres por línea.
2. Color: fondo de papel crema, texto en tinta oscura, un gris cálido secundario y un solo acento oscuro (p. ej. burdeos). El acento aparece solo en los kickers, la capitular y las líneas de las citas destacadas.
3. Retícula: 12 columnas; una portada asimétrica de 7 a 5 en la página de inicio con finas líneas verticales entre columnas. Sin sombras ni esquinas redondeadas.
4. Elemento distintivo: una cabecera con doble filete como el título de un periódico (con una fina línea de fecha encima) y, en los artículos, una gran capitular en el color de acento más una cita destacada al margen.
5. Movimiento: ninguno.
Páginas y su schema:
1. index.html (portada): un titular y una entradilla cuyo primer párrafo responda a "quién eres, a quién ayudas y con qué", la imagen y el título del artículo principal, una columna lateral con las cajas del otro artículo, los servicios y el autor, una cita destacada y una franja de "cómo trabajo". WebPage y Person.
2. hizmetler.html: una sección por servicio; el primer párrafo dice a quién va dirigido y cuándo, seguido de pasos numerados y del entregable escrito. Un Service por servicio con el Person autor como provider.
3. hakkimda.html: experiencia real, principios de trabajo (sin resultados garantizados), cómo se producen los artículos y la política de fuentes. ProfilePage con mainEntity Person (jobTitle, knowsAbout, worksFor #org).
4. rehber/index.html: artículos del más reciente al más antiguo, con fecha y autor. CollectionPage e ItemList (numberOfItems).
5. rehber/
[article].html: al menos 700 palabras, un primer párrafo que responda directamente a la pregunta, una jerarquía de H2, una tabla con thead y th scope donde ayude, al menos una cita destacada, de dos a cuatro enlaces internos y fuentes al final. Arriba, un enlace al autor y las fechas de publicación y de última actualización en <time>. Article (headline, image, datePublished, dateModified, author mediante @id al Person, publisher #org). Si usas cifras de ejemplo, indica que son ficticias.
6. iletisim.html: ContactPage. 7. kvkk.html (aviso de privacidad) y 404.html.
Si la oficina no recibe visitas, define localBusiness: false en site.config.js; Organization más Person es suficiente.
Reglas técnicas. Síguelas al pie de la letra, porque las puertas de control 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, escribe la dirección en _kaynak/ART.md (sensación, combinación tipográfica, colores con ratios de contraste, retícula, 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 cada página 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 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: inserta 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 como lastmod el dateModified del JSON-LD de cada página (omitiendo 404 y las páginas noindex). Construye el menú móvil sin JavaScript con <details><summary>Menú</summary>; los menús de escritorio y móvil son dos elementos <nav> distintos con aria-label diferentes.
4. Aloja tú mismo las fuentes. Este sitio usa dos familias y cinco archivos como máximo; la fuente de títulos, la de la entradilla en cursiva y la del cuerpo aparecen todas en la primera pantalla, así que precarga las cuatro. En la demo, precargar solo dos empujó el CLS de un artículo largo a 0,24 y el Performance móvil a 86; precargar las cuatro dio CLS 0 y Performance 99. 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 Inter, Roboto, Poppins ni Montserrat por defecto.
5. Compila Tailwind. assets/app.css pasa a ser el origen de Tailwind: @tailwind base; @tailwind components; @tailwind utilities; arriba, 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. No des nunca a una clase de componente el nombre de una utilidad de Tailwind (list-item, table, grid, container, hidden, etc.), 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">, luego 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 en 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, menor para fotos con mucho detalle). Cada <img> lleva srcset, sizes que coincidan con el diseño real, width y height (CLS cero) y un texto alt significativo 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; ningún 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 los 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; este estampa Organization, WebSite y, cuando 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 las páginas un nodo 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, Person y ProfilePage para el autor, ItemList en el índice de guías y Article en cada guía. 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 no ve un BreadcrumbList dentro de @graph. Enlaza los nodos con @id. No inventes nunca horarios, coordenadas, valoraciones, reseñas, premios, número de clientes ni certificados; deja fuera 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 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, indícalo claramente como ficticio.
Puertas de control. Tras cada cambio, ejecútalas con site_run_command en este orden y no avances hasta que cada una esté limpia:
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 admisible es "Hiç hareket yok" (sin movimiento); es una decisión deliberada a favor de la experiencia de lectura, 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 también 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 página más l
