Profile picture of Cj Z 🎯

Cj Z 🎯

@cj_zZZz

Published: December 7, 2024
22
67
540

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:

Image in tweet by Cj Z 🎯

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

Share this thread

Read on Twitter

View original thread

Navigate thread

1/16