All tools return JSON text and MCP structured content. Tools that produce screenshots, frame strips, or visual diffs can also return MCP image content blocks.
Understand the rendered system
analyze_site
Analyze a live HTTP or HTTPS page. Returns the computed color palette, typography, CSS variables, spacing, radii, shadows, and reusable component families.
analyze_html
Render supplied HTML and optional CSS without external network access. Useful for generated markup, offline experiments, and deterministic tests.
inspect_component
Inspect elements selected by CSS, accessible role and name, or visible text. Returns matched cascade rules, custom properties, box geometry, platform fonts, pseudo-elements, descendants, and hover, focus, or active changes.
extract_layout
Return a breadth-first layout tree with section labels, flex and grid details, scroll containers, sticky or fixed positioning, clipping, stacking contexts, and hidden or collapsed elements.
extract_responsive
Compare layout at multiple viewport widths. Returns breakpoints, media-query summaries, and a layout tree per width, with optional screenshots written to disk.
Capture materials and visible states
capture_screenshot
Capture the viewport, the full page, or one element. The image can be returned to the client and optionally saved through outputPath.
extract_assets
Download images, background images, inline SVGs, fonts, videos, and favicons. Writes an assets/ directory and a manifest describing where every file appeared.
clone_section
Produce a self-contained section with cleaned HTML, scoped CSS, dependent variables, keyframes and font faces, asset references, and a screenshot. With outputDir, URLs are rewritten to downloaded local assets.
capture_interactions
Operate likely menus, dropdowns, modals, tabs, and accordions, then capture what they reveal. Useful for interface states that never appear in a static page load.
Understand motion
extract_animations
Create a static motion census: keyframes, animation users, numeric timings, transitions, Web Animations API entries, scroll timelines, detected libraries, and generated CSS.
capture_motion
Record motion over real time after load, scroll, hover, or click. Returns sampled frames plus numeric transform, opacity, filter, and clip-path curves for tracked elements.
Use extract_animations to understand definitions. Use capture_motion to see the actual timeline.
Build and verify replicas
create_replication_kit
Capture the complete desktop and mobile evidence bundle in one load: screenshots, assets, design tokens, layout trees, animation inventory, and a REPLICATE.md implementation guide.
compare_replica
Capture the original and replica deterministically, calculate an anti-aliasing-tolerant YIQ diff, and identify the worst regions with relevant style deltas. Use selfCheck first when the original page contains unstable visual content.
crawl_site
Crawl a small same-origin page set and merge it into a site-wide design system. With outputDir, writes page-level evidence, screenshots, site.json, and a SITE.md guide.
Tools that write files
The following tools can write to paths supplied by the caller:
capture_screenshotwithoutputPath.extract_assetsandcreate_replication_kit.clone_section,extract_responsive,capture_interactions,capture_motion, andcrawl_sitewithoutputDir.
Use absolute paths. Keep generated evidence outside application source directories unless you intentionally want it versioned.