Chapter 2: The Prompt Formulas That Actually Work

Why Most Prompts Fail

Here’s what happens when you’re not specific enough:

You: “Make me a website for my cleaning business” AI: generates a generic template with placeholder text, wrong colors, and features you don’t need

You: “No, not like that. Make it look more professional” AI: makes different but still wrong changes

This back-and-forth wastes time. Not because the AI is bad, but because “professional” means nothing without context. One person’s professional is another person’s boring.

The solution isn’t longer prompts. It’s structured prompts that give the AI exactly what it needs to understand your vision.

The Core Prompt Formula

Every effective prompt has these five elements:

1. Context: What you’re building and why
2. Specific Requirements: Exact features, content, or functionality
3. Constraints: What to avoid or limitations to work within
4. Style/Aesthetic: Visual direction or references
5. Format: How you want the output delivered

Let’s break down each element with real examples from my projects.

Element 1: Context (The “Why”)

The AI makes better decisions when it understands the purpose. Compare:

Bad: “Make a header”

Good: “I’m building a website for a local house cleaning service. The header should help potential customers quickly understand what we do and how to contact us.”

The second version tells the AI this is for local service business, which changes everything about the design choices it’ll make.

The Context Formula:

I'm building [type of project] for [target audience].
The purpose is [main goal].
Users will primarily [main action they'll take].

Real Example from My Cleaning Business Site:

I'm building a website for a local house cleaning service in North Carolina.
The purpose is to get homeowners to book a free quote.
Users will primarily view our services and submit the contact form.

This context made the AI prioritize the contact form, keep the design simple, and focus on trust signals (reviews, local presence).

Element 2: Specific Requirements (The “What”)

Vague requirements get vague results. Be unnervingly specific.

Bad: “Add a contact form”

Good:

Create a contact form with these exact fields:
- Name (text input, required)
- Email (email input, required)
- Phone (text input, optional)
- Service Type (dropdown with options: Regular Cleaning, Deep Cleaning, Move-out Cleaning)
- Message (text area, optional)
- Submit button with text "Get Free Quote"

Notice: I specified input types, which are required/optional, exact dropdown options, and even the button text.

The Requirements Formula:

I need [specific component/feature] that includes:
- [Requirement 1 with details]
- [Requirement 2 with details]
- [Requirement 3 with details]

It should [specific behavior or functionality].

Real Example from My Directory Site:

I need a filter system that includes:
- Style filter (dropdown: Minimalist, Colorful, Dark, Playful)
- Industry filter (checkboxes: SaaS, E-commerce, Healthcare, Finance)
- Location filter (text input with autocomplete)
- "Clear Filters" button

It should filter results in real-time as users select options,
showing a count of filtered results.

This got me exactly what I wanted on the first try.

Element 3: Constraints (The “What Not”)

Telling the AI what to avoid is as important as what to include.

Bad: “Make it look good”

Good:

Design constraints:
- No carousels/sliders (they perform poorly)
- No auto-playing videos
- No more than 2 fonts
- Avoid bright red (client preference)
- Must work on IE11 (corporate client requirement)

The Constraints Formula:

Avoid:
- [Technical limitation or requirement]
- [Design preference to avoid]
- [Performance concern]
- [Accessibility requirement]

Must support:
- [Browser/device requirement]
- [Specific user need]

Real Example from My Pomodoro Timer:

Constraints:
- No external dependencies (should work offline)
- No user accounts for MVP
- File size under 100KB total
- Must work without JavaScript for timer display
- No notification sounds (users want silent option)

Must support:
- Mobile browsers (portrait and landscape)
- Keyboard shortcuts for all actions

These constraints shaped the entire architecture and saved me from overbuilding.

Element 4: Style/Aesthetic (The “How It Looks”)

“Modern” and “clean” mean nothing. Show don’t tell.

Bad: “Make it look modern and professional”

Good:

Style direction:
- Similar to: stripe.com (clean, minimal, lots of whitespace)
- Color scheme: Navy blue primary (#1e40af), white, gray accents
- Typography: Sans-serif, large headings (48px+), generous line height (1.6)
- Mood: Trustworthy but approachable, not corporate stuffy
- Reference: [URL or screenshot]

The Style Formula:

Visual style:
- Reference site/example: [URL or description]
- Color palette: [specific colors with hex codes if possible]
- Typography: [font style and sizing guidance]
- Mood/feeling: [emotional direction]
- Key visual elements: [specific design elements you want]

Real Example from Cleaning Business Site:

Visual style:
- Reference: thumbtack.com service pages (trust-focused, clear CTAs)
- Colors:
  - Primary: Forest green (#059669) - represents cleanliness
  - Secondary: Light blue (#0ea5e9) - calming
  - Backgrounds: Off-white (#fafafa)
- Typography: Friendly sans-serif, nothing too corporate
- Mood: Reliable and personal, like a neighbor you trust
- Key elements: Real photos (not stock), customer reviews prominently displayed

This gave me a design that felt local and trustworthy, not generic corporate.

Element 5: Format (The “How to Deliver”)

Tell the AI exactly how you want the code or output structured.

Bad: “Build this”

Good:

Output format:
- Single HTML file with inline CSS
- Commented code explaining key sections
- Mobile-responsive (breakpoint at 768px)
- Include placeholder images with size specifications
- Provide color variables at top of CSS

The Format Formula:

Deliver as:
- [File structure preference]
- [Code organization/commenting]
- [Responsive requirements]
- [Asset handling]
- [Any special formatting needs]

Real Example from Directory Site:

Output format:
- React component with TypeScript
- Separate file for filter logic
- Props clearly documented with TypeScript interfaces
- Include sample data structure in comments
- Use Tailwind for styling (no custom CSS)
- Export both component and types

This made the code immediately usable in my project without refactoring.

The Complete Formula in Action

Here’s a full prompt using all five elements, from my actual Pomodoro timer project:

CONTEXT:
I'm building a Pomodoro timer web app for developers and students.
Purpose: Help users focus with timed work sessions.
Users will primarily start timers, take breaks, and track completed sessions.

REQUIREMENTS:
Create a timer interface that includes:
- Large display showing minutes:seconds (25:00 default)
- Start/Pause button (toggles between states)
- Reset button (returns to 25:00)
- Session counter (shows completed pomodoros)
- Settings panel with:
  - Work duration (default 25 min, adjustable 15-60)
  - Short break duration (default 5 min, adjustable 3-15)
  - Long break duration (default 15 min, adjustable 10-30)
  - Long break interval (every 4 pomodoros)

Behavior:
- Timer automatically starts break after work session
- Notification when timer completes (browser notification API)
- Timer continues in background/different tab
- Keyboard shortcuts: Space (start/pause), R (reset)

CONSTRAINTS:
- No external dependencies (must work offline)
- No user accounts for MVP
- Total file size under 100KB
- Works without JavaScript (shows static 25:00)
- No audio alerts (only visual + browser notification)
- Must persist settings in localStorage

Must support:
- All modern browsers (Chrome, Firefox, Safari, Edge)
- Mobile responsive (portrait and landscape)
- Works offline as PWA

STYLE:
Visual direction:
- Reference: pomofocus.io (minimal, distraction-free)
- Colors:
  - Work mode: Warm red (#dc2626)
  - Short break: Teal (#0d9488)
  - Long break: Blue (#2563eb)
  - Background: Dark gray (#1f2937)
  - Text: White with good contrast
- Typography: Large, clear numbers for timer (72px+), simple sans-serif
- Mood: Calm, focused, no distractions
- Key elements: Big prominent timer, minimal chrome, centered layout

FORMAT:
Deliver as:
- Single HTML file with inline CSS and JavaScript
- Commented sections for timer logic, settings, notifications
- CSS variables for colors at top
- Mobile breakpoint at 640px
- Include manifest.json stub for PWA
- Document keyboard shortcuts in comments

Result: I got a working Pomodoro timer in one shot that needed only minor color tweaks. Everything else was exactly right.

The Iteration Formula

When the first result isn’t quite right:

Bad: “That’s not what I wanted”

Good:

This is close, but I need these specific changes:

Change 1: [exactly what's wrong and what you want instead]
Change 2: [exactly what's wrong and what you want instead]

Keep everything else the same.

Real Example:

This is close, but I need these changes:

1. The timer display is too small on mobile.
   Make it 64px font size on screens under 640px.

2. The settings panel should be hidden by default.
   Add a settings icon (gear) in top right that shows/hides the panel.

3. The break timer colors are too similar.
   Make short break #14b8a6 (brighter teal) and long break #3b82f6 (brighter blue).

Keep the layout, keyboard shortcuts, and notification behavior the same.

Being specific about what to change AND what to keep prevents the AI from “fixing” things that weren’t broken.

The “Show Me How” Formula

When you want to learn, not just get code:

Bad: “How do I make this work?”

Good:

I want to understand [specific concept/implementation].

Can you:
1. Explain the approach in plain language first
2. Show me the code with comments
3. Point out the key lines that make it work
4. Suggest what I might want to customize

Assume I'm a beginner but don't oversimplify the explanation.

Real Example:

I want to understand how the timer continues running when I switch tabs.

Can you:
1. Explain the browser behavior in plain language
2. Show me the code that handles background timing
3. Point out why setInterval vs requestAnimationFrame matters here
4. Suggest what I might customize (update frequency, pause on tab switch, etc.)

I know basic JavaScript but haven't worked with browser APIs much.

This gets you both the solution AND the understanding.

The Debugging Formula

When something breaks:

Bad: “It doesn’t work”

Good:

I'm experiencing this problem:
[Exact description of what's not working]

Expected behavior:
[What should happen]

Actual behavior:
[What is happening instead]

What I've tried:
[List any solutions you attempted]

Environment:
- Browser: [Chrome/Firefox/etc.]
- Device: [Desktop/Mobile]
- Error messages: [Paste any console errors]

Real Example:

I'm experiencing this problem:
The timer stops counting when I switch to another browser tab.

Expected behavior:
Timer should continue running in the background and show correct time when I return.

Actual behavior:
Timer pauses when tab is inactive, resumes when I come back, but the elapsed time is lost.

What I've tried:
- Switched from setInterval to requestAnimationFrame (made it worse)
- Added visibility change listener (didn't help)

Environment:
- Browser: Chrome 120 on Mac
- Device: Desktop
- Error messages: None in console

Can you explain why this happens and provide a solution?

This usually gets the fix in one response.

The Formula Variations by Task Type

For Building New Features:

Focus on: Context + Requirements + Format

For Design/Layout:

Focus on: Style + Requirements + Constraints

For Debugging:

Focus on: Specific problem + Expected vs. Actual + Environment

For Learning:

Focus on: Concept explanation + Example code + Customization options

For Optimization:

Focus on: Current performance + Bottleneck + Acceptable tradeoffs

Common Formula Mistakes

Mistake 1: Too Much Background

• Don’t: Write your life story and business plan
• Do: Provide just enough context for the AI to make good decisions

Mistake 2: Vague Requirements

• Don’t: “Make it user-friendly”
• Do: “Add loading state, error messages, and confirmation feedback”

Mistake 3: No Examples

• Don’t: “Modern design”
• Do: “Similar to [specific site], with [specific elements]”

Mistake 4: Everything at Once

• Don’t: Try to build the entire app in one prompt
• Do: Break it into logical components, one prompt per component

Mistake 5: Not Specifying Format

• Don’t: Assume the AI knows your project structure
• Do: Tell it exactly how to structure the output for your needs

The Prompt Template Library

Here are starting templates for common scenarios:

Building a Landing Page

CONTEXT:
Building a landing page for [product/service] targeting [audience].
Goal: Get visitors to [primary CTA].

REQUIREMENTS:
- Hero section with [headline + subheadline + CTA]
- Features section showing [3-5 key features]
- Social proof section with [testimonials/logos/stats]
- Final CTA section with [form/button]

STYLE:
Reference: [URL]
Colors: [palette]
Mood: [adjective + adjective]

FORMAT:
Single HTML file, mobile-responsive, commented sections.

Building a Form

CONTEXT:
[What the form is for and who uses it]

REQUIREMENTS:
Fields:
- [Field name] ([type], [required/optional])
- [Field name] ([type], [required/optional])
Submit button text: "[text]"
Success message: "[message]"
Error handling: [how to show errors]

CONSTRAINTS:
- Validate before submission
- Prevent double-submission
- Accessible (ARIA labels, keyboard navigation)

FORMAT:
[Framework/vanilla JS], [styling approach]

Building Interactive Component

CONTEXT:
Component purpose: [what it does]
User interaction: [what users do with it]

REQUIREMENTS:
States needed:
- [State 1]: [when/why]
- [State 2]: [when/why]

Interactions:
- [Action]: [result]
- [Action]: [result]

CONSTRAINTS:
- Mobile touch-friendly
- Keyboard accessible
- Works without JavaScript (fallback)

STYLE:
Visual behavior: [animations, transitions, feedback]

FORMAT:
[Structure preference, commenting needs]

What This Chapter Gives You

You now have:

• The five-element formula for effective prompts
• Real examples from actual projects
• Template variations for different tasks
• Common mistakes to avoid
• A prompt template library to start from

Effective prompts aren’t longer—they’re more structured. The formula gives the AI exactly what it needs while keeping you from over-explaining.

Next up: Chapter 3 covers the specific prompt patterns for the most common stuck moments, organized by what you’re trying to accomplish.