DesignLoop: HTML to Figma & Live Page Editor icon

DesignLoop: HTML to Figma & Live Page Editor

by Clasicwebtools · clasicwebtools.com · Developer Tools
Established publisherManifest V3 Free
View in Chrome Web Store Data as of 17 Oct 2026

Edit any live page like Figma, chat to tweak it, then export it to Figma as editable layers — or file a documented GitHub issue.

Users
14
+4 in 30 days
Rating
1.0 / 5
unchanged in 30 days
Ratings
1
0 in 30 days
Store rank
#171K
#143K among extensions
Version
0.1.0
updated 15 Jul 2026

Users

monthly, 3 months
0714Jul 2026Sep 2026Oct 2026
Latest, 17 Oct 2026: 14 usersMove the mouse over the chart for any month

Ratings count

monthly, 3 months
001Jul 2026Sep 2026Oct 2026
Latest, 17 Oct 2026: 1 ratingsMove the mouse over the chart for any month

The Chrome Web Store rounds user counts down to the leading digit, so the user line moves in steps. The ratings count is exact and is the better signal of real adoption.

About DesignLoop: HTML to Figma & Live Page Editor

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.

Growth

WindowUsersChangeRatingsRating
7 days0+0.0%00.00
30 days+4+40.0%00.00

Chrome Web Store search rankings

Where DesignLoop: HTML to Figma & Live Page Editor appears when people search the store, with the 30 day change
Search phrasePosition30 days
figma#72−9
css editor#78−2

Version history

1 versions recorded
0.1.015 Jul 2026

Details

Category
Developer Tools
First seen
15 Jul 2026
Size
445 KB
Languages
en
Pricing
Free
Privacy policy
designloop.vercel.app
Support
designloop.vercel.app
Extension ID
bcbobialfakpnaalkemohbapbllobjfo

Permissions and risk

Elevated riskimpact 4, likelihood 3
Permissions
activeTabtabsscriptingstorageunlimitedStorageoffscreensidePanelclipboardWritedebugger
Site access
https://api.github.com/*https://fonts.googleapis.com/*https://fonts.gstatic.com/*

Alternatives to DesignLoop: HTML to Figma & Live Page Editor

Extensions that rank for the same store searches or share the Developer Tools category, ordered by users