Viewport extension

Working with AI

Review a live site the way you'd mark up a printout: retype copy in place, pin notes on elements. Then copy the whole review as one prompt-ready block for Claude Code, Codex, or any agent. For bigger jobs, export everything an agent needs to understand the site.

Edit text

Press E (or the T button), click any text in the framed site, and retype it inline. The change stays on the page as a live preview with an amber highlight, and records the exact before → after pair.

• Re-editing keeps the original "before"; retyping the original text clears the edit.
• Enter or clicking away commits; Esc reverts, and Esc again exits the mode.
• Edits persist per site, so close the tab and they're still there.

Comments

Press C (or the bubble button) and click elements to pin notes. Pins mark existing comments; click one to read or delete it. Comments persist across sessions, stored locally per site, so notes you leave today are waiting tomorrow. Esc exits comment mode.

Copy for AI

Once you have edits or comments, a Copy for AI pill appears in the toolbar with the count. One click copies everything on the site as a single prompt-ready block:

• Each text edit as an exact before/after. The prompt tells the agent to find the "Before" copy and replace it with the "After" copy exactly.
• Each comment with its page, element anchor and selector, an excerpt of the element's text or HTML, and the viewport width it was reviewed at.

Paste it into your agent and watch it apply the review to the real codebase.

Site context export

The book button compiles everything an AI needs to understand the site (say, before a redesign) as one markdown document plus a zip:

• What they say everywhere: taglines and one-liners recurring across pages (the brand voice), with each page's headings, copy, and CTA labels. Structural pages in full; big collections like /blog/* sampled, the rest listed as skipped.
• Verified sitemap and page inventory: every page confirmed with a real request, with title, meta description, noindex, canonical, and sitemap lastmod for each. This is the SEO-preservation map, plus a confidence note on sources.
• Brand and tech snapshot: :root CSS variables, theme color, and platform signals (WordPress, Webflow, Framer, Next…), probed from the live page.
• Style guide and consistency findings: a computed-style census of every page the export visits. Palette with usage counts, type scale per role, button styles, radii, shadows, then the audit: near-duplicate colors, off-scale font sizes, font-family sprawl, cross-page heading drift.
• Conversion and integrations: forms and where they submit, CTA destinations, social profiles, analytics tags, external domains. This is the redesign's do-not-break list.
• Assets and screenshots: logo, OG images, hero imagery, and stitched full-page captures of the top structural pages.

The markdown lands on your clipboard and in <site>-context.zip; drop the folder into a project and point your agent at it. Content is gathered fetch-only, so heavily client-rendered sites get a "may be incomplete" warning. Esc cancels.

Style guide

Press G (or the swatch button) for the style guide the site never published, built live from a computed-style census of the framed page: color swatches with usage counts, type specimens per role, the site's actual button styles as chips, radius and shadow samples, and consistency findings.

• Counting is honest: only effectively-visible elements count, text counts per text block so split-text animations don't inflate a color, and one button style at several sizes is one style. Colors group by base color, and an opacity ramp shows as one card with tint strips.
• Dock it as a right sidebar and it refreshes as you browse. Click any card, tint strip, type row, button chip, radius, or shadow to outline every element using that style on the page (color clicks also copy the value).
• Copy for AI in the guide's header copies the census plus consolidation candidates (values so close they probably weren't meant to differ, each with a keep/replace suggestion) as one prompt instructing the agent to fix strays at the token level and never introduce new one-off values.