The AI that speaks
fluent Bricks.

Bricksfusion is a premium toolkit for Bricks Builder that helps you design professional websites in minutes. It includes 390+ wireframe sections across 21 categories, 97+ 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 97+ 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: 390+ sections across 21 categories including heroes, pricing tables, features, testimonials, CTAs, footers, headers, contact forms, FAQs, bento grids, and more.
• Animations: 97+ effects in 9 categories including backgrounds, showcases, visual effects, text animations, interactions, 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, 390+ wireframe templates, 49 style presets, 70 color palettes, and 23 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.

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 390+ 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 plus a Custom Endpoint option, each with multiple model tiers (Pro, Standard, Economy) so you can balance quality and cost:

• 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 OpenAI-compatible or Anthropic-format endpoint. Use your own proxy, self-hosted model, or corporate AI gateway. All Studio features work with custom endpoints except prompt caching, Deep Thinking, and image generation.

The active AI model is always visible in the Floating Island panel inside Bricks Builder, so you always know which model is processing your requests. You can switch between providers at any time and use your own API keys for each one.

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 or GPT-4o-mini) 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.

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 23 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 (Beta): A fourth generation mode that builds complete navigation menus from one prompt. Two styles: Mega Menu and Circular Menu.
• 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.