Cj Z 🎯

AI Coding Crash Course:
(Everything you need to know to get started)

You can build anything with AI code, If you know how to talk to AI models.

You need to learn:
- Development Documentation
- What AI tools to use
- AI prompting

That's it. Don't overcomplicate it.

Let's expand:

Let's start with tools.

What AI tools we need to use? For what purpose?

1. Bolt is great for:
- for tiny software (1 page tool that does 1 thing)

- landing page design

- designing the frontend screens

- personal software

If you're just starting out and want to taste the AI coded software, try bolt.

It's just a bit too expensive to build complex apps.

2. Cursor

Cursor is like the main hub of AI coding right now.

It is great for:
- building complex software (12+ pages app with frontend + backend)

- learn and code software at same time. (learn by building cool stuff)

- expanding your software fast (if cursor understands the context, you can build on top very fast)

Cursor is for those who want to become devs actually. It is built by devs for the devs.

Cheaper, but a bit complex tool. To make it work the best, you need to write detailed dev docs. 

Context is KEY with Cursor!

3. Claude AI (sonnet 3.5 model)

Claude is like a code mentor. You start by brainstorming with it, than ask it guide you throughout. 

What's the next step?
Why I got this error?
How to fix this?

Ask any question and Claude will guide you. 

All tools are using Claude API to perform coding tasks.
It's the best coding AI model right now.

You code with Claude and you use Claude AI (platform) as a coding mentor.

Some other good tools to consider.

1. Windsurf (Cursor AI competitor that is rising the ranks, not perfect but getting better every week)

2. Lovable (Good for designing fancy UI, landing page and tiny software)

3. v0 (This one was my favorite frontend coding tool. Right now it is not good, maybe vercel will fix this)

That's it for tools.

For Micro Saas use Bolt
For complex SaaS use Cursor
For coding Support use Claude AI
For coding frontend use v0/lovable
For writing documentation use GPT o1

Now explore documentation. Why is it so important for AI Code.

1. Developer Documentation. 

AI models are very strong and that's why they can hallucinate/assume things, if we don't provide them right information. 

So, we need to write docs to provide deep context about our project.

These docs will help AI model execute better.

What type of Documentation you need to attach to AI tools?

1. Project Requirements Documentation (PRD)
It's an overview of your project. 
- What's the objective
- Target audience
- Total steps
etc. 

Use it with Bolt,Cursor,Claude to provide memory about your project.

2. App Flow & Functionality Doc

Recently, I transformed this Doc into Frontend screens guideline doc.

In the doc you'll share a complete user journey.
- where user will go first (landing page then sign up....)
- how many sections there are (left sidebar, main content area....)
- page relation with each other (save drafts in saved projects, AI instructions in settings....)

It's like you are visualizing the whole flow of your app.

This doc will help AI map out a blueprint to understand the scope of project in best manner.

3. Tech Stack and packages Doc

In this Doc you need to provide information about what packages, libraries, APIs, webhooks etc you are using tin this project.

You can even add file structure in this doc (AI messes up file structure mostly so giving it a template always helps)

4. Database Design

This document will cover your backend structure. 
- database
- authentication
- storage

I use Supabase and mostly devs that are working with AI code are also using it.

AI can right code (SQL queries) that you can paste in supabase and your backend will be designed.

These are the 4 pillars of AI coding documentation. 

Other important docs are:
- .cursorrules file (for Cursor to provide instructions about what file is where, what total steps to follow)

- System prompts for bolt, Claude AI.

- UI guidelines doc (in depth instructions about styling, fonts, color pallettes etc)

Documentation is like 80% of your AI coding work.

If you do it right, you can build anything and you can build it fast.

You skip this part and will definitely mess up sooner or later.

But its alot of work, to create dood Documentation. 

I solved this with http://codeguide.dev

I have access to GPTo1 preview via API and i used extensive agentic prompts to create all docs.

o1 on ChatGPT can right detailed docs (but sometimes overcomplicate by adding too many sections.

Thats why prompting is very important. Lets expand prompting.

English is the new coding language! And we need to learn what English AI models understand the best.

We can't just say  "move this bar to left" instead we have to be clear: "move the sidebar with menu items to the left of the screen"

What you want, what you don't want, let AI know in simple language and AI will just execute rather than trying to understand the request.

So here's a rundown of the Crash course.

1. Pick the best AI tool for your use case.
2. Write detailed docs and attach them to these tools.
3. Prompt the AI with clear instructions.

That's it. This is AI coding in a nutshell for you.

You can build anything with AI code:
- software (saas)
- mobile apps
- extensions
- plugins
-APIs

You name it. If you can visualize it, you can code it.

(With persistence and following best practices of AI code)

Tools are cheap. All you need is internet and a computer to get started.

I hope this post helped you understand AI coding.

Now execute.

Peace
CJ

I use bolt. new to build web apps.

I burned 200 Million+ tokens so far and spent $300+ on bolt.

Here's the best use case of bolt.

We'll cover this workflow:
Claude AI
↓
Bolt. new
↓
Cursor

Let's start.
🧵 

Bolt is best for:
- starting the project super fast.
- building your frontend sceens.
- micro saas applications

Bolt is not good for:
- building complex projects
- connecting backend to frontend
- API handling

So how to use bolt .new?

Start your workflow with Claude AI

1. Start a new project
2. Attach all documents
     - PRD (Project Dev. Doc)
     - App flow &amp; Functionality Doc
     - Frontend code (if you used v0)
3. Now tell Claude that you'll be using
     - bolt .new start the project 

First thing we need to do?
     - Go to bolt .new and install Nextjs 14 (don't just say Nextjs, cuz it'll install nextjs 13 which'll cause errors and not nextjs 15)

"Install Nextjs app router with TypeScript + TailwindCSS)

You can use this prompt.

Once installed, next is....

File Structure.

This is very important. If you let AI to setup your directory, it'll create a messy directory with too many sub folders.

This will cause errors later on.

Ask Claude:
"Create simple file directory following best practices of Nextjs 14 App router" 

Now go to bolt. new

Paste that file directory and ask bolt to create all folders and files for you.

It does a pretty good job on this.

Once your project is setup and file structure is created.

Now lets move to coding the frontend.

Here're few tricks.

Do not start with authentication!
(Creating sign in, sign up logics)

It's a hit or miss with bolt. If you get stuck it'll eat your tokens in just error handling again and again.

"We'll add auth later on. Lets start with coding basic skeleton"

Provide the skeleton to bolt.

"The app has 2 parts:
1. Left sidebar with Navigation menu.
2. Main content area to display dynamic content based on which page user is on"

Now provide your:
- sidebar code to bolt
- provide screenshot if you can

 It'll create a basic skeleton. 

Now move to pages of your saas.

Like:
- Dashboard 
- History
- Settings
- Help
Etc

I use Claude to provide me the production ready code with all features working.

Bcoz I attached v0 code to claude, it can read code + features i want from PRD and refine the final code.

I take that code and don't paste it in bolt chat section.

(This will burn alot of tokens)

I page the code in right file. Like:
Dashboard &gt;
     - page.tsx
(I will paste Dashboard code in tsx file of Dashboard)

Then I'll select all code (click on ask AI) and then ask bolt...

"I've added the code for Dashboard in app/dashboard/page.tsx

Fix any errors and run the code"

It'll go and update .json files install any dependencies if required.

And run the code (without writing that from scratch in relevant file)

This one trick saved me alot of tokens.

Now get all your pages done like this.

Once you're frontend is coded and all pages are working.
✅️ sidebar
✅️ dashboard
✅️ history
✅️ settings
✅️ help

It's time to get out of bolt!

We used bolt to set up project super fast + setting up file directory + frontend code

Now it's time to move to cursor.

Cursor is great for:

- adding functionality (sign in + database + storage)

- debugging errors.

- refining the UI (if you want to add anything or remove)

So upload your bolt project to Github then connect it with cursor.

Now you have working frontend that you assembled with bolt, opened in cursor.

Now it's time to build strong "context boundary" for cursor.

Cursor is dumb if you don’t add docs, don't add .cursorrules file and don’t provide step by step instructions.

So add docs in .md format.

Now you can start the workflow in cursor.

I start with:
- auth (sign in, sign up logic)
- APIs (if I use any API)
- then database (to store data)

I use supabase for my projects because AI can right SQL code that'll create all tables for me very easily 

Use claude to do that.

Now once you've added your backend and it is connected to frontend.

You have a working app.

Test all features, buttons, flows and ask cursor to make adjustments.

Write detailed messages + attach relavent files only to ask cursor to make changes.

That's it. That's the flow.

You used Cursor as your coding guide.

It will provide you step by step roadmap on what should you do next.

You used bolt to code the frontend (with cursor it takes 10x more time)

You used Cursor to add backend and refine the project.

Now you can deploy this app.

It won't be a straightforward flow.

You'll encounter errors, you'll mess up few logics, but you'll pass these hurdles if you just keep on refining.

Tips:
- Don't get burned out.
- Don't quit.

You'll learn so much about coding by building things.

Start today.
Peace
@cj_zZZz

An Open Source AI model {Deepseek r1} launched 72 hours ago.

This Chinese AI model just broke the internet. 

People are running r1 model on:
- self hosted servers
- mobile phones
- raspberry pi
- mac books

Here're all the cool experiments, you check:
🧵 

1. Here's the Original Tweet by Deepseek Official Account.

https://x.com/deepseek_ai/status/1881318130334814301

2.  Sully has picked up nice insight: "the realtime thought process of r1 model"

https://x.com/SullyOmarr/status/1881393536761036816

3. Download r1: 1.5B model and run on your local computer and code works with Cursor.

https://x.com/dani_avila7/status/1882249723563643251

4. Brian Installed Deepseek r1 model on a simple hardware "Raspberry pi" (It works offline)

https://x.com/BrianRoemmele/status/1882436734774043055

5. http://codeguide.dev added Deepseek r1 to Write Detailed Project Implementation Plans

AI Coding models hallucinate alot if you don't provide proper context about your project.

CodeGuide fixed it

1. Create Project Development Docs
2. Attach Project Implementation Plan
3. Attach them to any AI coding tool

Results:
- Less Errors
- Less Tokens Burned
- Hallucination Problem Fixed.

6. Aaron Installed Deepseek r1: 1.5B on his smartphone and it runs offline. 

https://x.com/localghost/status/1882109711732154387

7. Riley Built a Perplexity Clone that uses Deepseek r1 model and it also Search the Web

https://x.com/rileybrown_ai/status/1881720155786375671

8. Check How Christian used r1 model to Explain Pythagorean Theorem with Visuals

https://x.com/christiancooper/status/1881335734256492605

9. Run Deepseek r1 Locally on your Browser using WebGPU

https://x.com/reach_vb/status/1881809400995934640

10. Use Python Framework Reflex to build a RAG system that runs Locally using Deepseek r1 model.

https://x.com/getreflex/status/1882057300556313025

11. Alex has built a beast Hardware Structure to run Deepseek r1 on his 7 M4 Pro Mac Minis and 1 M4 Max MacBook Pro.

https://x.com/alexocheema/status/1881561143736664180

12. AK used Deepseek r1 to Code Games from Different Languages. 

https://x.com/_akhaliq/status/1881500650044879052

TL;DR:

Deepseek r1 is the strongest Open Source LLM model that is competing against the TOP OpenAI o1 model. 

This model is great for reasoning. People are hosting r1 model on phones, local computers, browsers, and local servers.

Exciting weeks ahead.

If you want to learn <Coding> with AI,

Here's the prompt that you can add in "Rules for AI" section on cursor.

Credits: @mckaywrigley 

I took his original prompt, ran it through o1 model. Asked it to crtique this prompt and make it a 10/10 prompt.

Prompt:

"You are an AI coding instructor designed to assist and guide me as I learn to code. Your primary goal is to help me understand programming concepts, adopt best practices, and develop problem-solving skills while coding. Always assume I am a beginner with limited programming knowledge.

---

Guidelines for All Interactions:

1. Clear and Simple Explanations:

Use straightforward language; avoid jargon unless necessary.

When introducing new terms, provide concise definitions and relevant examples.

2. Step-by-Step Guidance:

Break down complex topics into smaller, manageable parts.

Ensure I grasp each step before progressing to the next.

3. Promote Good Coding Practices:

Encourage writing clean, efficient, and readable code.

Explain the importance of best practices and how to implement them.

4. Supportive Teaching Style:

Be patient and understanding; acknowledge the challenges of learning to code.

Offer positive feedback for correct efforts and gentle corrections for mistakes.

5. Error Correction and Explanation:

Identify errors in my code and explain why they occurred.

Provide guidance on how to fix issues, detailing the solution process.

6. Encourage Critical Thinking:

Prompt me to think through problems and attempt solutions before providing answers.

Ask open-ended questions to stimulate problem-solving skills.

7. Adapt to My Learning Pace:

Tailor explanations to my level of understanding.

Invite questions and clarify any uncertainties promptly.

8. Effective Use of Code Examples:

Provide code snippets to illustrate concepts.

Use code blocks with proper syntax highlighting.

Explain each line of code thoroughly.

Include comments within code to document functionality.

9. Provide Additional Resources:

Recommend relevant resources for further study when appropriate.

Suggest practice exercises to reinforce learning.

Response Structure:

1. Formatting:

Use clear and organized Markdown formatting.

Utilize headings, bullet points, and numbering to enhance readability.

Include code blocks with appropriate syntax highlighting for any code.

2. Answering Questions:

Address my queries thoroughly, adhering to the guidelines above.

If a question is unclear or lacks context, politely ask for clarification.

3. Code Review and Feedback:

Review any code I provide and offer constructive feedback.

Highlight strengths and identify areas for improvement.

Explain suggestions clearly, using examples if necessary.

4. Further Learning Suggestions:

Provide recommendations for additional learning or practice related to the topic.

Encourage continuous learning and curiosity.

Remember: Your goal is not just to help me write correct code but to ensure I understand the underlying principles and develop my programming skills. Always strive to be clear, patient, and encouraging in your responses"

-----

Original prompt is also attached in next tweet.

Join waitlist for http://codeguide.dev to plan and code your app with AI. (we got 450 signups in 44 hours)

Cheers

Original Prompt:

"You are an AI coding instructor designed to assist and guide me as I learn to code. Your primary goal is to help me learn programming concepts, best practices, and problem-solving skills while writing code. Always assume I'm a beginner with limited programming knowledge.

Follow these guidelines in all interactions: 

1. Explain concepts thoroughly but in simple terms, avoiding jargon when possible. 
2. When introducing new terms, provide clear definitions and examples. 
3. Break down complex problems into smaller, manageable steps. 
4. Encourage good coding practices and explain why they are important. 
5. Provide examples and analogies to illustrate programming concepts. 
6. Be patient and supportive, understanding that learning to code can be challenging. 
7. Offer praise for correct implementations and gentle corrections for mistakes. 
8. When correcting errors, explain why the error occurred and how to fix it. 
9. Suggest resources for further learning when appropriate. 
10. Encourage me to ask questions and seek clarification. 
11. Foster problem-solving skills by guiding me to find solutions rather than always providing direct answers. 
12. Adapt your teaching style to my pace and learning preferences. 
13. Provide code snippets to illustrate concepts, but always explain the code line by line. 
14. Use comments throughout the code to help document what is happening  

Address the my questions thoroughly, keeping in mind the guidelines above. If the question is unclear or lacks context, ask me for clarification.  

Review the code and provide feedback. If there are errors or areas for improvement, explain them clearly and suggest corrections. If the code is correct, offer praise and explain why it's a good implementation.  

Structure your responses as follows: 
1. Format your response as markdown 
2. Answer my question 
3. Code review and feedback 
4. Suggestions for further learning or practice  

Remember, your goal is not just to help me write correct code, but to help me understand the underlying principles and develop my programming skills. Always strive to be clear, patient, and encouraging in your responses."

Do you want to code with AI?

It has 2 major parts:
- frontend (screens like dashboard)
- backend (to save data on cloud)

Today, I'll show you how to code frontend UI screens with v0 by @vercel 

✅️ Completely No-code.

Let's get started.
🧵 

First Question: Why v0?

- I tried bolt .new (too many errors + expensive)

- I tried gptengineer (1 request at a time + need more work on reasoning)

- I tried replit agent ( good with Python but still new with Nextjs)

And after trying everything I found v0 the best for these reasons:
- it is specifically built for UI design.

- output looks premium (ask it to make premium)

- I can see code (break down into components)

- I can have control over my frontend code when pasting in cursor.

So let's get started.

1st step: Always Documentation.

“If I had eight hours to chop down a tree, I'd spend the first six hours sharpening my axe”.
- Abraham Lincoln

Same for documentation. If you spend 80% of your time on creating detailed docs.

Then coding gets super easy. 

After you get all your docs ready with ChatGPT o1, 

Upload them on v0

Vercel has improved v0 context with prompt caching i believe.

Means now it can remember 1000 lines of code and doesn't break after v11.

Start page by page.

Then each page -&gt; break it down into components 

Once you have all components coded for all pages.

It'll take you around 2-4 hours.

Organize them in a Google Doc.

(You need these links to open each component, then copy code and paste it in Claude.)

So, to keep things organized, I use simple Google doc. 

Once you have your frontend ready.

You need to let Claude know about: 
- how many pages you have?
- how many components are on each page?

Then start your cursor work.
- create all necessary files and folders to paste the code.

Claude will also help you with the backend.

Don't get overwhelmed. 

v0 is free. Design your first web app or browser extention.

Once you complete the first step (Research + frontend), then you'll be very comfortable in diving deep into cursor)

Everyone starts from 0, you start from v0.

DMs are open.

Peace
@cj_zZZz

I've consulted 20+ CEOs in last 4 months.

They are all inesting big bucks on AI Tech.

Here're all the in-demand product requests from big companies:

Sharing all my notes.
🧵

1. Voice agents
Companies spend alteast 20% of resources on customer support.

They either have:
- In-house customer support agents
- Or they outsource this to call centers

Both are expensive.

Solution:
A agent that take calls from customers to answer all their questions, inquiries, track orders, collect information, forward calls etc.

I've built this recently for dentist clinics to replace the front desk calls. Magic.

You can also build:
- Customer onboarding call agent
- Outbound Call Agent
- Appointment booker
- AI receptionist

2. Autonomous agents
Just a fancy name. In reality it's an AI system with function calling capability.

Attach tools like CRM search, slack, email, calendar, company knowledge base.

Employees can ask this copilot rather than managers to get information fast.

It boosts employee performance, which means more revenue for companies.

3. Employees AI training 
Employees vs Employees using AI are totally different domains now.

1 Employee that use AI in it's workflow can get 3-4 Employees work done in same time.

Companies are paying upto 50k contracts to help train their employees on:
- How to use AI in their workflow.
- Prompting training
- Multi modal workflow

Alteast 40% productivity boost with this training.

1. Be an AI consultant. 
2. Create your indepth resources. 
3. Train their employees for a month
4. Charge them big money
5. Repeat.

4. Self hosted AI models
Companies are not conformable using OpenAI or Claude APIs because of data privacy.

They ask for opensource models that they can host on their own servers.

Now the opensource AI is also moving at fast pace with models like Qwen and Llama 3.2.

Be an opensource AI expert. Install these models on their server.

Build them custom interfaces. Charge them upto 100k for this.

5. Data analysis AI
Companies are struggling to get insights from all of their data.

They're able to utilize only 20-30% of the company data with human experttise.

But AI can analyze data fast and effectively. That's the most mature use case of LLMs.

Build sophisticated RAG systems and integrate them in their workflow.

Contract size: 30k+

6. Lead generation AI
Every business needs new leads. This is most in-demand AI product.

Companies are looking for AI systems that improve:
- inbound lead conversion
- visitor to lead conversion
- outbound lead systems
- customer rebtention systems

Build Lead Gen engine for companies and charge them as a SaaS or as an agency.

4/5 companies are ready to pay for this AI service.

7. Client experience AI
Every industry is getting saturated at this moment. Competition is tough. Retaining existing users is become hard. 

To solve this companies are looking for personalized experiences for customers.

Build AI systems that help their customers understanding the product, integrations, getting max. benefit of the product.

This will provide great value-for-bucks to users and churn rate will go down for companies.

8. Competitor Research AI
Competitive edge is real! Companies are spending hundreds of thousands to understand:
- their competitors, 
- market trends, 
- customer behaviors,

Help companies building solid narratives, attracting new customers, and fixing offers, pricing, sales flow etc.

AI can analyze data fast and provide deep insights which are valuable for companies.

9. Internal AI tools
Help companies build their own custom tool stack. 

AI chatbots
Automations
Knowledge bases
Inter-department flows
Communication help
Voice bots

Your job is to analyze their workflow and find out how AI can be helpful.

Suggest those systems, get them approved and help them build those or build them with your team.

10. Data enrichment AI
Companies need AI that can crawl the web and find them missing information (valid information)

It can be lead's email address or product list of competitors or reviews about the company on all platforms.

Data Enrichment is in-demand right now. A SaaS that does this is positioned perfectly.

That's it for today. 

I have tons of notes in my red notebook. I'll be sharing them in coming days.

Join http://codeguide.dev as last few days are left for waitlist.

There will be some exclusive benefits for early community. 

I'm excited for the launch.

Also I am opening 3 Consultation slots for next week. 

DM me and I'll connect with you. 

Let me help you with what to build, how to build, and how to market it.

Peace
CJ

I've built 19 projects with Cursor AI without line a single line of code myself.

But, the Truth is Cursor is dumb you don't add detailed docs around your project.

You need to build a strong &lt;Context Boundary&gt; around Cursor

Here what you can do to improve your Cursor workflow🧵 

1. Brain dump with Claude

You need to to share everything about your idea. The best way you open your mic and speak out everything about your project. 

- What it is?
- Features?
- Layout?
- Inspirations?

Anything that comes to your mind. Context is the Key for AI.

2. Claude or ChatGPT o1

Claude is great to turn your thoughts into structured output. 

You take this output to ChatGPT o1 model. 

Ask it to create:
- Project requirements Doc.
- Tech Stack and Packages Doc.
- Schema Design Doc. 
- Detailed App Flow Doc.

I do compare Claude and o1. Sometimes Claude outshines o1. 

(If you don't have access to o1, you can get this done with Claude too)

3. Once you got your Docs done. 

Its time for Frontend Code.

You have 2 options: 
1. For High Quality UI: use v0
2. For Standard UI: use Claude

If you pick v0, attach the created docs and ask it to start coding page by page. 

If you work with claude, ask it to start coding frontend screens.

4. Now have Docs done, frontend code done. 

Let's move to the code assambly part. 

Now you have 2 options:
1. For fast project setup: use bolt .new
2. For manual setup: use Cursor

With bolt you can install Nextjs + all dependencies in just 2 prompts. 

With cursor, you follow the claude instructions to set up your project. 

(I use bolt for this step to save time but if you don't have access to bolt claude will help you setup with cursor)

5. Ask Claude to create "File Structure" 

I am pasting the file structure that works the best with AI code. 

copy this file and ask Claude to use this as a reference and create a file straucture for your project. 

6. Run code now. 

Now upload that file stucture to:
1. bolt (bolt can create you folder & files in 2 prompts
2. to cursor. 

with bolt its easy and fast. 

For cursor. you need to now attach all docs in .md foramt in root folder. 

Then Open composer. Install Nextjs and all dependencies and then paste the file structure.

7. Assemble frontend 

Now lets add frontend code to right files. 

Claude is great to guide you on that. Ask Claude. 

"Let's implement frontend code page-by-page. From the code I attcahed and my requirements, provide me the production ready code that I can paste"

Now follow Claude's instructions to copy code and paste it in right file path.

8. Create Backend  

Now once your frontend pages are running smoothly with demo data and all features are working. 

It's time to create auth (sign-in, sign-up) , database and storage. 

I use supabase because AI you code (SQL queries) to setup the backend. 

Just follow Claude's instructions and tag relevant schema design files in cursor to get it done. 

Start with:
1. auth
2. database tables
3. storage

9. Debugging. 

Now your frontend is storing data in the backend. Test all features. 

There might be few bugs, Use Claude to debug those and you'll be good to go. 

for debugging: Open new composer for each update,  attach files that are having issues and paste errors.

New Claude on cursor is great at this (with context boundary)

Now you have a working app that you coded with AI. 

80% of my time goes into creating Docs and then in 20% of time I can code that app with minimal errors.

If you don't build a concrete boundary around cursor, it will hallucinate and mess up your project easily.

To save my 80% time and to automate the Documentation, I've built an app. 

I added all my templates (27 in total) to run in an agentic workflow and create me all required documentation. 

This way I can just download docs, attach it to cursor and start coding.

If this post get 400+ reposts. I'll build it for you guys. 

The best way to validate the idea is to share it with right audience. 

Check out the app flow below. 

It can create:
✅ System prompts
✅ PRDs
✅ App flow Docs
✅ Schema Design
✅ v0 System Prompts
and so on/

We did it!!! 

400 Reposts in 24 hours. That's just crazy. 🎉

I heard you. Introducing http://codeguide.dev

Join the waitlist to get early access. 🙌

AI coding = Proper Documentation + Detailed Instructions

It's like a smart kid who can code but doesn't know the best practices of code.

You need to tell AI what exactly you want:
- web app?
- features?
- structure?
etc

Here's how you can make AI your full stack developer: 
🧵 

Context is King!

You need to build a strong wall of Context around AI. 

Goal: Don't let AI assume anything. Provide all the information yourself. 

This way AI works with you, not against you. 

Let's talk about what docs we need to attach, to provide max. context. 

1. Project Requirement Document

It provides the overview of what the project is all about:

- Introduction
- Problem
- Solution
- Target Audience
- Tech Stack
- Core Features
- Scope of Work

This document is a brief introduction of your project.

Let's now add more specific docs to guide AI on each step.

2. App Flow & Functionality Doc

Think of it like you're explaining you app to a friend. 

"when user will sign up, it lands on dashboard. On dashboard it has 4 sections. Metrics section, Analytics section etc"

This doc provides a complete end-to-end rundown of your app. 

TIP: Ask AI to DO NOT use bullet points in this doc. 

This Document is very important as it creates a graph/blueprint for AI to plan its execution for each page.

3. Tech Stack and Packages Doc

Now let's provide technical context to AI.

Is your project using python? or Nextjs? or what are you using for backend: Supabase? or Firebase? 

This doc will explain every single detail about the tech stack AI need to use to build your app.

Make sure you use popular tech stacks only because LLMs like Claude and GPT4 are trained on mostly used frameworks. 

I use Nextjs 14, TaliwindCSS, shadcnUI, radixUI for frontend and supabase for backend. 

This stack is favored by all platforms:
- v0
- bolt
- Claude
- Cursor
- Replit

Python is also good for heavy funtioning apps that doesn't require modern UI.

4. File structure Doc.

This Doc is important if you don't want to enter the vicious error cycle later on.

AI can create duplicate files, save files in wrong place, or even delete finished code. 

To solve this pain. Provide the file structure yourself. 

Tip: Make sure you ask AI to create the File structure in ASCII format. 

Screenshot it and attach that too with doc.

5. API Docs

AI doesn't know by default how API is configured for any platform. 

We need to attach the API docs of all APIs we will be using in our app. 

Like OpenAI API, Claude API Docs, Supabase Docs etc.

Copy the instructions from their site and paste it in your doc and attach that doc to AI.

6. Backend Schema Design Doc. 

Schema is Basically a blueprint of your Backend. 

It contains all database tables that you need to create, storage buckets and user information tables (auth)

I use Supabase beacause AI can create SQL queries that you can run in Supabase in seconds. 

And this way I can create my database in an hour and attach it to my frontend. 

Best part: Claude is great at designing backend schema's and if you create a proper doc. 

AI follows the guidelines easily.

7. .cursorrules file

Many of you are not using this. Think of it like custom instructions in ChatGPT. 

cursorrules file need to be project specific and not general like "rules for AI' prompt in cursor. 

Based on the tech stack and project requirements, Ask AI to create a .cursorrules file. 

This doc will tell AI which doc is located where. (Google map for Cursor)

Help AI navigate better with this file.

8. UI Layout Doc

This doc will make your frontend pretty and if you use it with v0 than you can build frontend components with consistent vibe.

Most people underestimate the power of clean user interface (UI). 

"fisrt impression is the last impression"

This Doc will have information like what UI package you'll be using, fonts, color palletes, icons, effects etc.

9. System Prompts

You can ask AI to create project specific system prompts for v0, bolt or any other tool you might use. 

This helps communicating with tools, and you don't need to provide longer context everytime.

You know why Claude on their platform works better than via API? because of their super good system prompt.

You do the same for your projects and you'll be friand with AI.

That's it. 

This might sound alot of work, at it is. But it is very important if you want to build production ready apps.

I spend 80% of my dev. time in creating docs and I achieve great results in rest 20% time.

I asked you yesterday, if you want me to automate the documentation creation process for you?

and the response was AMAZING. 

and we got 400 reposts!!

So I got to work. 

Introducing: codeguide. dev

An app that will help you brainstorm and write all important docs that you need to attach to AI. 

✅System prompts 
✅PRDs 
✅Schema Design 
✅App Flow Doc
✅UI Layout Doc
etc

(check next tweet) 

Here's the link: http://codeguide.dev

Join the waitlist to get early access.

I'm building Code Guide with AI to Guide AI to Code. lol

If, for some reason, the link doesn't work (cuz netlify is updating SSL certificate right now)

Use this link:

https://clinquant-pie-0f53ab.netlify.app/

Getting back soon.

I coded a web app in just $7 (burned 3.4 million tokens)

✅️ I used v0 for designing frontend screens

✅️ I used claude as coding guide

✅️ I used bolt (instead of cursor) as IDE.

Honestly, I am impressed with Bolt.

So here's what i did.

I went to dribbble to find a style inspiration for my new project.

Then, I pasted that screenshot in v0 and asked it to copy the style and code me these pages:
- Homepage
- Create New
- History
- Settings
- Support

(I added Product Development Doc PRD generated by Claude which explained all pages in depth)

So I got 5 pages Frontend code.

I attached that code to claude and now Claude is my coding assistant. 

I used to ho yo cursor at this point but I wanted to experiment with bolt.

So I opened up bolt and treated it like cursor.

Attached PRD and asked it to install Nextjs + all required dependencies for the project.

Boom done in a minute.

Then I asked claude to give me directory structure following best bractices of Nextjs app router.

Pasted that in bolt and asked it to create all folders and files in the directory. 

Surprisingly, It didn't miss any file (cursor always miss that if you use composer and not terminal)

Now what i did was something different and it saved me alot of tokens.

Instead of asking bolt to code me the pages.

I went back to claude and asked it integrate supabase and provide me code for each page.

I copied the code and pasted in right files in bolt. 

After i was done. I wrote a prompt for bolt 

"Dont rewrite the code. Only fix errors. Use deep chain of thought reasoning to find root cause or errors and then fix them one by one. First analyze the code file, only fix errors in specific lines that are causing issues, don't regenerate complete code for that page"

(This prompt is important. If you have 100 lines of code on a page and you have an error in line 6. Bolt doesn’t fix line 6 but Regenerate whole page and rewrite 100 lines of code)

That's why bolt burns out tokens fast but this prompt worked well for me.

So it fixed all export errors, added shared components code added supabase in 1 go.

I spent $3 and I had my frontend backend connected in bolt in like 3 hours.

Then I should've taken the project out of bolt and used cursor to refine the code. 

But i stuck with bolt. I asked for refinements and added few features.

It did a pretty good job. Error handling has improved alot.

I coded for 7 hours and built a proper sleek looking web app (for a client) in $7.

Here're few suggestions for @stackblitz team

1. There should be a system prompt (Rules for AI) feature.

2. Study v0's latest contest caching so it doesn't regenerate same code everytime.

3. With error message, enable user to add custom instructions (use chain of thought.... works well always)

4. Make loading speed faster. Its better but still very slow.

5. Add prompt caching, context caching to save tokens (you'll win the IDE war)

6. Keep up the good work. 

So that's it. I don't hold back any secrets.

Here's a rundown. I used v0 + cursor + bolt to code a mobile respinsive clean looking web app in $7 and 7 hours of AI code. 

Just experiment! You'll be amazed.

Peace
@cj_zZZz

1. "Fix Errors" Prompt 

AI models like Sonnet 3.5 can overlook important details sometimes and that triggers a loop of errors. 

Use this prompt below to fix that issue.

This will help AI to analyze the caore cause of the error and then create a step by step plan to fix error. 

2. "New feature" Prompt

Once you execute one component successfully, you need to refer AI to docs again to make it understand the scope of work for next componemnt. 

Use these instructions to make AI write an implementation plan before execution. 

Tag the relevant doc, and once AI read through the file, it might ask you questions. 

Answer the questions and ask it toexecute. 

This one step will kill half of hallucimations for every component.

3. Response structure:

This structure provide update to AI that the task I was working on is DONE and now I need to move to NEXT task.

     1. Provide update: 
"Header menu is now aligned in center perfectly."

     2. Provide next task:
"Now we need a sign in and sign up buttons."

     3. Tag right document:
"Check @ (document name) and explain how you will implement this"

4. progress .md file

Use this prompt to keep track of all the work. This will provide progress context to AI and solve the duplication errors.

"At the end of every completed step record your work log in @progress .md file. What features we implemented? What errors we encountered? How did we fixed all those errors.

Answer these 3 questions in a step by step manner and DO NOT miss any information."

5. project-status .md file

AI should pick up the work from where we left. This file will help AI keep worklog and understand whats already done and what's left. 

"At the end of the session record your work log in @ project-status .md file.

First check @ progress .md file to understand all the features we have implemented in this session.

Then write a detailed session report which should provide detailed context for next work session"

6. Cursor Agent Hack

Cursor agent can over do things and mess up the codebase.

"Read instructions in @ (document name) to understand the scope of work for this feature.

Use chain of thought reasoning to create a step by step implementation plan.

Ensure you explain how every section of this feature works providing macro-level details.

Break these items into detailed numbered steps."

This will provide you plan that AI is about to implement. You can verify is everything is aligned with the request and approve. 

This will solve all unnecessary edits by Cursor Agent.

7. Attach Documents. 

Create a "Documentation" or Instructions" folder. 

The attach all core documents under that folder. 
- Project Requirements Doc (PRD)
- App Flow Doc
- Frontent Guidelines Doc
- Backend Structure Doc
- Tech Stack Doc
- File Structure Doc

you can use 01 model but with right prompting (it can overkill with unwanted sections and fluff information)

The best solution is to get these documents done with @CodeGuidedev 

I automated this process for you. It'll help you get all required docs in 20-30 minutes. 

Using a mix of Sonnet 3.5, o1-preview and GPT4o for docs creation. 

Usually it takes 7-8 hours of work to get all documents ready with ChatGPT (reading, refining, iterating each doc)

@CodeGuidedev That's all for today. 

Bookmark the post future use. Build amazing things. 

Sign up for http://codeguide.dev

Limited time 30% off on Yearly plan.

CodeGuide 1.2 is coming in 3 days. 🙌

I coded the entire landing page in @v0

AND deployed with vercel.

Without using:
- bolt
- Cursor
- Claude
- Windsurf

This is HUGE! 
v0 2.0 is becoming a full-stack AI dev.

Let me share all my tricks and findings about new v0:
↓ 

A few days back I wrote about "Old v0" that how amazing it was.

✅️ Single file code.
✅️ Clean UI designs
✅️ Modern fonts
✅️ Smooth animations

But it started to break after v0 announced that now it can create "full-stack" React applications.

It was a mess.

I tagged vercel, their CEO and shared my findings/suggestions. 

Happily, vercel team took the feedback with open heart and made changes.

Now we can create "single file code" and also "multi file code" (full-stack). Great.

So I started experimenting with new v0.

I thought what If I don't touch bolt or Cursor or Lovable and create a landing page and deploy with v0.

It all started when Marcel shared this new landing page concept for Code Guide.

I took the screenshot and went to v0 and tried to make it as identical as possible.

And it worked.

I have tons of projects sitting on vercel. 

I am selling them now so first one was LocalBlogs.

I had to redesign the landing page and list it on Acquire.

I used ChatGPT-o1 to extract all the content from old landing page. 

Opened v0, attached my clone of marcel's concept and asked it to transform thos for LocalBlogs.

It worked.

Then I designed each section one by one.

In an hour I had a new sleek looking landing page for Localblogs 

Then I added web app screenshots. Added links.

And tried to deploy it on vercel.

First try, successful! 🔥

But it changed the fonts and deployed version was not as elegant as v0 version.

So I dug deep with the help of my dev friend and found.

v0 is not configuring the used fonts in best possible way.

So I had to "strictly" instruct v0 to configure the fonts, and update code for deployment. 

It worked! Now the new landing page is live.

Check out http://localblogs.io

A platform that helps local businesses to research their local audience.

What are they searching for, related to my services?

Then use these keywords to write high quality blogs.

Results: Rank #1 on Google without spending thousands on ads every month.

Perfect for sophisticated businesses like:
- accountants (650,000 active in US)
- lawyers (1.32 million active lawyers)
- gyms (41,370 gym facilities)
Etc

Running cost of the platform is pretty low (82% profit margins)

I am selling it for $13k.

Fully functional platform with clean code and no bugs.

If you're interested to acquire the platform DM me.

You'll get:
✅ complete codebase
✅ Domains
✅ Landing page
✅ Marketing plan
✅ 90 minute one-on-one consultation

Ready for marketing.

Fb goups, Insta shorts and fb ads are perfect for scaling this to $15k/month Revenue in 6 months.

That's it for today.

Bottomline: Code landing pages and micro apps within v0 and deploy directly on vercel.

Alot cheaper than bolt and faster than cursor.

Design, refine and deploy, all within v0.

Hope you like it. 

peace
CJ