What You'll Build
- A professional landing page with:
- Hero section with email capture
- Feature grid
- Pricing table
- Testimonials
- FAQ
- Deployed to a real URL
Tool: Bolt.new (browser only — nothing to install) Time: ~10 minutes Cost: $0
Step 1: Open Bolt (30 seconds)
Go to bolt.new in Chrome. No signup required for your first project.
Step 2: Paste This Prompt (1 minute)
Build a SaaS landing page for a project management tool called "Flowboard." SECTIONS: 1. Navbar: "Flowboard" logo left, "Features", "Pricing", "FAQ" links, "Get Started" blue button 2. Hero: - Headline: "Ship projects faster with AI-powered workflows" - Subheadline: "Flowboard combines task management with AI to help teams ship 3x faster" - Email capture input + "Start Free Trial" button - Below: "Trusted by 2,400+ teams" with small avatar stack 3. Features: 3-column grid - AI Task Prioritization (auto-ranks your backlog) - Smart Deadlines (ML-predicted delivery dates) - Team Pulse (real-time workload balancing) 4. Pricing: 2 plans - Free: up to 5 users, basic features - Pro $19/mo: unlimited users, AI features, analytics - Monthly/Annual toggle (annual = 2 months free) 5. Testimonials: 3 quotes with name, role, company, avatar 6. FAQ: 5 questions with accordion 7. Footer: links, copyright 2026 REQUIREMENTS: - Next.js + Tailwind CSS only - Mobile responsive (test at 375px) - Smooth scroll for nav links - Clean, Apple-inspired design - No external dependencies
Wait 30-60 seconds while Bolt generates everything.
Step 3: Iterate (3 minutes)
The first generation is 80% there. Fine-tune with follow-up prompts:
Fix any design issues:
Make the hero section taller with more whitespace. The headline should be larger and bolder.
Adjust colors:
Change the primary color to #2563EB (blue-600). Make the CTA buttons have a subtle shadow.
Improve mobile:
On mobile, stack the pricing cards vertically. Make the navbar collapse into a hamburger menu.
Each iteration takes 10-15 seconds. Do 2-3 rounds until you're happy.
Step 4: Export to GitHub (1 minute)
Click the three-dot menu (top right) → Export to GitHub.
- Bolt creates a real repository under your GitHub account with:
- Complete Next.js project
- All components
- package.json with dependencies
- Tailwind configuration
- README
Step 5: Deploy to Vercel (2 minutes)
Go to vercel.com → "Add New Project" → "Import Git Repository."
- Select the repo Bolt just created. Vercel auto-detects Next.js and configures:
- Build command:
next build - Output directory:
.next - Node.js version: 18
Click Deploy. Wait 60 seconds.
Your landing page is live at flowboard.vercel.app (or whatever name Vercel assigns).
Step 6: Connect Your Domain (2 minutes)
- In Vercel → Project Settings → Domains:
- Type your domain (e.g.,
flowboard.com) - Vercel shows DNS records to add
At your domain registrar:
A record: @ → 76.76.21.21 CNAME record: www → cname.vercel-dns.com
SSL certificate is automatic. Done.
Total Time: ~10 Minutes
| Step | Time |
|---|---|
| Open Bolt | 30 sec |
| Paste prompt | 1 min |
| Iterate design | 3 min |
| Export to GitHub | 1 min |
| Deploy to Vercel | 2 min |
| Connect domain | 2 min |
| Total | ~10 min |
What's Next
Your landing page is live. Now: