PicassoWeb is an MCP server for AI clients that need to understand or reproduce web interfaces. It observes the page Chromium actually rendered, not only the source files that produced it.
What PicassoWeb returns
- Computed colors, typography, CSS variables, spacing, radii, and shadows.
- Layout trees with flex, grid, clipping, sticky layers, and stacking-context evidence.
- Responsive snapshots and structural changes across viewport widths.
- Original images, SVGs, fonts, video, backgrounds, and favicons.
- Static animation definitions and motion captured over time.
- Interaction states and content hidden behind menus, tabs, dialogs, and accordions.
- Section-level HTML, scoped CSS, assets, and screenshots.
- Pixel diffs that identify where a replica still diverges from the original.
Pick the right first tool
Use create_replication_kit when you want the complete evidence bundle in one call.
Use analyze_site when you need a compact design-system overview before deciding what to inspect next.
Use inspect_component when one component needs exact cascade, geometry, typography, pseudo-element, or interaction-state evidence.
Use compare_replica after implementation to replace subjective review with a measured visual diff.
Recommended loop
- Capture the original page or component.
- Build from the extracted system and original assets.
- Compare the replica against the original at the same viewport.
- Correct the highest-impact regions first.
- Repeat until the remaining difference is understood and acceptable.