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 panel as an overlay 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.

License owners are granted Admin Mode automatically on their first load. There is no need to enter a license key manually. If you work with a team, editors who are not the license owner will start in Editor Mode with the permissions you configure (see Permissions).

Onboarding tour

The first time you open Studio, a guided tour walks you through the interface. It highlights the three generation modes, the creative toolbox where you configure wireframes, style presets, colors, and animations, the settings panel where you choose your AI model and enter API keys, and the design and content configuration.

You can skip the tour at any point and replay it later from the Settings panel.

Projects

Projects let you organize your work into separate configurations. Each project stores its own framework, color palette, style preset, spacing, AI provider, Project Brief, and every other setting independently. When you switch projects, Studio loads the entire configuration for that project instantly.

The project picker is located in the top bar of Studio. From there you can create new projects, rename them, duplicate an existing project with all its settings, or delete projects you no longer need. Every project is stored in the cloud, so your configuration persists across sessions and devices.

When you first use the new version of Studio, your existing settings are automatically migrated into a default project. This project cannot be deleted, so you always have a starting point.

Generation history is linked to each project, so you can see which sections were generated in which context. This is especially useful for freelancers and agencies working on multiple client sites with different design systems.

AI providers and models

Studio supports six AI providers. Five are built-in with predefined model tiers, and the sixth lets you connect your own endpoint. 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, category detection, Prompt Consultant, and Project Brief always use an Economy model to minimize costs. With OpenRouter, all operations use the model you selected. With a custom endpoint, all operations use the configured model since there is no tier system.

Custom AI endpoint

The custom endpoint option lets you connect any OpenAI-compatible or Anthropic-format API to Studio. This means you can use your own proxy, a self-hosted model, or a corporate AI gateway while Studio handles everything else: prompt composition, JSON generation, and the full post-processing pipeline.

Configuration requires four fields: an HTTPS endpoint URL, a model name, the API format (OpenAI-compatible or Anthropic), 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 API keys.

All Studio features work with a custom endpoint: section generation, Page Composer (planning and parallel generation), Code Import (single and multi-section), Text AI, Section AI transformations, Prompt Consultant, and Project Brief. Every response passes through the same post-processing pipeline as built-in providers.

Typical use cases include proxying to an existing subscription to avoid paying separate API credits, running self-hosted models like Llama, Qwen, or Mistral via Ollama or vLLM, routing through corporate AI gateways where data cannot leave your infrastructure, and connecting alternative providers like Together AI, Fireworks, Groq, or Deepinfra that expose OpenAI-compatible APIs.

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

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, open the Settings panel in Studio and navigate 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 third parties. Some providers offer free credits for new accounts, which is enough to test Studio before committing to any spending.

Per-site API keys

If you manage multiple client sites, you can assign different API keys per domain. This lets each client pay their own AI costs while you keep your default keys as a fallback.

In the Settings panel under Keys, toggle Site-specific keys to switch between managing your default keys and the keys for the current domain. When the toggle is on, any key you add is saved exclusively for that domain.

The fallback is automatic and per-provider. For example, if a client site has a site-specific Claude key but no OpenAI key, Claude generations use the client key while OpenAI generations fall back to your default key.

To prevent editors from accessing or modifying API keys, disable the Change provider permission in the Permissions panel. Editors will still be able to generate sections using whatever keys the Admin has configured, but they will not see the Keys section.

For extra control, enable the Require site-specific key permission. When active, generation is blocked on any site that does not have its own key configured. The fallback to your default keys is disabled, so no one can accidentally use your keys on a client site.

Generation modes

Studio offers three generation modes, accessible from the top bar:

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 a library of 374 wireframes and applies your content, colors, and framework on top.

How it works:

1. Open the creative toolbox (the + button next to the prompt) and enable Wireframe Mode
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 and adapts it to your description
5. The result uses your framework variables, color palette, and style preset

The 21 wireframe categories:

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 23 supported languages.

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

Wireframe Library

The Wireframe Library is a visual browser where you can explore all 374 wireframes organized by category. Open it from the Library button in the top bar.

Browse through categories using the dropdown, and click any wireframe to see two options. Insert as template copies the wireframe JSON directly to your clipboard with your color palette applied, so you can paste it into Bricks immediately. Customize with AI sends the wireframe to the generation flow where the AI adapts it to your prompt, adding real content, adjusting the structure, and applying your full design system.

When using Vanilla mode, a palette panel is available inside the Library so you can preview wireframes with different color schemes before inserting them.

Brand Discovery

Brand Discovery is a guided wizard that captures your business identity in a few minutes. It asks questions across seven areas: what your business does and what makes it unique, who your audience is and what they care about, the tone and voice your content should use, key messages and value propositions, the actions you want visitors to take, restrictions the AI should always respect, and visual preferences like photography versus icons or whitespace density.

The wizard produces a brief of up to 300 words in natural prose. This brief is injected into every single generation regardless of mode, provider, or style preset. Once configured, every section you generate already knows your brand, your products, and your audience.

You can write the brief manually or let the wizard guide you. The brief is saved per project, so different projects can have different brand identities. Access Brand Discovery from the creative toolbox (the + button) or from the Settings panel under Content.

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, typing a custom answer, or combining both. After a few rounds, Prompt Consultant generates a complete brief that you can send directly to the section generator. If you have a Brand Discovery brief configured, the consultant receives it automatically and skips questions you have already answered, focusing only on layout and content decisions specific to this generation.

You can edit any previously answered question by clicking on it. Changing an earlier answer re-asks the follow-up questions so the final brief stays coherent. The consultant auto-detects your language so the questions and the final brief match the language you are working in.

Prompt Consultant uses an Economy model for all operations to keep costs minimal.

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:

After generation, a Style Fingerprint is extracted programmatically from the completed sections. It captures the most common patterns for headings, buttons, and cards, then enforces those patterns on any sections that deviate. This fingerprint is saved and applied automatically to future individual generations on the same site, so sections you create later maintain the same visual style.

The Design DNA from a completed page is saved as Site DNA. When Site DNA is active, it is injected into all subsequent individual section generations so new sections follow the same visual rules as the original page. You can toggle Site DNA on or off from the Settings panel.

Page Composer auto-saves progress after each completed section. If you close and reopen Studio, your draft is restored with all completed sections intact and any failed sections ready to retry.

Planning always uses an Economy model regardless of your selected tier. Generation uses your selected model. Copy All merges every section into a single Bricks-compatible JSON. Copy Section copies one section individually. Retry re-generates only the sections that failed.

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. When you paste HTML that contains embedded <style> or <script> blocks, Studio automatically extracts them into the CSS and JS tabs. This gives the AI cleaner input and improves conversion accuracy.

Headings, text, buttons, images, links, and forms become native Bricks elements. CSS properties are mapped to native Bricks properties wherever possible. Complex structures that cannot be represented as native elements are wrapped in code blocks that preserve the original HTML, CSS, and JavaScript. Your selected framework variables are applied to the converted output.

Multi-section import

When you paste the HTML of an entire web page, Studio automatically detects the individual sections within it and converts each one independently. This avoids the problems of sending a large page to the AI in a single request: truncated output, lost styles, and zero control over the result.

Section detection is fully programmatic. Studio looks for semantic HTML tags (<section>, <header>, <footer>, <main>, <article>, <nav>) and divs with semantic class names like “hero”, “pricing”, “testimonial”, “faq”, and many more. Labels are inferred automatically from the class name or id of each element.

If Studio detects two or more sections, it shows a section plan for you to review before converting. If it detects one section or none, it proceeds with the standard single conversion. The previous behavior is never broken.

Section plan

When multiple sections are detected, a visual plan appears with every section found. Each entry shows the inferred name (from the class name or id), the source HTML tag, the number of HTML lines for gauging complexity, and the first CSS class for quick identification.

Headers and footers are tagged with a Template badge because in Bricks Builder these typically belong in separate templates, not in the page content. They appear disabled by default as a reminder, but you can enable them if you want to convert them anyway.

Before confirming the plan, you can enable or disable individual sections, reorder them by dragging up or down, rename any section label, remove sections you do not need, and preview the raw HTML of each section.

Smart CSS extraction

When you paste a full page, the CSS often contains styles for every section. Instead of sending the entire stylesheet to each section, Studio distributes CSS intelligently:

CSS rules that do not match any detected section are included as shared globals so nothing is lost. This approach reduces input tokens per section, which lowers cost and gives the AI a cleaner context.

Parallel conversion

After you confirm the plan, Studio converts all enabled sections in parallel with controlled concurrency per provider. You see real-time progress for each section as it completes or fails.

Each completed section passes through the full post-processing pipeline. The cost and conversion time are shown per section. You can copy all sections merged into one JSON, copy individual sections, or retry any section that failed without losing the ones that already completed.

Stock media

Studio automatically injects real stock photos and videos from Pexels into your generated sections. When the AI creates an image element or a video element, it includes a search query describing what the image should show. Studio then searches Pexels for a matching high-quality photo or video and replaces the placeholder URL with a real one.

This also works for background videos on sections. If you ask for a hero with a video background, the AI generates the section with a background video property and Studio injects an HD video from Pexels that matches the context.

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

Style and color presets

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

Style Presets include detailed technical instructions for the AI: exact Bricks JSON syntax for shadows, borders, gradients, spacing, corners, and typography. Presets like Dark Neon include glow effects with precise shadow values. Presets like Glassmorphism include backdrop blur with the exact _cssCustom syntax. Each preset produces a visually distinct result.

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.

Color Panel and Canvas Sync

The Color Panel is a full-width overlay available when using Vanilla mode. Open it from the Palette button in the top bar. It provides a visual mockup showing how your six palette colors (primary, secondary, accent, background, surface, text) look together, along with editable color swatches with hex values and color pickers.

The right side of the panel contains the 70 color presets organized by category with a search bar. Hovering over a preset temporarily applies it to the mockup so you can preview different palettes before committing.

Canvas Sync

Canvas Sync reads the colors from the sections you have already built in Bricks and maps them to your Studio palette roles. It analyzes every section on your canvas, detects which colors are used for backgrounds, text, buttons, cards, icons, and dividers, and identifies patterns across your page.

You can import the detected colors into your palette with one click, replacing your current palette with the colors that already exist on your page. You can also apply your current palette to existing sections on the canvas, with per-section checkboxes so you control exactly which sections are affected. An undo button lets you revert the last color application.

Canvas Sync is only available in Vanilla mode because CSS framework users control their colors through external framework configuration.

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.

VVanilla

Bricks Builder

ACSS

Core Framework

AT Framework

• Vanilla has no framework dependency. Hex colors, px values, 70 color palettes, custom color 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. 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. The configuration is saved per framework, so switching between 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. This includes color palettes (with light, dark, and transparent shades), spacing scales, and typography scales.

In the Settings panel under Design, 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 creative toolbox to activate this feature.

Studio reads your available Global Classes and groups them by type: section, button, card, heading, text, layout, and generic. You can select all classes, deselect all, or pick individual classes. A post-processor validates all assignments after generation, ensuring only real class names from your site appear 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 all 23 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:

You can also describe any transformation in plain language using the text input. Section AI uses an Economy model for fast, low-cost results. Transformations are ideal for quick iterations after generating a section.

CSS AI

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

Presets (no AI required)

34 curated CSS effects organized by element type. Select any 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. The AI generates the code using your configured Economy model. Custom generation respects your active CSS framework: if you use ACSS, the AI generates var(--primary) instead of hex values. If you use Bricks Design Tokens, it uses your actual 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 selecting a preset, click Apply. The CSS writes directly to the element's _cssCustom field and the effect appears in the canvas immediately.

The Replace existing CSS toggle controls whether new CSS replaces or merges with existing custom CSS. When merging, CSS AI parses selectors and @keyframes names to avoid conflicts. If a selector already exists, only that block is updated. New selectors are appended. This lets you accumulate multiple effects on the same element.

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 and color palette, not a pixel-perfect copy of the reference.

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 and custom endpoints do not support image generation. If you 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. Deep Thinking is not available with custom endpoints.

Generation History

Every generation is saved automatically and accessible from the History panel, which opens from the top bar. History is grouped by time: Today, Yesterday, This Week, and Older. You can filter by type: Section, Page, or Import.

Each entry shows the type of generation 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 23 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 23 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 Settings panel 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.

Animations

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

Over 91 animations are available across 7 categories:

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

Permissions

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

The Require site-specific key option in the Keys section provides additional control for agencies. When active, generation is blocked on any site that does not have its own API key configured.

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, Prompt Consultant, Brand Discovery) use Economy models and cost fractions of a cent per operation. Most users spend between $1 and $5 per month. Custom endpoints report $0.00 cost since Studio does not know the pricing of your model.

All five built-in providers support some form of prompt caching, which reduces costs further on repeated generations. Custom endpoints do not support prompt caching through Studio.

• Claude uses explicit caching with breakpoints. 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 for other providers.

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