Course Home / Module 2: Vibe Coding

2.2: Plan

25 min
Interactive: start 2-2

Why Plan First?

Requirements are a description of what you’re building before you build it.

Planning reduces surprises. The more specific you are upfront, the closer Claude gets to what you want on the first try.

Think of requirements as a contract between you and Claude—clear expectations for both sides.

What Goes in a Requirements Doc

1. Project Overview

What is this thing? Who is it for?

## Overview

A personality quiz that tells users what type of remote worker they are.
Target audience: People considering remote work for the first time.

2. Core Features

What must it do?

## Features

- 10 multiple-choice questions
- 4 possible personality results
- Shareable results page
- Works on mobile and desktop

3. Logic Rules

How does it behave?

## Logic

Each answer adds points to different personality types:
- Answer A: +2 to "Digital Nomad"
- Answer B: +2 to "Home Office Pro"
- Answer C: +2 to "Hybrid Worker"
- Answer D: +2 to "Coffee Shop Regular"

Highest score determines the result.

4. Visual Style

What should it look like?

## Style

- Clean, minimal design
- Blue and white color scheme
- Friendly, conversational tone
- Large, easy-to-tap buttons on mobile

Understanding Software Logic

Logic is the behavioral rules that govern your app. Think of it as “if this, then that”:

  • If the user clicks “Start Quiz” → show the first question
  • If the user selects an answer → move to the next question
  • If all questions answered → calculate and show results

You don’t write the code—you describe the behavior you want.

Recommendation Engines

Your personality quiz is a recommendation engine. These follow a simple pattern:

  1. Collect inputs – User answers questions
  2. Apply scoring – Each answer affects outcome weights
  3. Display result – Highest-scoring outcome wins
User Answers → Scoring System → Result

Visual Previews

Visual mockups communicate better than descriptions.

UI Mockup Example

Instead of describing what you want, Claude can create quick visual previews in your browser:

Create an HTML mockup of the quiz start screen

This lets you see and react to designs before building the full app.

The REQUIREMENTS.md File

All your planning goes into a file called REQUIREMENTS.md:

# Quiz App Requirements

## Overview
[What it is, who it's for]

## Features
[What it must do]

## Logic
[How it behaves]

## Style
[What it looks like]

## Content
[Questions, answers, results text]

This file becomes Claude’s specification for building your app.

Tips for Good Requirements

Be specific

# Vague
Make it look nice

# Specific
Use a blue (#4F46E5) primary color with white backgrounds
and 8px rounded corners on all buttons

Describe behavior, not implementation

# Good
When the user finishes, show their result with a "Share" button

# Too technical (let Claude figure this out)
Use React state to track answers and render a ResultComponent

Include edge cases

What if two personality types tie?
→ Show the first one alphabetically

Starting the Planning Process

Run the interactive lesson:

start 2-2

Claude will interview you to create your REQUIREMENTS.md.

Next up: Build your app and iterate with visual feedback.