Turn plain text prompts into fully functional HTML, CSS, and JavaScript code with the help of AI. Just describe what you need — a layout, component, or interaction — and Structure Generator will instantly produce clean, ready-to-import code tailored for Bricks, complete with BEM classes and your project’s design tokens.
Release 3.2
May 27, 2025
41 changes
Meet Structure Generator – AI-Powered Code Creation
Structure Generator is your new all-in-one tool for creating HTML, CSS, and JavaScript — whether by hand or with AI.
- Text-to-Code: Describe what you want in plain language, and let AI generate structured HTML/CSS/JS using your BEM conventions and Bricks variables.
- Image-to-Code: Upload any design screenshot — Structure Generator will convert it into clean, native Bricks-compatible code. It even names elements, applies your variables, and follows your design system.
- Live Preview & Edit: Instantly see and refine your code in a live iframe — styled with your Bricks globals, theme styles, and ATF variables — before importing.
CSS Variable Manager — Smarter, Cleaner, More Intuitive
- Custom Groups: Organize your variables however you like. Group anything — colors, clamps, static values — for faster access in the Variable Picker.
- Custom Labels: Give your variables human-friendly names. These labels appear in the picker, making your design tokens easier to use and remember.
- Min/Max Type Scales: Define responsive typography more precisely with separate type scales and multipliers for min and max values.
ATF 1.1 — More Power, More Control
The Advanced Themer Framework gets a major boost:
- Built-in form integration
- New granular theme style options
- Refined update system
- Custom labels for all CSS variables
Polished Experience & Performance
- Backend Refresh: A clean new look for Theme Settings, designed by Ari Pniel.
- Performance Optimizations: Major improvements under the hood for faster performance, especially with the latest Chromium updates.
Ready to Upgrade?
Advanced Themer 3.2 is more than just an update — it’s a creative upgrade to how you work with Bricks. Explore AI-powered generation, better organization, and smoother design-to-code workflows today.
NEW
Generate HTML/CSS/JavaScript Code from a simple text input
NEW
Convert any Image to HTML/CSS/JavaScript Code
This feature is a game-changer: just upload any image or design screenshot, and Structure Generator — powered by AI — will transform it into clean HTML, CSS, and JavaScript code, ready to import into Bricks as native elements. It can automatically generate BEM-style class names, apply your Bricks variables for spacing, typography, and colors, and even suggest intuitive labels for your elements.
NEW
Structure Generator
Structure Generator lets you create HTML, CSS, and JavaScript code manually or with AI assistance. Preview the output live in an iframe, make real-time adjustments, and import it effortlessly. The iframe is styled with all core Bricks styles, including your global classes, variables, and theme settings — ensuring full compatibility with ATF.
FIX
CSS Grid Utility Class: Manual Converter
In previous releases, the conversion of CSS grid utility classes from theme settings to the Global Classes Manager could sometimes fail. You can now manually convert these classes using the dedicated converter available under Global Settings > Converters.
FIX
ATF v1.1
The Advanced Themer Framework has been updated with several enhancements, including form integration, a fresh update system, new granular options for theme styles, and custom labels for all CSS variables.
FIX
ATF: New Form integration
The AT Framework now offers full integration with the native Form Element, complete with essential CSS variables, a set of utility classes for advanced styling beyond Bricks' native options, fully mapped values in Theme Styles, and a dedicated recipe for one-off CSS customizations.
FIX
ATF: New update/restore system
This version introduces an enhanced update and restore system. The script now automatically detects available updates for any options you enable in the ATF modal. It also highlights any changes made compared to your installed version, making it easy to see which options need to be re-imported or restored.
FIX
ATF: New granular options for Theme Styles
In previous releases, Theme Styles featured a single toggle that imported all mapped CSS values at once. In this version, you have complete control, with separate toggles for each option. This allows you to manage global styles more precisely without needing to delete anything manually.
FIX
ATF: New “AT Contextual” palette
This version introduces a new "contextual" palette, featuring colors for "info," "warning," "danger," and "success." These colors can now be customized separately for dark mode, giving you greater styling flexibility.
FIX
ATF: Added –at-radius–l and at-radius–x
We've expanded the default radius scale to include new "large" and "extra-large" variants.
FIX
ATF: Updated .at-colorset to include color styling for classes with .’accent’ in the name
All colorset utility classes have been enhanced to automatically detect any nested class containing "accent" and apply custom styles accordingly.
FIX
Global Color: new ‘at/color_palettes/override_palette_settings’ php filter
Several users have asked for a way to enable or disable palettes dynamically, like applying a different color scheme to specific pages based on certain conditions. In the next release, you’ll be able to achieve this programmatically using this new PHP filter:
FIX
CSS Variable Manager: New Custom groups
The Variable Manager now supports custom Groups - a handy way to keep your variables organized. These Groups enhance your workflow, especially when used alongside the Variable Picker, offering a smoother, more intuitive experience. Each Group can contain any type of variable, including clamps, colors, and static values, giving you complete flexibility and control over your setup.