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.

---

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