당신이 사랑하는 웹 사이트를 발견하고 그것을 좋아하고 느낄 무언가를 구축하려는. 코딩을 시작하기 전에, 내장 된 방법을 정확히 이해해야합니다 - 색상, 타이포그래피, 간격, 구성 요소, 레이아웃 패턴, 반응 형 행동 및 올바른 느낌을주는 모든 작은 세부 사항.

Claude Code에 대한 이 프롬프트는 에이전트 팀 (아래 설치 지침)을 사용하여 프로세스를 자동화합니다. URL을 제공 하 고 그것을 파견 10 전문 브라우저 자동 에이전트 사이트 디자인의 모든 측면 문서에 대 한 — 정확한 hex 색상, 글꼴 스택, 구성 요소 재고, 페이지 레이아웃 측정, 콘텐츠 템플릿, UX 패턴, 응답된 Breakpoints, 그리고 더. 당신은 완전히 디자인을 재창조해야 할 모든 specifics를 가진 단 하나에 의하여 구조화된 markdown 참고 문서를 얻습니다.

필수품

##1. 클로드 코드

클로드 코드 설치 (버전 2.0.73+):

##2. 크롬 확장에 Claude

Chrome 확장의 Claude는 Claude가 실제 브라우저를 구동 할 수 있도록합니다. 이미 로그인 한 것과 같습니다. 많은 사이트가 인증 (코스 플랫폼, SaaS 대시보드, 게이트 콘텐츠) 뒤에 있기를 원합니다.

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