Like a kid who is smart but doesn't understand code best 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 a strong contextual barrier for AI.
Goal: Don't let the AI make any assumptions. All information is provided by you.
In this way, the AI will work with you, not against you.
Next discusses what documentation needs to be attached to provide maximum contextual support.
1. Project requirements document
This document outlines the project as a whole:
- Project Profile
- Problem statement
- prescription
- target user
- technology stack
- core functionality
- Scope of work
This document is a brief description of your project.
Next add more specific documentation to guide the AI through each step.
2. Application process and functionality documentation
Imagine you're explaining your app to a friend:
"When a user registers, they jump to the dashboard. On the dashboard, there are 4 sections: metrics section, analytics section, etc."
This document provides the complete end-to-end runtime flow of the application.
draw attention to sth.: AI is required to include in the document Do not use bulletsThe
This document is important because it provides the AI with a diagram/blueprint for planning the execution of each page.
3. Technology stack and dependency package documentation
Now providing the technical background for AI.
Does your project use Python? or Nextjs? Supabase or Firebase for the backend?
This document will detail the technology stack that AI needs to use to build your application.
Make sure you choose a commonly used tech stack, because things like Claude and LLMs like GPT-4 are primarily trained based on widely used frameworks.
I'm using Nextjs 14, TaliwindCSS, shadcnUI and radixUI for the frontend and Supabase for the backend.
The following platforms all prefer this technology stack:
Python is also great for high-performance applications that don't require a modern UI.
4. Documentation of the structure of the document
This document is vital if you don't want to get into a vicious cycle of constant errors.
The AI may create duplicate files, save files to the wrong location, or even delete completed code.
To resolve this issue, please provide the document structure in advance.
draw attention to sth.: Ensure that the AI is required to create the file structure in ASCII format.
Take a screenshot to save the file structure and attach it to the document.
5. API documentation
The AI does not know by default how any platform's APIs are configured.
We need to attach documentation for all the APIs that will be used in the application.
Examples include the OpenAI API, Claude API documentation, Supabase documentation, etc.
Copy the instructions from their website and paste them into your document, then attach that document to the AI.
6. Back-end architecture design documentation
The architecture is basically your back-end blueprint.
It contains all the database tables, storage buckets, and user information tables (authentication) that need to be created.
I use Supabase because the AI is able to generate SQL queries that you can run directly in Supabase in seconds.
By doing this, I can create my database and attach it to the front end in less than an hour.
bright spot: Claude is excellent at designing back-end architectures, and if you create the right documentation, AI will easily follow the guidance.
7. .cursorrules file
Many people do not use this tool. It is similar to ChatGPT of custom commands.
The .cursorrules file needs to be project-specific rather than a generic "AI rules" prompt.
Depending on the technology stack and project requirements, the AI is asked to create a .cursorrules file.
This document will tell the AI where each document is located (Cursor's navigation map).
Help AI navigate more efficiently with this file.
8. UI layout documentation
This document will make your front-end interface more aesthetically pleasing. When used with v0, it creates front-end components with a consistent style.
Most people underestimate the power of a clean user interface (UI).
"First impressions count."
This document should contain the following information: UI packages used, fonts, color schemes, icons, effects, and more.
9. System cues
The AI can be asked to create project-specific system prompt words for v0, bolt, or any tool you might use.
This helps to communicate with the tool and eliminates the need to provide longer context each time.
Do you know why Claude outperforms usage via API on their platform? It's because their system cues are excellent.
Do the same for your program and you'll become better friends with AI.
I spent 80% of my development time creating documentation, and achieved great results in the remaining 20%.
Introduction: codeguide.dev
An app that helps you brainstorm and write all the important documents to attach to AI.
✅ System Alert Word
✅ PRD Documentation
✅ Architecture Design
✅ Application Process Documentation
✅ UI Layout Documentation
wait a minute!
link (on a website)::http://codeguide.dev
