一张Menu变成可以点餐的App

You are building a polished, fully interactive mobile restaurant ordering experience based on the physical restaurant MENU image I uploaded.

PROJECT

MENU → PREMIUM ORDERING APP

The uploaded physical menu is the INPUT / REFERENCE.

The concept for a viral short-form video is:

“给我一张 Menu，我把它变成一个真的可以点的 App。”

The transformation needs to feel dramatic:

PHYSICAL PAPER MENU
→ BEAUTIFUL DIGITAL MENU
→ INTERACTIVE ORDERING APP
→ SATISFYING ORDER CONFIRMATION

The viewer should immediately think:

“刚刚明明只是一张 Menu，怎么现在变成一个这么完整的点餐 App？”

==================================================

1. FIRST: ANALYZE THE UPLOADED MENU
    ==================================================

Before building, carefully inspect the uploaded menu image.

Extract as much REAL information as possible:

* food categories
* dish names
* descriptions
* prices
* drinks
* add-ons
* available options
* any useful menu structure

Use RM / Malaysian Ringgit for all prices.

IMPORTANT:

Do NOT blindly copy the restaurant’s existing branding.

Do NOT present this as an official system created for that restaurant.

Create an ORIGINAL fictional restaurant brand and visual identity.

The uploaded menu is used primarily as the content/data source.

If some menu text cannot be read confidently, do NOT invent random information and pretend it came from the menu.

For missing content required to make the demo visually complete, create clearly reasonable DEMO menu items.

==================================================
2. PURPOSE

This is NOT a production restaurant ordering system.

Do NOT waste time building:

* Supabase
* database
* authentication
* real payment
* payment gateway
* POS integration
* kitchen integration
* kitchen dashboard
* delivery system
* real restaurant backend

This is a HIGH-END INTERACTIVE FRONT-END DEMO.

However:

Anything the viewer can see me tap during the video MUST WORK.

Do not create fake buttons.

The complete customer journey must work locally:

Browse Menu
→ Select Category
→ Open Dish
→ Customize
→ Change Quantity
→ Add To Cart
→ Continue Shopping
→ View Cart
→ Edit Cart
→ Select Table
→ Place Order
→ Order Confirmation

Use local application state / localStorage if necessary.

==================================================
3. PRIMARY DEVICE

PRIMARY VIEWPORT:

390 × 844

This is designed primarily for iPhone screen recording.

Design MOBILE FIRST.

Do NOT build a desktop website and shrink it down.

It should feel almost like a native restaurant ordering app.

Also ensure:

* Tablet works
* Desktop works
* no horizontal overflow
* no broken layouts

But MOBILE is the priority.

==================================================
4. VISUAL DIRECTION

The visual quality is extremely important.

I do NOT want a generic restaurant template.

I do NOT want it to look AI-generated.

I do NOT want Bootstrap-style UI.

I do NOT want a screen filled with identical white rounded cards.

I do NOT want blue-purple AI gradients.

I do NOT want excessive glassmorphism.

I do NOT want huge empty spaces.

I do NOT want every element excessively rounded.

Create a premium modern Asian casual dining visual identity.

Direction:

* warm editorial food photography
* cream / warm neutral base
* deep charcoal typography
* one distinctive warm brand accent
* premium but approachable
* strong typography
* beautiful food imagery
* clean editorial composition
* compact information hierarchy
* subtle depth
* restrained motion
* excellent mobile spacing

The app should feel like a real premium consumer food product in 2026.

The food must be the HERO.

==================================================
5. OPENING / HOME

The first screen needs immediate visual impact.

Create an original fictional restaurant:

* Brand Name
* Small Brand Mark
* Short Tagline

Keep branding compact.

Do NOT waste half the mobile screen on a giant hero banner.

The user should immediately see FOOD.

Top area can contain:

Brand
Search
Small profile / order icon if useful

Then:

POPULAR NOW / CHEF’S PICKS

Use one visually strong featured dish.

Below:

Category navigation.

Example:

Popular
Mains
Rice
Noodles
Snacks
Drinks
Desserts

Use categories from the uploaded menu whenever possible.

Category navigation should actually work.

==================================================
6. DIGITAL MENU

Build a visually rich menu.

Each item should show:

* food image
* dish name
* short description
* RM price

Do not make every menu item an oversized card.

Create visual rhythm.

Use photography and typography to establish hierarchy.

The page should feel fast and enjoyable to scroll.

Use at least 12 menu items if enough information is available.

If the uploaded menu contains more useful dishes, use more.

==================================================
7. FOOD DETAIL EXPERIENCE

When I tap a dish, open a beautiful food detail experience.

This screen is important for the video.

Show:

LARGE FOOD IMAGE

Dish Name

Short Description

RM Price

Then customization.

Example:

Choose Size
Regular
Large +RM3

Add-ons

* Egg RM2
* Cheese RM3
* Extra Chicken RM6

Spice Level
No Spicy
Normal
Extra Spicy

Special Request

“Less sauce, please”

Quantity:

−  1  +

Sticky bottom CTA:

ADD TO CART · RM XX.XX

All interactions must work.

If the real dish does not logically require these exact options, create appropriate options for that dish instead.

==================================================
8. ADD TO CART MOMENT

This interaction needs to feel satisfying.

When ADD TO CART is tapped:

* button responds immediately
* subtle haptic-like visual compression
* food image or small item indicator can animate toward cart
* cart badge updates
* bottom cart bar appears

Example:

2 ITEMS · RM32.80

VIEW CART →

Keep the animation sophisticated.

Do NOT use childish explosions or excessive particles.

==================================================
9. CART

Create a polished Cart screen.

Show:

YOUR ORDER

Food thumbnail
Dish name
Selected options
Quantity controls
Price

Allow:

−
Remove Item

Then:

Subtotal
Service Charge if appropriate
TOTAL

Everything must calculate correctly.

Use RM.

The bottom CTA:

CONTINUE

==================================================
10. TABLE SELECTION

After Continue:

Show a simple elegant screen:

WHERE ARE YOU SITTING?

Select your table

01
02
03
04
05
06
07
08

Make the interaction visually satisfying.

For the demo, Table 08 should be available.

After selection:

TABLE 08

Then:

REVIEW ORDER

==================================================
11. FINAL ORDER REVIEW

Show a compact final review:

TABLE 08

2 ITEMS

Chicken Katsu Don
Matcha Latte

TOTAL
RM32.80

Use the actual selected products and calculated total.

Primary CTA:

PLACE ORDER · RM32.80

This button is one of the MOST IMPORTANT elements in the entire experience.

Make it visually strong.

==================================================
12. PLACE ORDER — HERO MOMENT

THIS IS THE MAIN PAYOFF FOR THE VIDEO.

When I tap:

PLACE ORDER

Do NOT instantly jump to a boring success page.

Create a polished sequence.

STEP 1

Button physically compresses.

STEP 2

Very subtle processing animation:

Sending order…

Approximately 0.5–0.8 seconds.

STEP 3

Smooth transition.

The screen cleans up.

STEP 4

A sophisticated animated confirmation mark appears.

STEP 5

Large typography:

ORDER CONFIRMED

Then:

#A018

TABLE 08

Your food is being prepared.

STEP 6

Show an elegant order progress tracker:

● Confirmed
│
○ Preparing
│
○ Ready

Or an equally beautiful horizontal version if it works better on mobile.

STEP 7

Order summary subtly animates into view.

The entire confirmation should feel PREMIUM and satisfying.

This moment needs to look excellent when screen-recorded.

NO confetti explosion.

NO cheap success animation.

NO cartoon effects.

Use controlled motion, typography and transitions.

==================================================
13. ORDER STATUS SCREEN

The final screen should include:

ORDER #A018

TABLE 08

CONFIRMED

Estimated preparation:
15–20 min

Order summary

Total

And a status tracker.

Include a DEMO interaction that allows the status to progress locally:

Confirmed
→ Preparing
→ Ready

This can be automatic after several seconds OR controlled through a hidden demo interaction.

When it reaches READY:

Make the status transition satisfying.

Final message:

YOUR ORDER IS READY

Table 08

This is purely for visual demonstration.

No backend is required.

==================================================
14. MICRO-INTERACTIONS

Use subtle high-quality motion throughout.

Examples:

* image transitions
* category selection
* button compression
* quantity change
* cart badge
* bottom-sheet opening
* page transition
* order confirmation
* order status change

Animations should feel:

FAST
SMOOTH
CONTROLLED
PREMIUM

Do not make the app feel like a children’s game.

==================================================
15. VIDEO RECORDING PRIORITY

Optimize specifically for this screen-recording sequence:

SHOT 1
Open beautiful digital menu.

SHOT 2
Scroll food.

SHOT 3
Tap one visually attractive dish.

SHOT 4
Customize it.

SHOT 5
ADD TO CART.

SHOT 6
Add one drink.

SHOT 7
VIEW CART.

SHOT 8
Show total.

SHOT 9
Select TABLE 08.

SHOT 10
Review Order.

SHOT 11
Tap PLACE ORDER.

SHOT 12
Show satisfying processing transition.

SHOT 13
ORDER CONFIRMED.

SHOT 14
Show #A018 + Table 08 + order tracker.

SHOT 15
Status becomes READY.

The complete journey should be easy to screen-record without awkward waiting or unnecessary screens.

==================================================
16. DEMO RESET

Create a simple way to reset the demo.

I need to repeatedly record the experience.

Reset should:

* clear cart
* clear order
* reset status
* return app to initial state

Do not put a large ugly RESET button in the normal customer UI.

Use something subtle such as:

/?reset=true

or another developer/demo-only method.

==================================================
17. TECHNICAL PRIORITIES

Prioritize:

1. Visual quality
2. Mobile experience
3. Working interactions
4. Smooth animations
5. Reliable demo flow
6. Fast loading

Do NOT over-engineer.

No backend.

No external database unless absolutely necessary.

No authentication.

No unnecessary dependencies.

Keep the architecture simple and reliable.

==================================================
18. IMAGES

Food photography is extremely important.

Use appropriate high-quality food imagery matching the menu items as closely as possible.

Do NOT use:

* broken images
* obviously mismatched food
* low-resolution images
* repeated identical images
* ugly placeholder graphics

If final production images are unavailable, create a clean image abstraction layer so images can easily be replaced later.

==================================================
19. RESPONSIVE QA

Before declaring the project complete, test:

MOBILE
390 × 844

TABLET

DESKTOP

Specifically verify:

* Home loads correctly
* Category tabs work
* Search works if visible
* Food items open
* Food detail works
* Customization works
* Quantity works
* Add To Cart works
* Cart badge updates
* View Cart works
* Cart quantity works
* Remove works
* Totals calculate correctly
* Table selection works
* Review Order works
* Place Order works
* Confirmation animation works
* Order number displays
* Status tracker works
* Ready state works
* Reset works
* no dead buttons
* no broken images
* no horizontal overflow
* no console errors
* no mobile layout clipping

==================================================
20. FINAL STANDARD

Do not stop when the page technically works.

Do not stop at “functional.”

The final product must look convincing enough that when I put:

THE PHYSICAL MENU

next to

THE FINISHED APP

the transformation feels dramatic.

The final product should feel:

POLISHED
PREMIUM
FAST
REAL
SATISFYING
SCREEN-RECORDING READY

The core reaction we want is:

“她刚刚拿的明明只是一张 Menu，现在怎么变成一个真的可以操作的点餐 App 了？”

Build the complete experience.

Then test the full 390 × 844 mobile journey from opening the menu all the way to ORDER CONFIRMED and READY before considering the task finished.