Studio

The fastest way to understand Studio is to generate something. Here is the whole journey, from zero to a section on your canvas.

Once both plugins are active, open any page in Bricks Builder and click the Bricksfusion Studio icon in the editor toolbar. Studio opens as an overlay inside Bricks: no separate window, no leaving your workflow.

Studio verifies your license automatically using the email tied to your purchase. If you manage multiple client sites, the same license works on all of them, because Studio identifies you by your purchase email, not by the WordPress user email.

License owners get Admin Mode automatically on their first load, with nothing to unlock manually. Editors who are not the license owner start in Editor Mode with the permissions you configure. See Permissions.

Studio uses a BYOK (Bring Your Own Key) model: you create a free API key with any AI provider and pay them directly for what you use. Bricksfusion adds nothing on top of provider costs, most users spend between one and five dollars per month, and the exact cost appears after every generation, so there are never surprises.

Getting a key takes about two minutes:

The first time you open Studio, a guided tour takes the wheel. Instead of pointing at buttons and describing them, the tour drives the interface for you: it opens the Preset Gallery by itself so you can see the 49 visual styles live, opens the Wireframe Library so you can browse real section blueprints, walks you through the tools hidden inside the prompt box, shows where personalized suggestions come from, and explains how every generated section gets verified before you see it.

Settings come last, once you have seen what Studio can actually do. The whole tour takes about two minutes.

Skip it at any point with Esc or the skip link, and replay it whenever you want from the Settings panel.

Studio has four generation modes. Pick one from the top bar:

Generating is not a black box in Studio. The moment you press generate, Studio shows what it understood from your prompt: the wireframe it selected, the model doing the work, your active color palette, and whether the prompt cache is saving you money on this run.

Then, as the section is finished, real quality checks appear on screen as they complete: structure validation, your palette being applied, contrast verification, stock media being added. Nothing on that screen is decorative. When a check appears, that step actually happened, with the real numbers from your generation.

Finished sections carry a Verified badge next to the result, showing how many automatic fixes were applied and confirming the WCAG contrast check. Every section you paste into Bricks has earned that badge first.

Page mode and multi section imports show a different kind of progress: a live list of every section with its status, duration and cost, updating in real time as each one completes.

Sometimes you want to see the layout before committing to a full generation. That is what the Preview button does: the eye icon that appears next to your prompt once you have typed a few characters.

Click it and Studio produces a fast, lightweight visual mockup of your section. It is not the final result, it is a sketch you can react to. Type feedback in plain language, for example make the cards bigger or move the image to the left, and the mockup updates. Iterations are cheap because Studio reuses the cached context on every round, so refine the layout as many times as you need.

When the mockup looks right, approve it. Studio captures the approved layout and passes it to the real generation as a binding reference: the structure you approved is the structure you get, with your colors, framework variables and style settings applied on top.

Mockup Preview is available in Section mode. It is hidden when Wireframe Mode is active, because wireframes already define the structure, and in Page mode, where the plan review plays that role. An unfinished mockup is saved as a draft, so you can close Studio and come back to it within a day.

Attach a screenshot of any design to your prompt: click the image icon next to the prompt box and upload it. The AI analyzes the visual structure and uses it as a guide when building the section. The output is constructed with your framework variables and your color palette, a faithful interpretation, not a pixel copy.

If you do want the original colors, enable the Use colors from image toggle that appears under the upload. Studio then extracts the palette from the image itself instead of applying yours. This toggle is available in Vanilla mode.

This is the fastest way to bring designs from Figma, Photoshop or a reference website into editable Bricks components. For complex screenshots with many nested elements, enabling Deep Thinking with Claude noticeably improves accuracy.

Wireframe Mode is the most efficient way to generate standard sections. Instead of inventing a layout from scratch, the AI starts from a proven structure picked from a library of 390+ hand built wireframes, then applies your content, your colors and your framework on top. The result is consistent quality at a lower cost.

The 21 wireframe categories:

Auto detection is the recommended way to use it. Write a normal prompt, for example a pricing section with two plans, and Studio identifies the category and picks the wireframe for you. Detection works in any of the 23 supported languages.

The Wireframe Library is a visual browser for all 390+ wireframes, organized by category. Open it from the Library button in the top bar and click any wireframe to choose between two paths.

Insert as template copies the wireframe JSON straight to your clipboard with your color palette already applied, ready to paste into Bricks. Customize with AI sends the wireframe into the generation flow, where the AI fills it with real content from your prompt and applies your full design system.

In Vanilla mode, a palette panel inside the Library lets you preview wireframes in different color schemes before inserting them.

Page Composer builds an entire page of multiple sections from a single prompt. Describe the full page you want and Studio runs a three phase process where nothing is generated until you approve it:

After generation, Studio extracts a Style Fingerprint from the finished sections: the dominant patterns for headings, buttons and cards. Any section that drifted from the pattern is corrected, and the fingerprint is saved. Future individual generations on the same site follow it automatically, so sections you create next week still match the page you built today.

The Design DNA of a completed page is saved as Site DNA and injected into all later single section generations. You can toggle Site DNA on or off in the Settings panel.

Progress is auto saved after every completed section. If you close Studio mid generation, your draft is restored on return, with finished sections intact and failed ones ready to retry.

Copy All merges the whole page into one Bricks compatible JSON, Copy Section copies one section, and Retry regenerates only what failed.

Code Import converts existing HTML, CSS and JavaScript into native Bricks Builder elements. A component from CodePen, Tailwind UI, a component library or an old website lands in Bricks without rebuilding it by hand.

Studio gives you a split editor with HTML, CSS and JS tabs. Paste HTML that contains embedded <style> or <script> blocks and Studio extracts them into the right tabs automatically, which gives the AI cleaner input and a more accurate conversion.

Headings, text, buttons, images, links and forms become native Bricks elements. CSS properties map to native Bricks properties wherever possible. Structures that cannot be represented natively are wrapped in code blocks that preserve the original markup and behavior. Your selected framework variables are applied to the output, and every conversion is saved to your project History with its cost, so you can reload it later like any other generation.

By default, imported styles land inline on each element. That works, but it does not scale: changing a button color later means editing every button. The Create Global Classes toggle changes that. When enabled, Studio turns the classes from your imported CSS into real Bricks Global Classes and assigns them to the converted elements.

Change a class once in Bricks and every element using it updates everywhere. Classes shared by several sections are detected and unified, so pasting multiple converted sections never triggers the Bricks class conflict dialog. CSS that has no native Bricks equivalent is preserved inside the custom CSS of the class itself, so nothing from your original stylesheet is lost.

The toggle is available in Vanilla mode, appears when your import includes CSS, and is off by default, so the standard behavior never changes unless you ask for it.

Paste the HTML of an entire web page and Studio detects the individual sections inside it, then converts each one independently. This avoids everything that goes wrong when a huge page is sent to the AI in one request: truncated output, lost styles and zero control over the result.

Detection is fully programmatic. Studio looks for semantic tags such as <section>, <header>, <footer>, <main>, <article> and <nav>, plus divs with meaningful class names like hero, pricing, testimonial or faq. Labels are inferred from the class or id of each element. Two or more detected sections show you a plan to review. One or none falls back to the standard single conversion, so the simple path is never broken.

When multiple sections are found, a visual plan lists every one of them with its inferred name, source tag, HTML line count for gauging complexity, and first CSS class for quick identification. Before confirming you can enable or disable sections, drag to reorder them, rename labels, remove what you do not need, and preview the raw HTML of each one.

Headers and footers carry a Template badge and start disabled, a reminder that in Bricks these usually belong in separate templates rather than page content. Enable them anyway if you want them converted.

A full page stylesheet contains rules for every section. Instead of sending everything to everyone, Studio distributes the CSS intelligently:

After you confirm the plan, all enabled sections convert in parallel and you watch each one complete or fail in real time, with cost and duration shown per section. Copy everything merged into one JSON, copy sections individually, or retry only what failed without losing the rest.

By default, Studio generates static sections: the text and images in the result are exactly what the AI wrote. Enable Dynamic content and Studio reads the structure of your WordPress site first, then generates sections connected to your real content through native Bricks dynamic data tags and Query Loops.

Custom fields from ACF, Meta Box, JetEngine and Pods are detected automatically with the exact tag each field uses. If your post type is called properties and the field is price, the generated section uses {acf_price}. Field names in any language work the same way: the exact tag is always used, never an invented name.

Text, image and link elements are each wired with the right kind of tag: titles with {post_title}, images with {featured_image}, links with {post_url}, and your custom fields with their own tags.

Three loop types are supported: posts (including any custom post type), taxonomy terms and users. WooCommerce products work through the product post type with native Woo tags. Because the loop is native, publishing new content updates the section automatically.

Dynamic content works in the Section Builder, in Wireframe Mode, in Page Composer, and through MCP. It is off by default, so your static sections keep behaving exactly as before.

The Menu Builder is the fourth generation mode. Describe the navigation you want and Studio builds a complete, working menu: desktop layout, mobile offcanvas, animated hamburger, transitions and states. The AI decides the content and structure, then a deterministic engine assembles the Bricks JSON and validates it before you see it. The result is native Bricks elements you edit like anything else on your canvas.

Pick one of the two menu types from the selector next to the prompt:

Brand Discovery is the single biggest quality upgrade in Studio, and it takes a few minutes. It is a guided wizard that captures your business identity: what you do and what makes you unique, who your audience is, the tone your content should use, your key messages, the actions you want visitors to take, restrictions the AI should always respect, and your visual preferences.

The wizard produces a brief of up to 300 words in natural prose. From that moment on, the brief is injected into every single generation, regardless of mode, provider or style preset. Every section you generate already knows your brand, your products and your audience. No more explaining your business in every prompt.

Write the brief by hand or let the wizard guide you. Briefs are saved per project, so different clients can have different identities. Open Brand Discovery from the creative toolbox (the + button) or from the Settings panel under Content.

The suggestion chips under the prompt box stop being generic examples once you have a Project Brief. Studio reads your brief once and writes a set of ready to use prompts about your actual business: your products, your services, your strengths, in your language. A piano shop in Sevilla sees suggestions about pianos in Spanish, not about SaaS dashboards in English.

This happens one time per brief and the results are saved in your browser, so refreshing the chips with the circular button is instant and free. Edit your brief and the suggestions regenerate for the new version automatically. Both Section mode and Page mode get their own personalized sets.

Without a brief, the classic suggestions appear, plus a dashed chip that says For your business. Click it and it takes you straight to where the brief is created. Once the brief exists, the chip retires itself.

Not sure what to write? Prompt Consultant is a conversational brief builder. Click the Enhance button (the sparkles next to your prompt) and instead of writing everything yourself, you answer a short series of questions about the section you need: content, structure, layout, details.

Answer by tapping options, typing a custom answer, or both. Any question that does not matter to you can be skipped with one click, without losing the answers you already gave. After a few rounds, the consultant writes a complete, detailed brief and places it in your prompt box, ready to generate.

If you have a Brand Discovery brief, the consultant receives it automatically and skips everything the brief already answers, going straight to the layout and content decisions specific to this section. It also detects your language, so the questions and the final brief match the language you work in.

Click any previously answered question to change it. Changing an earlier answer re asks the follow ups so the final brief stays coherent. The consultant runs on an Economy model, so the whole conversation costs a fraction of a cent.

Style presets shape the visual personality of everything you generate. Studio includes 49 of them, organized in 6 categories, and each one carries detailed technical instructions for the AI: exact Bricks syntax for shadows, borders, gradients, spacing, corners and typography. Dark Neon includes real glow values. Glassmorphism includes real backdrop blur. Each preset produces a visibly different result, not just a different adjective.

You do not have to imagine what Dark Cinematic or Neubrutalism looks like. The Preset Gallery shows a real visual preview of all 49 styles, organized by category. Browse them like a design catalog, see exactly what each one produces, and apply the one that fits with a click.

The Color Panel is a full width overlay for Vanilla mode, opened from the Palette button in the top bar. On the left, a live mockup shows how your six palette colors (primary, secondary, accent, background, surface, text) work together, with editable swatches and color pickers. On the right, the 70 color presets organized by category with a search bar. Hover any preset and the mockup previews it instantly, before you commit.

Canvas Sync connects your palette with the page you already built. It reads every section on your Bricks canvas, detects which colors play which role (backgrounds, text, buttons, cards, icons, dividers), and shows you the patterns it found.

From there, two directions. Import the detected colors into your Studio palette with one click, so new generations match what already exists. Or apply your current Studio palette to the existing sections on the canvas, with a checkbox per section so you control exactly what changes. An undo button reverts the last application.

Canvas Sync is a Vanilla feature, because framework users control colors through their framework configuration.

Studio speaks your CSS framework. Every color, spacing value, typography token and border radius in the output uses the correct variable for the framework you select.

When you select Bricks Builder Framework, Studio reads your Design Tokens directly from the Bricks Style Manager: color palettes with light, dark and transparent shades, spacing scales, and typography scales.

In the Settings panel under Design, toggles control which palettes and scales are sent to the AI, so you decide exactly which tokens the output is allowed to use. Every generated section references your real CSS variables, which means zero manual adjustments after pasting.

In Vanilla mode, Studio can assign your existing Bricks Global Classes to generated elements instead of writing inline styles. Enable the Global Classes toggle in the creative toolbox to activate it.

Studio reads your available classes and groups them by type: section, button, card, heading, text, layout and generic. Select all, deselect all, or pick individual classes. After generation, a validator confirms every assignment, so only real class names from your site ever appear in the output.

This feature assigns classes you already have. If you want Studio to create new Global Classes from imported CSS, that is a separate feature of Code Import. See Create Global Classes from your CSS. The two are siblings: one respects your existing system, the other builds one from imported code.

In Vanilla mode, spacing presets control how much whitespace the output uses:

Studio can generate BEM class names for your sections. Enable the BEM toggle in the Settings panel and optionally set a custom prefix. Each element receives a semantic class name based on its role and position in the structure.

Useful for teams that follow BEM conventions or want to style generated sections with external CSS. BEM works with all frameworks. Note that BEM and Global Classes are alternative approaches to the same goal, so enabling one disables the other.

Studio generates content in 23 languages. Pick a language and all generated text (headings, paragraphs, buttons, labels) comes out in that language. The Studio interface itself stays in English.

Studio fills your sections with real photography instead of grey placeholders. When the AI creates an image or video element, it describes what should be shown, and Studio searches Pexels for a matching high quality photo or HD video and places it directly in the result.

This also works for background videos. Ask for a hero with a video background and the finished section arrives with a real HD video that matches the context, already playing.

Stock media can be toggled per project from the Settings panel. No extra API key is needed: the Pexels integration is built into Studio at no additional cost.

Studio integrates with the Bricksfusion Animations library. Pick an animation from the creative toolbox and the AI generates a section with the animation element as its root, preconfigured with the animation fields and your design settings.

Over 91 animations across 7 categories:

Text AI edits any text element directly inside Bricks Builder. Select a text element and use the floating toolbar to improve, rewrite, shorten, expand or translate it, without leaving the editor.

It also supports batch mode: select an entire section and edit all its text elements at once. Ideal for translating or rewriting a full section in one action. Translation covers all 23 languages.

Text AI always runs on an Economy model, so every edit costs a fraction of a cent. No configuration needed.

Section AI transforms an existing section without regenerating it from scratch. Select a section in Bricks and choose from 9 transformation categories:

CSS AI adds hover effects, entrance animations and decorative CSS to any element in Bricks, straight from the Floating Island. It works in two modes: curated presets that apply instantly without any AI call, and custom prompts where AI writes the CSS from a plain language description.

34 curated CSS effects organized by element type. Select an element, click a preset chip, and the effect appears immediately. No API call, no cost, no waiting.

Describe any CSS effect in natural language and the AI writes it using your configured Economy model. Custom generation respects your active framework: with ACSS it writes var(--primary) instead of hex values, with Bricks tokens it uses your real token variables. The framework badge in the CSS AI panel shows which variables will be used before you generate.

After generating or picking a preset, click Apply. The CSS writes directly to the element and the effect appears in the canvas immediately.

The Replace existing CSS toggle controls whether new CSS replaces or merges with what is already there. When merging, CSS AI parses selectors and keyframe names to avoid conflicts: existing selectors are updated in place, new ones are appended. This lets you stack several effects on the same element safely.

Projects keep your work organized into separate, complete configurations. Each project stores its own framework, color palette, style preset, spacing, AI provider, Project Brief and every other setting. Switch projects and Studio loads the entire configuration instantly.

The project picker lives in the top bar. From there you create, rename, duplicate and delete projects. Everything is stored in the cloud, so your configuration follows you across sessions and devices. The first time you use a version with Projects, your existing settings are migrated into a default project that cannot be deleted, so you always have a starting point.

Generation history is linked to each project, so you always know which sections belong to which client. For freelancers and agencies, one project per client site is the setup that pays off.

When you create a new project, start from a blank canvas or inherit the design from an existing project. Inheriting copies the framework, color palette, spacing, methodology and BEM configuration, so the new project is ready to generate in your established style without configuring anything.

You can also apply a design to an existing project. Open the project picker and choose Copy design from, then select the source project. The design changes immediately and you see it reflected in real time. Your current session, including any generated sections on screen, is not affected.

An Undo button appears for five seconds after applying. It restores the exact design you had before the copy, including any changes you made during the current session. The undo is persisted to the database, so switching away and coming back does not lose it.

Studio has Admin and Editor roles. License owners get Admin automatically. Admins control what Editors can do through 8 permissions:

If you manage several client sites, assign different API keys per domain, so each client pays their own AI costs while your default keys remain as a fallback.

In Settings under Keys, the Site specific keys toggle switches between your default keys and the keys for the current domain. With the toggle on, any key you add is saved exclusively for this site.

The custom endpoint option connects any OpenAI compatible or Anthropic format API to Studio: your own proxy, a self hosted model, or a corporate AI gateway. Studio handles everything else, from prompt composition to the full quality pipeline.

Configuration needs four fields: an HTTPS endpoint URL, a model name, the API format, and an optional max tokens limit. If your endpoint requires authentication, an auth token field is available. All values are encrypted at rest with AES 256 GCM, the same encryption used for standard keys.

Every Studio feature works through a custom endpoint: section generation, Page Composer, Code Import, Text AI, Section AI, Prompt Consultant and Brand Discovery. Typical use cases: proxying an existing subscription, running Llama, Qwen or Mistral through Ollama or vLLM, routing through corporate gateways where data cannot leave your infrastructure, or connecting providers like Together AI, Fireworks, Groq or Deepinfra.

Studio supports 6 AI providers. Five come with predefined model tiers, the sixth is your own endpoint. Switch between them at any time.

Three providers can generate images directly from Studio:

Deep Thinking is an extended reasoning mode available with Claude on the Pro tier (Opus). The model takes more time to plan the structure before generating, which pays off on complex layouts with many nested elements and on detailed reference images.

Every generation saves automatically to the History panel, opened from the top bar. Entries are grouped by time (Today, Yesterday, This Week, Older) and filterable by type: Section, Page, Import or Menu. Each entry shows a color coded type label, element count and cost. Click any entry to reload it instantly.

History persists across sessions and is linked to your active project, so you can close Bricks and pick up exactly where you left off.

Studio shows the exact cost in USD after every generation. Typical costs per section: