Select it on the page
Open PocketUI on any website and drag over the section you want.
Bricks export · coming soon
Website to Bricks convert any HTML section into native Bricks elements
Select any section on any website. Paste it into Bricks Builder as native elements with global classes.
Early supporters get 30% off their first year. No spam, ever.
Bricks demo video · coming soon
How it works
Three steps from a website to Bricks
Captured1 / 5
HTML structure
PocketUI captures the real thing
Not a screenshot: its structure, authored CSS, states and breakpoints, saved to your library.
CtrlV
Paste it into Bricks
Copy for Bricks, paste in the builder. It arrives as native elements, not a code block.
Steps 1 and 2 work today. The Bricks step is coming soon.
Bricks
What lands in Bricks
Capture
From any live website
No rebuilding by hand. Select the section on the page and it heads straight for Bricks.
Section captured
What lands
Native elements, global classes
Sections, containers, headings and buttons land in the Structure panel, styled through global classes.
Structure1 / 6
Section· Pricing
Responsive
Responsive, already set
Desktop, tablet and mobile values are filled in from the site's own CSS.
Library
Every capture, kept
It is also saved to your library, in a folder you name by idea, so you can find it again.
Image
Tailwind
Figma
Palette
Screenshot
Image
Tailwind
Figma
Palette
Screenshot
React
Image
Font
Aa
HTML
Image
React
Image
Font
Aa
HTML
Image
SVG
Vue
Palette
Page
Image
SVG
Vue
Palette
Page
Image
Every export
One capture, every platform
Capture a section once and send it wherever the project lives. Each export has its own page.
Convert a website to Bricks Builder, in short
PocketUI is a design inspiration tool and Chrome extension that saves any section of a live website as real code. Its Bricks export, coming soon, will turn that saved section into native Bricks Builder elements with global classes, so you paste it into the builder and keep every part editable instead of rebuilding it or using a code element.
Bricks export questions
No, a Chrome extension. You select the section on the live website and paste the result into Bricks Builder.
No. You get native Bricks elements, so every part stays editable in the builder.
Yes. Repeated styles become global classes, which keeps the page easy to maintain.
Open PocketUI on the page, select the section you want, choose Bricks as the export, and paste it into the Bricks builder. It arrives as native elements with global classes.
Yes. PocketUI reads the section's real HTML and CSS and maps them to Bricks elements and classes, so nothing is locked inside a code block.
Yes, when the design already exists as a live website. There is no Figma file in between. PocketUI also exports to Figma if you want a design file too.
Use it to learn from layouts and to move your own or your clients' designs into Bricks. Text, images, logos and brand assets on other people's sites stay their property, so replace them with your own.
Bricks export is coming soon, on the Studio plan or the WordPress pack. Figma and code export already work on every plan.
Stop recreating designs you've already seen
Join now and get 30% off your first year as an early supporter.
One email on launch day. That's it.