design-research

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
name: design-research
description: Conduct comprehensive design research on any website or web application using a team of browser-automation agents. Use when asked to analyze, audit, or document a website's design system, UX patterns, layout, typography, colors, components, accessibility, responsive behavior, and technical implementation.
---

# Website Design Research

You are orchestrating a comprehensive design research audit of a website. You will create an **agent team** with parallel browser-automation agents to investigate every aspect of the site's design and implementation.

## Input

The user provides a URL to research: `$ARGUMENTS`

If no URL was provided, ask the user for the target URL before proceeding.

## Critical Requirements

1. **You MUST use agent teams** (TeamCreate, TaskCreate, TaskUpdate, SendMessage, etc.) — NOT loose subagents via the Task tool
2. **Every teammate MUST use `mcp__claude-in-chrome__*` browser automation tools** — never WebFetch, curl, or any other method
3. **You (the lead) MUST synthesize all findings** into a single output file when all agents are done. The user specifies the output path; if they don't, default to `notes/design-research.md`. Do NOT just concatenate raw agent reports — read through all findings, resolve duplicates, ensure consistent formatting, fill in cross-references between sections, and produce a cohesive, well-structured document.

## Browser Tool Startup Sequence (for every teammate)

Every agent must follow this sequence when starting:

1. `mcp__claude-in-chrome__tabs_context_mcp` — get browser context
2. `mcp__claude-in-chrome__tabs_create_mcp` — create a new tab
3. `mcp__claude-in-chrome__navigate` — go to the target URL
4. `mcp__claude-in-chrome__computer` (action=screenshot) — capture visual state
5. `mcp__claude-in-chrome__read_page` — inspect DOM/accessibility tree
6. `mcp__claude-in-chrome__javascript_tool` — extract computed styles, class names, data
7. `mcp__claude-in-chrome__find` — locate specific elements by description
8. `mcp__claude-in-chrome__computer` (action=scroll) — see content below the fold

### Key tools by purpose

| Purpose | Tool |
|---|---|
| Navigate to URLs | `mcp__claude-in-chrome__navigate` |
| Take screenshots | `mcp__claude-in-chrome__computer` (action=screenshot) |
| Read DOM / accessibility tree | `mcp__claude-in-chrome__read_page` |
| Run JavaScript (computed styles, data extraction) | `mcp__claude-in-chrome__javascript_tool` |
| Click elements | `mcp__claude-in-chrome__computer` (action=left_click) |
| Find elements by description | `mcp__claude-in-chrome__find` |
| Scroll the page | `mcp__claude-in-chrome__computer` (action=scroll) |
| Resize viewport (responsive testing) | `mcp__claude-in-chrome__resize_window` |
| Read page text content | `mcp__claude-in-chrome__get_page_text` |
| Read console logs | `mcp__claude-in-chrome__read_console_messages` |
| Read network requests | `mcp__claude-in-chrome__read_network_requests` |

## Research Areas (10 Tasks)

### Task 1: Site Structure & Navigation
- Map all top-level URLs and page types (home, product, content, settings, etc.)
- Document the navigation hierarchy (breadcrumbs, sidebar, tabs, footer links)
- Identify navigation redundancy patterns (how many ways to get to the same content)
- Note URL patterns and routing conventions
- Identify navigation gaps (missing back-links, dead ends, no search, etc.)

### Task 2: Page Layout & Chrome (per page type)
- For each distinct page type, document the shared "chrome" (header, sidebar, footer)
- Measure column layout (widths, sticky behavior, responsive breakpoints)
- Document the top bar elements (icons, toggles, user menu)
- Note which chrome elements appear/disappear per page type (build a Page Chrome Matrix)
- Record CSS classes and measurements for key layout containers

### Task 3: Design System — Colors & Typography
- Extract exact color values (RGB/hex) for backgrounds, text, links, borders, accents
- Document the font st