Picassoweb

---
name: picassoweb
description: Use PicassoWeb MCP tools to inspect rendered websites, collect precise replication evidence, and verify replicas. Apply when choosing or sequencing PicassoWeb tools; do not use it for general-purpose browser automation.
metadata:
  short-description: Route PicassoWeb replication workflows
  version: "0.10.1"
---

<!-- Generated by scripts/build-ai-assets.ts from the PicassoWeb v0.10.1 tool catalog. Do not edit by hand. -->

# PicassoWeb

Use the connected PicassoWeb MCP server as a task-level website evidence system. PicassoWeb owns its Playwright runtime; do not ask the agent to reproduce its internals with browser-control tools.

## Route first

| Goal | Start with | Profiles | Then |
| --- | --- | --- | --- |
| Replicate a complete page | `create_replication_kit` | `workflow`, `full` | Add specialized motion or breakpoint evidence only if needed, then run `compare_replica`. |
| Understand a page before choosing evidence | `analyze_site` | `workflow`, `full` | Follow with only the extractor needed for the unanswered question. |
| Inspect one component | `inspect_component` | `workflow`, `full` | Use `clone_section` only when standalone HTML, CSS, assets, and a screenshot are also needed. |
| Analyze supplied markup | `analyze_html` | `full` | Use this instead of navigating a live URL. |
| Recover responsive behavior | `extract_responsive` | `workflow`, `full` | Compare the replica at the same viewport widths. |
| Recover hidden UI states | `capture_interactions` | `full` | Inspect or clone the revealed target only if more detail is needed. |
| Understand animation definitions | `extract_animations` | `workflow`, `full` | Use `capture_motion` only when the observed timeline matters. |
| Record observed motion | `capture_motion` | `workflow`, `full` | Track the smallest useful selector set and trigger. |
| Understand a small multi-page product | `crawl_site` | `full` | Create a replication kit only for pages selected from the crawl. |
| Verify a replica | `compare_replica` | `workflow`, `full` | Fix the worst reported regions and compare again. |

PicassoWeb workflow profile: choose the single tool that matches the user's current goal.
Do not shotgun several extraction tools. Start with one high-level call, inspect its result, then use only the missing follow-up.
For a complete page replica, call create_replication_kit once. Do not also call analyze_site, capture_screenshot, extract_assets, or extract_layout for the same first pass.
A replication kit is broad, not exhaustive: follow with extract_responsive, extract_animations, or capture_motion one at a time only when the page needs deeper breakpoint or motion evidence.
For a page design overview without files, use analyze_site. For visual evidence only, use capture_screenshot.
For one component, use inspect_component first; use clone_section only when portable HTML, CSS, assets, or a section screenshot are needed.
For declared motion definitions and replication CSS, use extract_animations. For observed or JS-driven motion over time, use capture_motion.
For breakpoint and cross-width behavior, use extract_responsive.
After a replica exists, use compare_replica to verify it and inspect only the reported mismatches.
The workflow profile intentionally hides granular and multi-page tools; switch to the full profile only when the goal requires them.
Never call PicassoWeb tools in parallel for the same URL. Run same-URL calls sequentially so they do not fan out into duplicate browser sessions.
When a tool can write files, use an explicit absolute path in the user's scoped workspace. Returned, written, and visually verified evidence are different states.
Enabled tools: analyze_site, inspect_component, capture_screenshot, extract_animations, clone_section, extract_responsive, compare_replica, create_replication_kit, capture_motion.

Choose one starting route. Do not fan out several expensive tools against the same URL. Reuse a replication kit, clone, crawl, or saved artifact before requesting overlapping evidence.

## Profiles

### `workflow`

Use for routine agent work. It exposes the opinionated, low-overlap path through PicassoWeb.

Advertised tools: `analyze_site`, `inspect_component`, `capture_screenshot`, `extract_animations`, `clone_section`, `extract_responsive`, `compare_replica`, `create_replication_kit`, `capture_motion`.

### `full`

Use when a task needs a granular extractor that the workflow profile does not expose.

Advertised tools: `analyze_site`, `analyze_html`, `inspect_component`, `capture_screenshot`, `extract_assets`, `extract_animations`, `extract_layout`, `clone_section`, `capture_interactions`, `extract_responsive`, `compare_replica`, `create_replication_kit`, `capture_motion`, `crawl_site`.

Use only the tools advertised by the server. Do not infer that full-profile tools are available when they are absent.

## Tool catalog

### Discovery

- `analyze_site` [workflow, full; cost: standard; session: single-url; writes files: no] — Extract design tokens, typography, CSS variables, primitives, and reusable component families. Use when: you need a design-system overview of one page without creating a replication folder. Avoid when: you need a complete full-page build package; use create_replication_kit once instead.
- `analyze_html` [full; cost: standard; session: offline-document; writes files: no] — Render supplied markup and extract the same design-system data as a remote page analysis. Use when: you need to inspect generated, offline, or test HTML that you already have. Avoid when: the source is a live URL; use analyze_site, inspect_component, or create_replication_kit.

### Component

- `inspect_component` [workflow, full; cost: light; session: single-url; writes files: no] — Return targeted computed styles, cascade rules, variables, box geometry, fonts, and interaction states. Use when: you need an exact style and state X-ray of a known element, role, or text target. Avoid when: you need portable HTML, scoped CSS, assets, and a screenshot; use clone_section.
- `clone_section` [workflow, full; cost: standard; session: single-url; writes files: yes] — Return cleaned HTML, scoped CSS, dependencies, assets, and an optional screenshot for one section. Use when: you need a portable implementation package for one known section. Avoid when: you need an entire page; use create_replication_kit.
- `capture_interactions` [full; cost: heavy; session: single-url; writes files: yes] — Operate common triggers and capture menus, dialogs, tabs, accordions, and other revealed UI. Use when: important UI is hidden behind interactions and you do not yet know its selectors. Avoid when: you already know the target component or need continuous motion sampling.

### Visual

- `capture_screenshot` [workflow, full; cost: light; session: single-url; writes files: yes] — Capture a viewport, full page, or selected element as an image the agent can inspect. Use when: you only need visual evidence or a reference image of a page or element. Avoid when: you need the full implementation package; create_replication_kit already includes screenshots.

### Assets

- `extract_assets` [full; cost: standard; session: single-url; writes files: yes] — Download original images, SVGs, fonts, videos, favicons, and backgrounds with a usage manifest. Use when: you specifically need the original asset files from one page. Avoid when: you are starting a full-page replica; create_replication_kit already downloads assets.

### Motion

- `extract_animations` [workflow, full; cost: standard; session: single-url; writes files: no] — Extract declared keyframes, transitions, timings, scroll effects, WAAPI records, and generated CSS. Use when: you need static motion definitions and replication-ready CSS. Avoid when: you need to observe JS-driven movement over time; use capture_motion.
- `capture_motion` [workflow, full; cost: heavy; session: single-url; writes files: yes] — Sample frames, live animations, and numeric style curves after load, scroll, hover, or click. Use when: you need to observe actual motion, especially JS-driven animation. Avoid when: declared CSS and WAAPI definitions are sufficient; use extract_animations.

### Layout

- `extract_layout` [full; cost: standard; session: single-url; writes files: no] — Return a bounded layout tree with sections, scroll containers, positioning, stacking, grid, and flex detail. Use when: you specifically need structural geometry for a page or subtree. Avoid when: you need a full replication package or multiple viewport widths.

### Responsive

- `extract_responsive` [workflow, full; cost: heavy; session: multi-viewport; writes files: yes] — Compare media rules and layout trees across requested viewport widths, with optional screenshots. Use when: you need breakpoints and concrete layout changes across screen sizes. Avoid when: one viewport is enough or a complete kit with desktop and mobile captures is the goal.

### Verification

- `compare_replica` [workflow, full; cost: heavy; session: dual-page; writes files: no] — Run a deterministic perceptual diff and attribute the worst visual mismatches to elements and styles. Use when: a replica exists and you need evidence-driven visual verification or a same-page noise-floor check. Avoid when: you have not implemented a replica yet.

### Replication

- `create_replication_kit` [workflow, full; cost: heavy; session: multi-viewport; writes files: yes] — Write screenshots, assets, design data, layout trees, animations, and a replication guide in one pass. Use when: you need a broad first-pass package for reproducing a complete page. Avoid when: you only need one component, one screenshot, or a quick design overview.

### Site

- `crawl_site` [full; cost: heavy; session: site-crawl; writes files: yes] — Merge design evidence from bounded same-origin pages into a site-wide system and page inventory. Use when: the goal spans several pages and you need shared versus page-specific design patterns. Avoid when: one page is the target; analyze or create a kit for that page instead.

## Files and evidence

Use absolute paths for requested writes. Keep evidence outside application source directories unless the user intends to version it. Distinguish evidence returned in the MCP response from evidence actually saved to disk, and verify the reported path before claiming a file exists.

## Completion

For implementation work, finish with `compare_replica` at the implementation viewport. Report remaining unstable content or visual-diff noise instead of treating a small score as proof of fidelity.