Coding Websites With Claude

Here’s a workflow that changed how I build frontends: Claude Code with the Puppeteer MCP server.

You describe what you want. Claude Code writes the code. Then it opens a browser, looks at what it built, and fixes what’s wrong. You never have to click around testing things yourself.

The Setup

Claude Code supports MCP (Model Context Protocol) servers that give it new capabilities. Puppeteer MCP lets it control a browser: navigate, click, screenshot, evaluate JavaScript.

Add this to your Claude Code MCP config:

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

That’s it. Claude Code can now see what it builds.

Why This Changes Everything

Before: You write code, switch to browser, refresh, squint at the result, switch back, tweak, repeat. The feedback loop is slow and tedious.

After: You describe what you want. Claude Code writes it, screenshots the result, notices the button is misaligned, fixes it, screenshots again, confirms it looks right. You approve the final result.

The AI handles the tedious visual verification loop. You focus on describing what you actually want.

What It’s Good At

Layout work. “Make this a two-column grid on desktop, single column on mobile.” Claude Code can actually see if the responsive breakpoints work.

Styling tweaks. “The spacing looks off.” It can compare its changes to what you described and iterate.

Component building. “Build a card component with an image, title, and description.” It writes the code, renders it, checks if it looks reasonable.

Visual bugs. “Something’s wrong with the header on this page.” It can navigate there, see the problem, and fix it.

The Workflow

  1. Start your dev server
  2. Tell Claude Code the URL
  3. Describe what you want to build or fix
  4. Let it iterate: code → screenshot → evaluate → fix → repeat
  5. Review the final result

You’re pair programming with something that can actually see. That’s the difference.

Real Talk About Puppeteer MCP

The implementation is solid. It handles modern web pages well. Doesn’t get blocked by the typical bot detection that breaks basic scraping setups.

It’s built for development workflows, not scraping at scale. You’re controlling a real Chrome instance, so it behaves like a real browser because it is one.

Frontend for Everyone

This unlocks frontend development for people who hate the browser dance. Backend engineers who avoid CSS. Designers who want to prototype without learning React. Anyone who knows what they want but finds the implementation tedious.

You don’t need to be good at frontend. You need to be good at describing what you want. Claude Code handles the translation.

The Obvious Disclaimer

Puppeteer is a powerful automation tool. You can do a lot with browser automation. Please use it for building things, testing your own apps, legitimate automation tasks.

Don’t be the person who ruins it for everyone by doing sketchy stuff. Not my fault if you do. But also: don’t.

Getting Started

  1. Install Claude Code if you haven’t
  2. Add the Puppeteer MCP config above
  3. Start a local dev server for whatever you’re building
  4. Ask Claude Code to help you build UI

The first time it takes a screenshot and says “I see the button is rendering below the fold, let me fix the CSS,” you’ll get it. This is how frontend development should work.

Coding With Agents

← Back to all posts