What this prompt does
This prompt generates a complete digital menu and ordering interface by wiring together six distinct screens — menu grid, dish detail, cart, order status, bill, and payment — into a single coherent flow. The template enforces restaurant-specific design rules inline, so the AI assistant produces large food photography, warm color treatment, and fast-tap ordering rather than a generic data table dressed as a menu.
The dietary filter chip system (vegetarian, vegan, gluten-free, nuts) is baked into the generation spec, not left as an afterthought. That matters because most AI-generated UIs bury allergen information or skip it entirely. The template explicitly names it as a required element on both the dish card and the detail modal, so the output carries that information at two levels of depth.
The order status timeline (preparing → ready → served) and bill-splitting logic are specified as separate components, which forces the AI to treat them as distinct UI states rather than collapsing everything into one screen. The result is an interface that maps to how a real kitchen ticket system and table payment actually work.
When to use it
- Building a QR-code table ordering system for a sit-down restaurant and need a working prototype fast.
- Designing a ghost kitchen or delivery-only concept where the menu IS the entire customer experience.
- Pitching a restaurant client and need a high-fidelity mockup that shows the ordering funnel, not just a menu list.
- Adding a digital menu to an existing POS integration and need the front-end components scoped out before touching the backend.
- Evaluating whether React, Vue, or a Blade/Alpine stack is the right fit — run the prompt with each
[framework]value to compare output volume and complexity.
Example output
For restaurant_type: "upscale sushi bar", service_model: "dine-in table ordering", menu_size: "60 items across 8 categories", framework: "React + Tailwind":
CategoryNav: horizontal scroll tabs — Starters | Nigiri | Maki | Sashimi |
Yakitori | Soups | Desserts | Drinks
Dietary chips row: Vegetarian | Vegan | Gluten-Free | Nuts
DishCard (Salmon Nigiri):
photo: 280x200 full-bleed, lazy-loaded
name: "Salmon Nigiri" — font: Playfair Display 16px
desc: "Ora King salmon, seasoned rice, house soy" — 2 lines max
price: "¥680" bold, accent coral
icons: [GF]
button: [+ Add] — haptic on mobile
DetailModal (slide-up, 90vh):
hero photo: full-width
customizations: rice portion (regular / small), wasabi (on side / mixed in)
allergens: fish, soy, sesame
"Add to Order" sticky CTA
Pro tips
- Set
service_modelto something precise — "fast-casual counter ordering" vs "fine dining tableside" produces meaningfully different UI hierarchy. The former pushes the cart to a permanent bottom bar; the latter de-emphasizes it. - Use
menu_sizeto control component complexity. Under 30 items, the AI generates a single scrollable list. Over 60, it adds subcategory nesting and a search bar. Size this to your actual menu or you will get mismatched architecture. - Run the prompt twice with different
[framework]values before committing. Vue + Alpine produces lighter component trees for simple menus; React output is heavier but scales better with real-time order state via websockets. - The bill-splitting component is the most often broken piece — tell the AI explicitly whether splitting is "by item" or "equal shares only" in the service model field. Leaving it ambiguous produces a hybrid that handles neither case well.
- Pair the generated code with a kitchen display prompt separately. The order status timeline the AI generates here is a front-end UI component only — the KDS side needs its own prompt with the staff-facing context, not customer-facing.
