All chapters

AI-powered specifications

The specification is the single source of truth. It captures what to build, why, how it should look, and which commercial metrics it should move.

Traditional product management produces documents that get misinterpreted at every handoff. We produce visual, documented specifications that Claude Code can execute directly. The spec drives the build — not chat logs, not memory, not vibes.

The Objective

Get to a clickable, working prototype that demonstrates:

  • Core user flows
  • Business logic visible in the UI
  • Data model (even if hardcoded)
  • Interactions and edge cases

The prototype doesn't need:

  • Clean code
  • Scalable architecture
  • Production-ready security
  • Optimized performance

It just needs to show what the product is.

Techniques

1. Vibe Coding

Prompt-driven development with AI assistants (Cursor, Claude Code, Windsurf).

Example prompt:

Build a user dashboard for a property management app.
Show a list of properties with:
- Property name and address
- Number of units
- Current occupancy rate
- Monthly revenue
Add a filter by property type (residential/commercial).
Use Next.js, Tailwind, and shadcn/ui.

The AI generates a working component. You iterate by describing changes.

This is fast but messy. Code quality deteriorates with each iteration. That's fine for prototypes.

2. Application Cloning

Fork an existing open source SaaS that's close to what you need.

Good starting points:

Modify the clone to match your requirements. The foundation (auth, database, deployment) already works.

3. Design-to-Code Tools

Use v0.dev, Bolt.new, or similar tools to generate components from descriptions or screenshots.

When to use: When you know what it should look like but not how to code it.

When not to use: When you're still figuring out the UX. These tools are better for refinement than exploration.

4. Component Assembly

Combine existing shadcn/ui components with minimal custom code.

This is the fastest approach for standard CRUD interfaces. Most SaaS products are 80% CRUD.

The Workflow

Week 1: Build Fast

Days 1-4: Core Flows

Build the happy path for each core user flow. Don't handle errors yet. Don't validate inputs. Just show it working.

Example for a CRM:

  • Create contact
  • Log interaction
  • View contact history
  • Create deal

Use hardcoded data. The prototype database doesn't need to be real.

Day 5: Edge Cases

Add the scenarios that break:

  • Empty states
  • Loading states
  • Error states
  • Validation failures

These aren't nice-to-haves. They reveal requirements.

Week 2: Iterate and Freeze

Days 6-8: Stakeholder Review

Show the prototype to stakeholders (client, co-founder, target users).

Watch them use it. Don't explain. Just watch. Where do they get confused? What do they expect that isn't there?

Day 9-10: Final Iteration

Make one round of changes based on feedback. No more.

Prototype Freeze

Declare the prototype complete. Commit it. Tag the version. No more changes.

This is hard. You'll want to keep tweaking. Don't. The prototype's job is done.

Code Quality: Prototype vs Production

Prototype Code
// Prototype: Works, but not maintainable
export default function PropertyDashboard() {
const [properties, setProperties] = useState([
  { id: 1, name: "Oak Street Apartments", units: 12, occupancy: 0.92 },
  { id: 2, name: "Pine Commercial", units: 8, occupancy: 0.75 }
])

return (
  <div className="p-8">
    <h1 className="text-2xl font-bold">Properties</h1>
    {properties.map(p => (
      <div key={p.id} className="border p-4 mt-4">
        <h2>{p.name}</h2>
        <p>{p.units} units - {(p.occupancy * 100).toFixed(0)}% occupied</p>
      </div>
    ))}
  </div>
)
}

The prototype gets you answers fast. Production gets you code that lasts.

Tools

  • Cursor - AI-powered IDE, best for iterative vibe coding
  • Claude Code - Autonomous coding agent, good for component generation
  • v0.dev - Vercel's design-to-code tool
  • Bolt.new - Full-stack prototyping in the browser
  • Next.js + Tailwind + shadcn/ui - Our default prototype stack

Common Mistakes

Mistake 1: Making prototype code production-ready

You'll be tempted to clean up the code. Don't. The prototype will be thrown away. Clean code is wasted effort.

Mistake 2: Skipping the freeze

Without a freeze, the prototype never ends. Stakeholders will keep requesting changes. You'll never get to production.

The freeze is uncomfortable but necessary.

Mistake 3: Building the whole product

The prototype should demonstrate core flows, not every feature. Build the minimum to validate the concept.

If your prototype takes more than 2 weeks, you're building too much.

When to Skip Prototyping

You can skip the prototype phase if:

  • You're rebuilding an existing product with a clear spec
  • The product is a straightforward CRUD app with no novel UX
  • You have very detailed requirements from another source

For everything else: prototype first.

Output

At the end of this phase you have:

  • A frozen, clickable prototype
  • Documented edge cases and validation rules
  • Stakeholder buy-in on what's being built

Now you're ready to build production.

Previous
AI-powered discovery
Next
AI-powered production