Describe it.
Get native Bricks.

Bricksfusion is a premium toolkit for Bricks Builder that helps you design professional websites in minutes. It includes 370+ wireframe sections across 21 categories, 141 animations integrated directly into Bricks Builder with visual controls, 11 complete page layouts, and page transitions. Everything works with a simple copy and paste workflow.

Bricksfusion also includes Studio, an AI-powered tool that generates production-ready sections from text descriptions directly inside the Bricks editor. Studio supports six AI providers and works with your existing design system.

After purchasing, log in to your account at bricksfusion.com. From there you can browse the entire library of wireframe sections and layouts. Configure your design system (framework, colors, spacing) in the dashboard. Find what you need and click copy to paste it directly into your Bricks Builder canvas. The transformer pipeline automatically adapts the section to your framework.

For animations and page transitions, download and install the Bricksfusion plugin in WordPress. Activate it with your license key and you will see all 141 animation elements available directly in Bricks Builder.

All animations are native Bricks Builder elements. Drag any animation to your canvas and customize it directly from the sidebar controls. Adjust colors, speed, intensity, and more. Changes preview in real time while you edit. No external tools, no extra steps. Everything happens inside Bricks Builder.

Bricksfusion works with Vanilla (no framework), ACSS, Core Framework, AT Framework, and Bricks Builder Framework (Design Tokens from Bricks 2.2+ Style Manager). When you copy a component, it transforms automatically to your selected framework. No manual adjustments needed.

The toolkit covers everything you need to build complete websites:

• Wireframe Library: 370+ sections across 21 categories including heroes, pricing tables, features, testimonials, CTAs, footers, headers, contact forms, FAQs, bento grids, and more.
• Animations: 141 effects in 10 categories including backgrounds, showcases, visual effects, text animations, interactions, cursor effects, buttons, menu animations, advanced effects, and page transitions. All integrated directly into Bricks Builder with visual controls.
• Layouts: 11 complete page designs with header, sections, and footer ready to use.
• WooCommerce Templates: 4 production-ready single product pages with native WooCommerce elements.

Yes, all components are fully customizable. Once pasted into Bricks Builder, you can modify colors, fonts, spacing, images, and any other property. The components are built with clean, well-organized code so adjustments are straightforward.

No coding knowledge is required. Bricksfusion is designed for all skill levels. Copy, paste, and customize using the visual controls in Bricks Builder. Basic familiarity with Bricks Builder is recommended for the best experience.

Bricksfusion Studio is an AI-powered section generator built for Bricks Builder. Describe the section you need in plain language, and Studio generates production-ready JSON that you can paste directly into your Bricks canvas. With Page Composer, you can describe an entire page and Studio generates all sections at once, following the same design rules for visual consistency. Studio can also read your site content to generate sections connected to your real data through native Query Loops, and build complete navigation menus from a single prompt.

It supports 6 AI providers (Claude, OpenAI, Grok, Gemini, OpenRouter with 400+ models, and Custom Endpoint), 5 CSS frameworks, 370+ wireframe templates, 49 style presets, 70 color palettes, and 28 languages. Generated sections automatically include real stock photos and videos from Pexels at no extra cost.

Studio also includes Projects for organizing work across multiple clients, Brand Discovery for capturing your business identity, Text AI for editing content, Section AI for instant visual transformations, CSS AI for hover effects and animations, Prompt Consultant for building detailed briefs, and Generation History for tracking all your work.

Fusion UI is a premium Bricksfusion Studio feature that re-designs the whole Bricks builder interface. It brings a dark theme (Obsidian) and a light theme (Porcelain) that derive the entire workspace from one surface color, six harmonic accent proposals with measured contrast, a redesigned structure panel, Smart Variables that suggest your real design tokens inside the fields, a Cmd+K command palette, Focus mode, and an Essentials panel.

Fusion UI is off by default and personal to each user: every person on a site chooses their own workspace. With Cloud Sync, your setup is also saved to your Bricksfusion account and applied on every licensed site where you use that account email.

No. Fusion UI restyles the builder interface only, through the theming hooks Bricks itself provides. It never touches your content or your published site. The theme is applied server-side before the builder paints, so the original interface never flashes through, and the master toggle returns the original builder instantly.

No. Bricksfusion Studio uses a BYOK (Bring Your Own Key) model. You create a free API key from any supported provider (Claude, OpenAI, Grok, Gemini, or OpenRouter) and pay the provider directly for what you use. There is no monthly AI subscription, and Bricksfusion charges nothing on top of the provider costs. Most users spend between $1 and $5 per month depending on usage.

Open Bricksfusion Studio inside Bricks Builder, choose your AI provider and model tier, select a style preset and color palette, then describe the section you need in plain language. Not sure what to write? The Prompt Consultant asks you progressive questions to build a detailed brief automatically. You can also run Brand Discovery first to teach the AI about your business, audience, and tone so every generation reflects your brand.

Studio sends your description to the AI, which generates valid Bricks Builder JSON with real stock photos and videos included automatically. You can preview the result visually, copy it, and paste it directly into your Bricks canvas. The entire process takes seconds. You can also attach a reference image so the AI matches the layout and structure of an existing design.

Wireframes are pre-built structural templates that serve as the foundation for AI generation. Studio includes 370+ wireframes across 21 categories including hero sections, pricing tables, testimonials, FAQs, headers, footers, bento grids, and more. You can browse all wireframes visually from the Wireframe Library panel, click any wireframe to insert it directly with your palette applied, or send it to AI for full customization.

Enable Wireframe Mode, select a category (or let Studio detect it automatically from your prompt), describe your content, and the AI adapts the proven layout to your needs while applying your color palette, style preset, and CSS framework. Wireframes are framework-agnostic, meaning they work with any supported CSS framework.

Studio supports five built-in AI providers, each with multiple model tiers (Pro, Standard, Economy) so you can balance quality and cost, plus a Custom Endpoint that opens the door to everything else:

• Claude (Anthropic): Best overall quality. Supports explicit prompt caching for significant cost savings and Deep Thinking mode for complex sections.
• OpenAI: Strong alternative with DALL-E 3 image generation. Automatic prompt caching.
• Grok (xAI): Cost-effective option with built-in image generation. Automatic prompt caching.
• Gemini (Google): Reliable provider with native image generation. Automatic prompt caching on supported models.
• OpenRouter: Access to 400+ models including DeepSeek, Llama, Qwen, and Mistral. Prompt caching supported for Anthropic models and automatic where the underlying provider supports it.
• Custom Endpoint: Connect any service that speaks the OpenAI or the Anthropic API: a gateway subscription you already pay for, your own proxy, a self-hosted model, or a corporate AI gateway. One connection holds a whole set of models and you switch the active one with a click. Where the service publishes its own model list, Studio can read it for you, and you can nominate a cheaper model for the short jobs so your best one is reserved for building. All Studio features work with custom endpoints except prompt caching, Deep Thinking, and image generation.

With the five built-in providers, the active model is named in the Floating Island panel inside Bricks Builder. On a custom connection Studio names the model you picked while the canvas badge currently reads Custom; either way the generation runs on the model you selected. You can switch between providers at any time and use your own API keys for each one.

Yes, if the service speaks the OpenAI or the Anthropic API. You add it as a Custom Endpoint and the subscription you already pay for keeps its value inside Studio, instead of becoming a second AI bill on top of the one you have.

Gateways like Writingmate, Straico or LLMAPI publish an OpenAI-compatible interface, and so do many self-hosted setups and corporate gateways. Those are examples rather than a supported list: what Studio implements is the protocol these services publish, so anything that speaks it connects the same way. We have no partnership with any of them, and the account and token you connect are your own.

One connection holds a whole set of models, so you switch the active one with a click without reopening the configuration. Studio has no way to know what your own service charges, so it shows Cost not tracked next to the token count rather than a zero that would read as free.

Prompt caching stores the static parts of your prompt (schema rules, framework instructions, design system) so they don't need to be reprocessed on every generation. This reduces both cost and response time.

• Claude: Studio uses explicit prompt caching with cache breakpoints. The schema and framework instructions are cached, so subsequent generations reuse them. Cache reads cost about 10% of the normal input price, saving up to 90%. Cache lasts 5 minutes by default, extended to 1 hour in Studio.
• OpenAI: Caching is automatic on all requests with 1,024+ tokens. Cached tokens get a 50% discount. No configuration needed.
• Grok: Caching is automatic via prefix matching. No configuration needed.
• Gemini: Implicit caching on supported models. Cache reads cost 25% of the input price.
• OpenRouter: For Anthropic models, Studio sends explicit cache breakpoints. For other models (DeepSeek, Llama, etc.), caching is automatic where the underlying provider supports it. OpenRouter uses sticky routing to maximize cache hits.

Studio shows a cache indicator when caching is active. The cost per generation shown after each request already reflects any cache savings.

Studio supports four CSS frameworks plus Vanilla for projects without a framework. When you select a framework, every generated section uses the correct CSS variables for colors, spacing, typography, and border radius:

• Vanilla: Standard hex colors and pixel values. Includes 70 color palettes, custom color picker, Canvas Sync to read and apply colors from your existing Bricks sections, and spacing presets.
• Bricks Builder Framework: Reads your Design Tokens directly from the Bricks Style Manager. Generated sections use your own color palettes, spacing scales, and typography variables.
• ACSS: Full support for ACSS variables including brand colors, shades, section spacing, heading tags, and grid utilities.
• Core Framework: Support for Core Framework variables including color shades, text scales, and spacing.
• AT Framework: Compatible with AT Framework variable conventions including the at- prefix.

Yes. When you select Bricks Builder Framework, Studio reads your Design Tokens directly from the Bricks Style Manager. This includes your color palettes (with light, dark, and transparent shades), spacing scales, and typography scales. You control which palettes and scales are sent to the AI using toggles in the Studio sidebar. Every generated section uses your actual CSS variables, so the output matches your design system with zero manual adjustments after pasting into Bricks.

The cost depends on the AI provider and model tier you choose. Economy models (like Claude Haiku 4.5 or GPT-5.6 Luna) cost fractions of a cent per generation. Pro models (like Claude Opus) cost a few cents per generation. Studio shows the exact cost in USD after every generation, so you always know what you spent. All providers support some form of prompt caching, which further reduces costs on repeated generations. Most users spend between $1 and $5 per month total.

Yes. Every section generated by Studio includes responsive breakpoints out of the box. Horizontal layouts automatically stack on mobile, font sizes adapt to smaller screens, and spacing adjusts proportionally. You can also use Section AI transformations like Mobile Optimize, Tablet Optimize, Full Width Mobile, and Stack on Mobile to fine-tune the responsive behavior after generation.

Bricksfusion Studio is included exclusively with the Pro Lifetime Deal. The Essential plan includes the full component library, animations, layouts, and page transitions, but does not include Studio access. Once you have the Pro LTD, install the Bricksfusion AI plugin in WordPress to connect Studio directly inside Bricks Builder. The plugin handles authentication automatically using your existing license. One license works across all your WordPress installations.

Yes, by WordPress role. Since Studio 2.5.0, a WordPress administrator chooses from Settings, Account which roles can use Studio, which roles can add Bricksfusion animations in Bricks, and what the roles that stay in are allowed to do: Text AI, Generate sections, Transform sections, Generate images, Manage the Vault and Require site key. Administrators always keep full access. A role you switch off sees nothing from Bricksfusion in Bricks, and the site keeps working for them as usual.

Hiding the animation elements from the Bricks panel needs Bricksfusion Animations 1.4.2 or later, and animations already on a page keep working either way. Access is per role, not per user: to exclude one person, give them a different WordPress role and switch that role off.

Studio includes a complete set of AI tools that work directly inside Bricks Builder through the Floating Island panel:

• Projects: Organize your work into separate projects, each with its own framework, color palette, style preset, spacing, AI provider, and Project Brief. Switch between clients instantly without reconfiguring anything.
• Brand Discovery: A guided wizard that captures your business identity across seven areas: brand, audience, tone, messaging, CTAs, restrictions, and visual preferences. The resulting brief is injected into every generation so the AI always reflects your brand.
• Stock Media: Generated sections automatically include real stock photos and HD videos from Pexels. Hero sections can include background videos. No extra API key needed, built into Studio at no cost.
• Text AI: Select any text element and improve, rewrite, shorten, expand, or translate it to any of 28 supported languages. Batch mode lets you process all text elements in a section at once.
• Section AI: Apply instant transformations to existing sections including dark mode, light mode, color palette swaps (70 palettes), layout changes (Bento Grid, Split 50/50, columns), glassmorphism, neumorphism, typography adjustments, and responsive optimizations.
• Image AI: Generate contextual images using DALL-E 3, Grok, or Gemini directly from the editor. Magic Image analyzes the surrounding content and generates a contextual image automatically.
• CSS AI: 34 curated CSS effects (hover animations, glows, entrance effects, gradient borders) that apply instantly with one click. Or describe any effect in plain language and AI generates framework-aware CSS.
• Color Panel: Full color management with 70 preset palettes, editable swatches, and Canvas Sync. Canvas Sync reads the colors from your existing Bricks sections and lets you import them into your palette or apply your palette back to the canvas with per-section control.
• Prompt Consultant: An AI-powered conversational builder that asks progressive questions to craft detailed creative briefs. Supports multiselect answers and auto-detects your language.
• Generation History: Every generation is saved and grouped by time (Today, Yesterday, This Week, Older). Filter by type (Section, Page, Import, Menu), see cost per generation, and reload any previous result with one click.
• Code Import: Paste HTML, CSS, and JavaScript from any source and convert it to native Bricks Builder elements. For full pages with multiple sections, Studio detects each section automatically, shows you a visual plan, distributes CSS per section, and converts everything in parallel.
• Dynamic Data & Query Loops: Enable Dynamic content and Studio reads your post types, taxonomies, and custom fields, then generates native Query Loops connected to your real content.
• AI Menu Builder: A fourth generation mode that builds complete navigation menus from one prompt. Two styles: Mega Menu and Circular Menu.
• The Vault: Save any section to your Bricksfusion account and reuse it on every project. Insert it exactly as saved, or use it as a seed so Studio keeps the structure and rebuilds the content and colors for the site you are on.
• SureCart: When the site sells, Studio builds product pages, collection grids, reviews and related products from SureCart's own Bricks elements, with four curated product page blueprints and two one-click layout recipes.
• Global Classes: When using Vanilla framework, Studio can assign your existing Bricks Global Classes to generated elements for consistent styling.

CSS AI is a tool inside the Floating Island that adds hover effects, entrance animations, and decorative CSS to any Bricks element. It works on every element type: sections, divs, cards, buttons, headings, images, icons, text, and links.

It includes 34 curated presets organized by element type that apply instantly with one click: no AI call, no cost, no waiting. For example, select a button and click "Shine Sweep" for an instant hover effect.

You can also describe any custom effect in plain language and the AI generates the CSS using your Economy model for under $0.005 per generation. CSS AI respects your active CSS framework, so if you use ACSS or Core Framework, it generates proper CSS variables instead of hardcoded values. A smart merge system lets you stack multiple effects on the same element without conflicts.

Yes. Enable Dynamic content from the creative toolbox (the + button next to the prompt) and Studio detects your custom fields automatically, with the exact Bricks tag each one uses. Fields from ACF, Meta Box, JetEngine, and Pods are supported with the latest version of the Bricksfusion AI plugin.

The generated section uses your real field tags through native Bricks dynamic data, in whatever language your fields are named. Dynamic content is off by default, so your regular sections keep behaving exactly as before.

With Dynamic content enabled, yes. Studio reads the structure of your WordPress site: post types (including custom post types), taxonomies, and users. The Site data panel shows everything it detected, and the AI generates native Bricks Query Loops already connected to that content. Publish a new post and the section updates itself, nothing to regenerate.

WooCommerce products work through the product post type with native Woo tags. Dynamic content is available in the Section Builder, Wireframe Mode, Page Composer, and through MCP.

Save the page once in Bricks after inserting the menu. The menu interactions activate from that first save: dropdowns, the mobile offcanvas, and the open and close animations all work normally from then on, for you and for every visitor.

No. The demo covers section generation, Wireframe Mode, and the editing tools, but the Menu Builder is not available in demo mode. It is included with the Pro Lifetime Deal as part of Bricksfusion Studio.

The Framework Converter lets you convert any section between ACSS, Core Framework, AT Framework, Bricks Builder Framework, and Vanilla. If you built a site with ACSS but the next client uses Core Framework, you can convert sections instantly without manual work. Variables, spacing, typography, and colors are all remapped automatically. The Framework Converter is a Pro LTD exclusive feature available in the dashboard.

MCP (Model Context Protocol) lets you generate and manipulate Bricks Builder sections directly from any compatible AI client, including Claude Desktop and Codex (OpenAI). Instead of opening Studio inside Bricks, you talk to the AI in natural language. It generates sections, reads your existing WordPress pages, and pushes changes directly to your site.

MCP uses your existing AI subscription (Claude Pro/Max for Claude Desktop, ChatGPT Plus/Pro for Codex). No API keys needed. Your design system (framework, colors, spacing, BEM) is applied automatically. It supports all the same frameworks as Studio. MCP is a Pro LTD exclusive feature.

The Bricksfusion MCP server uses the standard MCP protocol and is compatible with any client that supports it. Claude Desktop and Codex (OpenAI) are officially documented with setup guides in the MCP dashboard. Other compatible clients include Cursor, Windsurf, and Cline. The same MCP token works with all clients.

Studio lives inside Bricks Builder as a panel. You describe what you need, AI generates the section, you preview it visually, and paste it into your canvas. Studio uses your own API keys (BYOK) and you pay the AI provider directly for each generation.

MCP works outside of Bricks Builder, directly in your AI client (Claude Desktop, Codex, etc.). You describe what you need in a conversation, and the AI generates the section and pushes it to your WordPress site automatically. MCP uses your existing AI subscription, so there are no additional API costs.

Both use the same schema rules, framework mappings, and design system. The difference is where you work (inside Bricks vs your AI client) and how you pay for AI (your own API keys vs your AI subscription).

MCP can read and write to your WordPress site through the Bricksfusion AI plugin:

• List pages: See all Bricks pages on your site.
• Read content: Read the full JSON content of any page, including header and footer.
• Read your content structure: Post types, taxonomies, and custom fields, so generated sections can use native Query Loops connected to your real content.
• Generate sections: Create new sections based on your description.
• Push changes: Add sections to a page, replace existing sections, remove sections, or replace all content. Your design system is applied automatically.

After changes are pushed, refresh Bricks Builder to see the updates. MCP requires the Bricksfusion AI plugin installed on your WordPress site with a site token configured.

No. MCP uses your existing AI subscription. Claude Desktop uses your Claude Pro or Max subscription. Codex uses your ChatGPT Plus, Pro, Business, Edu, or Enterprise subscription. No separate API key is needed for either client. You only need your Bricksfusion MCP token from the dashboard.

The tools and capabilities are identical. Both clients can access the same MCP tools and work with your site connection. The difference is which AI model generates the content: Claude Desktop uses Claude (Anthropic) and Codex uses OpenAI models. Setup instructions for both are available in the MCP dashboard.

MCP focuses on generating individual sections and managing page content. Some Studio features are not available in MCP:

• Page Composer: MCP generates one section at a time. It cannot plan and generate an entire page with multiple sections in parallel like Page Composer does.
• Replicate (Reference Image): MCP cannot analyze a screenshot and reconstruct its layout. You describe sections in words instead.
• Image AI: MCP does not generate images. You can describe placeholder images in your prompt, but no actual image generation.
• Section AI (Transformations): MCP cannot apply visual transformations like dark mode toggle, palette swaps, or layout changes to existing sections.
• Text AI: MCP does not have the inline text editing tools (improve, rewrite, shorten, expand, translate).
• Site DNA: MCP does not extract or apply design patterns across generations.
• Deep Thinking: Extended thinking mode is not available through MCP.
• Global Classes: MCP does not assign Bricks Global Classes to generated elements.

MCP is best for quick generation and direct site manipulation from your AI client. For the full creative workflow with previews, transformations, and multi-section pages, use Studio inside Bricks Builder.

Bricksfusion offers two pricing options:

• Essential: €149 per year. Access to the full component library, animations, layouts, Design System Configuration, BEM Class Generation, and updates during your subscription.
• Pro Lifetime Deal: €349 one-time payment. Everything in Essential plus Bricksfusion Studio, Framework Converter, MCP Integration, all future updates, and new releases. No renewals ever.

Taxes are calculated at checkout based on your location.

Yes. As the library grows and new features are added, the price will increase. Purchasing now locks in the current price and guarantees access to all future content at no additional cost.

Yes. You can upgrade to the Pro Lifetime Deal at any time:

• Within 30 days: Pay only the difference between the Essential and Lifetime price.
• 31 to 90 days: Pay 50% of the Lifetime price.
• After 90 days: Full Lifetime price applies.

Contact support@bricksfusion.com to request an upgrade.

We accept all major credit cards and PayPal. Payments are processed securely through SureCart.

Due to the digital nature of the product, we do not offer refunds. Once you have access, components can be copied instantly. We encourage you to explore the demos on our website before purchasing to ensure Bricksfusion meets your needs.

Yes. An invoice is automatically generated after your purchase. You can download it from your account dashboard or the confirmation email.

Yes. The Pro Lifetime Deal includes all current content and every future update, new component, animation, layout, and feature. Pay once and receive everything forever at no additional cost.

Send an email to support@bricksfusion.com or ask in the Bricksfusion Community on Facebook. We are here to help with any questions or issues.

Bricksfusion is run by one person, so there are no fixed hours. However, quality is a priority and we respond as quickly as possible, typically within 24 to 48 hours.

Yes. Technical support is included with your purchase at no additional cost. This covers issues related to component functionality, integration, and customization.

Yes. Each animation has a dedicated documentation page explaining all controls and customization options. The website also includes demos and examples for components and layouts so you can understand how everything works before using it.

Yes. Send your suggestions to support@bricksfusion.com or post them in the Facebook community. We review all feedback and consider it for future updates.

Yes. Library components, layouts, and wireframe sections can be used on unlimited websites. Simply copy and paste them wherever you need. For animations and page transitions, the plugin license covers multiple domains based on your plan.

Absolutely. Bricksfusion is built for agencies and freelancers. Use the components on any client website. The only restriction is that you cannot resell or redistribute the components themselves.

Yes. All components are designed to work together. Combine as many as you need on a single page. You may want to adjust colors and spacing to match your brand, but the structure is ready to use.

We release updates regularly, typically every two to three weeks. Updates include new components, animations, bug fixes, and compatibility improvements based on user feedback.

Components you have already copied remain on your website and continue to work. However, you will lose access to the library, new components, and updates until you renew. Animations require an active license to function.