Chapter 3: Project Playbooks - Complete Build Sequences

Why You Need Playbooks

Building with AI isn’t one prompt. It’s a sequence of prompts, in the right order, each building on the last.

When I built my cleaning business site, I made every mistake: jumped straight to design without structure, asked for features before defining data, debugged styling before functionality worked. I was three days in before realizing I’d built in the wrong order.

Then I tried again with a sequence: structure first, functionality second, styling third. Built the same site in one day.

This chapter gives you those sequences—playbooks for the most common project types. Not as rules, but as proven paths that work.

The Universal Build Sequence

Regardless of project type, this order works:

Structure (What goes where)
Content (Actual text and data)
Functionality (Making things work)
Styling (Making it look good)
Responsive (Making it work on all devices)
Polish (Transitions, loading states, final touches)

Most builders do it backwards: they start with “make it pretty” then can’t figure out why functionality is hard to add. Structure first, pretty last.

Playbook 1: The Landing Page (For Products/Services)

What This Is: Single-page site promoting one thing, driving to one action.

My Example: The cleaning business site—promote the service, get contact form submissions.

Prompt Sequence:

Step 1: Define Structure

I'm building a landing page for [your product/service].

Create a sitemap showing:
- What sections appear (hero, features, testimonials, etc.)
- What each section contains
- The user flow from arrival to conversion

Target action: [what you want visitors to do]
Target audience: [who this is for]

Step 2: Content Framework

For my landing page structure, provide content templates for:

Hero section:
- Headline formula (value proposition)
- Subheadline formula (who it's for/why it matters)
- CTA button text options

Features section:
- How many features to show
- Structure for each feature (icon + title + description)

Social proof section:
- Testimonial format
- Where to place trust signals

Provide 3 variations I can choose from.

Step 3: Build Structure

Build the HTML structure for my landing page with these sections:
[List sections from step 1]

Requirements:
- Semantic HTML (header, main, section, footer)
- Placeholder content with clear labels
- No styling yet (just structure)
- Commented section dividers
- Responsive meta tags

Deliver as single HTML file.

Step 4: Add Functionality

Add functionality to the contact form:

Form fields:
[List your fields from requirements]

Behavior:
- Validate [specific fields] before submission
- Show loading state during submission
- Handle success: [what happens]
- Handle errors: [what happens]

Submit to: [email/API endpoint/etc.]

Provide JavaScript with error handling.

Step 5: Apply Styling

Style the landing page with this aesthetic:

Reference: [URL or description]
Color palette: [your colors]
Typography: [font choices and sizes]

Specific styling:
- Hero: [full-screen/large, background image/color]
- Features: [card layout/list, icons/no icons]
- CTA buttons: [prominent/subtle, shape, hover effect]

Make it look like [reference] but with [your colors/branding].

Provide complete CSS.

Step 6: Make Responsive

Make the landing page mobile-responsive:

Breakpoints:
- Mobile: < 640px
- Tablet: 640px - 1024px  
- Desktop: > 1024px

Specific adaptations:
- Hero: [how it changes on mobile]
- Features: [3 columns → 1 column on mobile]
- Navigation: [full menu → hamburger on mobile]
- Typography: [size adjustments]

Test at each breakpoint and provide media queries.

Step 7: Polish

Add polish to the landing page:

- Smooth scroll to sections when clicking nav links
- Fade-in animation when sections enter viewport
- Loading state on form submission
- Success message after form submits
- Optimize images (lazy loading, compression)

Keep animations subtle and professional.

Time Estimate: 4-6 hours for someone new to this process.

Real Result from My Site: Following this sequence, I went from zero to deployed landing page in one day. The structure-first approach meant I never had to backtrack.

Playbook 2: The Directory/Listing Site

What This Is: Site displaying many items (products, profiles, locations) with search/filter.

My Example: The designer directory—showing 500+ designer profiles with filtering.

Prompt Sequence:

Step 1: Data Model

I'm building a directory of [items you're listing].

Define the data model for each item:

Required fields:
- [Field name]: [type, example value]
- [Field name]: [type, example value]

Optional fields:
- [Field name]: [type, example value]

How users will filter:
- By [attribute]
- By [attribute]

Provide:
1. JSON structure for one item
2. Recommended data storage (JSON file, API, database)
3. How many items before I need a real database

Step 2: Display Component

Create a card component to display each [item type].

Each card shows:
- [Field 1 - e.g., image]
- [Field 2 - e.g., title]  
- [Field 3 - e.g., description]
- [Action - e.g., "View Details" link]

Card style:
- Size: [dimensions or "fill grid cell"]
- Hover effect: [lift/border change/etc.]
- Layout: [image top/left, text layout]

Provide component code that accepts item data as props/parameters.

Step 3: Grid Layout

Display the cards in a responsive grid:

Desktop: [number] columns
Tablet: [number] columns  
Mobile: [number] columns

Grid specifications:
- Gap between cards: [size]
- Container max-width: [size]
- Cards should be equal height

Provide CSS Grid or Flexbox solution with responsive breakpoints.

Step 4: Filter System

Build filter controls for:

[Filter 1]: [type - dropdown/checkboxes/search]
- Options: [list options]

[Filter 2]: [type]
- Options: [list options]

[Filter 3]: [type]
- Behavior: [e.g., autocomplete, multi-select]

Functionality:
- Filters work together (AND logic)
- Results update in real-time
- Show count of filtered results
- "Clear all filters" button
- Show "no results" state

Provide filtering logic that works with my data structure.

Step 5: Search Functionality

Add search that:

Searches in these fields:
- [Field 1]
- [Field 2]

Behavior:
- Search as user types (debounced by 300ms)
- Case-insensitive matching
- Highlights search terms in results (optional)
- Works together with filters
- Shows "no results" state

Provide search function and UI component.

Step 6: Pagination or Infinite Scroll

Display [items per page/load].

Implement [pagination/infinite scroll]:

Pagination option:
- Show page numbers
- Previous/Next buttons
- Jump to page functionality
- Maintain filters when changing pages

Infinite scroll option:
- Load more on scroll to bottom
- Show loading indicator
- Stop when all items shown

Provide implementation with my existing filter/search.

Step 7: Detail View

Create a detail page/modal for individual items showing:

- All item information (not just card preview)
- [Specific additional fields not shown in card]
- [Call to action - contact, purchase, etc.]
- Back/close navigation

Style consistently with card design.
Provide routing logic or modal implementation.

Time Estimate: 2-3 days for full implementation with 50-100 items.

Real Result: My directory started with 50 designers in a JSON file. Using this sequence, I had a working filter-able directory in two days. Later scaled to 500+ with database migration.

Playbook 3: The Dashboard/Admin Tool

What This Is: Interface for managing data, viewing metrics, admin tasks.

My Example: The admin dashboard for my directory (adding/editing designers).

Prompt Sequence:

Step 1: Define Admin Actions

I need an admin dashboard to manage [what you're managing].

Admin needs to:
- [Action 1 - e.g., view all items in table]
- [Action 2 - e.g., add new item]
- [Action 3 - e.g., edit existing item]
- [Action 4 - e.g., delete item]
- [Action 5 - e.g., view statistics]

For each action, specify:
- What data is shown/modified
- What inputs are needed
- What validation is required

Step 2: Table View

Create a data table showing all [items]:

Columns to display:
- [Column 1]
- [Column 2]
- [Column 3]
- Actions column (edit/delete buttons)

Features:
- Sort by any column
- Search across [specific columns]
- Pagination ([items per page])
- Select multiple items for bulk actions
- Responsive (mobile shows fewer columns)

Provide table component that works with my data.

Step 3: Create/Edit Form

Build a form for adding/editing [items]:

Fields:
- [Field 1]: [input type, validation]
- [Field 2]: [input type, validation]
- [Field 3]: [input type, validation]

Features:
- Pre-populate for editing
- Show validation errors inline
- Save/Cancel buttons
- Auto-save draft (optional)
- Image upload if needed

Provide form component with validation logic.

Step 4: Authentication

Protect admin dashboard with authentication:

Requirements:
- Only [your email/specific users] can access
- Login page before dashboard
- Stay logged in between sessions
- Logout functionality

Recommend:
- Simplest auth service for my needs
- Implementation steps
- How to protect admin routes

I want: simple, secure, minimal setup.

Step 5: CRUD Operations

Implement data operations:

Create:
- Validate new item data
- Add to [database/file]
- Show success confirmation
- Clear form after success

Read:
- Fetch all items for table
- Fetch single item for editing
- Handle loading states

Update:
- Save modified item data
- Optimistic UI update
- Handle save errors

Delete:
- Confirm before deleting
- Remove from data source
- Update UI after deletion

Provide functions for each operation.

Step 6: Dashboard Metrics

Add metrics dashboard showing:

Key metrics:
- [Metric 1 - e.g., total items]
- [Metric 2 - e.g., items added this month]
- [Metric 3 - e.g., most popular category]

Display as:
- Cards with large numbers
- Simple bar/line charts
- Date range filter (optional)

Keep visualizations simple and fast.
Provide metrics calculation and display components.

Step 7: Layout and Navigation

Create admin layout with:

Sidebar navigation:
- [Section 1 - e.g., Dashboard]
- [Section 2 - e.g., Items]
- [Section 3 - e.g., Settings]
- Logout link

Top bar:
- Current page title
- User info/avatar
- Quick actions (optional)

Layout should:
- Sidebar collapses on mobile
- Be clean and functional
- Highlight current section

Provide layout component with routing.

Time Estimate: 3-5 days depending on data complexity.

Real Result: Built a complete admin dashboard for my directory using Retool in 4 hours. But first attempt with custom code took 3 days. Sometimes no-code tools are the right answer.

Playbook 4: The Interactive Web App

What This Is: Single-purpose tool users interact with (calculators, timers, converters).

My Example: The Pomodoro timer—focused work sessions with breaks.

Prompt Sequence:

Step 1: Core Logic First

I'm building [app name] that does [main function].

Define the core logic:

State that needs tracking:
- [State 1 - e.g., current time]
- [State 2 - e.g., is running]
- [State 3 - e.g., session count]

Key functions:
- [Function 1 - e.g., start timer]
- [Function 2 - e.g., pause timer]
- [Function 3 - e.g., reset timer]

Edge cases to handle:
- [Case 1 - e.g., what if tab switches]
- [Case 2 - e.g., what if user closes browser]

Provide pseudocode or plain language logic first.

Step 2: UI State Management

Implement state management for:

State values:
- [List all state from step 1]

State updates:
- When [action], update [state] to [value]
- When [action], update [state] to [value]

State persistence:
- Store [which state] in localStorage
- Restore on page load
- Clear when [condition]

Use [framework/vanilla JS].
Provide state management code with comments.

Step 3: Interface Components

Build interface components:

Main display:
- Shows [primary information]
- Size: [large/prominent]
- Updates every [interval]

Controls:
- [Button 1]: [action and appearance]
- [Button 2]: [action and appearance]
- [Control 3]: [type and behavior]

Settings panel:
- [Setting 1]: [input type, range]
- [Setting 2]: [input type, options]
- Toggle to show/hide

Visual feedback:
- [Action] shows [feedback]
- [State change] triggers [visual update]

Provide component code connected to state.

Step 4: User Interactions

Implement interactions:

Click/tap actions:
- [Element]: [what happens]
- [Element]: [what happens]

Keyboard shortcuts:
- [Key/combo]: [action]
- [Key/combo]: [action]

Drag/swipe (if applicable):
- [Gesture]: [result]

Interactions should:
- Provide immediate feedback
- Be accessible (keyboard + mouse)
- Work on touch devices
- Show disabled states when appropriate

Provide event handlers and accessibility attributes.

Step 5: Background Behavior

Handle background operation:

App should:
- Continue [main function] when tab inactive
- Show correct state when returning to tab
- [Notify/don't notify] when complete
- Persist [what data] between sessions

Specific requirements:
- Works if browser minimized: [yes/no and how]
- Works if device sleeps: [yes/no and how]  
- Recovers if connection lost: [yes/no and how]

Provide background handling code with fallbacks.

Step 6: Visual Polish

Add polish to interface:

Transitions:
- State changes animate smoothly
- Button presses show feedback
- Panel open/close is animated

Visual states:
- [State 1]: [color/appearance]
- [State 2]: [color/appearance]
- Transitions between states: [timing]

Micro-interactions:
- [Action] triggers [subtle animation]
- [Action] provides [haptic feedback on mobile]

Keep animations performant (60fps).
Use CSS transforms and transitions.

Step 7: Progressive Enhancement

Make app work everywhere:

Core functionality without JavaScript:
- Shows [what] if JS disabled
- Provides [fallback behavior]

Offline capability:
- Cache necessary assets
- Works without internet: [yes/no]
- Service worker setup: [yes/no]

Browser support:
- Must work: [list browsers]
- Nice to have: [list browsers]
- Polyfills needed: [list if any]

Provide progressive enhancement layer.

Time Estimate: 2-4 days for a focused single-purpose app.

Real Result: Pomodoro timer took 3 days following this sequence. Core logic first meant UI work was just connecting buttons to working functions.

The Common Prompt Mistakes in Sequences

Mistake 1: Skipping Structure

Don’t: “Build a dashboard” (too vague)
Do: Step 1 structure, Step 2 components, Step 3 connections

Mistake 2: Styling Too Early

Don’t: Make it pretty before it works
Do: Function first, form later

Mistake 3: Everything at Once

Don’t: “Build steps 1-7 in one go”
Do: One step at a time, verify it works, then next

Mistake 4: Not Testing Between Steps

Don’t: Generate all code then test
Do: Test after each step, fix before continuing

Mistake 5: Ignoring Mobile Until End

Don’t: Build for desktop, retrofit for mobile
Do: Consider responsive at structure stage

How to Use These Playbooks

Choose the playbook that matches your project type
Customize the prompts with your specific requirements
Follow the sequence in order—don’t skip ahead
Test after each step before moving to the next
Adjust as needed but keep the general order

These aren’t rigid rules. They’re proven paths. Deviate when you have a good reason, but return to the structure when you get stuck.

What This Chapter Gives You

You now have:

Four complete build sequences for common project types
Prompt-by-prompt instructions for each phase
Time estimates to set realistic expectations
Common mistakes to avoid
Real examples from actual projects

Building complex things becomes manageable when you break them into the right sequence. These playbooks are that sequence.

Next up: Chapter 4 covers the specific moments you get stuck—the prompts for “how do I…?” situations that aren’t full projects.