design-research

You found a website whose design you love and want to build something that looks and feels like it. Before you start coding, you need to understand exactly how it’s built — the colors, typography, spacing, components, layout patterns, responsive behavior, and all the small details that make it feel right.

This prompt for Claude Code automates that process using agent teams (setup instructions below). Give it a URL and it dispatches 10 specialized browser-automation agents to document every aspect of the site’s design — exact hex colors, font stacks, component inventories, page layout measurements, content templates, UX patterns, responsive breakpoints, and more. You get back a single structured markdown reference document with all the specifics you need to faithfully recreate the design.

Prerequisites

1. Claude Code

Install Claude Code (version 2.0.73+):

npm install -g @anthropic-ai/claude-code

2. Claude in Chrome extension

The Claude in Chrome extension lets Claude drive your actual browser — the same one where you’re already logged in. This matters because many sites you’d want to research are behind authentication (course platforms, SaaS dashboards, gated content). Rather than dealing with API tokens or headless browser auth flows, Claude just opens a new tab in your Chrome session and inherits all your cookies and login state. Each research agent navigates, screenshots, reads the DOM, extracts computed styles, and interacts with the page as if you were doing it yourself. See the setup guide for installation and troubleshooting.

3. tmux

You need tmux for agent teams to work properly. Without it, all agents run in-process in a single terminal and you can’t see what they’re doing. With tmux, each agent gets its own split pane so you can watch them work in parallel.

# macOS
brew install tmux

# Ubuntu/Debian
sudo apt install tmux

On macOS with iTerm2, use tmux -CC for native iTerm2 tab/split integration instead of tmux’s built-in UI.

4. Enable agent teams

Agent teams are experimental and disabled by default. Enable them by adding this to your ~/.claude/settings.json:

{
  "env": {
    "CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS": "1"
  }
}

Or set the environment variable directly:

export CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1

Usage

Starting Claude Code

Start a tmux session, then launch Claude with Chrome and permissions flags:

# iTerm2 on macOS (recommended)
tmux -CC

# Then inside tmux:
claude --chrome --dangerously-skip-permissions