Hi everyone 
I’ve been building BricksSnap, a free tool that generates Bricks pages the way I’d build them by hand: native elements, global classes and CSS variables, no inline styles and no code blocks. Tested with Bricks 2.4.2.
Try it in the browser: https://bricks-snap.vercel.app
Source: GitHub - Hamido212/BricksSnap · GitHub
What it does
Studio. Pick a style direction (clean, warm, bold, soft, editorial), your brand color, fonts, radius, spacing and light/dark mode. Choose from 40 section layouts and see the page live at desktop and phone width. Sample copy is written for real industries (vehicle registration, trades, medical practice, restaurant, agency, business) in English or German.
Library. 12 ready-made designs. Take a full page or single sections, or open a design in the Studio and adjust it.
Export. Download the JSON for Templates → Import, or copy and paste into the builder with Ctrl+V.
How the output is built
- Every style lives in
bs-global classes with BEM names (bs-hero__title,bs-card…). Elements only reference classes. - Values use
var(--bs-primary, #0f766e)style fallbacks, so a section looks right even on a site without the design system. - The design system is a Bricks color palette plus global variables in a “BricksSnap” category. Change
--bs-primaryonce and every section follows. - Class IDs are deterministic, so importing a second section reuses the existing classes instead of creating duplicates.
- Everything is px/clamp, because Bricks sets
html { font-size: 62.5% }. - Before export it checks contrast, heading order (one h1), alt texts and
#placeholder links.
Remote library
Add https://bricks-snap.vercel.app under Bricks → Settings → Templates & components → Remote libraries. All designs and sections (104 templates, English and German) then show up in the builder’s template library, with thumbnails in each design’s colors.
Optional extras
- Staging. Connect a site through the Bricks MCP abilities, review a diff, install the design system after a preview of what changes, and save changes as drafts with read-back verification.
- AI generator. Describe a page in words. It works with your own API key, your ChatGPT account (locally) or Claude via MCP. The Studio and Library need no AI and no account.
Honest limitations
- Web fonts referenced only inside variables aren’t loaded by Bricks automatically. The tool tells you which fonts to load.
- Sample photos come from Unsplash. Replace them or import them into your media library.
- Forms are placeholders and need your own form settings (recipient, actions).
License
Free for your own and your clients’ sites, commercial work included. The generated templates are yours. The only thing not allowed is hosting BricksSnap itself as a paid or competing service (PolyForm Shield).
I’d love your feedback
- Which sections or layouts are you missing?
- Would you use components instead of plain sections if BricksSnap generated them?
- Anything in the class structure you’d name or organize differently?
Not affiliated with Bricks, just a fellow user who got tired of rebuilding the same sections. 