30 Best Bolt Prompts

<context> App idea: [YOUR APP IDEA] Stack: Next.js 14 (App Router) + TypeScript + Tailwind CSS + Prisma + SQLite (swap to Postgres later) Core entities: [ENTITY 1], [ENTITY 2], [ENTITY 3] Auth: email + password with sessions </context> <task> Scaffold the complete project. Do the following: 1. Set up the folder structure: app/ routes, components/, lib/, prisma/schema.prisma. 2. Define the Prisma schema for the core entities above with sensible relations and timestamps. 3. Create typed server actions for CRUD on each entity. 4. Build a minimal but clean home page and one list+detail view per entity. 5. Add basic auth (sign up, log in, log out, protected routes). 6. Seed the database with 5 realistic example rows per entity. 7. Make sure npm run dev starts with zero errors and explain how to run it. </task>

<context> Idea: [YOUR APP IDEA] Constraints: ships in a weekend, deploys free, must support [REALTIME / FILE UPLOAD / PAYMENTS / NONE] My experience: [BEGINNER / INTERMEDIATE / EXPERT] in JavaScript </context> <task> Before writing code, do the following: 1. Recommend ONE stack (framework, styling, database, hosting) and justify it in 2 sentences for my constraints. 2. List the npm packages you will install and why each is needed. 3. Outline the file structure as a tree. 4. Flag any constraint that the chosen stack handles poorly and propose an alternative. 5. Then scaffold the empty project with that stack and a placeholder home page. </task>

<context> Product spec: [PASTE YOUR SPEC OR PRD HERE] Target users: [WHO] Must-have screens: [SCREEN 1], [SCREEN 2], [SCREEN 3] </context> <task> Turn this spec into a clickable prototype. Do the following: 1. Extract the data model implied by the spec and define it in Prisma. 2. Build each must-have screen with realistic placeholder data wired to the model. 3. Connect navigation between screens so the core flow is clickable end to end. 4. Use Tailwind for a clean, modern, neutral design (no lorem ipsum — write believable copy). 5. List any spec ambiguities you had to assume, so I can correct them. </task>

<context> Product: [YOUR APP IDEA] Pages needed: Home, Features, Pricing, About, Contact, Blog index Brand vibe: [MODERN / PLAYFUL / ENTERPRISE], primary color [HEX] </context> <task> Scaffold a multi-page marketing site. Do the following: 1. Create a shared layout with a sticky responsive header and footer. 2. Build each listed page as its own route with realistic section content. 3. Implement the Pricing page with 3 tiers and a monthly/annual toggle. 4. Make the Blog index render from a local markdown/MDX folder. 5. Ensure mobile responsiveness and a consistent design system via Tailwind config tokens. </task>

<context> Project: [YOUR APP IDEA] Apps: a web frontend and a separate API service Goal: share TypeScript types between them </context> <task> Scaffold a TypeScript monorepo. Do the following: 1. Set up a workspace (npm/pnpm workspaces) with apps/web, apps/api, and packages/types. 2. Put all shared domain types and Zod schemas in packages/types. 3. Build the API with Express or Hono exposing 3 example endpoints validated by the shared schemas. 4. Build the web app consuming those endpoints with the same shared types. 5. Add a single root script that runs both apps concurrently in dev. </task>

<context> Product: [YOUR APP IDEA] One-line value prop: [VALUE PROP] Primary CTA: [SIGN UP / BOOK DEMO / JOIN WAITLIST] Audience: [WHO] </context> <task> Build a single-page, conversion-focused landing page. Do the following: 1. Hero with headline, subhead, primary CTA, and a hero visual placeholder. 2. A 3-column problem/solution section and a 3-step 'how it works'. 3. A features grid (6 features) with icons and short benefit-led copy. 4. Social proof section (logos + 3 testimonials) and an FAQ accordion. 5. A repeated CTA before the footer. 6. Use Tailwind, smooth scroll, subtle entrance animations, and full mobile responsiveness. </task>

<context> Product: [YOUR APP IDEA] Launch status: pre-launch Email storage: store signups in a database table </context> <task> Build a focused waitlist page. Do the following: 1. Create a centered hero with the pitch and an email capture form. 2. Validate the email on the client and store valid signups in a waitlist table via a server action. 3. Prevent duplicate emails and show a friendly already-on-list message. 4. After submit, show a success state with a referral share link. 5. Add an admin-only /waitlist route that lists signups with a CSV export button. </task>

<context> Product: [YOUR APP IDEA] Key feature to highlight: [FEATURE] Competitors to compare against: [COMPETITOR A], [COMPETITOR B] </context> <task> Build a feature deep-dive page. Do the following: 1. Lead with a benefit headline and an animated demo placeholder for the feature. 2. Explain the feature in 3 use-case cards, each with a short scenario. 3. Add a responsive comparison table (us vs the two competitors) with check/x cells. 4. Include a short objection-handling FAQ. 5. End with a CTA band linking to sign up. </task>

<context> Product: [YOUR APP IDEA] Current hero: [DESCRIBE OR 'none yet'] Vibe: [BOLD / MINIMAL / TECH] </context> <task> Design three distinct hero section variants I can A/B test. Do the following: 1. Build Hero A (copy-led, big type), Hero B (visual-led with a gradient/mesh background), and Hero C (interactive, e.g. a typed-text headline). 2. Implement all three as separate components and a route that lets me toggle between them. 3. Use Framer Motion (or CSS) for tasteful entrance animations. 4. Keep the same CTA and value prop across all three so only the design varies. </task>

<context> Product: [YOUR APP IDEA] Launch date: [DATE] </context> <task> Build a coming-soon page. Do the following: 1. Center a live countdown timer to the launch date that updates every second. 2. Add a one-field email notify form stored to a database table. 3. Include social links and a subtle animated background. 4. Handle the post-launch case: after the date passes, show a 'We are live' CTA instead of the timer. 5. Make it fully responsive and add basic OpenGraph meta tags. </task>

<context> App: [YOUR APP IDEA] Metrics to show: [METRIC 1], [METRIC 2], [METRIC 3] Data source: mock data for now (realistic shape) </context> <task> Build an analytics dashboard. Do the following: 1. Create a sidebar layout with a top bar (date-range picker, user menu). 2. Add 4 KPI stat cards with trend deltas at the top. 3. Add a line chart, a bar chart, and a donut chart using Recharts with mock time-series data. 4. Add a recent-activity table with sorting and pagination. 5. Make the whole layout responsive and add a light/dark theme toggle. </task>

<context> App: [YOUR APP IDEA] Entity to manage: [ENTITY] Roles: admin (full access), editor (create/edit), viewer (read-only) </context> <task> Build an admin panel. Do the following: 1. Create a data table for the entity with search, filter, sort, and pagination. 2. Add create/edit modals with validated forms and inline error messages. 3. Add delete with a confirmation dialog and optimistic UI updates. 4. Gate actions by role so viewers cannot mutate and editors cannot delete. 5. Show a toast on every successful or failed action. </task>

<context> App: [YOUR APP IDEA] Columns: Backlog, In Progress, Review, Done Persistence: save board state to the database </context> <task> Build a Kanban board. Do the following: 1. Render the four columns with draggable cards using dnd-kit. 2. Persist card position and column on every drop via a server action. 3. Add a quick-add card input at the bottom of each column. 4. Support a card detail drawer for editing title, description, and assignee. 5. Keep drag interactions smooth on both desktop and touch devices. </task>

<context> App: [YOUR APP IDEA] Settings groups: Profile, Account, Notifications, Billing </context> <task> Build a settings area. Do the following: 1. Create a tabbed (or sidebar) layout with one panel per settings group. 2. Build validated forms for each panel with dirty-state detection and a sticky save bar. 3. Add notification preferences as toggles saved individually. 4. Stub the Billing tab with the current plan, usage, and an upgrade button. 5. Show a confirmation toast and disable Save until something changes. </task>

<context> App: [YOUR APP IDEA] Rows: large dataset (thousands of [RECORDS]) Needs: search, multi-column filter, sort, pagination </context> <task> Build a performant data table. Do the following: 1. Implement server-side pagination, sorting, and filtering (do NOT load all rows client-side). 2. Use TanStack Table for the UI and debounce the search input. 3. Add column visibility toggles and a row-selection checkbox column. 4. Add a bulk-action bar that appears when rows are selected. 5. Show skeleton loaders while fetching and an empty state when no rows match. </task>