Like a smart child who doesn’t understand the best coding practices.
You need to clearly tell the AI what you want:
-
Is it a web application? -
What features are needed? -
What is the structure? And so on.
Here’s how to make AI your full-stack developer:
Context is crucial!
You need to establish a strong contextual barrier for the AI.
Goal: Do not let the AI make any assumptions. All information is provided by you.
This way, the AI will collaborate with you, not against you.
Next, discuss what additional documents are needed to provide maximum contextual support.
1. Project Requirement Document
This document outlines the overall content of the project:
-
Project Overview -
Problem Statement -
Solution -
Target Users -
Technology Stack -
Core Features -
Scope of Work
This document serves as a brief introduction to your project.
Next, add more specific documents to guide the AI through each step.
2. Application Flow and Function Document
Imagine you are explaining your application to a friend:
“After the user registers, they will be redirected to the dashboard. On the dashboard, there are 4 sections: metrics section, analytics section, etc.”
This document provides the complete end-to-end running flow of the application.
Tip: Ask the AI not to use bullet points in this document.
This document is very important as it provides the AI with a chart/blueprint for planning the execution of each page.
3. Technology Stack and Dependency Document
Now provide the AI with the technical background.
Is your project using Python? Or Nextjs? Is the backend using Supabase or Firebase?
This document will detail the technology stack the AI needs to use to build your application.
Make sure to choose commonly used technology stacks, as LLMs like Claude and GPT-4 are primarily trained on widely used frameworks.
I use Nextjs 14, TaliwindCSS, shadcnUI, and radixUI for the frontend, and Supabase for the backend.
The following platforms prefer this technology stack:
-
v0.dev -
bolt -
Claude -
Cursor -
Replit
Python is also great for high-performance applications that do not require modern UI.
4. File Structure Document
If you want to avoid a vicious cycle of constant errors, this document is crucial.
The AI might create duplicate files, save files in the wrong locations, or even delete completed code.
To solve this problem, provide the file structure in advance.
Tip: Ensure to ask the AI to create the file structure in ASCII format.
Take a screenshot of the file structure and attach it to the document.
5. API Documentation
By default, the AI does not know how any platform’s API is configured.
We need to attach documentation for all APIs that will be used in the application.
For example, OpenAI API, Claude API documentation, Supabase documentation, etc.
Copy the instructions from their websites and paste them into your document, then attach that document to the AI.
6. Backend Architecture Design Document
The architecture is basically your backend blueprint.
It includes all the database tables, buckets, and user information tables (authentication) that need to be created.
I use Supabase because the AI can generate SQL queries that you can run directly in Supabase, completing in seconds.
This way, I can create my database and attach it to the frontend in an hour.
Highlight: Claude excels in designing backend architecture; if you create the right documentation, the AI will easily follow the guidance.
7. .cursorrules File
Many people do not use this tool. It is similar to custom instructions in ChatGPT.
The .cursorrules file needs to be project-specific rather than generic “AI rules” prompts.
Depending on the technology stack and project requirements, ask the AI to create a .cursorrules file.
This document will tell the AI where each document is located (Cursor’s navigation map).
Help the AI navigate more efficiently with this file.
8. UI Layout Document
This document will make your frontend interface more visually appealing. If used in conjunction with v0, it can create frontend components with a consistent style.
Most people underestimate the power of a clean user interface (UI).
“First impressions matter.”
This document should include the following information: UI packages used, fonts, color schemes, icons, effects, etc.
9. System Prompt Words
You can ask the AI to create project-specific system prompt words for v0, bolt, or any tools you may be using.
This helps in communicating with the tools and eliminates the need to provide lengthy context each time.
Do you know why Claude performs better on its platform than when used via API? Because their system prompts are excellent.
Do the same for your project, and you will become better friends with the AI.
I spend 80% of my time creating documentation during development, and achieve great results in the remaining 20% of the time.
Introduction: codeguide.dev
An application that helps you brainstorm and write all important documents to attach to the AI.
✅ System prompts
✅ PRD documents
✅ Architecture design
✅ Application flow documents
✅ UI layout documents
and more.