How to Build a Restaurant Website with AI

What We're Building

In this tutorial, we are building a complete, multi-page restaurant website from a single prompt. The site includes:

• A homepage with a hero section and an about/story block
• A menu page with categorized dishes and prices
• A reservation and contact page with a working form layout
• A gallery section showcasing the restaurant's atmosphere

The entire site uses HTML and Tailwind CSS - no frameworks, no build tools, no dependencies. You get a folder of static files you can open in a browser, deploy to Netlify or Vercel in 30 seconds, or hand to a developer to extend.

Restaurant websites are one of the most common projects small business owners need, and they follow well-established patterns. That makes them an ideal candidate for AI generation: the structure is predictable, the content categories are known, and the design expectations are clear. The difference between a generic template and a professional-looking site comes down to the specificity of your prompt.

If you are new to AI-powered code generation and want to understand how the agent loop works under the hood, start with What Is an AI Agent App Builder?. This post is the hands-on build.

The Prompt

Here is the exact prompt I used. I will break down every important decision afterward:

Build a restaurant website for "Taverna del Sol," an upscale Mediterranean restaurant. Use HTML and Tailwind CSS (via CDN). The site should have four sections on a single page: (1) A hero section with a large background image placeholder, the restaurant name, tagline "Sun-Kissed Flavors, Timeless Recipes," and a "Reserve a Table" CTA button. (2) An About section with a short story about the restaurant's founding, mentioning the chef's name (Chef Elena Maris) and the philosophy of seasonal, locally sourced ingredients. (3) A menu section organized into four categories: Appetizers (4 items), Mains (4 items), Seafood (3 items), and Desserts (3 items). Each item should have a name, short description, and price. Use realistic Mediterranean dish names and prices between $12-$45. (4) A reservation/contact section with a form (name, email, phone, date, time, party size, special requests) and the restaurant's address (742 Coastal Avenue), phone number, and hours (Tue-Sun, 5pm-11pm, closed Monday). Use a warm color palette: deep olive (#5c6b3c) for headers, warm cream (#fdf6ec) for backgrounds, terracotta (#c4613a) as the accent color, and charcoal (#2d2d2d) for body text. Include a sticky navigation bar at the top and a footer with social media icon placeholders.

Let me explain why each part of this prompt matters:

Named the restaurant and cuisine type. "Taverna del Sol" and "Mediterranean" give the agent a specific identity to work with. The name influences the typography feel, the cuisine type drives the menu content, and together they create a coherent brand voice across the entire page. A prompt that says "build a restaurant website" produces generic output. A prompt that says "upscale Mediterranean restaurant called Taverna del Sol" produces something that looks designed. Specified the tagline. "Sun-Kissed Flavors, Timeless Recipes" means the hero section has real copy from the start. Without a tagline, the agent writes placeholder text like "Welcome to Our Restaurant" - which means you waste an iteration replacing it. Defined the menu structure with counts. Four categories with specific item counts (4, 4, 3, 3) and a price range ($12-$45) prevents the agent from generating either too few items (which looks empty) or too many (which overwhelms the page). The instruction to use "realistic Mediterranean dish names" eliminates generic placeholders. Included specific contact details. A real-looking address, phone format, and hours give the reservation section credibility. The "closed Monday" detail is the kind of specificity that makes the output feel like a real business site rather than a template. Color palette with semantic purpose. Deep olive for headers evokes the Mediterranean. Warm cream backgrounds feel inviting. Terracotta accents suggest warmth and earthiness. These are not random hex values - they are a coordinated palette that tells the agent exactly how to style every element.

What the Agent Generated

The agent produced a single index.html file with approximately 480 lines of clean, well-structured HTML and Tailwind utility classes. Here is the structure:

``

taverna-del-sol/

├── index.html # Complete single-page website

`

The file includes:

• A with the Tailwind CDN, Google Fonts (Playfair Display for headings, Inter for body text), and a custom Tailwind config extending the default palette with our specified colors
• A sticky
• A full-viewport hero section with a gradient overlay on the placeholder background, the restaurant name in large serif type, the tagline, and a terracotta CTA button
• An About section with a two-column layout: text on the left, placeholder image on the right
• A Menu section using a CSS grid with category tabs and individual dish cards showing name, description, and price
• A Reservation section with a two-column layout: form on the left, contact info and hours on the right
• A footer with social icon placeholders, the address, and a copyright line

The total file size was under 20KB - no images, no JavaScript dependencies, just HTML and Tailwind classes loaded from the CDN.

The Design Decisions

The agent made several smart design choices worth analyzing:

Typography pairing. Playfair Display for headings and Inter for body text is a classic serif/sans-serif combination that signals "upscale but approachable." The agent chose this pairing based on the "upscale Mediterranean" cue in the prompt - a casual diner would have gotten a different combination. Section rhythm. Each section alternates between full-width and contained-width layouts. The hero is full-bleed, the About section is max-width with padding, the menu goes slightly wider, and the reservation pulls back to a comfortable reading width. This variation prevents the page from feeling monotonous. Menu card layout. Each dish is displayed in a card with the name left-aligned, the price right-aligned on the same line, and the description below in a smaller, lighter font. This is the standard pattern used by most restaurant websites (and physical menus) because it makes scanning prices easy while keeping descriptions accessible. The hero CTA. The "Reserve a Table" button is terracotta (#c4613a) on the cream background, creating strong contrast. It links to the reservation section via a smooth-scroll anchor. This is the single most important conversion element on any restaurant website, and the agent placed it prominently. Mobile responsiveness. The Tailwind classes include responsive breakpoints: the two-column About section stacks to single-column on mobile, the menu grid goes from 2 columns to 1, and the reservation form takes full width. The sticky nav collapses appropriately. All of this came from the Tailwind utility classes without any custom CSS.

Iterating on the Design

The first generation was strong, but three targeted iterations elevated it:

Iteration 1: "Add an image gallery section between the menu and the reservation section. Display 6 placeholder image boxes in a 3x2 grid on desktop, 2x3 on tablet, and single column on mobile. Each image box should have a subtle hover effect that scales the image up slightly with a dark overlay showing a caption. Use captions like 'Our Terrace at Sunset,' 'Chef Elena in the Kitchen,' 'Fresh Catch of the Day,' 'The Wine Cellar,' 'Saturday Night Ambiance,' and 'Handmade Pasta.'"

This added a visually rich section that breaks up the text-heavy menu and reservation areas. The hover effect gives the gallery interactivity without JavaScript - pure CSS transform and opacity transitions. The specific captions make the placeholder gallery feel intentional rather than generic.

Iteration 2: "Make the reservation form more prominent. Add a warm cream background card with a subtle box shadow around the form. Make the submit button full-width and terracotta-colored with white text. Add a heading above the form that says 'Reserve Your Table' in Playfair Display. Below the submit button, add a small note: 'For parties of 8 or more, please call us directly.'"

The reservation form went from feeling like a standard contact form to feeling like the primary conversion point of the page. The card with shadow lifts it off the background, the full-width button is impossible to miss, and the note about large parties adds a professional touch that signals this is a real business site.

Iteration 3: "Update the sticky navigation bar to have a transparent background when at the top of the page and a solid white background with a subtle shadow when the user scrolls down. Add a small inline script that toggles classes on scroll. The nav links should be white text when transparent and charcoal text when on the white background."

This required a small