Build a new site for my restaurant from scratch on my hosting server
[server name]. Details:
1. Name:
[business name], type:
[restaurant / café / breakfast place], cuisine:
[cuisine]
2. Menu with sections, descriptions and prices:
[menu and prices]
3. Vegetarian, vegan, gluten-free and allergen information:
[dietary information]
4. Opening hours (separately for breakfast and dinner if they differ):
[hours]
5. How bookings are taken:
[phone / WhatsApp / both], phone:
[phone], WhatsApp:
[WhatsApp]
6. Address and travel notes:
[address],
[parking and transport]
7. Where the produce comes from, and our story:
[producers and story]
8. Domain:
[domain], real photos:
[where the photos are, or "use stock"]
First confirm the server with list_servers and run scaffold_site with style="restaurant", confirm=false first and confirm=true after my approval. Read site_design_guide and site_seo_guide. Write a natural, organic design decision to _kaynak/ART.md and show it to me: a warm serif display face from Fontshare (for example Gambarino) with a soft body face (for example Supreme), a sand background, earth-toned text, two warm tones in olive green and terracotta, and the same rounded corner on every card. The signature element is a "today's board" box on the menu page. If your chosen font has no ₺ glyph, write prices with "TL".
Pages and schema:
1. Home: the first screen says what you serve and where, with "Book a table" and "See the menu" buttons and one large photo. Then three dishes from the menu, where the produce comes from, a summary of hours and location, and 4 FAQs. Schema: WebPage, FAQPage, and add servesCuisine, acceptsReservations (the booking page URL) and hasMenu to the #business node.
2. Menu: HTML, not a PDF. Every section has a heading and an anchor link, every dish has its name, description, price and diet labels, and the top of the page shows the last updated date and an allergen note. Take prices only from the list I gave you; never invent a missing price. Schema: Menu with MenuSection under hasMenuSection, MenuItem under hasMenuItem, Offer under offers (price, priceCurrency TRY), and suitableForDiet where it applies.
3. Booking: how bookings work, phone and WhatsApp, a WhatsApp form with a prefilled message (date, time, party size, garden or indoors), and 3 FAQs (late arrival, large groups, cancellation). Schema: WebPage, FAQPage.
4. Our story and producers: who runs the place, who the produce comes from, and a seasonal table showing which ingredient is on the menu in which months. Schema: AboutPage.
5. Location and hours: address, an hours table, a "Get directions" link, how to get there by car, from the town centre and by public transport, and an accessibility note. Schema: ContactPage.
6. A 404 page.
To stay fast despite the photos: one large image on the first screen and every other image lazy; WebP at quality 60 to 65 and no more than eight images per page; do not load a slider library for the gallery.
No invention: do not write reviews, ratings, awards, certificates, customer counts or claims like "the best" that are not real. Do not add opening hours, coordinates, prices or an email I did not give you to the schema or the text; leave the field out and list it as missing in the report. Use no long dashes and no stock slogans, and make the first paragraph of every page answer that page's question directly.
Shared SEO work: every page gets a unique title of 48 to 60 characters, a description of 145 to 158 characters, a single H1 and a canonical ending in a slash. Add each page's own WebPage node and BreadcrumbList, linked to the base graph by @id. In robots.txt write Allow: / for Googlebot, Bingbot, OAI-SearchBot, ChatGPT-User, GPTBot, Claude-SearchBot, Claude-User, ClaudeBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended and CCBot, explain the decision in a comment and note what to change if I want to block training crawlers. sitemap.xml carries real lastmod dates. llms.txt describes the business accurately in two sentences and lists the NAP and the important pages with links.
Technical setup (the toolkit's default path is not used on this site, for these reasons):
1. Compile Tailwind and drop the CDN. The kit loads Tailwind through the Play CDN, which compiles in the browser, prints a console warning and lowers mobile performance. Write _kaynak/package.json with site_write_file, install with site_run_command("cd _kaynak && npm i -D tailwindcss@3 html-validate", background=true) and wait for it with site_command_status. In _kaynak/tailwind.config.js set content to "./*.html", "./**/*.html", "!./_kaynak/**" and "./_kaynak/chrome.mjs". Move the @font-face rules, the @tailwind lines and the focus ring, skip link and overflow guard from the kit's app.css into _kaynak/site.css. Output to assets/app.css, because design-check.mjs looks for fonts in that file, and add ?v=<content hash> to the link on every page so the edge cache never serves the old file.
2. Self-host the fonts. Read the CSS URL of the Fontshare families you chose (api.fontshare.com/v2/css?f[]=...) with site_read_url, download its woff2 files with site_fetch into assets/fonts/, and declare them with @font-face and font-display: swap. Preload every weight used above the fold with <link rel="preload" as="font" type="font/woff2" crossorigin>, three files at most. Skip this and the font swap shifts the layout; in the demo desktop CLS was 0.078 for that reason and dropped to 0 with preloading.
3. Make the menu and footer static HTML. The kit's <site-nav> and <site-footer> components run on JavaScript, and most AI crawlers never see the menu, the address or the phone number. Remove the chrome.js and motion.js scripts from every page. In _kaynak/chrome.mjs write two functions that build the header and footer HTML from assets/site.config.js; build the mobile menu without JavaScript using <details> and <summary>, and mark the current page with aria-current="page". Write build.mjs at the site root that, in order, runs node seo-stamp.mjs, re-stamps everything between <!-- chrome:header:start --> and <!-- chrome:header:end --> (and the same for the footer) on every page, compiles Tailwind and updates the hash on the CSS link. After every change, run only site_run_command("node build.mjs").
4. Motion only through CSS, and gently. Put data-reveal on the image cards and build the reveal with a CSS scroll-driven animation (animation-timeline: view()) using transform only; do not animate opacity, because text that starts at zero opacity disappears in browsers without JavaScript and fails the contrast check in accessibility audits. Wrap the rule in @media (prefers-reduced-motion: no-preference) and @supports (animation-timeline: view()). Do not load GSAP, Lenis or Swiper.
5. Shrink the images. Download each photo with site_fetch into separate files using resize="480x", "800x", "1200x", "1600x", image_format="webp" and a quality between 60 and 68. Give every <img> srcset, sizes, and width and height that match the real ratio; if you crop, add a ratio class such as aspect-
[4/3] with object-cover, otherwise the layout shifts when the image loads. The first-screen image gets fetchpriority="high" and is not lazy; all others get loading="lazy". Download the sharing image as a 1200x630 JPG with site_fetch.
6. Small details that cost points: add an SVG favicon with <link rel="icon"> (otherwise the browser requests /favicon.ico, the 404 shows up as a console error and Best Practices drops). Write DOCTYPE in capitals, use no style attributes and leave no trailing whitespace. Use instead of spaces in the visible text of phone links (the html-validate tel-non-breaking rule). Links in the menu, footer, breadcrumb and headings must be at least 44 pixels high and wide. Do not embed a Google Maps iframe; the site should make no outside requests, so show the address and a "Get directions" link instead.
7. No request may leave the site: fonts, scripts, styles and images all live on your own server. There is no form handler, so the contact form is a method="get" form pointing at https://wa.me/
[WhatsApp number] with a prefilled textarea named "text"; no JavaScript is needed.
Gates (in this order; do not call it done until all of them pass):
1. Run node build.mjs with site_run_command, then node seo-check.mjs: 0 errors, 0 warnings. A duplicate content warning means two pages are not different enough; rewrite them.
2. node design-check.mjs: 0 errors. If you chose a motionless style, report the "no motion" warning as a deliberate decision with the reason.
3. _kaynak/node_modules/.bin/html-validate on every HTML file: 0 errors. Put a _kaynak/ line in a .htmlvalidateignore file at the site root so dependencies are not scanned.
4. Look at every page with site_preview at view="mobile", view="desktop", and also at 360 and 768 wide. Fix horizontal scrolling, overflowing headings, cramped buttons or unreadable text and look again.
5. Measure every page with core_web_vitals at strategy="mobile" and strategy="desktop", and get accessibility, best practices and SEO scores with seo_audit. The target on mobile is 100 for accessibility, best practices and SEO and at least 95 for performance; on desktop at least 95 for all four. On a page that misses, run core_web_vitals with resources=true, find the LCP element and any oversized image, fix it and repeat seo_audit with runs=2, because a single lab run can fluctuate.
6. The network requests must contain no address outside the site's own domain.
After publishing: submit sitemap.xml with gsc_submit_sitemap and check the home page and the three most important pages with gsc_inspect_urls. No tool can press "Request Indexing"; list what I need to request by hand in Search Console.
Finish with this report: the page list with mobile and desktop scores per page in a table (performance, accessibility, best practices, SEO, LCP, CLS), the result of each gate, the fixes you made and the information you still need from me. If a target was missed, say so plainly instead of calling it done.
