How to write the perfect Bolt.new prompt (step by step)

Illustration for a step-by-step guide to writing the perfect Bolt prompt

Great apps start with great prompts. Here's a repeatable, 5-step way to write a Bolt.new prompt that generates a polished app with clean UI and zero guesswork. πŸ™Œ

Whether you're building your first project in Bolt or refining prompts for a client app, this prompting framework gives you a structure you can reuse every time.

Overview of the 5-step Bolt prompt framework

Step 1: Start with the vibe

Forget vague ideas like "a directory."

Write like you're briefing Bolt.

βœ… Build a directory site to help people discover creative talent.

β†’ feature profiles for each creator

β†’ allow browsing by tags or category

β†’ let users submit their own profile

πŸ’‘ Tell Bolt what the app is for.

Step 2: Set the visual tone

This is where most prompts fall flat. A real app needs a vibe.

βœ… Use a soft, playful aesthetic with:

β†’ soft beige background

β†’ bright blue as the primary accent

β†’ rounded cards with light shadows

β†’ smooth transitions throughout

🎨 The clearer the mood, the better the output.

Step 3: Define the typography

Fonts change everything. Don't let it default.

βœ… Use large, bold rounded headings in GT Walsheim or similar

β†’ pair with a clean geometric body type

β†’ editorial feel with generous line-height and a readable scale

πŸ“ Good typography = trust and polish.

Step 4: Specify the full set of pages

Don't just say "include a 404." Be clear, but casual.

βœ… Make sure to create all pages:

  • a warm, inviting home page

  • individual profile pages for each listing

  • a "submit a listing" form page with a confirmation state

  • a short about page

  • a clean 404 fallback

  • shared layout with a sticky nav and soft-edged footer with links and socials

πŸ“„ Pages = structure. This tells Bolt what lives where.

Step 5: Wrap it with experience goals

Remind Bolt this is a real product.

βœ… Ensure the design feels crafted and expressive across mobile, tablet, and desktop.

✨ You're not building a layout. You're building a brand experience.

Here's what the final prompt should look like πŸ‘‡

(and yes, you can use AI to write all of this)

build a modern directory website with a soft, playful aesthetic. use large, bold rounded headings, soft beige background, rounded cards with light shadows, and smooth transitions throughout. primary accent should be bright blue. apply a friendly, calm, editorial feel with generous spacing and minimal UI distractions.

use gt walsheim or a similar modern geometric sans-serif for typography. keep everything feeling approachable and clean.

include a hero section with a big, bold headline, a short subheadline, and two clear cta buttons: watch demo and get started free. follow it with a directory grid showcasing company or talent cards, each card should have a logo, short description, tag badges, and a view profile button.

make sure to create all pages: a warm, inviting home page, individual profile pages for each listing, a "submit a listing" form page with a confirmation state, a short about page, a clean 404 fallback, and a shared layout with a sticky nav and soft-edged footer with links and socials.

ensure the design feels crafted and expressive across mobile, tablet, and desktop.

Common prompting mistakes to avoid

A few patterns that make Bolt guess more than it should:

  • Being vague about purpose ("make a website") instead of naming who it's for and what they do.

  • Leaving visual direction out, so the output defaults to generic styling.

  • Forgetting to list every page and state, which leaves gaps in the build.

  • Skipping responsiveness goals, so the layout only looks right on desktop.

Fix these four and your first result lands far closer to what you pictured.

Ready to try it?

Copy the prompt above, tweak the vibe and pages to fit your idea, and paste it into Bolt to watch it build. The more specific your brief, the closer the first result lands to what you pictured.

FAQ

FAQ

Bolt.new is an AI tool that builds working websites and apps from a plain-language description. You type what you want, Bolt builds it right in your browser, and you change anything just by asking. It is made by StackBlitz, and you do not need to know how to code to use it.

No. You describe what you want in everyday language, like a booking site for your salon with a calendar and a contact form, and Bolt.new builds it for you. The code is there if you ever want it, but you never have to touch it to get a working app.

Bolt.new builds full websites and web apps, including the parts people see and the behind-the-scenes pieces like databases, sign-ins, and payments. People use it for landing pages, online stores, booking tools, dashboards, internal tools, prototypes, and mobile apps. If you can describe it, you can usually build a working version of it.

You type what you want to build, and Bolt.new creates a working app you can see and use right away, all inside your web browser. From there you refine it by chatting, for example add a dark mode or move the sign-up button to the top, and Bolt updates the app each time. There is nothing to install, and you can publish it online when it is ready.

Bolt.new builds complete apps, the front end and the back end, and runs them live in your browser with nothing to install. It also hands you the actual code, so you are never locked into a closed system. Compared with tools that only produce a front-end mockup, Bolt focuses on a real, working app you can keep building on and take with you.

Yes. Bolt.new has a free plan that lets you start building right away with no credit card, using a monthly allowance of usage measured in tokens. Paid plans add more usage, a custom domain, and the option to remove Bolt branding. You can see the current plans at bolt.new/pricing.

You want more?
Build smarter, every week

The sharpest thinking on building with AI - product drops, engineering deep-dives, and tips that ship.