Published: November 26, 2024
48
148
1.6k

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: đź§µ

Image in tweet by CJ Zafir

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.

Image in tweet by CJ Zafir

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

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:

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

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

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

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

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

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

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

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

Image in tweet by CJ Zafir
Image in tweet by CJ Zafir

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)

Image in tweet by CJ Zafir

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.n... Getting back soon.

@cj_zZZz Very cool ! I followed your thread the other day about Claude and Cursor, and it worked really well ! Good workflow, I think creating these important documents up-front is really helpful, as I could tell that Claude was actually referencing my guidance docs. Joined Waitlist !!

@SterlingCooley Wao. That's good. I guess I'm building the right thing lol Appreciate your support.

@cj_zZZz AI coding is like having a super-efficient intern, you just need to give it clear direction

@rosspower Nailed it.

@cj_zZZz This is super informative. Could this work for iOS app development? Tons of guides for web but almost none for mobile apps. Thinking of fastapi+ Postgres

@Tallahassy Yes. Same structure different framework

@cj_zZZz Can you tell me one thing : how to teach cursor all the new stuff @vercel team is coming up with. Like next 15, app router and ai sdk 4. Just telling Claude it’s next 15 pro in cursorrules file doesn’t help ! I think it’s the biggest problem now )

@Mkrn @vercel Just stick with mature frameworks! No next 15 but nextjs 14. We need to understand that we need to use those frameworks that AI was trained on.

@cj_zZZz Love the content you’re putting up : possible to start your YT Teaching this?!?

@AnshulKaul21 Ahh, I wish I could. I just have so much time to post here in plain text. But once i hit certain goals, I'll be free and YouTube is on the list.

@cj_zZZz Nice ! Thanks for sharing these tips 👊🏻

@cj_zZZz Your thread is creating a buzz! #TopUnroll https://threadreaderapp.com/th... 🙏🏼@justmalhar for 🥇unroll

@cj_zZZz Direction unlocks perfection. 🦾

@cj_zZZz With AI, you’re the architect, and it’s the builder 🏗️

@cj_zZZz is v0 + Replit agent not most optimal flow now?

@cj_zZZz good stuff! isn't there .agent-cursorules too now?

@cj_zZZz Joined the waitlist too, love your threads. Very useful.

@cj_zZZz Thanks for sharing!

@cj_zZZz if you want to waste hours on random errors, don’t do this Appreciate you sharing this stuff, it’s got to be done

@cj_zZZz I have a similar approach, but I’m concerned to give my complete plan to not only private llms, but to cursor. So I’d rather use a tool where my prompts are not sent to their servers.

Share this thread

Read on Twitter

View original thread

Navigate thread

1/35