这支视频用到的Prompt
按顺序使用效果最好。每一段都可以单独复制。
- PROMPT 01
一张Menu变成可以点餐的App
Claude如何用Claude把Menu变成可以真的点餐的App
查看这条 Prompt 详情PROMPT 01You 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.