Best Cases#

#Introduction

Welcome to MeDo Moment — your quick guide to getting the most out of MeDo. If you’re new here, this is the perfect place to start. If you’re already familiar with MeDo, we appreciate your feedback — your suggestions help us improve. Let’s begin your MeDo journey.

#1. Chat mode

Pros: Ideal for non-technical users — it makes generating results fast and simple.

Cons: You may need several rounds of iteration to reach a polished outcome.

You can refine your idea through conversational dialogue. For example: “Create an H5 invitation page for a tech product launch that includes all the essential event details.”

After refining your prompt, MeDo can expand the brief into detailed application requirements, for example:

Please design an H5 invitation page for a technology product launch. The design should feel modern and technical, and must include the following information:
- Product name
- Event date & time
- Event venue
- Key features or highlights of the product
- Registration method and deadline

Deliver a complete H5 page design plan covering page layout, suggested color palette, interactive behaviors, and content modules.
- Page layout: Keep the layout clear and concise. The homepage should emphasize the product’s core value to help visitors quickly grasp its significance.
- Color palette: Incorporate a tech-inspired blue and white color scheme to convey a modern aesthetic.
- Interaction: Add touch/swipe and click interactions to enhance engagement.
- Content modules:
1. Cover: Product name, date/time, venue, and a tech-style background.
2. Product overview: Detailed features and highlights — mix of images, text, or video.
3. Registration: Registration portal with methods and deadline.
4. Interactive section: Include Q&A, polls, or other engaging activities.
5. Closing: A thank-you message, company contact details, and a teaser for future events.

Module details:
- **Cover**
- Elements: Product name, date/time, venue, animated tech-style background (e.g., particle animation).
- Interaction: Auto-play subtle background animation; tap/click to enter the next section.
- **Product overview**
- Elements: High-res product images, core features, demo videos.
- Interaction: Swipe through images; tap Play to view demos.
- **Registration**
- Elements: “Enroll now” CTA, deadline reminder, attendee instructions.
- Interaction: Tap Enroll to open a registration form. Submission confirms enrollment. Add a countdown to create urgency.
- **Interaction**
- Elements: Short product-related Q&A and feature-preference voting.
- Interaction: Users can submit answers (with correct answers shown afterward) and vote; display real-time results.
- **Closing**
- Elements: Thank-you message, company logo, contact info (phone, email, website), and teaser for future events.
- Interaction: Tap the company logo to open the official website; tap “View More Events” to see upcoming activities.

#2. Advanced mode: Comprehensive application

Pros: Full control — you specify the tech stack, UI, and interaction patterns.

Cons: Requires technical knowledge and clear product specifications.

#Example 1

(Tech stack) Generate a frontend demo for an AI code editor called MeDo using React 19 + TypeScript + Vite + TailwindCSS + shadcn/ui. Default to a dark theme with a one-click toggle to light mode. (Product design & UI) Layout:

• Top fixed navigation bar: MeDo logo (left), tabs in the center (Demo, Template, Community), theme toggle and profile menu on the right.
• Left collapsible sidebar with four icon shortcuts: ① New Demo ② My Demo ③ Favorites ④ Settings.
• Main area: two-column layout — left: Monaco-style code editor (70%) with line numbers, syntax highlighting, Copy and Full-screen buttons; right: live preview iframe (30%) with Refresh and Export controls.
• Floating full-width input at the bottom: “Generate a demo with one sentence.” Pressing Enter triggers a loading animation; after ~10 seconds the generated code is inserted into the editor and the preview refreshes automatically.
• All buttons use subtle scale-on-hover animations (Framer Motion); sidebar collapse/expand is animated smoothly.

#Generated effect

#Example 2

(Tech stack) Generate a mobile H5 subscription-management demo using React 19 + TypeScript + Vite + TailwindCSS 3 + Zustand. Default dark theme, one-click light mode. (Product design & UI) Structure:

• Three-layer navigation: ① Fixed top search bar + global “Add Subscription” button; ② Main area split into three tabs: Subscription, Statistics, Settings; ③ Bottom rounded TabBar that hides/shows on scroll.
• Subscription page: waterfall-style cards showing service logo, name, monthly/annual price, next billing date, and days remaining. Cards support left-swipe to delete, right-swipe to edit, and tap-to-view details (billing history charts + Modify button).
• Statistics page: Use Recharts for monthly/annual bar charts and a donut chart for totals; support time-range selection.
• Settings page: currency selector, pre-expiry notification toggle, and CSV export.
• All interactions (scale/fade, swipe, tab switches, chart transitions) should be fluid and polished.

#3. Getting the look you want

#Point at something specific, not just adjectives

If you told a friend “I want my website to look modern,” they still wouldn’t know what you mean. But if you said “I want it to look like the Apple iPhone product page,” they’d picture it right away.

MeDo works the same way. Instead of adjectives, point at something concrete:

• Not “clean and minimal” → “like the Apple product page”
• Not “warm and welcoming” → “like a Muji store — off-white, wood tones, one small sans-serif logo”
• Not “elegant” → “like an old hotel matchbook — dark green background, small gold letters, thin lines”

Pick one reference and stick to it. Mixing three different vibes in one prompt usually gives you three half-finished ones instead of a fusion.

#Break your page into sections and give them names

If you don’t tell MeDo which sections you want, it has to guess — and it might add ones you didn’t need, or leave out ones you cared about. Write the sections you want in order, using plain names:

1. Cover — one big title, one tagline, one button
2. About us — a short paragraph and a photo
3. What we do — three services, each with a price
4. Team — four people with photos and names
5. Contact — address, phone, email, a form

Even a plain numbered list like this makes a big difference.

#Say what you don’t want, not just what you want

If you only say what you want, MeDo still has to guess about everything else. A line about what you don’t want is often more useful than another paragraph about what you do:

• “White background — but not cream, not off-white, just pure white.”
• “A rounded sans-serif font — no cursive, no italic.”
• “One accent color — red — used only on buttons, never in body text.”
• “Photos of real people’s faces — not stock photos of laptops on desks.”

You don’t need to write every detail this way — just the two or three things you care about most.

#Pick one animation and describe it in plain words

If you want the page to feel alive, choose one movement that matters — don’t ask for many at once. Describe it the way you’d describe it to a friend:

• “When the page loads, the title fades in slowly from the bottom.”
• “When the mouse hovers over a card, it gets a little bigger.”
• “Photos can be dragged left and right with a finger to switch between them.”

Ask for too many animations at once and the page just feels busy. One well-chosen movement is enough.

Placeholder text like “Coming soon,” “Lorem ipsum,” or “$XX” almost always makes it into the final page if you leave it there.

#End with one sentence about who the page is for

Add one line at the end of your prompt describing the real person who’ll open this page. That gives MeDo a clear target to design for:

• “This is for a couple planning their wedding, looking for a photographer on their phone.”
• “This is for a small business owner checking prices before making a call.”
• “This is for a customer walking past the café, deciding whether to come in.”

The more specific the person and the moment, the more focused the result tends to be.

#A quick pass before you submit

• Did I point at a specific reference (a real brand, product, or image), not just adjectives?
• Did I list the sections I want in order, with plain names?
• For the two or three things I care about most, did I say what I don’t want?
• If I asked for animation, did I pick just one and describe it in plain words?
• Did I write real text — headlines, buttons, prices, addresses — instead of placeholders?
• Did I add one sentence about who this page is for?

Spending ten extra minutes on the prompt usually saves a full regeneration later. If you have a screenshot of a site you like, describe what you see in words — that works better than just attaching the image.

#User guide

#Build value first: prioritize experience over appearance

A common mistake is obsessing over UI from day one. Your product exists to solve a problem — users care about solutions first, visuals second.

Follow this build priority: UX → Features → Database → UI

1. User experience (UX): Before writing code, map the user journey. Which screens are needed? What is the simplest, most intuitive flow that delivers value? Even a great solution fails if users don’t know how to use it.
2. Functionality: With the user flow defined, implement features that make each step work reliably and feel under user control.
3. Database (DB): Once functions are clear, design the data model. You’ll know exactly what to store and how to secure it. Follow best security practices when designing schemas.
4. User interface (UI): After the product works end-to-end, polish visuals — color, typography, spacing, and subtle animations. Ensure UI changes never break validated flows or obscure key actions.

#Writing precise prompts: be specific and measurable

Your AI performs best with explicit instructions. Imagine a client saying, “Make this blueprint more aesthetic.” What does “more aesthetic” mean? Which parts? To which audience?

Golden rule for prompts:

“If I asked a 5-year-old to do this, would they understand what to do?”

If the answer is no, simplify and add detail.

If the look and feel of your page is a big part of what you’re after — brand sites, portfolios, launch pages — see section 3 for tips on describing the visual style you want.

#The first query matters

The first prompt sets the project’s direction — treat it like your product’s foundation. A vague command like “create a recipe app” is not enough.

Before you write the first prompt, answer questions such as:

• Will the app have a homepage?
• Is there a login and registration flow?
• Will there be a dashboard? What should it show?
• Can users add their own content (e.g., ingredients or recipes)?
• Is the app monetized? Which payment provider will you use?
• What should the main visual tone be?

Write these answers down. Don’t rush — the initial prompt can take hours to refine, and that effort pays off.

Use other AIs (e.g., GPT, Claude, ERNIE Bot) to iterate on your prompt and test cohesion. Analyze competitor sites: send a URL with the AI and ask it to describe structure, colors, and fonts, then turn that analysis into a detailed design prompt for MeDo.

If you still have questions, add MeDo Assistant for one-on-one help. Thank you for reading!