Cursor

Tailwind CSS

I've recently been working on a memorization app for children. Initially, I was working on Cursor... We'll still use the old method that's been circulating for a while: HTML + Tailwind CSS. This method is used to generate prototypes.

Claude Sonnet4.5

GPT Codex

I tried Claude Sonnet 4.5 GPT Codex The Gemini 2.5pro isn't unusable, but it always feels like something's missing. At first glance, it looks okay, but upon closer inspection, there are always issues. Either it adds too many redundant elements, or the style is poor.

PRD

So previously, my usage was that I put the PRD After reviewing the code, I gave it to the three models and asked them to output their results. I also asked them to point out each other's flaws and provide me with some ideas for interaction design.

However, after the release of Gemini3 Pro, I found that the whole gameplay had changed. I can now make it generate "production-grade" prototype interactions. At the end of this article, I will attach the prompts, PRD documents, and prototype UI screenshots.

Today I'm going to share with you a high-quality prototype generation workflow that I've summarized, all of which is practical advice gained through trial and error.

First tip: Don't let AI guess; its guesses are always just "averages."

Often, we perceive AI-generated content as "mediocre" because our input is too vague. To avoid errors, AI can only provide the safest and most common solution.

To create a sophisticated prototype, you first need to be a good product manager.

My current approach is to feed the AI ​​a **"mini PRD"** (requirements document) before writing any code. This isn't a formulaic document; it clearly tells it three things:

Who is it for? (For example, if my app is for elementary school students, then the style should be rounded corners, high contrast, and vibrant.)

What is the core user journey? (Don't say "create a homepage," say "the user should see today's tasks first, then the progress bar, and finally a large 'start' button.")

Content population (Mock Data): This is extremely important! Tell the AI, "Don't leave blank spaces; fill the interface with realistic mock data." Depending on the tool you're using, it's best to connect to Nanobanana so it can directly generate relevant images and other content, making the content population more comprehensive.

Actual test comparison:

❌ Input: Make a vocabulary flashcard.

✅ Input: Make a flashcard for memorizing the word "Apple" with the phonetic symbol [ˈæpl]. Include a simple English nursery rhyme as an example sentence, and use a soft, pale yellow background.

The second tactic: Directly use images! Visual reference is a game-changer.

This is the most powerful feature I've found on Gemini, and it's something many people overlook.

The descriptive style of text (such as "modern" or "minimalist") is actually very abstract. The "minimalist" that AI understands may be completely different from the "minimalist" we want.

The simplest way: just copy the homework.

Linear

If you like Duolingo (Duolingo) jelly-like buttons, or if you prefer Linear... That kind of geeky black panel:

Take a screenshot with your phone.

Pass it to the AI ​​(Gemini supports multimodal input).

To put it simply: "Use the color scheme and button texture of this image to generate my page."

This is a game-changer. Because images contain an incredibly rich amount of information: spacing, shadow parameters, font hierarchy, AI can instantly align with your aesthetic standards by interpreting images, which is more useful than a 500-word prompt.

The third strategy: Giving AI a "technological bodysuit".

With the documentation and reference diagrams in place, the final step is to constrain the technology stack .