好きなデザインをデザインし、そのように見えるものを作りたいと思うウェブサイトを見つけました。 コーディングを始める前に、色、タイポグラフィ、間隔、構成要素、レイアウトパターン、応答性行動、そしてそれが正しい感じさせるすべての小さな詳細を正確に理解する必要があります。

Claudeコードは、エージェントチーム(以下セットアップ手順)を使用して処理するプロセスを自動化します。 URL を記述し、サイトのデザインのすべての側面を文書化するために 10 の特殊なブラウザ自動処理剤をディスパッチします。 — 正確な六角色、フォント スタック、コンポーネントの在庫、ページ レイアウト測定、コンテンツ テンプレート、UX パターン、レスポンシブ ポイントなど。 設計を忠実に再現するために必要なすべての特定のものをすべて、単一の構造のマークダウンリファレンス文書に戻します。

前提条件

##1. クロードコード

Claudeコードをインストール (バージョン2.0.73+):

##2. Chrome拡張でクロード

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