Bolt.new, StackBlitz's in-browser AI app builder, turns a plain-language brief into real, deployable code — it installs the npm packages, runs the dev server, and deploys, all inside the browser with no local setup. Landing pages are an ideal fit: a good marketing page is mostly layout, copy, and design vibe, all of which you can spell out precisely in one brief. This pack is 24 copy-paste prompts for exactly that: hero sections, full SaaS pages, portfolios, and waitlist forms wired to a real database.
Every prompt reflects how Bolt actually works — an app-level brief up front, a pinned stack (Astro or Vite + React + Tailwind + TypeScript), a design vibe with a reference, and named sections. Bolt runs on WebContainer, so there's no local database; forms connect to Supabase, and pages deploy to Netlify. Fill the [bracketed placeholders] with your product's details. For the wider set, start with the 40 Best Bolt.new Prompts roundup, and for the reusable structure see the Bolt.new prompt cheat sheet.
SaaS & startup landing pages
For a marketing page, give Bolt an app-level brief: the product, the one visitor, the single conversion goal, and the section order. Pin the stack and the tokens so the first paint looks intentional.
1. SaaS landing page hero with token spec
Build the hero section of a SaaS landing page for [product name], a [one-line description, e.g. "scheduling tool for solo consultants"].
Used by [target buyer] who lands from a cold ad and decides in 5 seconds whether to keep reading. The section drives one action: start a free trial.
Sections:
- Left-aligned headline (max 8 words), a one-sentence subhead, a primary "Start free trial" button and a ghost "See how it works" button, and a small "no credit card" line under the buttons.
- Right side: a rounded product screenshot placeholder with a soft shadow.
- A thin trust line: "Trusted by 2,000+ teams".
Stack: Vite + React + Tailwind + TypeScript.
Vibe: clean, modern, high-trust SaaS — like Linear's calm minimalism.
Tokens: background #FFFFFF, foreground #0A0A0A, primary #4F46E5, muted #6B7280; border-radius 12px; font Inter, headline weight 800, body 400; section padding 96px top/bottom, 24px gutters.
Responsive: two columns on desktop, stacked and centered below 768px, down to 360px.
Do not add auth or a nav dropdown yet — just this hero.Why it works: naming the single action, the vibe, and exact tokens leaves Bolt no room to guess, so the first generation is close enough to ship and cheap on tokens.
2. Above-the-fold hero with logo cloud
Build an above-the-fold hero for [product], used by [buyer] who needs proof it's legit before scrolling.
Sections:
- Centered eyebrow tag ("New in 2026"), a large headline, a subhead, and a single primary CTA "[Get started]".
- Directly below: a monochrome logo cloud of 6 customer logos with the caption "Powering teams at".
Stack: Vite + React + Tailwind + TypeScript.
Vibe: dark, high-tech, confident.
Tokens: bg #0B1120, text #E2E8F0, primary #22D3EE, radius 10px, Inter, headline 800; generous vertical rhythm. Logos grayscale at 60% opacity, full color on hover.
Responsive down to 360px; the logo cloud wraps to 3 columns on mobile. Build only this section for now.Best for: B2B pages where social proof needs to appear before the fold.
3. Full SaaS landing page — plan first, then build
Before writing any code, outline a short plan for a SaaS landing page for [product], a [one-line description]. Cover: the target visitor, the one conversion goal, the section order, and a design-token table (colors, radius, font weights, spacing). Show me the plan first.
After I approve, build the full page in this order:
1. Sticky nav with logo, 4 links, and a "Start free" button.
2. Hero (headline, subhead, primary + ghost CTA, screenshot).
3. Logo cloud.
4. 3-across feature grid with icons.
5. Two alternating feature rows (image + copy).
6. Testimonial with avatar and company.
7. 3-tier pricing.
8. FAQ accordion (6 items).
9. Final CTA band.
10. Footer with 4 link columns.
Stack: Vite + React + Tailwind + TypeScript.
Vibe: elegant, minimalist, trustworthy.
Tokens: bg #FFFFFF, foreground #0F172A, primary #2563EB, muted #64748B, radius 12px, Inter 400/600/800, section padding 80px. Responsive down to 360px.Why it works: asking Bolt to plan first locks the section order and token table before it writes a line, so the page reads as one design instead of ten stitched fragments. Establishing the shell and vibe up front is Bolt's core technique.
4. Dev-tool landing page, dark theme with install block
Build a developer-focused landing hero for [tool], used by engineers who want to see it work in one command.
Sections:
- Headline, subhead, and a "Copy install" code block showing `npm i [package]` with a working copy-to-clipboard button.
- Primary CTA "Read the docs" and a GitHub star button showing "[8.2k] stars".
Stack: Vite + React + Tailwind + TypeScript.
Vibe: sharp, technical, terminal-inspired — think a modern OSS project page.
Tokens: bg #09090B, foreground #FAFAFA, accent #34D399, mono font for the code block, radius 8px. Code block surface #18181B with a copy button top-right.
Responsive down to 360px; keep the code block scrollable, not wrapping. Just this hero for now.Why it works: developers convert on a runnable command, so leading with a real copy-install block matches the audience's decision moment.
5. Astro static marketing site for speed
Build a fast, mostly-static marketing site for [product], a [one-line description]. Prioritize page-speed and SEO over interactivity.
Stack: Astro + Tailwind + TypeScript. Use Astro components and ship as little JavaScript as possible; only hydrate the mobile nav toggle. This suits WebContainer well since it's a static build.
Sections: hero with primary CTA, 3-item feature row, a short "how it works" 3-step block, a single testimonial, a pricing teaser linking to /pricing, and a footer with meta tags and Open Graph set for social sharing.
Vibe: crisp, editorial, lots of whitespace.
Tokens: bg #FFFFFF, foreground #111827, primary #0EA5E9, radius 10px, Inter. Responsive down to 360px. When it's built, deploy to Netlify.Best for: content-first pages where Core Web Vitals matter more than app interactivity. For picking a stack per project, see the guide to prompting Bolt.new for full apps.
Product & app launch pages
Launch pages need urgency and a single clear action. Name the launch date, the store badges or CTA, and the vibe so the page feels like an event.
6. Mobile app launch page
Build a launch landing page for [app name], a [one-line description] mobile app launching [month/year].
Used by [target user] arriving from social; the page drives one action: download the app.
Sections:
- Hero: headline, subhead, App Store and Google Play badge buttons (placeholder links), and a phone-frame mockup with a screenshot placeholder.
- A 3-up feature highlight row with icons.
- A short "loved by early users" testimonial strip.
- Footer with social links and legal.
Stack: Vite + React + Tailwind + TypeScript.
Vibe: bright, playful, consumer — vivid accent color and rounded shapes.
Tokens: bg #FFFFFF, foreground #0F172A, primary #F97316, radius 20px, Inter 800 headline. Responsive down to 360px; badges stack on mobile.Why it works: the phone-frame mockup plus store badges is the expected app-launch layout, so it reads as credible immediately.
7. Split hero with app store badges and rating
Build a 50/50 split hero for [app]. Left column: headline, subhead, a "★ 4.9 · 2,000+ reviews" line, and App Store + Google Play badges. Right column: a tilted phone-frame mockup (2 degrees) with a subtle drop shadow.
Stack: Vite + React + Tailwind + TypeScript.
Vibe: sleek, premium consumer app.
Tokens: bg #FAFAF9, foreground #1C1917, primary #7C3AED, radius 16px, Inter 400/600/800; container max-width 1200px.
Below 900px stack the columns and move the mockup under the copy. Keep it keyboard-accessible. Build only this hero.Best for: apps with strong ratings — leading with the star line front-loads trust.
8. Feature-tour launch page
Build a product-launch landing page for [product] that walks a visitor through 3 key features as a scrolling tour.
Sections:
- Hero with a "What's new" tag, headline, and a "See it in action" CTA that smooth-scrolls to the first feature.
- Three alternating feature blocks, each with a screenshot placeholder, an eyebrow, a bold heading, and 2 sentences.
- A final CTA band with an email capture (client-side success state only for now).
- Footer.
Stack: Vite + React + Tailwind + TypeScript.
Vibe: confident, modern, spacious.
Tokens: bg #FFFFFF, foreground #0F172A, primary #2563EB, radius 12px, Inter, section padding 96px. Responsive down to 360px. Plan the section order first, then build.Why it works: the scroll-tour structure matches how people evaluate a launch — one clear benefit at a time — and planning first keeps the three blocks consistent.
Personal, portfolio & agency sites
Portfolio and agency pages live or die on taste. Lean hard on the vibe description and a reference feel, and let Bolt establish that in the first component.
9. Personal portfolio one-pager
Build a single-page personal portfolio for [name], a [role, e.g. "product designer"].
Sections:
- Hero: name, a one-line positioning statement, and two links (email + [LinkedIn/GitHub]).
- Selected work: a 4-item project grid, each card with a thumbnail placeholder, project name, a one-line role, and a "View →" link.
- A short "About" paragraph with a headshot placeholder.
- Contact CTA with a mailto button.
- Minimal footer.
Stack: Astro + Tailwind + TypeScript (static, fast).
Vibe: minimalist, editorial, generous whitespace, one accent color — like a designer's own site.
Tokens: bg #FAFAFA, foreground #171717, accent #DB2777, radius 8px, Inter 400/600, large type scale. Responsive down to 360px. Deploy to Netlify when done.Best for: a clean, fast personal site you can ship in one session and host free on Netlify.
10. Agency / studio site
Build a landing page for [agency name], a [type, e.g. "brand and web design"] studio.
Sections:
- Sticky nav with logo, "Work", "Services", "About", and a "Start a project" button.
- Hero: a bold statement headline, a subhead, and a primary CTA.
- Services: a 3-column list with short descriptions.
- Selected work: a 6-item case-study grid with hover captions.
- A logo cloud of past clients.
- Contact CTA band.
- Footer.
Stack: Vite + React + Tailwind + TypeScript.
Vibe: high-end, confident, a little editorial — big type, tight grid, restrained color.
Tokens: bg #0A0A0A, foreground #FAFAFA, accent #F59E0B, radius 4px, Inter 400/800, oversized headings. Responsive down to 360px. Plan first, then build.Why it works: agency sites are judged on craft, so pinning an oversized type scale and a restrained palette gives Bolt the taste cues it needs up front.
11. Freelancer services page with booking CTA
Build a services landing page for [name], a freelance [role]. The single goal is to get a discovery call booked.
Sections:
- Hero: value-prop headline, a one-line subhead, and a primary "Book a call" button linking to [Calendly URL].
- 3 service packages as cards, each with a name, what's included (4 bullets), and a "from [$price]" line.
- A short "how we'll work together" 3-step row.
- A testimonial or two.
- A final "Book a call" CTA band.
- Footer.
Stack: Vite + React + Tailwind + TypeScript.
Vibe: warm, professional, trustworthy.
Tokens: bg #FFFFFF, foreground #1C1917, primary #0D9488, radius 12px, Inter. Responsive down to 360px.Best for: solo consultants who need the whole page pointing at one booking link.
Sections & conversion blocks
Build the mid-page blocks as standalone sections you can drop into any page. Scope each to its own file so Bolt's diff-based editing doesn't disturb what you've already shipped.
12. Three-tier pricing section
Build a 3-tier pricing section for [product] as its own component in src/components/Pricing.tsx.
Tiers:
- Starter, [$0], for [use case], features: [list 4].
- Pro, [$29/mo], for [use case], features: [list 6], marked "Most popular".
- Team, [$99/mo], for [use case], features: [list 7].
Each card: name, price, short description, feature list with check icons, and a CTA button. The Pro card is emphasized (primary border, subtle lift, "Most popular" badge).
Stack: Vite + React + Tailwind + TypeScript.
Tokens: bg #FFFFFF, foreground #0A0A0A, primary #4F46E5, muted #6B7280, radius 12px, Inter 400/600/800.
3 columns on desktop, stacked below 768px with the Pro card first. Down to 360px. Only create this one file.Why it works: spelling out which tier is "Most popular" lets Bolt apply the visual hierarchy that steers buyers, and scoping to one file keeps the edit contained.
13. Pricing with monthly/annual toggle
Only edit src/components/Pricing.tsx. Add a monthly/annual billing toggle above the 3-tier pricing. When "Annual" is selected, show the discounted per-month price with the original struck through and a "Save 20%" badge on the toggle. Use React state so switching updates all three cards instantly.
Keep the existing tokens (primary #4F46E5, radius 12px). Make the toggle keyboard-accessible and fade the prices on change. Responsive down to 360px. Do not change any other file.Best for: raising contract value by making the annual discount visible at the moment of choice. Locking the other files first keeps the diff clean.
14. Feature grid with icons
Build a 3-across feature grid for [product] as src/components/Features.tsx. Six features, each: an icon in a soft tinted square, a short bold title, and one sentence of body copy. Add a small section heading and subhead above the grid.
Features: [title 1 — one line], [title 2 — one line], [title 3 — one line], [title 4 — one line], [title 5 — one line], [title 6 — one line].
Stack: Vite + React + Tailwind + TypeScript. Use lucide-react for icons.
Tokens: bg #FFFFFF, foreground #0F172A, muted #64748B, icon tint from primary #2563EB at 10% opacity, radius 12px, Inter 600/800.
3 columns desktop, 2 tablet, 1 mobile; down to 360px.Why it works: six real one-liners in the prompt beats "add some features" — Bolt fills your value props, not lorem ipsum.
15. Alternating feature rows
Build a section of 3 alternating feature rows for [product] as src/components/FeatureRows.tsx. Each row: a screenshot placeholder on one side and copy on the other (eyebrow tag, bold heading, 2-sentence description, and a text link "[Learn more →]"). Alternate the image side row to row; on mobile the image always stacks above the copy.
Content: Row 1 [feature + benefit], Row 2 [feature + benefit], Row 3 [feature + benefit].
Stack: Vite + React + Tailwind + TypeScript.
Tokens: bg #FAFAFA, foreground #171717, primary #7C3AED, radius 14px, Inter. Row vertical spacing 96px; responsive down to 360px.Best for: walking through 2–4 core capabilities with room to breathe.
16. Testimonial wall with stat row
Build a testimonial wall for [product] as src/components/Testimonials.tsx: a masonry-style grid of 6 quote cards. Each card: the quote, an avatar placeholder, a name, and a role @ company. Above the grid, a small stat row: "[4.9/5]", "[2,000+] teams", "[10M+] tasks run".
Stack: Vite + React + Tailwind + TypeScript.
Tokens: bg #FFFFFF, card surface #F8FAFC, foreground #0F172A, radius 12px, Inter. Use CSS columns for the masonry effect; 3 columns desktop, 2 tablet, 1 mobile. Cards have a hairline border and subtle hover lift. Responsive down to 360px.Why it works: the stat row plus a dense quote wall front-loads credibility, and CSS columns keep varied-length quotes from leaving ragged gaps.
17. Accordion FAQ section
Build an FAQ section for [product] as src/components/Faq.tsx using an accessible accordion (React state, no external UI kit needed). Section heading "Frequently asked questions", subhead, then 6 items:
Q1 [question] / A1 [answer], Q2 [...], Q3 [...], Q4 [...], Q5 [...], Q6 [...].
Only one item open at a time; the first item open by default. Below the accordion, a small line: "Still have questions? [Contact us]" linking to /contact.
Stack: Vite + React + Tailwind + TypeScript.
Tokens: bg #FFFFFF, foreground #0A0A0A, muted #6B7280, radius 10px, Inter 600/400; max-width 768px, centered. Keyboard-accessible; responsive down to 360px.Best for: handling objections in-page. Keeping it framework-native avoids pulling in an extra dependency inside WebContainer.
18. Final CTA band with email capture
Build a full-width final CTA band for the bottom of a landing page for [product] as src/components/CtaBand.tsx. Centered headline "[Ready to get started?]", one supporting line, and an inline email input + "[Start free]" button. On submit, show an inline success state ("You're in — check your inbox"); no backend yet, just React state and validation.
Stack: Vite + React + Tailwind + TypeScript.
Tokens: band background primary #4F46E5, foreground #FFFFFF, input surface white, radius 12px, Inter 800 headline; vertical padding 80px. Email row is a single row on desktop, stacks below 640px. Down to 360px, keyboard-accessible.Why it works: a self-contained success state means the band works and demos well immediately; you wire the real Supabase insert later (prompt 21).
Polish & ship
Once the sections exist, tighten responsiveness and accessibility, connect the form to Supabase, then deploy to Netlify or export to GitHub — all with Bolt's built-in buttons.
19. Responsive and accessibility pass
Do a responsive and accessibility pass on the whole landing page without changing the design.
- Test every section down to 360px width and fix any overflow, cramped spacing, or overlapping elements.
- Ensure all interactive elements are keyboard-focusable with visible focus rings.
- Add alt text to images, aria-labels to icon-only buttons, and correct heading order (one h1, then h2s).
- Check color contrast meets WCAG AA against the existing tokens; adjust only if a pair fails.
Scope: edit only layout/spacing/aria attributes. Do not restructure sections, change colors that already pass, or add new features.Why it works: stating "do not restructure" and scoping the change keeps Bolt's diff tight, so a polish pass doesn't quietly redesign a page you already liked.
20. Redesign to a new vibe
Restyle the entire landing page to a new visual vibe, keeping the exact same sections, copy, and layout structure.
New vibe: [describe it, e.g. "warm and editorial — cream background, serif display headings, a single terracotta accent, softer shadows"].
New tokens: bg [#hex], foreground [#hex], primary [#hex], radius [Npx], heading font [font], body font [font].
Apply the tokens through Tailwind consistently across every section. Do not change the content, the section order, or the responsive breakpoints — only the visual style.Best for: A/B-testing a whole different look without rebuilding. Describing the vibe in concrete words is how you steer Bolt's taste. See more phrasing in the Bolt.new prompt cheat sheet.
21. Waitlist wired to Supabase
Build a single-screen waitlist page for [product], launching [month/year]. Centered logo, headline, one-sentence subhead, and an email capture form.
Wire it for real using Supabase (I'll connect Supabase with the built-in integration):
- Create a "waitlist" table with columns email (unique) and created_at.
- On submit, insert { email } from a serverless route; validate the email on client and server.
- Handle duplicate emails gracefully with a friendly "You're already on the list" message.
- On success, replace the form with a confirmation.
Stack: Vite + React + Tailwind + TypeScript. Since WebContainer has no local database, use Supabase for storage.
Vibe: focused, calm, single-screen.
Tokens: bg #0B1120, foreground #F8FAFC, primary #6366F1, radius 12px, Inter 400/800. Center everything vertically; responsive down to 360px. When it works, I'll deploy to Netlify.Why it works: Bolt can't run a local Postgres in WebContainer, so pointing it at Supabase and asking for the table, insert, and validation in one brief gives you a working signup end to end. Use the built-in Supabase button to connect rather than pasting keys in chat.
22. Coming-soon page with live countdown
Build a "coming soon" page for [product] launching on [ISO date]. Brand mark, headline, a live countdown timer (days / hours / minutes / seconds) that ticks in the browser, an email capture that inserts into a Supabase "waitlist" table, and 3 social links in the footer.
The countdown is a React component using setInterval that cleans up on unmount and counts to the target date in the visitor's local time. Because WebContainer has no local DB, store emails in Supabase (I'll connect it with the built-in integration).
Stack: Vite + React + Tailwind + TypeScript.
Vibe: anticipatory, premium, dark.
Tokens: bg gradient #111827 to #1F2937, foreground #F9FAFB, accent #F59E0B, radius 12px, Inter 800. Responsive down to 360px. Then I'll deploy to Netlify.Best for: building urgency before a dated launch while still collecting emails.
23. Newsletter signup to Supabase
Only edit the footer component. Add a newsletter signup row: an email input and a "Subscribe" button with a pending state and an inline success/error message.
Wire it to Supabase: validate the email, then insert into a "subscribers" table (unique email; ignore duplicates with a friendly message). I'll connect Supabase with the built-in integration. WebContainer has no local database, so Supabase is the store.
Keep the existing footer layout and tokens. Do not touch any other file. Responsive down to 360px; keyboard-accessible.Why it works: scoping to the footer file and reusing the existing tokens means Bolt adds a real capture without rewriting the rest of the footer.
24. Deploy to Netlify and export to GitHub
The landing page is ready. Before I deploy, do a final production check:
- Confirm the build passes with no TypeScript errors and no console warnings.
- Ensure meta title, description, and Open Graph tags are set for [product] so social shares look right.
- Add a favicon placeholder and a 404 page.
- Verify the Supabase env vars are referenced correctly, not hardcoded.
Then tell me I'm ready — I'll use the built-in Netlify deploy button for a live URL and export to GitHub so I can host or version it anywhere.Best for: the final pass before shipping. Bolt deploys to Netlify in a couple of clicks and exports to GitHub for any host — trigger both with the built-in buttons rather than asking in chat, which just spends tokens. For the complete set, browse the 40 Best Bolt.new Prompts.
Frequently Asked Questions
How do I write a good Bolt.new prompt for a landing page?
Give Bolt an app-level brief, not a screen-level one. Name the product, who it's for, and the one action the page should drive; pin the stack (Astro or Vite + React + Tailwind + TypeScript); describe a clear design vibe with a reference; and list the sections in order. Write in plain natural language — Bolt takes no CLI flags or slash commands. State what NOT to build so it doesn't over-scope.
What stack should I pin for a Bolt.new landing page?
For a static marketing page, pin Astro + Tailwind + TypeScript for speed; for an interactive page with a form, pin Vite + React + Tailwind + TypeScript. Bolt runs on WebContainer, a browser Node.js runtime, so favor JS-native and serverless approaches. Use Supabase for any database rather than a local Postgres, which WebContainer can't run.
Can Bolt.new build a working waitlist form?
Yes. Ask Bolt to add an email capture, then connect Supabase using the built-in integration and have it insert into a waitlist table with client and server validation and duplicate handling. Because WebContainer has no local database, Supabase is the right call. Then deploy to Netlify with the built-in deploy button.
How do I get Bolt.new to match a specific design?
Describe the vibe with concrete words — elegant, minimalist, high-tech, playful — and name a reference site whose feel you want. Pin exact tokens: hex colors, border radius, font family and weights, and spacing. You can also import a Figma design. Establish the architecture and the first key component first so Bolt carries that vibe through the rest of the build.
Should I build a landing page in one prompt or several?
For a single section, one prompt is fine. For a full page, ask Bolt to plan first — outline the spec and section order — then build the shell plus one core section, and add the rest one message at a time. Scope each follow-up to named files, like only edit src/components/Hero.tsx, so Bolt's diff-based editing doesn't touch finished code.
How do I stop Bolt.new from editing sections I already finished?
Lock the file: right-click it in the editor and choose Lock file so Bolt won't touch stable code. Bolt edits with diffs — only the lines it needs — so also scope each message to specific files or functions. Together, locking and scoping keep a finished hero or pricing block from getting rewritten while you iterate on the next section.
Why do my Bolt.new tokens run out so fast?
Bolt's pricing is token-based, and every message spends tokens even if the build fails, so a vague prompt that needs three retries costs three times as much. Front-load the detail: exact sections, tokens, and a done-condition in one tight brief. Use the Enhance Prompt button (the sparkle icon) to tighten a rough prompt before sending, and use built-in buttons for deploy and Supabase instead of asking in chat.
Can Bolt.new deploy my landing page?
Yes. Bolt installs packages, runs the dev server, and deploys — all in the browser. Use the built-in Netlify deploy button for a live URL in a couple of clicks, or export to GitHub to host anywhere. Vercel deploy is also supported. Trigger deploys with the button rather than asking Bolt to do it in chat, which just spends tokens.