Intermediate 12 min

Research & Planning

The biggest mistake beginners make is not writing bad descriptions — it is skipping the planning step entirely. They jump straight to "build me a website" without knowing what should actually be on it. Then they spend hours iterating on something that was missing half its content from the start.

Professional vibe coders follow a different pattern. They research first, plan second, and build third. That sequence is the difference between a site you are proud of and a site you keep tearing down and rebuilding.

The Research-Plan-Build Workflow

Think of every project as three distinct phases. Each one feeds the next, and skipping any of them costs you time later.

1

Research

Gather facts, study examples, learn best practices for your type of site

2

Plan / Brief

Write down what to build — pages, sections, design direction, must-haves

3

Build

Now build it with a clear blueprint — every section accounted for

Without research, you are guessing at what content belongs on the site. Without a brief, you are asking Claude to guess too. With both, you give Claude a precise target — and precise targets produce precise results.

Using Claude as a Research Partner

Before you write a single line of HTML, use Claude to learn what makes a great version of whatever you are building. This works for any type of site — restaurant, gym, portfolio, nonprofit, SaaS. Start by asking what the best ones have in common.

Terminal — Claude Code
you: Research the best practices for coffee shop websites. What sections do successful ones include? What information do customers look for first?
 
claude: Based on analyzing successful coffee shop websites, here are the key findings:
 
Must-have sections:
• Hero with hours + location (the #1 thing customers look for)
• Menu with prices and dietary info
• About / origin story (builds connection)
• Reviews or testimonials
• Instagram feed or photo gallery
• Contact info with embedded map
 
What the best ones do differently:
• Photography-heavy — real photos, not stock
• Mobile-first design (70%+ traffic is mobile)
• Online ordering CTA prominently placed
• Warm, inviting color palettes (earth tones, cream, sage)

Now you know what belongs on the site. But you can go deeper. Ask Claude to study specific competitors and tell you what works.

Terminal — Claude Code
you: Look at 5 popular coffee shop websites and tell me what they have in common and what makes the best ones stand out.
 
claude: I looked at Blue Bottle, Stumptown, Intelligentsia, Counter Culture, and Verve.
 
Common patterns:
• Full-width hero images showing the cafe interior or latte art
• Minimal navigation — 3 to 5 top-level links max
• Story-driven About pages (sourcing, roasting, founders)
• Shop/order button always visible in the header
 
What makes the best stand out:
• Verve: bold typography + lifestyle photography = premium feel
• Blue Bottle: extreme minimalism, whitespace as a feature
• Stumptown: personality in the copywriting, feels human

In five minutes, you have more clarity about what to build than most people get after hours of staring at a blank screen. That is the power of research-first.

Writing a Brief

A brief is your blueprint. It is a short document that describes exactly what you are going to build — page by page, section by section. It captures your research findings and turns them into a build plan.

Here is what a brief looks like for our coffee shop project:

brief.md
# Brief — Brew & Bean Coffee Shop

## Pages
1. Home — Hero with tagline + hours, featured drinks
   (3 cards), testimonial, Instagram grid
2. Menu — Full drink menu organized by category,
   prices, dietary icons
3. About — Origin story, team photos, sourcing
   philosophy

## Design Direction
- Warm, inviting — cream + espresso + sage
- Photography-heavy — real photos, not stock
- Mobile-first — most customers on phones

## Must Include
- Address and Google Maps embed
- Hours of operation (prominent)
- Online ordering link (CTA button)

## Don't Include
- Pop-ups or modals
- Auto-playing video
- Generic stock photos

Notice the structure. The brief answers four questions:

  • What pages? — The sitemap, with sections listed for each
  • What feel? — Colors, mood, and design direction
  • What must be there? — Non-negotiable features and content
  • What should not be there? — Things to explicitly avoid

You can write the brief yourself, or ask Claude to draft one from your research. Either way, having it written down before you start building changes everything.

From Brief to Build

With research done and a brief in hand, your build prompt becomes radically more specific. Compare these two approaches:

Without a Brief

"Build me a coffee shop website."

Claude has to guess at everything — what sections, what colors, what content. The result will be generic.

With a Brief

"Build the home page for Brew & Bean according to the brief."

Claude reads the brief, knows every section, color, and constraint. The result matches your vision.

Here is what the actual build prompt looks like when you have a brief to reference:

Terminal — Claude Code
you: Build the home page for Brew & Bean according to the brief. Start with the hero section — full-width photo background, the tagline "Where Portland Wakes Up" centered, hours of operation below, and a "View Our Menu" button.
 
claude: I'll build the Brew & Bean home page following the brief. Starting with the hero section.
 
Creating: index.html
Creating: css/style.css
 
Hero section built with:
• Full-width background image with dark overlay for contrast
• "Where Portland Wakes Up" in cream-colored serif font
• Hours: Mon–Fri 6am–6pm, Sat–Sun 7am–5pm
• Sage green "View Our Menu" button
• Color palette: cream (#faf7f2), espresso (#3e2c1c), sage (#6b8f71)
 
Moving on to the featured drinks section...

Every detail in that response — the overlay, the serif font, the specific color codes, the sage green button — came from the brief. Claude is not guessing. It is executing a plan. That is the difference.

Pro Tip

The brief does not need to be fancy. Even a quick bullet list of "what goes on this page" will dramatically improve your results. The five minutes you spend planning saves an hour of rebuilding. If you are not sure what to include, ask Claude: "What should go in a brief for a [type of site]?" and it will give you a solid starting template.

Try This

Pick a local business — a restaurant, gym, salon, or make one up. Ask Claude to research what makes a great website for that business type. Then write a brief based on the research. Then build the home page from the brief. Notice how much better the result is compared to just saying "build me a website for a gym."

When to Skip Research

Not everything needs a full research phase. Here is an honest breakdown of when to go deep and when to skip ahead.

Research First

Business site and you do not know the industry — research what customers expect and what competitors do well.

Research First

Complex project with multiple pages — always write a brief. The more pages, the more important the plan.

Skip to Brief

Personal project where you already know the content — you are the expert. Just write down what goes where.

Skip to Build

Simple single page with straightforward content — describe it well in your prompt and start building.

The key insight: the less you know about the topic, the more valuable research becomes. If you are building a site for your own band, you know what should be on it. If you are building a site for a veterinary clinic, you probably do not — and that is exactly when five minutes of research pays for itself ten times over.

Quick Check

1. What is the main benefit of writing a brief before building?

A It makes your code run faster
B It prevents rebuilds by ensuring every section is planned upfront
C It is required by Claude Code to start a project
D It automatically generates the HTML for you

2. When should you use Claude for research before building?

A Every single time, no exceptions
B Only when building e-commerce sites
C When you do not know what content or structure is best for that type of site
D Never — just describe what you want and build

3. What belongs in a project brief?

A Pages, sections, design direction, must-haves, and things to avoid
B Only the color palette and font choices
C The complete HTML and CSS code
D A list of competing websites to copy

Key Takeaways

  • The research-plan-build sequence prevents the most common vibe coding mistake: building something before you know what it should contain.
  • Claude is a powerful research partner. Ask it to analyze best practices, study competitors, and identify what customers expect from a given type of site.
  • A brief is your blueprint — it lists pages, sections, design direction, must-haves, and things to avoid. Even a quick bullet list makes a huge difference.
  • Build prompts that reference a brief produce dramatically better results because Claude is executing a plan, not guessing.
  • Skip research when you already know the domain. Use it when you do not. The less you know, the more valuable five minutes of research becomes.