Crea desde cero un sitio nuevo para mi restaurante en mi servidor de hosting
[nombre del servidor]. Datos:
1. Nombre:
[nombre del negocio], tipo:
[restaurante / café / lugar de desayunos], cocina:
[tipo de cocina]
2. Carta con secciones, descripciones y precios:
[carta y precios]
3. Información sobre opciones vegetarianas, veganas, sin gluten y alérgenos:
[información dietética]
4. Horario de apertura (por separado para desayuno y cena si es distinto):
[horario]
5. Cómo se toman las reservas:
[teléfono / WhatsApp / ambos], teléfono:
[teléfono], WhatsApp:
[WhatsApp]
6. Dirección e indicaciones para llegar:
[dirección],
[aparcamiento y transporte]
7. De dónde viene el producto y nuestra historia:
[productores e historia]
8. Dominio:
[dominio], fotos reales:
[dónde están las fotos, o "usar stock"]
Primero confirma el servidor con list_servers y ejecuta scaffold_site con style="restaurant", primero con confirm=false y con confirm=true después de mi aprobación. Lee site_design_guide y site_seo_guide. Escribe en _kaynak/ART.md una decisión de diseño natural y orgánica y muéstramela: una tipografía serif cálida para titulares de Fontshare (por ejemplo Gambarino) con una tipografía suave para el cuerpo (por ejemplo Supreme), fondo arena, texto en tonos tierra, dos tonos cálidos en verde oliva y terracota, y la misma esquina redondeada en todas las tarjetas. El elemento distintivo es un recuadro de "pizarra del día" en la página de la carta. Si la fuente elegida no tiene el glifo ₺, escribe los precios con "TL".
Páginas y schema:
1. Inicio: la primera pantalla dice qué servimos y dónde, con los botones "Reservar mesa" y "Ver la carta" y una foto grande. Después, tres platos de la carta, de dónde viene el producto, un resumen del horario y la ubicación, y 4 preguntas frecuentes. Schema: WebPage, FAQPage, y añade servesCuisine, acceptsReservations (la URL de la página de reservas) y hasMenu al nodo #business.
2. Carta: en HTML, no en PDF. Cada sección tiene un encabezado y un enlace ancla, cada plato lleva nombre, descripción, precio y etiquetas dietéticas, y la parte superior de la página muestra la fecha de la última actualización y una nota sobre alérgenos. Toma los precios solo de la lista que te di; nunca inventes un precio que falte. Schema: Menu con MenuSection en hasMenuSection, MenuItem en hasMenuItem, Offer en offers (price, priceCurrency TRY) y suitableForDiet donde corresponda.
3. Reservas: cómo funcionan las reservas, teléfono y WhatsApp, un formulario de WhatsApp con mensaje prellenado (fecha, hora, número de personas, jardín o interior) y 3 preguntas frecuentes (llegada tardía, grupos grandes, cancelación). Schema: WebPage, FAQPage.
4. Nuestra historia y productores: quién lleva el local, de quién viene el producto y una tabla de temporada que muestre qué ingrediente está en la carta en qué meses. Schema: AboutPage.
5. Ubicación y horario: dirección, tabla de horarios, un enlace "Cómo llegar", cómo llegar en coche, desde el centro de la ciudad y en transporte público, y una nota de accesibilidad. Schema: ContactPage.
6. Una página 404.
Para mantener la velocidad a pesar de las fotos: una imagen grande en la primera pantalla y todas las demás en lazy; WebP con calidad 60 a 65 y no más de ocho imágenes por página; no cargues una librería de slider para la galería.
Nada inventado: no escribas reseñas, valoraciones, premios, certificados, cifras de clientes ni afirmaciones como "el mejor" que no sean reales. No añadas al schema ni al texto horarios, coordenadas, precios o un email que yo no te haya dado; deja el campo fuera y anótalo como dato faltante en el informe. No uses rayas largas ni eslóganes de relleno, y haz que el primer párrafo de cada página responda directamente a la pregunta de esa página.
Trabajo SEO común: cada página tiene un title único de 48 a 60 caracteres, una description de 145 a 158 caracteres, un único H1 y un canonical que termina en barra. Añade a cada página su propio nodo WebPage y BreadcrumbList, enlazados al grafo base por @id. En robots.txt escribe Allow: / para Googlebot, Bingbot, OAI-SearchBot, ChatGPT-User, GPTBot, Claude-SearchBot, Claude-User, ClaudeBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended y CCBot, explica la decisión en un comentario y anota qué cambiar si quiero bloquear los rastreadores de entrenamiento. sitemap.xml lleva fechas lastmod reales. llms.txt describe el negocio con precisión en dos frases y enumera el NAP y las páginas importantes con enlaces.
Configuración técnica (en este sitio no se usa la ruta por defecto del kit, por estas razones):
1. Compila Tailwind y elimina el CDN. El kit carga Tailwind mediante el Play CDN, que compila en el navegador, imprime una advertencia en la consola y reduce el rendimiento en móvil. Escribe _kaynak/package.json con site_write_file, instala con site_run_command("cd _kaynak && npm i -D tailwindcss@3 html-validate", background=true) y espera con site_command_status. En _kaynak/tailwind.config.js define content como "./*.html", "./**/*.html", "!./_kaynak/**" y "./_kaynak/chrome.mjs". Mueve las reglas @font-face, las líneas @tailwind y el anillo de foco, el skip link y la protección contra desbordamiento del app.css del kit a _kaynak/site.css. Genera la salida en assets/app.css, porque design-check.mjs busca las fuentes en ese archivo, y añade ?v=<hash del contenido> al enlace en cada página para que la caché del edge nunca sirva el archivo antiguo.
2. Aloja las fuentes en tu propio servidor. Lee la URL del CSS de las familias de Fontshare que elegiste (api.fontshare.com/v2/css?f[]=...) con site_read_url, descarga sus archivos woff2 en assets/fonts/ con site_fetch y decláralos con @font-face y font-display: swap. Precarga cada grosor usado en la primera pantalla con <link rel="preload" as="font" type="font/woff2" crossorigin>, tres archivos como máximo. Si te saltas esto, el cambio de fuente desplaza el diseño; en la demo, el CLS en escritorio fue 0,078 por este motivo y bajó a 0 con la precarga.
3. Haz el menú y el pie de página en HTML estático. Los componentes <site-nav> y <site-footer> del kit funcionan con JavaScript, y la mayoría de los rastreadores de IA nunca ven la carta, la dirección ni el teléfono. Elimina los scripts chrome.js y motion.js de todas las páginas. En _kaynak/chrome.mjs escribe dos funciones que construyan el HTML del encabezado y del pie a partir de assets/site.config.js; construye el menú móvil sin JavaScript con <details> y <summary>, y marca la página actual con aria-current="page". Escribe build.mjs en la raíz del sitio para que, en orden, ejecute node seo-stamp.mjs, vuelva a estampar todo lo que hay entre <!-- chrome:header:start --> y <!-- chrome:header:end --> (y lo mismo para el pie) en cada página, compile Tailwind y actualice el hash del enlace al CSS. Después de cada cambio, ejecuta solo site_run_command("node build.mjs").
4. Movimiento solo con CSS, y suave. Pon data-reveal en las tarjetas de imagen y construye la aparición con una animación CSS impulsada por el scroll (animation-timeline: view()) usando solo transform; no animes opacity, porque el texto que empieza con opacidad cero desaparece en navegadores sin JavaScript y suspende el contraste en las auditorías de accesibilidad. Envuelve la regla en @media (prefers-reduced-motion: no-preference) y @supports (animation-timeline: view()). No cargues GSAP, Lenis ni Swiper.
5. Reduce las imágenes. Descarga cada foto con site_fetch en archivos separados usando resize="480x", "800x", "1200x", "1600x", image_format="webp" y una calidad entre 60 y 68. Da a cada <img> srcset, sizes, y width y height que coincidan con la proporción real; si recortas, añade una clase de proporción como aspect-
[4/3] con object-cover, o el diseño se desplazará al cargar la imagen. La imagen de la primera pantalla lleva fetchpriority="high" y no es lazy; todas las demás llevan loading="lazy". Descarga la imagen para compartir como JPG de 1200x630 con site_fetch.
6. Pequeños detalles que restan puntos: añade un favicon SVG con <link rel="icon"> (de lo contrario el navegador pide /favicon.ico, el 404 aparece como error en la consola y baja Best Practices). Escribe DOCTYPE en mayúsculas, no uses atributos style y no dejes espacios al final de las líneas. Usa en lugar de espacios en el texto visible de los enlaces de teléfono (la regla tel-non-breaking de html-validate). Los enlaces del menú, pie, breadcrumb y encabezados deben medir al menos 44 píxeles de alto y de ancho. No incrustes un iframe de Google Maps; el sitio no debe hacer peticiones externas, así que muestra la dirección y un enlace "Cómo llegar".
7. Ninguna petición puede salir del sitio: fuentes, scripts, estilos e imágenes viven en tu propio servidor. No hay gestor de formularios, así que el formulario de contacto es un formulario method="get" que apunta a https://wa.me/
[número de WhatsApp] con un textarea prellenado llamado "text"; no hace falta JavaScript.
Controles (en este orden; no lo des por terminado hasta que todos pasen):
1. Ejecuta node build.mjs con site_run_command y después node seo-check.mjs: 0 errores, 0 advertencias. Una advertencia de contenido duplicado significa que dos páginas no son lo bastante distintas; reescríbelas.
2. node design-check.mjs: 0 errores. Si elegiste un estilo sin movimiento, informa de la advertencia "sin movimiento" como una decisión deliberada, con el motivo.
3. _kaynak/node_modules/.bin/html-validate en cada archivo HTML: 0 errores. Pon una línea _kaynak/ en un archivo .htmlvalidateignore en la raíz del sitio para que no se escaneen las dependencias.
4. Revisa cada página con site_preview en view="mobile", view="desktop" y también a 360 y 768 de ancho. Corrige el scroll horizontal, los titulares que desbordan, los botones apretados o el texto ilegible y vuelve a revisar.
5. Mide cada página con core_web_vitals en strategy="mobile" y strategy="desktop", y obtén las puntuaciones de accesibilidad, buenas prácticas y SEO con seo_audit. El objetivo en móvil es 100 en accesibilidad, buenas prácticas y SEO y al menos 95 en rendimiento; en escritorio, al menos 95 en las cuatro. En una página que no llegue, ejecuta core_web_vitals con resources=true, encuentra el elemento LCP y cualquier imagen sobredimensionada, corrígelo y repite seo_audit con runs=2, porque una sola ejecución de laboratorio puede fluctuar.
6. Las peticiones de red no deben contener ninguna dirección fuera del dominio propio del sitio.
Después de publicar: envía sitemap.xml con gsc_submit_sitemap y comprueba la página de inicio y las tres páginas más importantes con gsc_inspect_urls. Ninguna herramienta puede pulsar "Solicitar indexación"; enumera lo que debo solicitar a mano en Search Console.
Termina con este informe: la lista de páginas con las puntuaciones en móvil y escritorio por página en una tabla (rendimiento, accesibilidad, buenas prácticas, SEO, LCP, CLS), el resultado de cada control, las correcciones que hiciste y la información que aún necesitas de mí. Si no se alcanzó algún objetivo, dilo con claridad en lugar de darlo por terminado.
