Restaurant Menu & Ordering Interface Designer

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_model to 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_size to 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.