Studio

Your first section in 3 minutes

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

Prerequisites

If you have not installed the plugins yet, follow the Installation guide first.

Accessing Studio

Once both plugins are active, open any page in Bricks Builder. You will see the Bricksfusion Studio icon in the editor toolbar. Click it and 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. There is nothing to unlock manually. If you work with a team, editors who are not the license owner start in Editor Mode with the permissions you configure. See Permissions.

Setting up API keys

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, and most users spend between one and five dollars per month. The exact cost appears after every generation, so there are never surprises.

Getting a key takes about two minutes:

Once you have a key, open the Settings panel in Studio and go to the Keys section. Keys are encrypted and stored securely. They are only used to make API calls on your behalf and are never shared with anyone. Several providers offer free credits for new accounts, which is plenty to test Studio before committing to any spending.

The onboarding tour

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 you 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.

You can skip it at any point with the Escape key or the skip link, and replay it whenever you want from the Settings panel.

The three generation modes

Studio builds at three different scales. Pick the mode from the top bar:

Live progress and the Verified badge

Generating is not a black box in Studio. The moment you press generate, Studio shows you 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.

Mockup Preview: see it before you spend

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 you can 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, so the structure you approved is the structure you get. Your colors, framework variables, and style settings are 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.

Reference image

You can 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, it is 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

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 over 580 hand built wireframes, then applies your content, your colors, and your framework on top. The result is consistent quality at a lower cost.

How it works:

1. Open the creative toolbox (the + button next to the prompt) and enable Wireframe Mode
2. Pick a category, or let Studio detect it from your prompt automatically
3. Describe your content: the text, images, and details you want
4. Studio selects the best matching wireframe and adapts it to your description
5. The result arrives built with your framework variables, palette, and settings

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.

When you enable Wireframe Mode, any active Style Preset is cleared automatically. The wireframe structure becomes the design foundation instead.

Wireframe Library

The Wireframe Library is a visual browser for all 580 plus 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

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.

Planning always runs on an Economy model regardless of your selected tier, so the planning step costs next to nothing. Generation uses your selected model. Copy All merges the whole page into one Bricks compatible JSON, Copy Section copies one section, and Retry regenerates only what failed.

Code Import

Code Import converts existing HTML, CSS, and JavaScript into native Bricks Builder elements. If you have a component from CodePen, Tailwind UI, a component library, or an old website, you can bring it into 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 are mapped 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. Every conversion is saved to your project History with its cost, so you can reload it later like any other generation.

Create Global Classes from your CSS

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.

Multi section import

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 sections detected shows you a plan to review. One or none falls back to the standard single conversion, so the simple path is never broken.

The section plan

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. You can enable them anyway if you want them converted.

Smart CSS extraction

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

Rules that match no detected section are kept as shared globals so nothing is lost. Less CSS per section also means fewer input tokens, which lowers the cost of every conversion.

Parallel conversion

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.

Brand Discovery

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.

You can 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.

Suggestions written for your business

The suggestion chips under the prompt box are not 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.

Prompt Consultant

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.

You 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.

You can 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 and the Preset Gallery

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.

The Preset Gallery

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.

Open the gallery from the creative toolbox (the + button). Color palettes and the custom color picker are only visible in Vanilla mode. If you use ACSS, Core Framework, AT Framework, or Bricks native tokens, your framework colors are used instead and the palette selector stays hidden.

Color Panel and Canvas Sync

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

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.

Framework support

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.

VVanilla

Bricks Builder

ACSS

Core Framework

AT Framework

• Vanilla has no framework dependency. Hex colors, px values, the 70 palettes, the custom picker, Canvas Sync, and spacing presets.
• ACSS supports brand colors, shades, section spacing, heading tags, and grid utilities.
• Core Framework supports color and spacing variables with text scale typography. It does not use heading tag variables or section spacing variables.
• AT Framework uses variables with the at- prefix convention.
• Bricks Builder Framework reads your Design Tokens from the Bricks Style Manager. See Bricks Design Tokens. Requires Bricks Builder 2.2 or later.

If you use ACSS, Core Framework, or AT Framework, you can also import your framework configuration file so the output uses your exact spacing and typography tokens. The configuration is saved per framework, so switching frameworks restores the last imported configuration automatically.

Bricks Design Tokens

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.

Bricks Design Tokens require Bricks Builder 2.2 or later. On older versions, choose a different framework or update Bricks.

Global Classes

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.

Spacing presets

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

With a CSS framework selected, your framework spacing variables handle this automatically and the presets stay hidden.

BEM methodology

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.

Languages

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.

Text AI translation supports the same 23 languages, so you can generate in English and translate afterwards, or generate directly in your target language.

Stock media

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.

Animations

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:

Search animations by name from the creative toolbox. Each one includes a live preview so you can see the effect before generating.

Text AI

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

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

You can also describe any transformation in plain language using the text input. Section AI uses an Economy model for fast, low cost results. The workflow that works best: generate once, then iterate with transformations instead of regenerating.

CSS AI

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.

Presets (no AI required)

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.

Custom generation

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.

Applying and merging CSS

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

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. If you are a freelancer or an agency, one project per client site is the setup that pays off.

Copy design between projects

When you create a new project, you can 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 can 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.

Permissions

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

For stricter setups, the Require site specific key option in the Keys section blocks generation on any site that does not have its own API key, so nobody can accidentally bill your default keys on a client project.

Per site API keys

If you manage several client sites, you can 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 fallback is automatic and per provider. To keep Editors away from the keys entirely, disable the Change provider permission: they can keep generating with whatever keys the Admin configured, but the Keys section stays hidden from them.

Custom AI endpoint

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.

Prompt caching, Deep Thinking, and image generation are not available with custom endpoints. Calls are made from Studio servers, so the endpoint must be publicly reachable. Output quality depends entirely on the model behind it.

AI providers and models

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

The model you select handles the main generation. Auxiliary operations (Text AI, Section AI, category detection, batch edits, Prompt Consultant, Brand Discovery, personalized suggestions) always use an Economy model to keep costs minimal. With OpenRouter, all operations use the model you selected. With a custom endpoint, all operations use the configured model.

Image generation

Three providers can generate images directly from Studio:

Generate hero backgrounds, product shots, or placeholder visuals without leaving Bricks. Claude and custom endpoints do not generate images, so switch to one of the three providers above for that step.

Deep Thinking

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.

It increases generation time and cost, so use it selectively where design quality is the top priority. For standard sections, the normal Pro tier already produces excellent results.

Generation History

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, or Import. 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.

Costs

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

Auxiliary operations cost fractions of a cent. Most users spend between one and five dollars per month. Custom endpoints report $0.00 since Studio does not know the pricing of your model.

All five built in providers support some form of prompt caching, which lowers the cost of repeated generations:

• Claude uses explicit caching. Cache reads cost about 10% of the normal input price, saving up to 90%.
• OpenAI caches automatically. Cached tokens get a 50% discount.
• Grok caches automatically via prefix matching.
• Gemini has implicit caching on supported models. Cache reads cost 25% of the input price.
• OpenRouter sends explicit cache breakpoints for Anthropic models and relies on automatic caching elsewhere.

A cache indicator appears in Studio when caching is active, and the cost shown after each generation already reflects the savings. Page Composer shows the estimated cost during review, before you confirm anything.

Best practices

Troubleshooting