Studio

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 to open the Studio interface as an overlay panel inside Bricks.

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

AI providers and models

Studio supports 5 AI providers. Each offers multiple model tiers so you can balance quality and cost. You can switch between providers at any time.

The model you select applies to the main generation task. Auxiliary operations like Text AI, Section AI transformations, batch text edits, and automatic category detection always use an Economy model to minimize costs.

Setting up API keys

Studio uses a BYOK (Bring Your Own Key) model. You create a free API key from any provider and pay them directly for usage. Bricksfusion charges nothing on top of provider costs.

To get an API key:

Once you have a key, enter it in the Studio settings panel inside Bricks Builder. Keys are encrypted and stored securely. They are only used to make API calls on your behalf and are never shared with third parties. Some providers offer free credits for new accounts, which is enough to test Studio before committing to any spending.

Generation modes

Studio offers three generation modes:

Wireframe Mode

Wireframe Mode is the most efficient way to generate sections. Instead of building from scratch, the AI starts with a proven layout structure from the library and applies your content, colors, and framework on top.

How it works:

1. Enable Wireframe Mode in the Studio sidebar
2. Select a category or let Studio auto-detect it from your prompt
3. Describe your content: the text, images, and details you want
4. Studio picks the best wireframe match from 374 templates and adapts it to your description
5. The result uses your framework variables, color palette, and style preset

The 21 wireframe categories available in Studio:

Wireframe Mode works best when you let Studio auto-detect the category from your prompt. Simply describe what you need (for example, "a pricing section with two plans") and Studio selects the right category and wireframe automatically. Auto-detection works with prompts in any of the 22 supported languages.

When you enable Wireframe Mode, any active Style Preset or Custom Style is cleared automatically. Wireframe Mode uses the wireframe structure as the design foundation instead.

Prompt Consultant

Not sure what to write? Prompt Consultant is an AI-powered conversational builder that helps you craft detailed creative briefs. Instead of writing a prompt from scratch, it asks you progressive questions about what you need.

You answer each question by selecting from multiple options or typing freely. After a few rounds, Prompt Consultant generates a complete brief that you can send directly to the section generator. It auto-detects your language so the questions and the final brief match the language you are working in.

Prompt Consultant is especially useful when you know what type of section you want but are not sure how to describe the layout, style, or content in enough detail for the AI to produce a great result.

Code Import

Code Import converts existing HTML, CSS, and JavaScript into native Bricks Builder elements. This is useful when you have a component from CodePen, Tailwind UI, a component library, or any other source and want to use it in Bricks without rebuilding it manually.

Studio provides a split editor with tabs for HTML, CSS, and JS. Paste your code, click convert, and Studio creates Bricks elements from the markup. Headings, text, buttons, images, and links become native Bricks elements. Complex structures that cannot be represented as native elements are wrapped in code blocks.

Your selected framework variables are applied to the converted output, so colors and spacing match your design system.

Style and color presets

Studio includes a curated selection of presets to guide the visual style and color palette of your generated sections:

As an alternative to Style Presets, you can write a Custom Style description in a free-text field. This gives the AI a specific design direction in your own words.

Color palettes and the custom color picker are only visible when using the Vanilla output mode. If you use ACSS, Core Framework, AT Framework, or Bricks Builder Framework, your framework colors are used instead and the palette selector is hidden.

Framework support

Studio generates output tailored to your selected CSS framework. Every color, spacing value, typography token, and border radius is output as the correct CSS variable for your framework.

ACSS

Core Framework

AT Framework

Bricks Builder Framework

• Vanilla has no framework dependency. Hex colors, px values, 70 color palettes, custom color picker, 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. 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 below. 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.

Bricks Design Tokens

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

In the Studio sidebar, toggles let you control which palettes and scales are sent to the AI. This gives you precision over which tokens the output uses. Every generated section references your actual CSS variables, so the output matches your design system with zero manual adjustments after pasting.

Bricks Design Tokens require Bricks Builder version 2.2 or later. If you are on an older version, select a different framework or update Bricks Builder.

Global Classes

When using the Vanilla output mode, Studio can assign your existing Bricks Global Classes to generated elements. Enable the Global Classes toggle in the Studio sidebar to activate this feature.

Studio reads your available Global Classes and a post-processor validates all assignments, ensuring only real class names from your site are used in the output. Global Classes are only available with Vanilla. When using a CSS framework, the framework variables handle styling instead.

Text AI

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

Text AI also supports batch mode: select an entire section and edit all text elements at once. This is ideal for translating or rewriting all the content in a section in a single action. Translation supports 22 languages (see Languages).

Text AI and batch mode always use an Economy model to keep costs minimal. No additional configuration needed.

Section AI

Section AI applies instant visual transformations to an existing section without regenerating it from scratch. Select a section in Bricks and choose from 9 transformation categories:

Section AI transformations use an Economy model for fast, low-cost results. They are ideal for quick iterations after generating a section, faster and cheaper than regenerating from scratch.

Page Composer

Page Composer generates an entire page of multiple sections in one prompt. Describe the full page you want and Studio follows a three-phase process:

Reference image

You can attach a screenshot or image of any design to your prompt. The AI analyzes the visual structure and uses it as a reference when generating the section. The output is built with your framework variables, not a pixel-perfect copy.

This is useful for converting designs from Figma, Photoshop, or reference websites into editable Bricks components. Click the image upload icon in the prompt input area and attach your reference.

Image generation

Three providers support image generation directly from Studio:

Generate images for hero backgrounds, product shots, or placeholder visuals without leaving the Bricks editor. Claude does not support image generation. If you use Claude as your main provider and need images, switch to one of the three providers above for the image generation step.

Deep Thinking

Deep Thinking is an extended reasoning mode available exclusively with Claude on the Pro tier (Opus). When enabled, Claude takes more time to plan and reason about the section structure before generating, producing higher-quality results for complex layouts.

Deep Thinking increases generation time and cost. Use it selectively for complex sections with many nested elements where design quality is the top priority. For standard sections, the normal Pro tier already produces excellent results.

Generation History

Every generation is saved automatically and accessible from the Recent panel in the Studio sidebar. History is grouped by time: Today, Yesterday, This Week, and Older.

Each entry shows the type of generation (Section, Page, or Import) with a color-coded label, the element count, and the cost. Click any entry to reload it instantly.

History persists up to 15 entries across sessions, so you can pick up where you left off even after closing and reopening Bricks Builder.

Languages

Studio generates content in 22 languages. When you select a language, all generated text (headings, paragraphs, buttons, labels) is output in that language. The Studio interface itself remains in English.

Text AI translation also supports all 22 languages, so you can generate a section in English and translate it afterwards, or generate directly in your target language.

Spacing presets

When using the Vanilla output mode, Studio offers spacing presets that control how much whitespace is used in the generated output:

Spacing presets are only visible with Vanilla. When using a CSS framework, your framework spacing variables handle this automatically.

BEM methodology

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

This is useful for teams that follow BEM naming conventions or want to style generated sections with external CSS. BEM works with all frameworks.

Permissions

Studio includes a permissions system with Admin and Editor roles, useful for teams and agencies. Admins can configure 8 permissions that control what Editors can access:

This lets agencies share access with team members while controlling API costs and feature access.

Costs

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

Auxiliary operations (Text AI, Section AI transforms, category detection, batch edits) use Economy models and cost fractions of a cent per operation. Most users spend between $1 and $5 per month.

All five providers support some form of prompt caching, which reduces costs further on repeated generations:

• Claude uses explicit caching with breakpoints. Cache reads cost about 10% of the normal input price, saving up to 90%. Studio extends the cache TTL to 1 hour.
• OpenAI caches automatically. Cached tokens get a 50% discount. No configuration needed.
• Grok caches automatically via prefix matching. No configuration needed.
• 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 for other providers. Sticky routing maximizes cache hits.

Studio shows a cache indicator when caching is active. The cost shown after each generation already reflects any cache savings. Page Composer shows the estimated cost during the review phase, before you confirm generation.

Best practices

Troubleshooting