How I Made This

Web App Factory

I've spent 17 years doing product development for high-growth startups, and I've learned that the best results come from thoughtful planning before implementation.

This guide distills everything I know about product development into a simple, step-by-step process that you can use in collaboration with AI.

The more clearly you can articulate your vision and specification upfront, the better the AI can deliver something that matches your expectations in one shot.

David Miranda
1

Capture Your Vision

You will forget your original vision when you start working on the implementation. The most important details you need to capture early are:

2

Create Experiments

We'll create 2-3 HTML mockups to explore what this idea might look/feel like:

3

Voice Recording Context

Go off on your own and give as much context about this project as you can.

Speak into a microphone or your Voice Notes app. Talk at length about the application you want to build.

Topics to cover:

  • All screens and pages
  • Form controls and interactions
  • Abilities and features
  • How it should feel
  • Libraries to use (if you know them)
  • Technologies and frameworks (if you know them)
  • Examples of previous apps
  • Inspiration sources

Minimum 5 minutes of recording!

4

Generate Clarifying Questions

Your specification is looking good, but there are probably some ambiguities and unclear implementation details.

Let's have the LLM generate 10 multiple choice questions to help clarify exactly how things should work.

This removes uncertainty and ensures you and the LLM are perfectly aligned on what you're building.

5

Answer Clarifying Questions

Now paste the questions that the LLM generated into the text area below.

We'll dynamically generate a form with all the questions so you can answer them. For each question, you can choose one of the provided answers or write your own custom answer.

6

Repeat Clarification (Optional)

If you feel the specification still needs more clarity, you can repeat this process:

  1. Go back to the LLM
  2. Ask it to generate more clarifying questions
  3. Base them on your updated specification

The more clarity you add now, the better your implementation will be.

Note: This step is optional. If you're happy with your specification, you can skip to Step 7.

7

Review Specification

You're almost ready to build!

Before moving to implementation, take time to read through every line of your specification. This is essential.

Make sure:

This is your last chance to make changes before the LLM starts coding.

Checklist:

8

Initial Implementation

This is the exciting part!

Now that your specification is complete and clear, it's time to have the LLM implement your app.

What to do:

  1. Copy the prompt below
  2. Paste it into your LLM along with your complete specification
  3. The LLM will generate a single HTML file with everything you need
  4. You can step away from your computer - this might take 10-15 minutes
9

Testing and Iteration

Your app is built!

Now it's time to test it thoroughly and refine it:

  1. Open the HTML file in your browser
  2. Actually use it
  3. Record everything that feels wrong, looks off, or could be better
  4. Have the LLM fix all the issues at once
  5. Repeat this process until your app feels just right
10

Download Starter Kit (for Deploy)

Download the minimal app starter kit with backend integration, deployment guide, and everything you need to get your app online.

Download Starter Kit