Cj Z 🎯 Profile picture
Nov 24 13 tweets 4 min read Read on X
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 <Context Boundary> around Cursor

Here what you can do to improve your Cursor workflow🧵 Image
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. Image
Image
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/

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Cj Z 🎯

Cj Z 🎯 Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @cj_zZZz

Nov 26
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
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
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.
Read 14 tweets
Nov 23
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.
🧵 Image
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 & Functionality Doc
- Frontend code (if you used v0)
3. Now tell Claude that you'll be using
- bolt .new start the project Image
Read 18 tweets
Nov 11
315 days are gone!!!

ONLY 50 days are left in 2024.

Don't wait for the New Year's Resolution.

Use AI to build your dream business.
🧵 Image
2: Build your own SaaS project: Image
3: Start a Web Development Agency: Image
Read 11 tweets
Nov 9
Code Your First SaaS with AI:

Start your workflow with Research.

Use ChatGPT o1 model: It is best for:
- Diving deep into research
- Preparing Documentation
- Crafting App layout

Then go to v0.

v0 is new figma: Design your frontend
- screens
- buttons
- effects

Continue 🧵 Image
Now go to Claude AI chat.

This is your coding guide throughout the journey.

- Upload all docs
- write a detailed system prompt
- Use Claude prompt generator

Then go to Replit.

- Start a new project
- Install Nextjs Starter kit
- Connect Github (to save code)
- Connect cursor Image
Now go to cursor

Cursor is your coder. You'll be using AI to get the coding done for you.

Follow Claude's introductions for:
- creating all folders & files in cursor
- installing supabase (backend to save information on cloud)
- to connect frontend with backend.

Then Image
Read 10 tweets
Jun 26
Claude Prompting is different than ChatGPT.

It has a Coding brain.

You need to use tags <>, and markers to make it understand the request.

After playing with Claude's all 3 models for over 3 months now.

Here are the 12 main tricks I found that work the best:Image
1. Use XML tags:

Think of it like a camera lens.

When you input a long text, Claude models don't focus on finding important information.

However, using XML tags makes retrieving information easier for the models.

Example: Youtube transcript
2. Be super clear:

Tell Claude exactly what you want it to do.

Use words like "please" and "I want you to..." as this gives models the hint that this is an action request.

Be as specific as you can!

Example: Please summarize the main ideas in the section.
Read 13 tweets
Sep 21, 2023
Sam Altman (@sama) tweeted about DALL-E 3 yesterday.

Top points:

1. ChatGPT + Image Generation = DALL-E 3
2. DALL-E 3 can Spell right!
3. Own your Art with DALL-E 3

DALL-E 3 integrated directly into Bing (completely free to use)

Here's ALL you need to know about DALL-E 3
🧵👇
Image
Releasing Date?

DALLE - 3 will be released to ChatGPT Plus users & Enterprise users by October. So in 3-4 weeks max.

DALL-E API is also coming this fall. (that's a big step) Image
Features:

1. No More Complicated Prompting

DALL-E 3 is built on top of ChatGPT, which means ChatGPT will write complicated prompts itself.

All we need to do is "Chat" with DALL - E/ChatGPT.

*No Complex parameters "--aspect 2:3, --chaos, --style <4a, 4b, or 4c>, etc" Image
Read 12 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(