How to create an implementation plan to code a project with AI

Creating an effective implementation plan is crucial when partnering with AI to build software projects. This guide will walk you through the essential components of a well-structured plan that communicates your vision clearly to your AI coding partner.

Things to include in the implementation prompt

• Wha is the target audience for your project?
• What technology do you want to use?
• Were do you want the project to be deployed?
• Front end best practices for building the layout.
• How do you want it to work, describe the functionality as much as possible.

About the target audience

A very brief mention of your target audience helps the AI to make better decisions, this can be very quick but provide a lot of value:

1. Research and Define: Identify demographics, technical proficiency, needs, and pain points of your users.
2. Create User Personas: Develop detailed profiles of typical users to guide your design decisions.
3. Validate Assumptions: Use surveys, interviews, or analytics to confirm your understanding.
4. Prioritize User Needs: Focus on solving the most critical problems for your primary audience.

Here are a couple of quick examples you could include in your prompt:

• Busy professionals aged 30-50 who need a quick way to manage daily tasks. They are tech-savvy but appreciate simplicity and efficiency.
• College students aged 18-22 looking for an affordable and easy-to-use platform to find part-time jobs. They are very comfortable with mobile apps.
• Senior citizens aged 65+ who may have limited technical experience and require larger fonts, clear navigation, and high contrast for readability.

Choosing the project technologies

The priority here is to choose LLM-friendly stacks of technologies, for example:

VRSS

• Vite or Next: Vite or Next are both broadly known and LLMs are trained on them.
• React: The most propular front end framework in the world.
• ShadCN (Tailwind): The new bootstap, most LLMs are very good with it.
• Supabase: Its very new and LLMs are not very trained but there are no solid alternativs and the founders have really made an effort in documenting it and making it available for the LLMs using MCP.

Where to deploy the project

⚠️ Warning: This is key for a smooth AI experience, deploying your application is one of the most delicate and prompt for error stages when coding with AI.

I strongly recomend to deploy your platform on LLM-friendly hosting providers unless you are planning for a complete static build approach: Vercel, Netlify, Render, Heroku, etc.

We will be using vercel because is the most beginner-friendly hosting platform and the different current models seem to know how to use it very well.

If you are using Windsurf as of May 22, 2025 they have launched an integration with Netlify that is supposed to help you deploy quickly.

Front end best practices

If you don't specify from the beginning how you want the front end to be built you are going to have to constanly correct the AI and be more specific in the future, so lets take some time to write what we want.

Here are a couple of examples of what you can include in your main implementation prompt (under the <describe here what you want to build> section, or as a dedicated part of your project description) to guide the AI on front-end design from the start. These are inspired by the detailed guidance in our lesson on "Crafting User-Friendly Front Ends with AI":

Example Prompt Snippet 1: Specifying Framework and Overall Style

1Regarding the Front End:
2- We will use React with ShadCN/ui and Tailwind CSS.
3- I'm aiming for a modern, clean, and minimalist design with a 'dark mode first' approach 🌙.
4- The target audience is [e.g., busy professionals, young students, etc.], so clarity and ease of use are paramount.

Example Prompt Snippet 2: Responsive Design and Core Navigation

1Regarding the Front End Layout:
2- The application must be fully responsive 📱💻, prioritizing a mobile-first approach for its core structure.
3- The main navigation should be a [e.g., persistent top bar, collapsible sidebar] using [chosen framework's navigation component if known, e.g., ShadCN/ui's NavigationMenu]. It should include links to [e.g., Home, Dashboard, Settings].

Remember, the more specific you are upfront about your desired framework, look and feel, and fundamental layout principles, the smoother your AI-assisted development journey will be! ✨

Funtionality Description

Describing the functionality of your application is crucial for the AI to understand what to build. Be as clear and detailed as possible. Break down complex features into smaller, understandable actions or user stories.

📝 Note on Scope: Unless you're building something relatively small, you typically don't want to list every single feature the application will ever have in your initial implementation plan. Focus on the first iteration or Minimum Viable Product (MVP). What core set of functionalities will make you happy with the results and allow you to test the core idea? Once that's built and deployed, you can then create a new implementation plan for the next set of features or improvements. This iterative approach is much more manageable for both you and the AI.

Here's a more concise example for a Learning Management System (LMS) focusing on a first iteration:

1**Project: Learning Management System (LMS) - First Iteration (MVP)**
2
3**Overall Goal:** A platform for instructors to create/manage courses and for students to enroll, learn, and track progress.
4
5**Key User Roles:**
61.  **Student:** Enrolls, views content, takes quizzes, tracks progress.
72.  **Instructor:** Creates/manages courses & materials, creates quizzes, views student progress.
8
9**Core Functionalities for MVP:**
10
11**1. User & Auth:**
12    *   Signup (Student/Instructor), login, logout.
13    *   (Optional: Password recovery if quick to implement, otherwise defer).
14
15**2. Course Management (Instructor):**
16    *   Create/edit basic courses (title, description).
17    *   Organize courses into modules/lessons with simple text content and video links.
18    *   Publish/unpublish courses.
19
20**3. Student Experience:**
21    *   Browse/search courses and enroll.
22    *   View course content (text, embedded videos).
23    *   Manually mark lessons as completed.
24    *   View overall course completion status (e.g., number of lessons completed).
25
26**4. Basic Assessments (Instructor - simplified for MVP):**
27    *   Ability to create simple multiple-choice quizzes associated with lessons.
28    *   (Student) Ability to take quizzes and see a basic score.

This more concise breakdown still covers the essential user roles and what they can do, giving the AI a good starting point without excessive detail for an initial plan. You can always elaborate on specific features in later prompts.

Implementation prompt

No that we have covered all the steps in the implementation plan, here is an example for an LMS system for college students.

1I want to build a **Learning Management System (LMS) - First Iteration (MVP)**.
2
3<!-- General Project Description -->
4<project_description>
5The overall goal is to create a platform where instructors can create and manage basic courses, and students can enroll in these courses to learn and track their initial progress. This is the first iteration, focusing on core functionality.
6</project_description>
7
8<!-- Target Audience -->
9<target_audience>
10Our primary target audience for this MVP is **college students (18-22 years old)** who are looking for supplementary learning materials and are very comfortable with modern web and mobile interfaces. A secondary audience is **independent instructors** who need a simple platform to share their knowledge.
11</target_audience>
12
13<!-- Technologies -->
14<technologies>
15- **Frontend:** React with Vite, using ShadCN/ui and Tailwind CSS for components and styling. <!-- VRSS Stack -->
16- **Backend & Database:** Supabase (for user authentication, database, and potentially storage later).
17- **Deployment:** Vercel for the frontend and Supabase for the backend services.
18</technologies>
19
20<!-- Functionality Description - MVP -->
21<functionalities_mvp>
22**Key User Roles for MVP:**
231.  **Student:** Can sign up, log in, browse/enroll in courses, view text/video lesson content, and manually mark lessons as complete.
242.  **Instructor:** Can sign up, log in, create/edit basic courses (title, description), add lessons with text and video links, and publish/unpublish courses.
25
26**Core Functionalities for this MVP iteration:**
27*   **User Authentication:** Student and Instructor signup, login, logout. (Defer password recovery for next iteration if it complicates MVP).
28*   **Course Creation (Instructor):** Ability to create courses with a title and description. Organize content into simple modules and lessons (text content and YouTube video embeds initially).
29*   **Course Enrollment & Consumption (Student):** Students can see a list of published courses, enroll in a course, and view its lessons. They can manually mark lessons as 'complete'.
30*   **No Quizzes or advanced progress tracking in this MVP.** <!-- Explicitly deferring features -->
31</functionalities_mvp>
32
33<!-- Front-end Best Practices -->
34<frontend_practices>
35- **Overall Style:** Modern, clean, and minimalist design. Prioritize a **dark mode first** aesthetic 🌙, ensuring it's sleek and user-friendly for our target audience of college students.
36- **Responsiveness:** The application must be fully responsive 📱💻, looking great on mobile, tablet, and desktop. Use ShadCN/ui components with Tailwind CSS to ensure this, focusing on a mobile-first approach for core structure.
37- **Navigation:** For the MVP, a simple top navigation bar using ShadCN/ui's `NavigationMenu` with links like 'Courses' and user profile/login/logout.
38</frontend_practices>
39
40<!-- API and Deployment Strategy -->
41<api_and_deployment>
42We will host the frontend on **Vercel** and use **Supabase** for the database and authentication.
43
44Write a markdown file with the **implementation plan** for this LMS MVP. Do not include any code examples in the plan itself. Split the implementation plan into small, actionable steps and save it into `./memory-bank/implementation.md`.
45
46**Crucially, prioritize the plan with steps to sync and deploy to Vercel as often as possible.** For example, include a step specifically to deploy a basic "Hello World" or a minimal app shell to production (Vercel) right after the initial project setup and a few foundational steps. After each significant feature set (like user auth, then course creation basics), include a step to deploy and explicitly state: **"Stop and wait for me to deploy and test the app in production before proceeding."** <!-- This ensures iterative feedback and reduces risk -->
47</api_and_deployment>