In the startup world, the biggest killer isn’t the competition – it’s latency. The time it takes to move from the brain to a testable interface is often measured in weeks.
I’ve optimized a workflow using Gemini 3 and Google Antigravity that cuts this cycle down to hours. Here is how I build high-fidelity, interactive MVPs that feel like the real thing.
Phase 1: Establishing the “Context North Star”
Before touching a line of code, you must ensure the AI isn’t just hallucinating features, but solving a problem.
- The Brain Dump: I start by documenting the “Core Four”: the specific pain point, the user persona, the proposed solution, and the “Success Output” of the MVP.
- Prompt Optimization: I run this raw documentation through a “Prompt Engineer” loop (using LLMs like ChatGPT) to structure it into a dense, instruction-heavy prompt.
- The Handover: This optimized prompt is fed into Gemini. By doing this, Gemini isn’t just a chatbot; it becomes a “Domain Expert” on your specific product.
Phase 2: Architecting the Logic (The Block Diagram)
Most people jump straight into UI. That’s a mistake. You need to define the “bones” first.
I ask Gemini to generate a High-Level Architecture. I look for a structured block diagram that breaks the product into functional layers:
- The Interface Layer: What the user sees.
- The Logic Layer: How data moves between blocks.
- The Sub-Blocks: Granular functionalities (e.g., “Auth Module,” “Data Visualizer,” “API Connector”).
This architecture serves as the blueprint for the next phase, ensuring the prototype isn’t just a pretty screen, but a logical representation of the final system.
Phase 3: Top-Down Prototyping in Antigravity
With the architecture set, I move into Google Antigravity, an agent-first environment designed for rapid execution.
- The Initial Build: I feed the architecture doc to Antigravity and task it with creating high-fidelity HTML/CSS mockups. Because Antigravity is “agentic,” it doesn’t just give me code snippets; it builds the environment.
- Iterative Refinement: Once the “High-Level” shell is ready, I zoom in. I go part-by-part – refining the navigation, polishing the tables, and adjusting the responsiveness – until the version in the browser matches the vision in the PRD.
The Secret Sauce: Why HTML/CSS Beats Figma and “Low-Code” Builders
Many PMs stick to Figma or “no-code” tools like Lovable. Here’s why I’ve moved to pure HTML/CSS prototypes in Antigravity:
| Feature | HTML/CSS Prototyping | Figma / Low-Code |
| Realism | Users interact with actual inputs, hover states, and scroll behaviors. | Often feels like “clicking on a picture” of a website. |
| Developer Handover | 80% of the UI code is already written. Devs love starting with clean CSS. | Devs have to “re-interpret” designs into code, leading to bugs. |
| Edge Cases | You find out immediately if a layout breaks with real text lengths. | Designs often use “perfect” text that doesn’t reflect reality. |
| Portability | It’s a standard web file. It works on any browser, anywhere, forever. | You are often locked into a proprietary platform’s ecosystem. |
The Bottom Line: By prototyping in code, I’m not just showing you what the product looks like – I’m showing you how it works. This reduces the feedback loop with developers and allows founders to get real user data before the first “official” sprint even begins.
Building a Seed or Series A startup?
I help founders bridge the gap between “Idea” and “Live Product” by acting as a fractional PM. I use these exact workflows to ensure you ship the right thing, faster.
Let’s discuss your roadmap
Leave a Reply