DesignLoop: HTML to Figma & Live Page Editor
clasicwebtools.com · Developer Tools
Media
5 items
Description
Edit any live page like Figma, chat to tweak it, then export it to Figma as editable layers — or file a documented GitHub issue. DesignLoop turns the page you are looking at into a design canvas — and closes the loop between design and code. Select any element on any live page and edit it the way you would in Figma: a familiar edit panel for spacing, typography and color, applied instantly to the real page. Or just describe the change in plain language — "tighter padding, darker text" — and chat your way through tweaks to the whole page, live, until it looks right. By default the AI is Chrome's built-in on-device model, so it runs entirely on your machine. DesignLoop can also read the design system a page is already built from — its colors, type, spacing, radii and shadows — name it, snap the page's near-duplicate values back onto it, and export it as CSS variables, a Tailwind theme or W3C tokens. When it looks right, hand it off. Export the element to Figma as real, editable layers — frames, text, vectors, images, auto-layout — not a flat screenshot. Or push the whole session to GitHub as one documented issue: your transcript, an annotated screenshot, the before/after, a machine-readable style diff, the exact XPath and CSS selectors, sanitized HTML, captured console errors, and an environment table. Design, page, and repo stay connected in a single workflow. Privacy by default. DesignLoop has no backend and no analytics. On default settings nothing leaves your browser: the default model runs on-device and voice transcription is off. Two more powerful cloud models are available, but they are opt-in and run on an API key you supply yourself — the extension calls the provider directly, never a server of ours, because there isn't one. When you push an issue it goes straight from your browser to your repo using your own token. Input values and secret-shaped attributes are redacted from captured HTML before you ever see the draft — and you review every draft before it sends. Requires Chrome 116 or later. Live editing with the on-device model uses Chrome's built-in Prompt API (Chrome 138+); without it, that feature accepts raw CSS instead.