Bolt.new lets you describe an app and watch it get built in real time — full-stack, live preview, instant deploy. No environment setup, no package installs. Just describe what you want and ship it.
Tell Bolt exactly what framework you want: React, Next.js, Astro, Vue. Don't leave it to guess — it will sometimes pick wrong.
Say what the app does and what the user experience looks like. Bolt builds better when it understands the goal, not just the steps.
Mention colors, style (minimal, glassmorphism, dark mode), and any UI library you want (Tailwind, shadcn, Radix).
If you need Stripe, Supabase, a REST API, or auth — say so upfront. Adding these later is messier than specifying from the start.
Tell Bolt what NOT to build. 'No backend needed', 'don't add auth yet', 'keep it simple' — this prevents Bolt from over-engineering.
Copy these into Bolt.new to build full working apps from scratch. Each prompt is designed to give Bolt enough detail to build something real.
Build a SaaS landing page using React and Tailwind CSS. The product is called "Flowly" — it's an AI-powered project management tool. Include: a hero section with headline, subheadline, and email waitlist signup form, a features section with 3 feature cards (icons + title + description), a social proof section with 3 fake testimonials, and a footer. Dark theme with purple accent (#7C3AED). Make the waitlist form functional (store submissions in local state and show a success message). No backend needed.
Create a personal portfolio website using Next.js and Tailwind. Include: a sticky header with nav links (About, Work, Contact), a hero section with name, title, and a short bio, a projects section showing 3 project cards with title, description, tech stack tags, and a "View" button, an about section, and a contact form. Dark/light mode toggle in the header. Minimal, modern design — think linear.app aesthetic. Smooth scroll animations on section entry. No backend needed.
Build a task manager app using React and Tailwind. Features: add tasks with a title and optional due date, mark tasks complete (strikethrough + move to completed section), delete tasks, filter by All / Active / Completed, and a progress bar showing % complete. Persist all data in localStorage so it survives page refresh. Clean dark UI. No backend, no auth needed.
Create an invoice generator app with React. The user should be able to: fill in their business name and info, add a client name and address, add line items (description, quantity, unit price — auto-calculate totals), set payment terms and due date, and preview the invoice in a clean professional layout. Add a "Download PDF" button that exports the invoice. Use Tailwind for styling. White/professional design.
Once your base app is built, use these prompts to add functionality. Be specific about where to add it.
Add Stripe Checkout to this app. When the user clicks the "Upgrade" button, it should: create a Stripe Checkout session for the $19/month "Pro" plan (product ID: [your ID]), redirect the user to the Stripe-hosted checkout page, and after successful payment redirect back to /success with a confirmation message. Use Stripe's test mode keys. I'll replace with live keys before launch.
Add user authentication to this app using Supabase Auth. Implement: a login page with email/password and Google OAuth, a sign-up page, protected routes that redirect to login if not authenticated, a user session stored in context, and a logout button in the header. Use the Supabase JS client. My Supabase project URL is [URL] and anon key is [key].
Add a data dashboard page to this app at /dashboard. Show the following charts using Recharts: a line chart showing daily signups for the last 30 days, a bar chart showing revenue by month, and a pie chart showing users by plan (Free / Pro / Enterprise). Use the following sample data: [paste data or describe structure]. Dark card design matching the existing app.
This component isn't rendering correctly. Here's the code: [paste code]. The issue is [describe the problem]. Find the bug and fix it. Explain what was wrong in one sentence.
The mobile layout is broken on screens under 768px. The [section name] overlaps with the navbar and the cards stack incorrectly. Fix the responsive CSS/Tailwind classes. Don't change the desktop layout.
Add proper error handling to all API calls in this file: [paste file]. Show a user-friendly error message in the UI (not just console.log) if an API call fails. Use a toast notification or inline error message.
Review this component for accessibility issues: [paste code]. Add: proper aria labels, keyboard navigation support, focus visible states, and ensure color contrast meets WCAG AA standards. List each change you made and why.
Starting a new app from scratch in the browser. Fast prototyping with instant deploy. Best for non-developers who want working code quickly.
Developers who want AI assistance while coding in a full IDE. Best for complex codebases, refactoring, and production-grade work.
Non-technical founders building SaaS products with a UI. Similar to Bolt but with stronger product design focus and Supabase integration.
Generating React/Next.js UI components and landing pages. Best for developers who want polished, production-ready component code.
Explore our guides for Cursor, v0, Windsurf, Vibe Coding, and every major AI dev tool.
Browse All Guides →