Page2Design

Local-only Chrome extension for agent-ready page scans

Chrome MV3 extension that scans a live webpage and exports one agent-ready design package — local-only, no backend.

Highlights

Local

On-device Processing

Device Presets

1 ZIP

Agent-ready Export

GitHub Live URL

Chrome MV3React 19TypeScriptVite 7ZustandJSZipVitestLucide

Project Overview

Client

Personal project

Industry

Developer Tools / Design Systems / AI Coding

Service

Chrome Extension Development

Timeline

v1.0.0–1.0.1 (Chrome Web Store)

Engagement

End-to-end product development

Deliverables

Chrome Web Store extensionFloating inspector + side panelDesign system exportAgent-ready ZIP

Summary

Page2Design is a local-only Chrome Manifest V3 extension that scans the active tab and turns the observed page into one agent-ready ZIP. Capture, IndexedDB storage, and export all stay on the device — there is no backend, account, or upload API. The ZIP helps Cursor, Claude Code, and similar coding agents recreate the rendered page; it does not recover original source, React trees, or private form values.

The inspector is a React 19 + Zustand UI shared by a floating overlay on normal http(s) sites and Chrome’s side panel on restricted pages. After a scan, Overview, Design System, Typography, Content, and Assets show measured tokens, copy, and media. More Options opens a Responsive preview with 39 device presets (phones, tablets, desktops) in a Mac-style iframe — without the debugger permission or resizing the live tab.

Export produces AGENTS.md, docs/DESIGN.md, build/validate prompts, JSON references, screenshots, and an assets/ folder. Missing files are omitted and listed in limitations.json instead of invented. First Chrome Web Store publish was 1.0.0 (25 Aug 2026); the open-source repo is 1.0.1.

The Challenge

Client Objectives

Turn a live webpage into structured design notes an AI coding agent can follow.
Keep scan, storage, and ZIP export on-device — no account and no remote upload.
Show measured typography, color, spacing, content, and assets in one inspector.
Be honest about capture gaps instead of guessing source, React trees, or private fields.

Core Challenges

Scanning a live tab inside Manifest V3 without a backend or leaking secrets.
Shipping one React inspector as both a floating overlay and a Chrome side panel.
Chunking large DOM scans so extension messages stay small and assemblable.
Previewing breakpoints in-extension without debugger emulation or inventing missing files.

My Solution

I designed and built Page2Design as a local-only Chrome MV3 product: content-script scanners, a service-worker orchestrator, and a React 19 inspector. I implemented chunked PageScan transport, normalization into design tokens, IndexedDB caching, privacy redaction for passwords and sensitive query params, and a JSZip export that coding agents can follow from AGENTS.md. Responsive preview uses an iframe plus session declarativeNetRequest rules — no debugger permission — and gaps go into limitations.json rather than fabricated output.

Key Highlights

Local-only pipeline: toolbar click → overlay or side panel → content-script DOM scan → background assemble/normalize → IndexedDB → inspector views → one ZIP. Nothing is uploaded.

Design System tab builds color ramps, type scale, component previews, and spacing/radius/shadow tokens from what was observed, with CSS, Tailwind v4, shadcn, and JSON (DTCG) export.

Agent package includes AGENTS.md, CLAUDE.md, SKILL.md, a Cursor rule, DESIGN.md, BUILD/VALIDATE prompts, references (tokens, layout, scan, assets, limitations), screenshots, and assets/images|icons|svg|fonts.

Privacy by design: password, hidden, and payment-like values are never stored; sensitive query params are redacted; stale scans are purged; runtime messages are versioned and malformed payloads dropped.

Responsive checker (More Options) covers 1 fluid size, 15 phones, 11 tablets, and 12 desktops. The live tab is not resized or debugger-emulated; framing headers are stripped only for that preview iframe.

Screenshots