The CORRECT Way to Prototype Apps with AI

If you’ve ever prototyped an app with AI, you’ve probably run into that familiar, flat feeling — designs that look like everyone else’s. Xinran Ma calls that *vibe coding*, and she has a practical five-step system that actually fixes it. Read on, this one’s useful.

First, the problem: AI often fills gaps with generic choices, because it’s guessing instead of being told what you want. Xinran starts by pointing out those gaps, then shows how to plug them.

Here’s the system, plain and simple:
1. Create precise specs with a custom GPT, before you ask for anything, so the AI isn’t just guessing. Think of it as giving the AI a clear map.
2. Iterate side-by-side on a Magic Patterns canvas, so you can compare versions quickly, spot what’s working, and toss what isn’t. I used this once and saved hours of backtracking.
3. Use the Inspiration command to generate four distinct design directions instantly, giving you variety fast (rather than one tired mock).
4. Mix and match components via Subframe, which makes prototypes modular and reusable — imagine Lego pieces you can swap.
5. Toggle between AI and manual editing, so you get quick ideas but keep human control for polish.

A couple more gems: Xinran highlights *reverse prompting* — asking AI to analyze an existing design system and extract rules — and pairing component libraries with explicit instructions to avoid what she calls “AI slop.” That’s crucial if you want consistency across screens.

This approach moves you from accidental sameness to intentional creativity. It’s practical. It’s repeatable. And honestly, once you try side-by-side iteration and component mixing, you’ll wonder how you ever prototyped without them.

Watch Xinran Ma explain it all here: Watch Xinran Ma’s talk on YouTube

Deutsch

Wenn du schon mit AI Prototypen gebaut hast, kennst du das: alles sieht ähnlich aus, uninspiriert. Xinran Ma nennt das „vibe coding“ und bietet ein klares, fünfstufiges System, das dem entgegenwirkt.

Kurz gefasst, die Idee: statt der AI wild nachzujagen, gibst du ihr klare Regeln. So funktioniert’s:
1. Präzise Specs mit einem Custom GPT erstellen, damit die AI eine genaue Vorlage hat.
2. Seiten-zu-Seiten Iteration im Magic Patterns Canvas, um Varianten direkt zu vergleichen (ganz ehrlich, das ist ein Gamechanger).
3. Inspiration-Command nutzen, der vier unterschiedliche Designrichtungen auf einen Schlag erzeugt.
4. Komponenten in Subframe mixen, also modulare Bausteine, die du in verschiedenen Prototypen wiederverwendest.
5. Zwischen AI-Modus und manueller Bearbeitung wechseln, damit du Ideen schnell bekommst, aber die finale Kontrolle behältst.

Zwei weitere Punkte sind wichtig: *Reverse prompting* lässt die AI ein bestehendes Design analysieren und Regeln daraus extrahieren, und Komponentenbibliotheken sollten immer mit klaren Anweisungen kommen, damit das Ergebnis nicht zur „AI-Schluderei“ wird.

Praktisch, wiederholbar und überraschend menschlich, wenn man es richtig anwendet. Wenn du neugierig bist, sieh dir Xinran Ma’s Vortrag an: Xinran Ma auf YouTube.