Plumb · import web
plumb_import_webImport a live webpage's visible DOM structure and semantics, mapping it onto a semantic design graph with real CSS values and detected roles. Use to audit site structure or track changes over time with multi-viewport support.
Instructions
Import a live webpage's structure and semantics — no Figma connection needed. Drives headless Chrome to walk the page's visible DOM (skipping script/style/hidden elements), maps it onto the same Semantic Graph Figma designs use, and returns nodes carrying real CSS values (hex colors, literal px) plus a detected role (nav/hero/footer/sidebar) using the exact same classifier plumb_node's pattern field uses. Use this to understand an existing site's structure, audit it (plumb_audit accepts this shape too), or track it over time (plumb_diff two imports of the same URL). Text nodes also carry fontFamily, and the result carries fontLinks — URLs for every captured family that matches a known Google Fonts family — so generated code doesn't silently fall back to a system font. Pass viewports to capture the SAME page at multiple sizes in one call (e.g. mobile + desktop) — a real responsive layout (a hamburger nav under 768px, a grid that collapses to one column) is invisible to a single fixed-size capture.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | The page URL to import. | |
| selector | No | CSS selector to root the walk at — omit to walk from document.body. | |
| viewports | No | Capture the same page at multiple sizes in one call. Pass `true` for the default set (mobile 390×844, tablet 768×1024, desktop 1440×900), or an explicit array of {label, width, height}. Omit for today's single desktop capture (unchanged). Returns `{ url, viewports: { <label>: <WebSpecDocument> } }` instead of a single flat document when used. |