This is the fast reference for prompting Bolt.new by StackBlitz — the in-browser, full-stack AI app builder that turns a plain-language brief into a running app: it writes the code, installs the npm packages, runs the dev server, and deploys to Netlify, all inside the browser. Every input that actually changes Bolt's output lives in a table below, followed by fully-written example prompts you can paste straight into the Bolt.new chat box.
For the full roundup pair this with the 40 best Bolt.new prompts, and for the reasoning behind each move read how to prompt Bolt.new for full-stack apps. Bolt takes plain natural language — no flags, no slash-commands. Fill the [bracketed placeholders] before sending.
The app-brief structure
The biggest shift with Bolt is to zoom out: describe the app, not one screen. A strong brief names six things in plain language, and each maps to a row below. Fill every row and Bolt has enough to scaffold a coherent app.
| Part | What to write in it | Example phrasing |
|---|---|---|
| Product | What the app is and the one job it does | "a lightweight CRM for freelancers to track leads and follow-ups" |
| Users | Who uses it and what they care about | "solo freelancers who want fewer dropped leads, not a full sales suite" |
| Core flows | The main things a user completes end to end | "add a lead, log a note, set a follow-up date, mark won/lost" |
| Data model | The entities and their key fields | "Lead (name, company, status, value, next_follow_up); Note (lead_id, body, created_at)" |
| Auth | Who signs in and what they can see | "email/password sign-in via Supabase; each user sees only their own leads" |
| Pages | The screens to build | "Dashboard, Leads list, Lead detail, Settings" |
Give the whole brief so Bolt understands the shape, then ask it to build the shell plus one core feature first — that sets the architecture and design vibe the rest of the app inherits.
Tech-stack keywords to pin
Name the stack and Bolt emits code that matches it instead of guessing. Pin the frontend, backend, and integrations by name.
| Layer | Keywords to pin | Example phrasing |
|---|---|---|
| Frontend framework | Vite + React, Next.js, Vue, Svelte, Astro | "Use Vite + React for a SPA" or "Use Next.js App Router for SSR" |
| Styling & types | Tailwind, TypeScript | "Tailwind for styling, TypeScript throughout" |
| Backend | Node/Express, serverless routes | "serverless route handlers for the API — no long-running server" |
| Database & auth | Supabase (Postgres + auth) | "Supabase for the database and auth; create the tables and typed queries" |
| Payments | Stripe | "add Stripe Checkout for the Pro plan" |
| Deploy | Netlify (via the deploy button) | "target Netlify for deploy" |
| Export | GitHub | "structure it cleanly so I can export to GitHub" |
A one-line stack pin at the top of your brief — "Use Vite + React + TypeScript + Tailwind, Supabase for DB and auth, deploy to Netlify" — is usually enough to keep every generation on the same rails.
Design-vibe modifiers
Replace nothing-words with a clear feel plus a few concrete choices. Set the vibe on the first key component and Bolt carries it through the build.
| Modifier | Example phrasing |
|---|---|
| Minimalist | "clean and minimalist, lots of whitespace, few borders, muted neutrals" |
| High-tech | "high-tech and precise, dark surfaces, sharp contrast, mono accents for data" |
| Playful | "playful and friendly, rounded corners, one bright accent, subtle motion" |
| Editorial | "editorial feel, large serif headings, generous line height, calm palette" |
| Dark mode | "dark mode by default with a light toggle" (only if you want it) |
| Design tokens | "primary [#HEX], radius 12px, Inter body 400 / headings 700, 8px spacing scale, soft shadows" |
If you have a Figma file, use Bolt's Figma import to bring the design in rather than describing it from scratch.
Iteration & token-saving actions
Every message spends tokens even when a build fails, so tighten each one. Use the built-in actions rather than asking Bolt to do them in chat.
| Action | What it does | When to use |
|---|---|---|
| Scope to file | Names the file/function to change so Bolt edits only that | Every edit: "only edit src/components/Cart.tsx" |
| Lock files | Right-click a file → Lock file so Bolt won't touch it | Stable code that's already working |
| Diff edits | Bolt changes only the necessary lines, not whole files | Automatic — keep prompts narrow to benefit |
| Enhance Prompt | Sparkle icon rewrites your prompt before sending | Turning a rough one-liner into a full brief |
| Plan first | Ask Bolt to outline a plan/spec before it builds | Bigger apps you want to review before code |
| Use buttons | Built-in Deploy, Connect Supabase, Sync GitHub | Deploy and integrations — don't ask in chat |
| "Add loading and empty states." | Skeletons and empty-data views | Any screen that fetches data |
WebContainer do/don't
Bolt runs in WebContainer, a browser-based Node.js runtime. That means some server-world habits don't apply. Acknowledge the runtime in your brief to avoid wasted generations.
| Do | Don't |
|---|---|
| Use a hosted database — Supabase (Postgres) | Spin up a local Postgres instance |
| Use serverless / JS-native approaches | Rely on native binaries or compiled tools |
| Keep everything in the Node.js runtime | Assume Docker or containers are available |
| Deploy to Netlify via the deploy button | Expect a long-running local server process |
| Say "runs in WebContainer — keep it browser-native" | Ask for anything requiring OS-level access |
Example prompts
Five prompts that combine the pieces above — an app brief, a pinned stack, a vibe, and WebContainer-aware constraints. Fill the placeholders and paste into the Bolt.new chat.
Build a lightweight CRM app for freelancers.
Users: solo freelancers who want fewer dropped leads.
Core flows: add a lead, log a note, set a follow-up date, mark won/lost.
Data model: Lead (name, company, status, value, next_follow_up); Note (lead_id, body, created_at).
Auth: email/password via Supabase; each user sees only their own leads.
Pages: Dashboard (this week's follow-ups), Leads list, Lead detail, Settings.
Stack: Vite + React + TypeScript + Tailwind; Supabase for DB and auth. Runs in WebContainer, so keep it browser-native — no local database. Deploy target: Netlify.
Vibe: clean and minimalist, muted neutrals, primary [#HEX], radius 12px, soft shadows.
Start by building the app shell and the Leads list with Supabase wired in. Plan the data model first, then build.Best for: a full-app first pass where the shell plus one core feature sets the architecture.
Build a SaaS landing page and pricing app.
Users: visitors deciding whether to sign up for [product].
Pages: Home (hero, features, social proof), Pricing (three plan cards + monthly/annual toggle), and a Sign-up page.
Auth: Supabase email/password on sign-up.
Payments: Stripe Checkout on the Pro plan.
Stack: Next.js App Router + TypeScript + Tailwind; serverless route handlers for the Stripe session; Supabase for auth. Runs in WebContainer — no native binaries, no Docker. Deploy to Netlify; keep it clean for GitHub export.
Vibe: high-tech and precise, dark surfaces, sharp contrast, primary [#HEX], radius 8px.
Plan the pages first, then build the Home and Pricing pages before wiring Stripe.Why it works: the brief pins the stack and integrations, and asks Bolt to plan before building the payment flow.
Build a habit-tracker app.
Users: someone reviewing their week each evening on their phone.
Core flows: add a habit, check off a day, view a streak.
Data model: Habit (name, color, created_at); CheckIn (habit_id, date).
Auth: Supabase magic-link sign-in; users see only their own habits.
Pages: Week grid (checkable days + streak counter), Add-habit dialog, Settings.
Stack: Vite + React + TypeScript + Tailwind; Supabase for DB and auth. WebContainer-native — no local Postgres. Deploy to Netlify.
Vibe: playful and friendly, rounded corners, one bright accent, 8px spacing scale, Inter.
Build the app shell and the week grid first with Supabase tables and typed queries. Add loading and empty states.Best for: a small app where you want persistence wired from the first generation.
Only edit src/components/LeadDetail.tsx in this project.
Add a follow-up section: a date picker, a "snooze 1 week" button, and a list of past notes newest-first.
Handle the save with the existing Supabase client — don't add new dependencies.
Match the current Tailwind theme and component style. Don't refactor unrelated files and don't touch the nav or the Leads list.Why it works: scoping the edit to one named file with a tight blast radius uses diff edits and saves tokens.
Before writing any code, outline a plan for a team wiki app: the pages, the Supabase data model (Workspace, Page, Member), the auth story (workspace-scoped access), and the build order. Wait for me to confirm the plan.
Stack we'll use: Next.js App Router + TypeScript + Tailwind; Supabase for DB and auth; serverless route handlers. Runs in WebContainer — hosted DB only, no Docker. Deploy to Netlify.
Vibe: editorial, large serif headings, calm palette, generous line height.Best for: plan-first on a larger app — review the spec before Bolt spends tokens building.
Ready to fill these in fast? Grab the Bolt.new prompt templates for blank fill-in-the-blank versions, or browse the 40 best Bolt.new prompts for finished examples.
Frequently Asked Questions
What should a Bolt.new app brief include?
Six things in plain language: the product (what it is and does), the users (who it's for), the core flows (the main things a user completes), the data model (the entities and their fields), the auth story (who signs in and what they can see), and the pages (the screens to build). Naming all six up front lets Bolt scaffold a coherent app instead of a single screen.
How do I pin the tech stack in a Bolt.new prompt?
State it explicitly, for example: "Use Vite + React + TypeScript + Tailwind, Supabase for the database and auth." Bolt emits React, Vue, Svelte, Astro, or Next.js on the frontend and Node/Express or serverless routes on the backend. Name Supabase for data and auth, Stripe for payments, Netlify for deploy, and GitHub for export.
What are design-vibe modifiers?
Short words that set the visual feel Bolt carries through the build: minimalist, high-tech, playful, editorial, elegant — plus concrete choices like dark mode, a primary color hex, border radius, and a spacing scale. Establish the vibe on the first key component so the rest of the app inherits it.
How do I save tokens in Bolt.new?
Every message spends tokens even if the build fails, so be tight. Scope each edit to a named file ("only edit src/components/Cart.tsx"), lock files that are done so Bolt won't touch them, ask Bolt to plan first before large builds, use the Enhance Prompt button to sharpen a message, and use the built-in buttons for deploy and Supabase instead of asking in chat.
What can't Bolt.new run in WebContainer?
Bolt runs in WebContainer, a browser-based Node.js runtime, so no native binaries, no Docker, and no local Postgres. Favor JS-native and serverless approaches, and use a hosted database like Supabase instead of a local one. A prompt that acknowledges the runtime avoids wasted generations.
Should I build the whole app in one prompt?
No. Give the full app brief so Bolt understands the shape, but ask it to build the shell plus one core feature first, establishing the architecture and design vibe. Then add features one message at a time, scoping each to named files. This keeps generations reviewable and cheaper than a single giant request.
What is the Enhance Prompt button?
It's the sparkle icon next to the chat box that rewrites your prompt into a more detailed version before you send it. You can edit its suggestion. Use it to expand a rough one-liner into a fuller brief, then trim anything you don't want.
Does the Bolt.new plan tier change prompt quality?
No. Prompting technique matters more than the tier. A tight, specific prompt with a full app brief, a pinned stack, and clear scope produces better output and wastes fewer tokens on retries than a vague prompt on a higher tier.