Build

Build

Tool Selection

Starting from scratch? → Lovable (fastest MVP) Existing codebase? → Claude Code (best context) Learning to code? → Replit (educational) Already code? → Cursor (power features)

See TOOLS.md for detailed comparison.

---

Build Workflow

- [ ] Start with spec (use scope skill)
- [ ] Give spec to AI tool
- [ ] Test happy path + edge cases
- [ ] Give specific feedback on issues
- [ ] Iterate (expect 2-4 rounds)
- [ ] Deploy when working

---

Giving AI Your Spec

Claude Code

Build this feature: [paste spec]

Codebase: React + TypeScript + Tailwind
Reference: src/components/Button.tsx for button patterns

Lovable

Build: [paste simplified spec focusing on outcome]
Make it look like Linear (minimal, clean)

Replit

Create: [paste spec emphasizing what user sees]
Use React. Keep simple.

See PROMPTS.md for patterns.

---

Build in Pieces, Not All at Once

The biggest mistake non-technical founders make: giving AI the entire spec and hoping it comes back perfect. It won't. AI tools work best in focused chunks.

The Build Loop:

1. Pick ONE piece (a single feature or flow)
2. Give AI a clear spec for just that piece
3. Test it — does the piece work?
4. Fix any issues before moving on
5. Pick the next piece → repeat

Good pieces (1-3 hours each):

• User signup and login
• Dashboard showing key metrics
• Settings page with profile editing
• One core workflow (e.g., "create an invoice")

Bad pieces (too big):

• "Build the whole app"
• "Build the dashboard with all integrations"
• "User management with roles, permissions, and team features"

Quality Gate Between Pieces

Before building the next feature, check: Does the previous feature still work? Can you sign up, do the core action, and see the result? AI tools sometimes break existing features while adding new ones. Catch that early.

When to Start a Fresh Session

Start a new chat/session with your AI tool when:

• AI has made 3+ attempts at the same fix without success — context is polluted
• You're seeing new bugs appear every time a bug is fixed
• The AI is going in circles (suggesting things it already tried)
• You want to add a new feature after finishing the current one

When starting fresh, give AI a clear description of: what exists, what works, and what you need next. Don't assume it remembers.

Things AI Won't Add Unless You Ask

AI-built projects routinely ship without these. Add them explicitly:

Ask Your AI Tool to Add:
- [ ] Error tracking (Sentry) — so you know when things break
- [ ] Analytics snippet (Plausible, PostHog, or GA4) — so you know who visits
- [ ] Proper 404 page — so broken links don't show a blank screen
- [ ] Proper 500 page — so server errors show a helpful message
- [ ] Favicon — so your browser tab has an icon, not a blank square
- [ ] Meta tags (title, description, OG image) — so links look good when shared
- [ ] Loading states — so users know something is happening

---

Reviewing What AI Built

Test, don't just run:

- [ ] Looks right?
- [ ] Happy path works?
- [ ] Edge cases work?
- [ ] Works on mobile?
- [ ] Error messages clear?

---

Giving Feedback

Bad: "This doesn't work" Good: "Clicking 'Save' does nothing. Expected: 'Saved!' message"

Template:

What I tried: [action]
Expected: [outcome]
Got: [what happened]

---

Iteration Expectations

Normal: 2-4 rounds per feature First build: AI builds from spec, you find 3-5 issues Second build: Fixes those, you find 1-2 more Third build: Final polish

Stop when:

• Happy path works
• Edge cases handled
• Mobile works
• No obvious bugs

Don't iterate for:

• Perfection
• Features beyond spec
• Premature optimization

---

Common Mistakes

---

Right-Sizing Work

Too big: "Build entire app" Too small: "Add one button" Right: "Build user auth flow" (1-3 hours)

Good chunks:

• User login/signup flow
• Dashboard with 4 metrics
• Settings page with profile editing

---

When Stuck

AI keeps breaking things: → Break into smaller piece, start fresh session

Can't figure out complex feature: → Ask: "What's simplest way?" Accept simpler solution

Each fix breaks something else: → Stop. Ask: "Better approach?" Consider starting over

---

Working with Existing Code

Add [feature] to existing project.

Stack: [React, Next.js, etc]
Patterns: Check src/components for examples
Style: Tailwind + custom design system
Follow existing code style

---

Prompting Patterns

Reference existing:

Build Settings page.
Reference Dashboard page layout.
Use same Card/Button components.

Provide examples:

Pricing page with 3 tiers.
Like Linear's pricing - clean, minimal.

Specify constraints:

Build profile page.
Must work offline.
Load under 2 seconds.
WCAG AA accessible.

See PROMPTS.md for more.

---

Review for Non-Technical Founders

Check:

• Does it match spec?
• Buttons work?
• Forms validate?
• Looks like design reference?
• Works on mobile?
• Error messages clear?

Don't check:

• Code cleanliness
• Optimization
• "Best practices"

AI handles code quality. You handle requirements.

---

Success Looks Like

✅ Features match specs ✅ 2-4 iterations (not 10+) ✅ Can explain what's wrong ✅ Building faster each week

Effective Prompting Patterns

Core Patterns

Pattern 1: Reference Existing

Build Settings page.
Reference Dashboard layout (src/pages/Dashboard.tsx).
Use same Card/Button components.

Pattern 2: Visual Reference

Pricing page with 3 tiers.
Like Linear's pricing - clean, minimal, centered.

Pattern 3: Constraint-Based

Build profile page.
Must: Work offline, load <2s, WCAG AA

Pattern 4: Step-by-Step

Password reset flow:
1. User clicks "Forgot Password"
2. Shows email input
3. User enters email → "Check email" message
4. User clicks email link → "Set New Password"
5. User enters password → "Updated! Redirecting..."

Edge cases:
- Email not found: "If email exists, we sent link"
- Link expired: "Link expired. Request new one"

---

Bug Fix Template

Issue with [feature].

Tried: [action]
Expected: [result]
Got: [what happened]
Error: [message if any]

---

Iteration Template

[Feature] works, but needs:
1. [Specific change]
2. [Specific change]

Current: [what it does]
Want: [what it should do]

---

Common Mistakes

Bad: "Make it better" Good: "Increase heading to 32px, add 24px margin below"

Bad: "Fix the button" Good: "Submit button on checkout does nothing when clicked. Should process payment."

Bad: "Add profile page and fix login and change colors" Good: "First fix login bug: [describe]. Then we'll do profile page."

---

Tool-Specific

Claude Code:

Add user search to dashboard.
Follow pattern in Projects search (src/features/projects/Search.tsx).
Use same SearchInput and debounce hook.

Lovable:

Landing page with:
- Hero + CTA
- 3 feature cards
- Pricing (3 tiers)
- Footer

Like Linear - modern, clean.

Replit:

Todo app: add, check, delete todos.
Store in localStorage.
React.

---

When to Stop Prompting

✅ Stop when:

• Feature works as specified
• Edge cases handled
• Performance acceptable

❌ Don't prompt for:

• <2px tweaks
• Premature optimization
• Features beyond spec

AI Coding Tools Comparison

Quick Decision

Starting from scratch? → Lovable Existing codebase? → Claude Code Learning to code? → Replit Already code? → Cursor

---

Tool Matrix

---

Key Differences

Claude Code

• Works with existing codebases
• Understands full project context
• Best for complex features
• Requires terminal comfort

Lovable

• Fastest MVP generation
• Handles full stack automatically
• Limited customization
• Platform lock-in

Replit

• Zero setup
• Educational focus
• Not for production
• Good for prototypes

Cursor

• Most powerful features
• Requires coding knowledge
• Full IDE capabilities
• Best for developers

---

Switching Tools

Lovable → Claude Code

When: MVP validated, need more control

Process: 1. Export code from Lovable 2. Set up local environment 3. Continue with Claude Code

Note: May need code cleanup

Replit → Claude Code

When: Prototype works, building production

Process: 1. Download code 2. Restructure for production 3. Add proper dependencies

---

Cost Planning

Bootstrap ($20-30/mo):

• Lovable Free + Claude Code ($20)

Professional ($70/mo):

• Lovable Pro ($30) + Claude Code ($20) + Cursor ($20)

Team ($140+/user):

• Lovable Team ($80) + Claude Code ($20) + Cursor Business ($40)

---

Tool-Specific Tips

Claude Code:

• Provide full context about patterns
• Reference specific files
• Use for debugging

Lovable:

• Detailed specs upfront
• Reference existing apps
• Don't fight its patterns

Replit:

• Keep projects simple
• Use for experimentation
• Don't deploy to production

Cursor:

• Learn keyboard shortcuts
• Use for complex refactoring
• Commit frequently