Cj Z ๐ŸŽฏ Profile picture
Dec 31, 2024 โ€ข 11 tweets โ€ข 5 min read โ€ข Read on X
Bolt .new Prompting Handbook:
๐Ÿงต Image
1. Use "Enhance prompt" button

Your prompt quality makes a huge difference in AI output.

Provide as much details as you can in the input field, then click on "enhance prompt" button.

A detailed and will structured prompt can help you save tokens and time with less errors. Image
2. Use this structure for starting a NEW project:

โ€œI need a [type] application with:

Tech Stack:
- Frontend: Nextjs 14 with TypeScript using App router
- Styling: Tailwind CSS
- Auth: Supabase
- Database: Supabase

Core Features:
- User authentication
- [Main feature]
1.
2.
3.
4.
- [Secondary features]

Start with the main page containing: [Detailed page requirements]โ€
3. Turn ON diffs

Whenever you ask bolt to make a specific change on any file. Bolt used to rewrite the code for entire file.

This burns alot of tokens.

To solve this issue: Go to Settings โ†’ Preview features โ†’ Turn ON the toggle button for Diffs

After this bolt will make changes to only few lines of code.

Results: Fast Loading & Less Token BurnImage
4. Use "Lock File" and "Target File" Feature

If you want to make changes to only one file than use "Target file" feature by right clicking on the directory.

You can also "lock" files that are done and you don't want bolt to make any unwanted changes.

This will help you minimize token burn and AI hallucinations.
5. Build a Context Boundary

Provide detailed context about your project: What it is all about? User flow? Tech stack? Scope of work? etc

I call it the "Context Boundary."

Buildin a strong boundary around AI so it works for you and just follow the plan.

For this you need to attach your projects docs, like:
- Project Requirements Doc (PRD)
- App Flow Doc
- Frontend Guidelines
- Backend Structure

After you start the project with initial prompt. attach PRD in .md format and ask:

"before you code anything, go through the PRD and tell mw what do you understand about my project?"Image
6. Attach Docs to File Directory

You can also create an"Instructions" folder and create docs files in .md format under that folder.

Then paste the content in each file and save.

Then right click on Instructions folder and hit "Target all."

Then ask bolt, what do you understand about my project.

And when working on specific requests, you can tag files by using "copy path" of that file and pasting in input fileld.

Then ask: "Refer to (eg: file path) doc first and then help me build x,yx,z"Image
7. Write Detailed Instructions

While building you need to instruct bolt with detailed requests.

Instead of "move the button to right" say "in top header move the sign up button to left side of the page"

Use can use "enhance prompt" button throughout the building process.

The better the instructions, the less the errors.
8. Build Step-by-Step.

Don't tell bolt to do 5 tasks at same time. This will force AI to mess up things.

Here's how I do it:

โ†’ Start with Frontent design, page by page, section by section.

โ†’ Then attach backend using Supabase as bolt has supabase integration built in.

โ†’ and then I refine the UI/UX if needed.

This step by step flow help AI to focus on 1 task at a time.
9. Enjoy 15% OFF on all Bolt plans.

I am happy to announce that we made an exclusive partnership with bolt @stackblitz to offer @CodeGuidedev community a 15% Discount on all of its plans. ๐ŸŽ‰

If you haven't joined CodeGuide yet. I am offering 30% discount on Yearly membership for next 36 hours.

More deals and perks are coming for you.Image
CodeGuide is becoming the Home of AI coders.

Dump your project idea and CodeGuide will help you write your Project Development Documentation for AI models.

Join us here: codeguide.dev

+ CodeGuide 1.2 is coming. โœจ
โ†’ CodeGuide in-house community (No Discord)
โ†’ Video tutorials from Jan 2nd
โ†’ Exclusive reports on "What to build."
โ†’ Prompt templates, Boilerplates, Design templates.
and few surprise features.

Hang tight. We are just 8 days old startup. ๐Ÿ™Œ

โ€ข โ€ข โ€ข

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

Jan 2
Complete step-by-step guide on Cursor:
๐Ÿงต Image
Let's start with basics: How AI coding works?

We prompt AI model in plain english and they turn our request into code.

The better the instructions the better the code!

To create detailed instructions we use AI to write us detailed project development documentation.

This step is very important and can't be skipped if you want to build production-ready application.Image
GPT4o model and Claude Sonnet 3.5 model are implementation models.

Which means you give it a plan and they'll execute very well.

BUT if you don't give them a plan, they'll "think" (which is bad because they are not reasoning models) and things will start to break.
Read 15 tweets
Dec 29, 2024
Cursor Prompting HandBook:
๐Ÿงต Image
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. Image
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.Image
Read 10 tweets
Dec 28, 2024
Code your Dream Project with AI

Use tools like:
- Cursor to code complex projects.
- bolt, lovable to code websites, micro SaaS.
- v0 lovable to code frontend screens

Step by Step Guide to code your first software with AI:
(Bookmark this for future use) Image
First of all, you need to understand how AI coding works.

We have amazing LLM models like Claude Sonnet 3.5 that can write high quality code (based on instructions) in any famous coding language.

It can help you build:
- web apps
- mobile apps
- browser extentions
- downloadable software
- landing pages or websites

You name a use case, AI models are now able to code that.
We also have amazing AI coding tools that help us code, debug and deploy your project.

Tools like:
- cursor AI (famous AI code IDE)
- bolt .new (simple IDE on the web)
- lovable (similar to bolt, getting better)
And more.

Each AI coding tool has its own superpowers.

Some can code softwares really good, some code websites or landing pages.
Read 16 tweets
Dec 24, 2024
Here's the Master Trick to work with Cursor and Windsurf.

It will remove 80% of AI hallucinations and 60% less code errors.

You need to create a 'Documentation" folder in the root directory.

Then you need to attach all your project docs to that folder

Let me explain.... Image
Models like GPT4o and Claude Sonnet 3.5 are "implementation" models.

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

But they are nott good enough to reason, think and map out the next steps.

That's why when we don't give proper context about our project, the models start to hallucinate and mess up the codebase.
To rectify, hallucinations, assumptions and bad layout of code.

We need to build context boundary around these models.

The project documents will create that boundary of context.

PRD Doc = It explains what the project is all about, and it concisely describe tech stack, app flow, layout etc.

and same for all other docs. Each document provide in depth information to coding LLM models.Image
Read 7 tweets
Dec 12, 2024
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.
Read 13 tweets
Dec 10, 2024
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:
โ†“ Image
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.
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!

:(