Latest Twitter Threads by @cj_zZZz on Thread Reader App

Mar 13 • 10 tweets • 4 min read

I am not a UI designer.

But with CodeGuide + Claude + v0 I've cracked the UI design workflow.

This design is purely coded with AI in 13 minutes.

Let me explain my NEW UI design workflow: ↓

First of all If you haven't read my last post on this topic,

Please read that so you can understand the basics: ↓

https://x.com/cj_zZZz/status/1899491125486116937

Mar 11 • 10 tweets • 4 min read

I built this UI design with v0 and Claude·ai (web app)

It took me 25 minutes to code this interface.

Let me share my new UI design workflow: ↓

Before we start here're few other pages of same web app:

- Sign up page
- Sign in page

You can see the style consistency.

Mar 10 • 8 tweets • 3 min read

Cursor/Windsurf technique to remove 80% hallucinations.

Stop AI to think and plan. Attach 'coding documents' and force AI to use it as a knowledge base.

If you code with AI, read this: ↓

When we let AI plan on it own, AI messes up the codebase.

Top AI coding models (Claude 3.5/3.7 Sonnet, GPt4o) are predictive models.

They can follow the the instructions and go from point A to point B.

But they are not good think, plan and map out next steps.

We can fix this.

Mar 9 • 10 tweets • 3 min read

I built this Interface entirely with AI in 47 minutes.

(without writing a single line of code)

I used 2 tools:
1. Claude AI (web app)
2. Cursor AI

Here's a step-by-step guide on how I built this app:

1. Write a detailed Project Documentation

If you want:
- consistent design
- high quality code
- less hallucinations

you need to write "project coding documents" to provide context to AI.

I use @CodeGuidedev to write docs, that includes:
- PRD
- app flow doc
- frontend guidelines
- backend structure
etc.

Mar 5 • 12 tweets • 4 min read

How I made my Cursor/Windsurf workflow ultra productive with "Context Boundary" Technique:

(Bookmark this for future reference) ↓

Even the Founder of @cursor_ai acknowledged that.

Let's dive into it:

Mar 1 • 9 tweets • 3 min read

New Cursor Coding Workflow: 🧵
(Bookmark this for future reference)

1. Unified Interface: Agent as Default Mode

The previous 'Chat' and 'Composer' tabs are replaced with a simpler dropdown menu:

1. 'Agent' mode is now the default mode
2. Use 'Edit' mode for precise changes
3. Use 'Ask' for planning and questions

It's much better UI/UX now.

Feb 23 • 8 tweets • 3 min read

Cursor/Windsurf has 3 major issues:

1. AI hallucinations
2. Loop of errors
3. Context awareness

To fix these core issues we need to build a strong {Context Boundary} around AI.

Here's how you can fix your AI coding workflow : 🧵

Cursor and Windsurf built around predictive models like Claude Sonnet 3.5 and GPT4o.

These models can only think about 1 possibility and that 1 possible step can be wrong 9/10 times.

We need to make sure that we don't let these models predict their next steps.

Feb 20 • 9 tweets • 4 min read

Cursor/Windsurf cheat code.

{Provide detailed context about your coding project}

It will minimize 85% of AI hallucinations and errors.

Here's how you can do it using ChatGPT:

1. Project Requirements Document.

Ask AI to write a PRD (for AI coding model) about your project.

It should include these sections.
- App overview
- User flow
- Tech stack & APIs
- Core features
- In-scope and out-of-scope

To make it air tight add these too:
- Non-functional requirements
- Constraints & assumptions
- Known issues & potential pitfalls

This doc will provide high level overview to Cursor/Windsurf

Feb 19 • 14 tweets • 3 min read

English language as a coding language now

Thanks to AI code.

There are 5 steps in AI coding:
- plan
- prompt
- scaffold
- debug
- deploy

You don't need to be a technical developer to code with AI.

Here's your Zero-to-Hero Guide on AI coding.

AI coding works with 2 main engines.

AI coding LLM models + AI tools

Top AI Coding Models:
1. Claude Sonnet 3.5
2. GPT o1
3. GPT o3-mini
4. Deepseek r1

Top AI Coding Tools:
1. Cursor
2. Windsurf
3. Bolt
4. Replit
5. Lovable
6. Cline

I'll unpack below:

Feb 10 • 9 tweets • 4 min read

Cursor is the Best AI coding IDE.

Let's build an AI app that can clone tweet style and mimic future tweets: 🧵

1. Clone CodeGuide Starter Kit (Open Source or PRO)

- go to Github page of @CodeGuidedev Starter Kits
- click on 'use this template'
- then create new repository
- now name your new repo
- make it private
- then "create Repository"
- Click on "code"
- copy the link

Feb 9 • 5 tweets • 2 min read

If you use @boltdotnew let me save you alot of tokens.

Here's how:

Step 1: Install CodeGuide NextJS Starter Kit with pre-installed packages

- NextJS 14 (ideal for AI tools)
- Typescript
- TailwindCSS
- Shadcn UI
- Supabase
- ClerkDev

Step 2: Attach your project documentation

For Bolt we need 2 documents:
1. project requirements doc. (PRD)
2. app flow doc.

- Go to @CodeGuidedev Dashboard
- Go to New Project
- Complete 5 steps
- Click "Download all"
- Unzip docs on computer
- Upload PRD + app flow doc

Feb 5 • 14 tweets • 5 min read

Windsurf might take over Cursor AI in few months.

Designed to be simple and intuitive—ideal for beginners.

I'd rate Windsurf 7.5/10 and Cursor 8/10, so margins are very bleak.

But it is getting better with each new update.

Here's how you can use Windsurf to build your first SaaS:

1. You need to Generate PCD {Project Coding Docs}

This step is vital, you need to provide deep context about your project.

What is your app about?
Tech stack?
App flow?
Backend?
APIs used?
etc

If you don't build a context boundary around AI models, it messes up your codebase

Feb 4 • 9 tweets • 3 min read

I've coded 33 projects in last 5 moths.

without writing a single line of code.

I am about to share my AI coding workflow with you for FREE: 🧵

(Bookmark this for future use) 1st thing: Understand what is AI coding.

2024 has blessed us with powerful AI coding model like Claude Sonnet 3.5.

This model enabled anyone with computer skills to code software without writing a single line of code.

Feb 2 • 6 tweets • 3 min read

Introducing @CodeGuidedev NextJS Starter Kits

The First Ever Starter Kit built for AI Coding Models.
- o3-mini
- Claude Sonnet 3.5
- GPT4o

Today we're launching 2 Starter Kits:
1. CodeGuide Starter Kit Lite (Open-Source)
2. CodeGuide Starter Kit Pro (Commercial Licence)

Read: 👇

Goal:

To design a Boilerplate for AI Coding Models to work effectively with less Errors and Hallucinations.

We chose NextJS as its the most reliable full-stack framework with all coding models. Also it is fast and scalable.

Build websites to Complex Web apps with NextJS.

Jan 30 • 11 tweets • 3 min read

Interesting!
More Open Source Models are released from China.

→ Kimi k1.5 (multimodal reasoning model)
→ Qwen 2.5 Max (1M context window)
→ Mistral Small 3 (24B model)

Let's explore all these models below:
🧵

1. Kimi k1.5

Official Tweet by Kimi Account

https://x.com/Kimi_Moonshot/status/1881332472748851259

Jan 25 • 14 tweets • 4 min read

Turn any AI Model into Reasoning Model with Deepseek r1 <thinking> Architecture.

Models like GPT4o and Sonnet 3.5 are Implementation Models

But a new breakthrough with Deepseek can make them a Reasoning model.

Here's a step-by-step Explanation:
🧵

Deepseek r1 is an open source AI model competing against o1 model of OpenAI.

Which is the Top-Notch Reasoning Model.

How Reasoning Models work?
User message → Chain of Thought steps → Output

The CoT step is the main difference right now between r1 and o1

Jan 23 • 14 tweets • 4 min read

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

Jan 20 • 8 tweets • 3 min read

Deepseek:

An Open Source AI Model that outperformed:
- Llama 3.2
- Gpt4o
- o1 mini

Here's everything you need to know about Chinese Deepseek Model:
🧵

DeepSeek is a Chinese-developed open-source LLM series of models.

I would say this is the first real Open Source model.

It has provided details about what data and techniques it used to train the model.

MIT licence, which means you can train and build AI commercial products.

Jan 11 • 16 tweets • 6 min read

Cursor AI Coding Crash Course:
🧵

In last 5 months, I've built 30+ projects with AI code.

And I found that Cursor is the best AI Coding IDE for complex applications like:

- Web applications
- Mobile Applications
- Downloadable Software

So If you master Cursor, you can code anything!

Let's start...

Jan 8 • 14 tweets • 4 min read

In last 45 days, I wrote 12 Tutorials on AI tools.

If you missed any of them,

Here's the Master Thread for you:
🧵

1. Context Boundary in Cursor

https://x.com/cj_zZZz/status/1860732311299408257

Jan 6 • 14 tweets • 5 min read

How to Create a Modern Landing Page?

→ Plan it with CodeGuide
→ Code it with Bolt .new
→ Deploy it on Netlify

Here's a Step by Step Guide:
🧵

1. Take Inspirations

You need to spend some time visualizing how your landing page would look like.

For this you can go to:
- Dribbble
- Landingfolio
- onepagelove
- saaslandingpage

Once you find a style you like. Take notes of hero section, color pallete, styling etc.

Share this page!

Enter URL or ID to Unroll