Commerce

Restaurant site with reservation flow

Pair a strong sense of place with a reservation journey that handles availability and edge cases.

Reviewed by the Vibe Coding Editorial Team · Updated 2026-08-26

Build prompt

Copy as-is, then replace the variables

Reviewed 2026-08-26

Design and build a responsive website for [RESTAURANT NAME], a [CUISINE / CONCEPT] restaurant in [LOCATION]. The site should make the atmosphere tangible while helping guests decide and reserve quickly.

Include:
- Hero with a concise point of view, opening status, location, and Reserve a table CTA.
- A seasonal highlights section with [NUMBER] dishes, descriptions, dietary labels, and realistic prices.
- A complete menu organized for scanning on mobile; avoid presenting the menu only as a PDF.
- The story of the restaurant, chef, sourcing, and what makes the experience distinctive.
- Essential visit information: hours, address, transit/parking, accessibility, dress guidance, and contact.
- Reservation flow for date, time, party size, contact details, dietary/accessibility notes, review, and confirmation.

Reservation behavior:
- Show believable available and unavailable times.
- Handle parties larger than [MAX ONLINE PARTY] by offering a direct contact path.
- Preserve form progress, validate inputs clearly, and include loading, no-availability, error, and success states.

Art direction: [ART DIRECTION]. Use an editorial layout and restrained transitions. Prioritize readable menus, strong image art direction, and local details over generic luxury styling.

Use semantic HTML, accessible forms, visible focus states, and excellent mobile tap targets.

How to use this prompt

Customize the brief before generating

01
Replace every variable
Use your real project details for restaurant name, cuisine / concept, location and the remaining placeholders.
02
Remove unnecessary scope
Delete pages, states, integrations, or visual requirements that do not support the first useful version.
03
Add hard constraints
Specify the framework, existing design system, content, data source, accessibility target, and anything the agent must preserve.
04
Test the outcome
Judge the result against this target: A responsive restaurant site with clear menu content, local trust signals, and a functioning reservation prototype.

Expected outcome

A responsive restaurant site with clear menu content, local trust signals, and a functioning reservation prototype.

Why it works

Combines brand atmosphere with the practical information local customers need.
Defines reservation edge cases that generic restaurant prompts omit.
Explicitly keeps the menu accessible and usable on mobile.

Variables to customize

[RESTAURANT NAME]Example: Field & Ember

[CUISINE / CONCEPT]Example: seasonal wood-fired neighborhood kitchen

[LOCATION]Example: Bristol

[NUMBER]Example: 6

[MAX ONLINE PARTY]Example: 8

[ART DIRECTION]Example: charcoal, bone, tomato red; documentary food photography

Method sources

Traceable, not copied blindly

This prompt is an original editorial adaptation. The references below informed its structure and review criteria; their text is not presented as our own.

Prompt Engineering Interactive Tutorial

Anthropic · 37k+ GitHub stars · Reference only

Used as methodology guidance for clarity, context separation, examples, and multi-step prompting. No tutorial content is reproduced.

Prompt Engineering Guide

DAIR.AI · 70k+ GitHub stars · MIT

Used for task decomposition, prompt chaining, and evaluation patterns.

v0 Text Prompting Guide

Vercel · Official product documentation · Reference only

Used for the component-first, specific, incremental workflow behind these build prompts.

Restaurant site with reservation flow FAQ

Questions before you generate

Use these answers to adapt the prompt to your product, choose a compatible builder, and set realistic expectations for the first result.

What does the Restaurant site with reservation flow prompt create?

A responsive restaurant site with clear menu content, local trust signals, and a functioning reservation prototype.

What should I customize before using this prompt?

Replace the bracketed variables with details from your project. This prompt asks for restaurant name, cuisine / concept, location, number, max online party, art direction. Remove sections you do not need and add any real technical, brand, content, or compliance constraints.

Which AI coding tools can use this prompt?

This brief is designed to work well with Vibe Coding, v0, Lovable, Bolt. Capabilities differ between tools, so review framework, backend, authentication, and deployment requirements before assuming every feature will be implemented.

Is this prompt suitable for beginners?

The prompt is rated beginner and a first visible result typically takes 2–4 min. You still need to inspect the generated interface, test interactions, and verify any security-sensitive or production behavior.

Can I edit the prompt before it generates anything?

Yes. The Use in Vibe Coding button places the full prompt into the workspace input as an editable draft. Review and change it first; generation starts only after you press Enter or the send button.

How was this AI coding prompt reviewed?

The brief is an original editorial adaptation reviewed for a clear outcome, useful constraints, complete interface states, responsive behavior, and accessibility. Its method references include Prompt Engineering Interactive Tutorial, Prompt Engineering Guide, v0 Text Prompting Guide.

Ready to build