# Replication workflows

> Capture broadly, inspect precisely, and verify with a diff. PicassoWeb works best as an evidence loop rather than a one-shot style generator.

## Replicate a complete page

1. Run `create_replication_kit` with desktop and mobile capture enabled.
2. Read `REPLICATE.md`, then inspect `design.json`, `layout.json`, and `animations.json`.
3. Build the page with the downloaded assets and measured tokens.
4. Serve the replica locally.
5. Run `compare_replica` at the same viewport used for implementation.
6. Correct the worst regions, then compare again.

Example kit request:

```json
{
  "url": "https://example.com/pricing",
  "outputDir": "/absolute/path/to/evidence/pricing",
  "includeMobile": true,
  "viewportWidth": 1440,
  "viewportHeight": 900
}
```

## Rebuild one component

Start with `inspect_component` when the target selector is known:

```json
{
  "url": "https://example.com",
  "selector": ".pricing-card",
  "maxMatches": 5
}
```

Use `clone_section` when you also need self-contained HTML, scoped CSS, dependent assets, and a reference screenshot. Build the component from that evidence, then use element-mode screenshots or a page-level replica comparison to verify it.

## Recover responsive behavior

1. Run `extract_responsive` at representative phone, tablet, and desktop widths.
2. Compare container modes, ordering, clipping, and sticky or fixed behavior in each layout tree.
3. Treat reported media queries as evidence, not a requirement to copy every original breakpoint.
4. Verify the replica at the same widths.

```json
{
  "url": "https://example.com",
  "widths": [390, 768, 1280],
  "outputDir": "/absolute/path/to/evidence/responsive"
}
```

## Recover interaction and motion

Use `capture_interactions` first when menus, tabs, dialogs, or accordions hide important states.

Use `extract_animations` for the static motion system, then `capture_motion` for entry animation or a specific scroll, hover, or click timeline.

```json
{
  "url": "https://example.com",
  "trigger": "hover",
  "selector": ".product-card",
  "samples": 8,
  "intervalMs": 200,
  "trackSelectors": [".product-card", ".product-card img"]
}
```

## Understand a multi-page product

Use `crawl_site` for a bounded same-origin sample. Start with a small page limit, then inspect `SITE.md` to decide which pages deserve their own replication kit.

```json
{
  "url": "https://example.com",
  "maxPages": 5,
  "maxDepth": 2,
  "outputDir": "/absolute/path/to/evidence/site"
}
```

## Compare against localhost

The original URL remains protected by the default network guard. The replica side of `compare_replica` allows localhost by default because local development is the intended comparison workflow.

Before trusting a very small difference, run `selfCheck` to measure animation, canvas, video, timers, or live-data noise already present in the original.

## Next

- [Review the complete tool reference](tools.md)
- [Understand safeguards and limitations](security.md)