PicassoWeb Documentation

Documentation / 04

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.

View Markdown View on GitHub

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