Vibe Code an Italian Restaurant Website
Free vibe coding prompt to build a complete Italian restaurant website. One HTML file with menu, reservations, gallery, Google Map, and SEO-ready schema markup. Paste into ChatGPT or Claude and deploy today.
Build a one-page restaurant website as a single self-contained HTML file
(inline CSS and JS, no external dependencies except Google Fonts and
Unsplash images via their CDN).
═══════════════════════════════════════════════════════════════
BUSINESS DETAILS
═══════════════════════════════════════════════════════════════
- Name: [RESTAURANT NAME]
- Cuisine / concept: [e.g., trattoria, sushi bar, wood-fired pizza, wings]
- Address: [FULL ADDRESS]
- Phone: [PHONE]
- Email: [EMAIL]
- Social: Facebook + Instagram URLs (open in new tab, rel="noopener")
- Booking: by phone or email only (no online form)
- Opening hours: [WEEKDAY / WEEKEND / SUNDAY hours]
- Founded year: [YEAR] (used in "EST [YEAR]" marker)
═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: [LIST HEX VALUES]
- Optimize the palette for contrast and accessibility, derive deeper/lighter
variants if needed, and add ONE accent color (warm gold ~#e8b75a works well)
for CTAs and highlights if the brand palette is cool-leaning. Use gradients
for hero backgrounds and feature cards.
- If a logo SVG is provided, extract only the badge/mark (drop wordmark sheets
or color variations). Define it once as an inline <symbol> and reference via
<use> in nav, footer, and favicon (inline SVG data URI).
═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Editorial, minimalist, business-oriented, NOT generic fast-food.
- Type pairing: a high-contrast display serif (Fraunces, Playfair, or similar)
for headings + a clean geometric sans (Outfit, Inter) for body. NO
handwritten/script fonts (Caveat, Pacifico, etc.).
- Eyebrow / section labels: uppercase, tracked (.18em letter-spacing), short,
prefixed by a thin 28px horizontal line built with a CSS ::before
pseudo-element, NOT a tilde, dash, or emoji.
- Headlines: short and punchy with ONE italic accent word colored with a
gradient text fill ("Where every bite takes flight", italic on "takes flight").
- Generous whitespace, asymmetric grids, real photography over illustration.
- NO EMOJIS anywhere in the UI, not in headlines, icons, cards, labels, or
buttons. Use a consistent custom SVG line-icon set instead:
• viewBox="0 0 24 24", fill="none", stroke="currentColor"
• stroke-width 1.6 to 1.8, stroke-linecap/linejoin "round"
• Defined once as <symbol> blocks at the top of <body>, used via <use>
• Cover at minimum: flame, leaf, plate, utensils, bowl, sandwich, spice,
stack, knife, sauce, chair, clock, pin, phone, mail, star
- Icon containers: small rounded square badges (44 to 48px) with light brand-tinted
bg that flip to filled brand color on hover. Circular outlined variant for
dark sections.
- Subtle motion only: fade-ins on scroll, Ken Burns zoom on hero images, hover
lifts (translateY -4 to -8px), 0.3 to 0.5s easings.
═══════════════════════════════════════════════════════════════
SECTIONS (in this exact order)
═══════════════════════════════════════════════════════════════
1. FIXED NAV (glass effect, rgba bg + backdrop-filter blur)
- Logo (badge SVG + two-tone wordmark) | nav links | "Book a Table" CTA pill
- Mobile: hamburger that slides in a full-width menu
2. HERO CAROUSEL (3 slides, auto-rotate every 6s)
- Two-column grid: text left, image right (cover, ~520px tall, rounded 28px,
deep shadow, subtle gradient overlay on lower-right corner)
- Each slide: brand-gradient background + soft radial blob shapes that drift
- Each slide has: eyebrow with line marker, two-tone headline (regular +
italic gradient accent word), short paragraph, primary + secondary CTA
- Floating pill caption on each image (bottom-left) with a pulsing gold dot
- Carousel controls: glass-effect prev/next arrows, pill-shaped dot
indicators (active state widens and changes to accent color)
- Image animations: slide-in from right + Ken Burns zoom on active slide
- Mobile (<900px): hide image, hide arrows, stack CTAs full-width
3. STORY / ABOUT
- Two-column: text left (eyebrow, headline with italic accent, 2 short
paragraphs, 3-stat row separated by border-top, years in business,
signature element count, guest rating)
- Right: clean photo composition, large rounded photo (chef/kitchen) +
overlapping smaller photo (interior) with cream-colored border frame
- Two small markers floating over the composition:
• "EST [YEAR]" tag in deep brand color (top-left)
• Award/credibility badge in cream with star SVG icon (bottom-right)
4. MENU
- Section header (eyebrow, large headline with italic accent, subhead)
- Category filter chips (All / [3-4 categories]), active filled with brand
color, others outlined; smooth filtering via JS
- Auto-fit grid of cards (minmax 320px, gap 30px)
- Each card: square icon badge (light brand bg, flips filled on hover) +
dish name (serif) + price (serif, brand color) + description + small
uppercase tag chip
- Sprinkle 2-3 "featured" cards in brand-gradient with cream text for
visual rhythm and to highlight signature dishes
- Build a sensible menu with 10-12 dishes appropriate to the cuisine,
spread across categories
5. EXPERIENCE STRIP (dark section)
- Deep brand background with soft radial gradient accents
- 4-column row of value props (sourcing, craft, atmosphere, service)
- Each: circular outlined icon badge + bold heading (gold-accented) +
1-line subhead
6. PRESS STRIP
- Thin cream section with subtle borders top/bottom
- "AS FEATURED IN" label (uppercase tracked) on left + 4-5 typographic
press names on right (mix of italic serif and condensed uppercase sans,
muted color, hover to brand color)
- NO real publication logos, typeset names only to avoid trademark issues
7. TESTIMONIALS
- Section header (eyebrow, headline with italic accent)
- 3-column grid of quote cards
- Each: oversized opening quotation mark in muted brand color, quote body,
5 SVG stars, separator, author block with gradient-circle initials avatar
+ name + role/context
- NO stock photos of fake people, use initials avatars only
8. CONTACT + BOOKING
- Two-column: contact info left, booking card right
- Left: eyebrow, headline, 3-item list with gradient-square icon badges
(pin/phone/mail), each with uppercase label above value
- Right: brand-gradient card with radial blob accents
• Eyebrow + headline + supporting copy
• Two large tappable buttons (call + email) with gold square icon +
label/value stacked text
• Opening hours table below a separator
• mailto: links have prefilled subject ("Table Reservation at [NAME]")
9. GOOGLE MAP
- Full-width section, max-width 1300px, rounded 24px container with shadow
- Embedded via Google Maps embed URL (no API key required):
<iframe src="https://www.google.com/maps?q=[ENCODED+ADDRESS]&z=15&output=embed">
- Floating overlay card (top-left of map): small uppercase label with
pulsing gold dot, restaurant name, address, "Get directions →" link
opening Google Maps in new tab with destination= param
- Subtle CSS filter on iframe (saturate .9, contrast 1.05) to harmonize
with brand
- Mobile: overlay becomes static below the map
10. FAQ
- Two-column: intro on left, accordion on right
- Left: eyebrow, headline with italic accent, supporting copy,
"Call us directly →" CTA in solid brand color
- Right: 6 collapsible <details> elements (native HTML, works without JS),
each with serif question + animated "+" toggle that rotates 45° to "×"
when open
- Questions cover: group reservations, parking, dietary options
(vegetarian/gluten-free), delivery/pickup, signature dish details,
private events
11. FOOTER (dark brand color)
- Newsletter signup card at top (glass effect, brand-tinted bg)
• Headline + 1-line description + email input + accent CTA button
• Show inline success message on submit (preventDefault, no real backend)
- Centered logo: large badge SVG above two-tone wordmark
- Italic serif tagline (NOT handwritten)
- Social row: ONLY the platforms the user provides, real SVG icons in
circular glass containers, hover fills with accent color
- Copyright + address line at bottom
═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step, no external JS libraries
- CSS custom properties for color palette and gradients at top of <style>
- Smooth scroll for in-page anchors with scroll-padding-top to clear fixed nav
- Real Unsplash photos via images.unsplash.com CDN with
?w=900&q=80&auto=format&fit=crop params; choose cuisine-appropriate
food + interior + craft shots
- First hero image: loading="eager"; everything else: loading="lazy"
- All action buttons are proper <a> with href; tel: for phone, mailto: with
prefilled subject for email
- Fully responsive, breakpoints at 900px and 500px; no horizontal scroll at
any width
- Semantic HTML: nav, section, article, footer, ul, h1-h3 hierarchy
- aria-label on icon-only links; alt text on all images
- Accessible color contrast, if any brand color fails AA on white/cream,
use a darker derivative for body text
- Favicon as inline SVG data URI in <link rel="icon">
═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
Editorial, confident, warm, slightly poetic but never cheesy. Headlines lean
short and punchy with one italic accent word. Body copy specific and sensory,
not generic ("hand-trimmed, slow-marinated overnight" not "made with love").
Speak as the restaurant to a thoughtful customer. Testimonial quotes should
sound like real people writing real reviews, specific dishes, specific
moments, varied lengths.
═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis as decoration, icons, or in copy (anywhere)
- No handwritten/script fonts
- No decorative circles with single emoji inside
- No tilde or em-dash prefixes on section labels (use CSS line marker instead)
- No fake stock photos of people in testimonials (use initials avatars)
- No real press logos as images (use typeset names)
- No bullet-list formatting in card copy (write as prose)
- No generic "love" / "passion" / "authentic" filler in body copy
═══════════════════════════════════════════════════════════════
SEO & DISCOVERABILITY
═══════════════════════════════════════════════════════════════
Implement all of the following so the page ships production-ready for search
engines and social sharing. This is not optional; treat it as part of the
build, not an afterthought.
DO NOT INVENT DATA: never fabricate business names, addresses, phone or email, license or certification numbers, coordinates, prices, reviews or ratings, team members, photos, press mentions, or results and stats. If a detail is not provided, leave a clearly labeled {{TODO: ...}} placeholder — never a plausible-looking fake. Any form must POST to a real endpoint (Formspree, Web3Forms, Basin, or similar) or fall back to a mailto:/tel: link — never show a fake "success" message with no backend. Wrap every motion effect in @media (prefers-reduced-motion: reduce), and make sure any accent color used for text, links, or prices meets WCAG 2.2 AA contrast against its background.
1. TITLE TAG & META DESCRIPTION
- <title> tag: "[Business Name] - [Primary Service] in [City]" (under 60 chars)
- <meta name="description"> 150-160 chars, include the city/area, primary
service, and a call to action (e.g., "Book online" / "Call now")
- <meta name="robots" content="index, follow">
2. OPEN GRAPH & TWITTER CARDS
- og:title, og:description, og:image (hero image), og:url, og:type=website
- twitter:card=summary_large_image, twitter:title, twitter:description,
twitter:image
- Place all OG/Twitter meta in <head>
3. STRUCTURED DATA (JSON-LD)
- Insert a <script type="application/ld+json"> block in <head> with
@type: "Restaurant" schema
- Include: name, description, url, telephone, email, address
(streetAddress, addressLocality, addressRegion, postalCode,
addressCountry), image. Add geo, openingHoursSpecification, and priceRange ONLY when the user supplied real values — never invent them; and do NOT output aggregateRating or Review markup unless the user provides real, verifiable reviews (fabricated ratings violate Google's structured-data spam policy)
- Add BreadcrumbList schema: Home > [Category] > [Business Name]
- If the page has a FAQ section, add FAQPage schema with every Q&A pair
4. HEADING HIERARCHY FOR SEO
- Exactly ONE <h1> per page — use the real, human headline the design calls for; put keywords in the <title> and meta, not the visible H1
- Logical H2 > H3 nesting for every section; never skip a level
- Section headings should include secondary keywords naturally
(keep the section's real, human label; put keywords in the title and meta, not stuffed into headings)
5. IMAGE SEO
- Every <img> must have a descriptive alt attribute that includes
relevant keywords (NOT just "image1.jpg")
- Format: alt="[what the image shows] - [Business Name] in [City]"
- Use the client's own images, or neutral solid/gradient placeholders with a visible "replace with your photo" note — never hardcode Unsplash photo IDs (they often resolve to the wrong or trademarked image). Always set width + height (or aspect-ratio) to prevent layout shift
6. LOCAL SEO SIGNALS
- Include full NAP (Name, Address, Phone) in the footer, matching the
schema data exactly
- Add a link to Google Maps with the business address
- Use location-specific keywords in at least 3 section headings
- If the page has testimonials, include the reviewer's city/area
7. TECHNICAL SEO
- Canonical tag: <link rel="canonical" href="[PAGE URL]">
- Language: <html lang="en">
- Charset: <meta charset="UTF-8"> + viewport meta (already required)
- All internal anchor links use descriptive text (not "click here")
- Loading performance: critical CSS inline, fonts via display=swap,
hero image eager, everything else lazy
- Keep the CSS and JS readable and editable — do NOT minify (this file is meant to be customized by the owner)
8. CONTENT SEO SIGNALS
- Write real, useful body copy (not just headings and bullet points).
Each major section should have at least one paragraph of 2-3 sentences
that describes the offering in natural language a search engine can parse.
- Use the primary keyword once or twice where it reads naturally; keep the rest in the title tag and meta description, never stuffed into copy.
- Include a clear call-to-action with anchor text that includes the
service keyword (e.g., "Book your appointment" not "Click here").
═══════════════════════════════════════════════════════════════
DELIVERABLE
═══════════════════════════════════════════════════════════════
One polished HTML file (~60-70KB), production-ready, that I can open in a
browser and immediately deploy. Show me the file as a single code block
and briefly summarize the design decisions made.
This prompt generates a complete one-page website for an Italian restaurant — an antipasti-to-dolci menu, a reservation request, a gallery of the room and plated dishes, and a map to your door — as a single HTML file you can host the same day. It is written for owner-operators who want a real online presence before the dinner rush, not another template to wrestle with.
What does the Italian restaurant website prompt build?
The spec lays out the sections a trattoria actually lives on. A hero with your name, a one-line promise, and a “Reserve a table” button. A full menu split into antipasti, primi, secondi, contorni, and dolci with prices and short descriptions. An about section for the family or chef story. A gallery for the dining room and signature plates. A reservation block wired to your phone and email, an embedded Google Map, hours, and a footer carrying your full name, address, and phone. Every section is specified down to spacing, type, and how it reflows on a phone. If you would rather hand the whole thing off, we build static sites for a flat fee.
Who is this Italian restaurant prompt for?
It fits family trattorias, pizzerias, red-sauce neighborhood spots, enotecas, and chef-owned bistros that run on reservations and walk-ins rather than a national chain’s marketing team. It works just as well for a new place that needs a site before opening night and for an established kitchen replacing a slow, dated page. If you also pour espresso and pastries in the morning, the specialty coffee shop prompt follows the same recipe.
What’s inside the restaurant prompt?
- A menu structure with Italian course categories, dish names, prices, and dietary notes you edit in plain text
- A reservation request block tied to your phone and email, plus an OpenTable-style callout you can point anywhere
- Restaurant JSON-LD covering cuisine type, address, hours, price range, and menu URL so the page qualifies for rich results
- A gallery grid with lightbox for room shots and plated dishes, each with alt text for search
- An embedded map, click-to-call phone, and full name-address-phone in the footer for local ranking
- Copy direction that keeps the tone warm and regional instead of generic filler, plus an anti-pattern list that bans emoji and script fonts
That level of specificity is deliberate — here’s why our prompts run 12,000 characters.
Frequently asked questions
Can guests see the full menu and reserve a table without leaving the page?
Yes. The menu renders as categorized sections — antipasti, primi, secondi, dolci — with prices, and the reservation block collects the date, party size, and contact details, then sends them to your phone or email. You can also point the button straight at OpenTable or Resy if you already take bookings there.
Will the Restaurant schema help me show up for “Italian restaurant near me”?
The prompt writes Restaurant JSON-LD with your cuisine, address, opening hours, and price range, which is exactly the structured data Google reads for local and map results and AI assistants read when they answer “where should we eat.” It is not a ranking guarantee, but it hands search engines the machine-readable facts they look for.
How do I update the menu when prices or dishes change?
The menu is plain HTML text, so you open the file, change the dish or the price, and save. No database, no plugin. If you rotate seasonal dishes, keep the file somewhere easy to reach and re-upload after each edit.
Can I use my own food photography instead of stock images?
Yes, and you should. Swap the placeholder image paths for your own shots of the room and signature plates, then update the alt text the prompt already scaffolds. Real photos of your food outrank stock every time for a restaurant.
Does the site work for someone pulling it up at the table on their phone?
It is built mobile-first with breakpoints at 900px and 500px, a tap-to-call phone number, and one-tap directions from the map, so a guest checking your hours or calling about a table gets there in a couple of taps.
How to actually run this.
Copy the whole thing
All of it. Do not trim it down, every line is in there for a reason.
Swap in your details
Find the BUSINESS DETAILS part and drop in the real business. Name, what they do, all of it.
Paste and wait
Drop it into Claude for the first pass, or v0 if it is a landing page. Give it a minute.
Clean it up
Tweak the boring 10 percent. Spacing, mobile, that one cringe line. Ship it.
What’s next: from generated code to a website that works
The prompt did the hard 90 percent. What’s left is the boring 10 percent that turns a folder of code into a site people can actually find and trust. Here’s the whole checklist, in order.
1. Buy a domain
Grab your name at a registrar like Namecheap, Cloudflare, or Porkbun — about $10 to $15 a year for a .com. Skip the ten-year prepay and the upsells; you just need the domain and, ideally, the free WHOIS privacy most registrars now include.
2. Put it online
If the AI built you a static site (HTML, CSS, and JavaScript), you can host it for free: drag the folder into Netlify or Vercel, or connect a GitHub repo, then point your domain at it. If it built a WordPress theme, you need WordPress hosting — pick a managed host, install WordPress, upload the theme, and connect the domain. Either way, turn on HTTPS; it’s free and automatic on every modern host.
3. Wire up the parts AI skips
Generated sites almost always ship with a contact form that goes nowhere and a fake “success” message. Connect it to a real endpoint (Formspree, Web3Forms, or a plain mailto link) so leads actually reach you. While you’re in there: add a favicon, swap the placeholder images for your own compressed photos, and open the site on your phone to catch whatever breaks on a small screen.
4. Do the basic SEO and AI-search setup
This is what gets you found on Google and cited by ChatGPT, Perplexity, and AI Overviews. The essentials: a unique title tag and meta description on every page, one clear topic per page, an XML sitemap submitted to Google Search Console, basic structured data (Organization and FAQ schema), and an llms.txt file so AI crawlers can read you. If that reads like a foreign language, our SEO optimization service does it as a flat-fee pass, and our free SEO checklist walks the DIY route step by step.
5. Make it fast
AI builders love shipping four-megabyte images and render-blocking scripts. Compress your images, lazy-load anything below the fold, and run the page through PageSpeed Insights until Core Web Vitals turn green — speed lifts both rankings and conversions, so it’s the rare fix that pays twice. Our speed optimization service handles it if you’d rather not.
6. Get found locally, and measure it
Add analytics (GA4, or a lighter option like Plausible) so you can see what’s working instead of guessing. If you serve a local area, set up a Google Business Profile and use the exact same business name, address, and phone number everywhere — that consistency is what lands you in the map pack and in local AI answers.
7. Keep it alive
A website isn’t set-and-forget, especially on WordPress. Budget for backups, security, and updates so a routine plugin update doesn’t take the site down six months from now. Our care plans cover all of it from $290 a month, or you can do it yourself — you own all the code either way.
When it’s worth handing off
If any of these steps stall you — and hosting, DNS, and SEO stall a lot of people — that’s exactly what we’re for. We build the whole thing at a flat fee, ship it live, and hand you the code on GitHub, having read every line the AI wrote. Or take the free prompts and run with it yourself. Both outcomes are genuinely fine with us.
More from the stash.
Vibe Code a Hair Salon Website
Free vibe coding prompt to build a hair salon website. Service menu with pricing, stylist profiles, online booking, testimonials, and HairSalon schema. One HTML…
Vibe Code a Podcast Website
Free vibe coding prompt to build a WordPress podcast site. Episode archive, embedded player, transcripts, subscribe links, and PodcastSeries schema. Full audio content setup.
Vibe Code a Membership Website
Free vibe coding prompt to build a WordPress membership site. Subscription tiers, gated content, forum, onboarding flow, and member analytics. Complete community architecture.
No free weekend? We will build it for you.
This is the exact prompt we would use. Flat fee, real deadline, code is yours.