Building Apps with AI: A 3 Step Process

The AI revolution has democratized app building. With tools like ChatGPT, Cursor, and v0, you no longer need to be a software engineer to bring your ideas to life. Even so, trying to create an application or website with AI can be daunting if you have no real experience in that arena. Luckily, the article can help serve as a guide to this process, and provide a basic framework you can use to make your next app with the help of AI.

Overview of the Three Stages

The app building process has 3 stages: planning, execution, and fine tuning. In the planning stage, we create a detailed Product Requirements Document (PRD) with the help of an AI chatbot. The PRD will act as a set of instructions for our AI coder of choice (Cursor in this case). We will then have Cursor start writing code based on the PRD, creating the code one step at a time to ensure each piece of the puzzle correctly works before moving on. Lastly, we touch up our UI elements with tools like v0.dev so that our app looks just the way we want. Let's dive in.

Phase 1: Planning

The ultimate goal of this stage is to have a completely fleshed out document that details exactly what we want our AI coder to build. Below is a template I've used in the past and it includes 9 different sections relevant to nearly any application, ranging from its purpose to its deployment architecture. We need to fill out this document and even add additional information if our particular projects calls for it.

------------------------------------------------------------------------------------------------

App Generation Prompt Template

The following is an outline of the app I want you to build. Before we make start writing any code, I want you to take a look at all of the features and requirements, and ask me any questions you have or give me any suggestions for the framework if it looks like I am missing anything critical. Once we have that conversation and I give you that go ahead, only then will we begin coding.

We will only implement one functionality at a time. Once you write the code for one part of the app functionality, check in with me before moving onto the next portion so we know that it works before proceeding.

1. Project Overview

Project Name:

(e.g., “StudyAI”)

Purpose:

(Briefly describe what your app does and why it’s useful. Example: “Allows users to upload documents and generate study tools using AI.”)

2. Tech Stack Assumptions

• Framework: Next.js (App Router)
• UI Library: React + TypeScript
• Styling: TailwindCSS + shadcn/ui
• Database: (e.g., SQLite, PostgreSQL, etc.)
• APIs/Services: (e.g., OpenAI API, Stripe, etc.)
• Deployment: (e.g., Vercel, AWS, etc.)

Note: If you need a different database, or additional services, specify them here.

3. Key Objectives

1. Core Functionality

(Example: “Enable users to upload PDF, DOCX, and TXT files.”)

1. Scalability & Maintainability

(Example: “Write modular code and keep components small and reusable.”)

1. User Experience

(Example: “A clean, modern UI using shadcn/ui components.”)

1. Security

(Example: “Ensure environment variables are not exposed, follow best practices.”)

4. Scope

4.1 In-Scope Features

(Examples)

• File upload
• Text extraction
• Generating flashcards or quizzes
• Viewing and managing uploaded items

4.2 Out-of-Scope

(Examples)

• User authentication
• Real-time collaboration
• Advanced analytics dashboard

5. Functional Requirements

Use bullet points or acceptance criteria for each major feature.

5.1 Feature A (e.g., Document Upload)

Description:

(What does it do?)
Acceptance Criteria:

• Criterion 1
• Criterion 2

5.2 Feature B (e.g., Flashcard Generation)

Description:

(What does it do?)
Acceptance Criteria:

• Criterion 1
• Criterion 2

(Add more features as needed: Quizzes, Exports, etc.)

6. File Structure

Next.js App Router

Note: If you need a more extensive structure (e.g., separate client/server components), feel free to elaborate.

7. Non-Functional Requirements

1. Performance

(Example: “Main pages should load under 2 seconds.”)

1. Security

(Example: “All sensitive credentials stored in environment variables.”)

1. Usability

(Example: “Use intuitive design patterns from shadcn/ui.”)

1. Scalability

(Example: “Structure code so new features can be added easily.”)

8. Additional Requirements

• Environment Variables:

(List out necessary API keys or secrets: “OPENAI_API_KEY”, etc.)

• Error Handling:

(Describe how to handle errors gracefully, e.g., toast notifications, logs.)

• Type Safety:

(Use TypeScript interfaces and avoid any.)

9. Development & Deployment Steps

1. Clone & Install

(git clone ..., npm install)

1. Configure .env.local

(Add environment variables for dev environment.)

1. Implement Each Feature

(Incrementally build features from the “Functional Requirements.”)

1. Test & Validate

(Unit and/or integration tests, or manual testing for acceptance criteria.)

1. Deploy

(Push to GitHub, auto-deploy to Vercel, etc.)

------------------------------------------------------------------------------------------------

Seem like a lot? It's totally ok if most of this looks completely arcane—the only thing you really need to know at this point is a general sense of what you want to build and what its functionalities look like. For everything else, we are going to use our favorite AI chatbot (I will be referencing Claude at this point, ChatGPT or Gemini works too).

We will now feed this template to Claude, explain our app idea, and begin working with Claude to complete the rest of the document. This should be a flowing conversation where you ask for explanations about pieces of the PRD you are unfamiliar with, and then ask Claude what its suggestions are for your particular app. Should we be using shadcn/ui? Should we deploy with vercel? Again, you don't need to know these answers, but you do need to be willing to engage with the AI to make these decisions, and also to understand the why behind each choice. Don't let AI blindly make every choice for you (or you will feel the pain later when things go wrong).

Phase 2: Execution

Now that we have our fleshed out PRD, its time to start coding watching AI code. Give this prompt to your AI IDE of choice (Cursor in my case) and see if it has any questions about your architecture. If there are no questions, you can then tell Cursor to start implementing the PRD one step, and one functionality, at a time.

It is very important that we do this piecemeal—if we tell Cursor to execute the entire PRD at once, it will start creating more and more errors, and we will be bogged down in the debugging process. By isolating each step, we can quickly identify when things go wrong and debug accordingly.

A Note on Debugging

A note on debugging—you will come across errors, its just the way it is. Simply describe the errors (or copy the logs from the terminal) and tell Cursor to help you troubleshoot. The debugging grind is just a part of the app creation process so mentally prepare yourself for that as you start your first project.

From here, continue to have Cursor code from your PRD piece by piece until you've made your way through the entire PRD. Once that is complete, you should have an app with all its working functionalities.

Phase 3: Fine Tuning

Now that we know that app is actually working, now we can start working on the UI. My preferred method is to take our code for our home page (usually app/page.tsx), give it to v0.dev, and ask for UI improvements that maintain our current functionality. Tools like v0.dev will show you previews of your new home page UI and also provide the code. You can then bring that code back to cursor and tell it you want to copy that UI design across your entire app. This process lets you isolate your UI experimentation without potentially messing up your app's core functionalities.

Conclusion

Once you have the UI where you want it, congratulations, you now have a completed app! I'm sure this all went very smoothly and you had zero roadblocks whatsoever. But in all seriousness, hopefully this guide at least gets you moving in the right direction when it comes to building apps with AI. View this as an 80% solution and remember that this 3 phase process is really a cycle—you will constantly be going between Claude, Cursor, and v0 as you come up with new ideas mid process. Good luck out there.