<style>
  #bff-topbar {
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 20px;
    background-color: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1;
    box-sizing: border-box;
  }
  #bff-topbar * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  #bff-topbar .bff-badge {
    color: #0a0a0a;
    background-color: #fb923c;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.02em;
    padding: 4px 8px;
    border-radius: 5px;
  }
  #bff-topbar .bff-text {
    color: #ffffff;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  #bff-topbar .bff-sep {
    color: rgba(255, 255, 255, 0.25);
  }
  #bff-topbar .bff-desc {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
  }
  #bff-topbar .bff-cta {
    color: #fb923c;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
  }
  #bff-topbar .bff-cta:hover {
    color: #fdba74;
  }
  #bff-topbar .bff-cta svg {
    width: 10px;
    height: 10px;
    fill: currentColor;
    transition: transform 0.2s ease;
  }
  #bff-topbar .bff-cta:hover svg {
    transform: translateX(2px);
  }
  @media (max-width: 600px) {
    #bff-topbar {
      gap: 10px;
      padding: 0 16px;
    }
    #bff-topbar .bff-desc {
      display: none;
    }
    #bff-topbar .bff-sep {
      display: none;
    }
  }
  @media (max-width: 400px) {
    #bff-topbar {
      height: 40px;
      font-size: 13px;
    }
    #bff-topbar .bff-badge {
      font-size: 10px;
      padding: 3px 6px;
    }
  }
</style>

<div id="bff-topbar">
  <span class="bff-badge">New</span>
  <span class="bff-text">Bricksfusion Studio</span>
  <span class="bff-sep">—</span>
  <span class="bff-desc">€219 until Jan 31</span>
  <a class="bff-cta" href="/pricing">
    Get Started
    <svg viewBox="0 0 320 512"><path d="M285.5 273L91.1 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.7-22.7c-9.4-9.4-9.4-24.5 0-33.9L188.5 256 34.5 101.3c-9.4-9.4-9.4-24.5 0-33.9l22.7-22.7c9.4-9.4 24.6-9.4 33.9 0L285.5 239c9.4 9.4 9.4 24.6 0 34z"/></svg>
  </a>
</div>
Wireframe Library

New

Clean structure for branding

Styled Library

Premium design ready to use

SureCart Product Pages

High quality product templates

SureCart UI Components

Specific components for Surecart

Ready to enhance your Bricks Builder experience?

Access our complete library of professional components.

Quick Started

Ready to enhance your Bricks Builder experience?

Add premium animations that enhance user experience.

Quick Started

Pricing

Simple, transparent pricing plans

About

Learn about Bricksfusion

ChangeLog

Latest updates and improvements

Roadmap

Find out what's coming to Bricksfusion

Contact

Get in touch with us

Community

Join our facebook community

Quick Started

Discover how easy Bricksfusion is

Bricksfusion Studio Docs

Discover AI integration

Ready to enhance your Bricks Builder experience?

Unlock Bricksfusion. Make today your launch day.

Get Started

now available Beta

Describe it. Paste it.
Ship it.

AI-generated sections for Bricks Builder. Your colors. Your structure. Production-ready.

integration

Built inside Bricks Builder.

Describe what you need, preview it, insert it. Without leaving the editor.

Opens as a native panel inside Bricks

One-click insert directly to your canvas

Auto-detects selected elements for instant AI editing

Admin controls what editors can access

One license works across all your client sites

Admin Mode
Click to switch to Editor Mode
LOCK
Wireframe Mode 316 templates
Category
Auto-detect from prompt
AI will select the best wireframe and customize it with your colors and content.
💡 Simple templates use a faster, cheaper AI model. Complex templates automatically use a more powerful model.
Text AI edit text
Section AI audit/transform
AI MODEL
Provider
Model
Pro
Grok 4
Best
Economy
Grok 4.1 Fast
Grok 4.1 Fast delivers 98% of Pro quality
API KEYS
Claude
OpenAI
Grok
PROJECT STYLE
Color Palette 48 presets
PRI
SEC
ACC
BAC
SUR
TEX
Spacing
Reference Image Added
pricing-reference.png (847 KB)
Reference images use additional tokens (~1,500 extra)
REPLICATE

See it. Build it.

Upload a screenshot of any design. AI analyzes the layout and structure, then rebuilds it using your color and spacing.

Extracts structure, not colors, your palette is always applied

Works with screenshots from anywhere: Dribbble, competitors, mockups

Combine with Style Presets for instant design direction

Library

316 wireframes. Zero decisions.

AI auto-detects the best template from your prompt. Customizes it with your colors and content.

VanillaACSSCore FrameworkAT Framework
Animations

Motion. Built in.

Select an animation. AI configures it to match your section perfectly.

Background effects, text animations, interactive elements and more

AI sets colors, speed and intensity from your project settings

Powered by Bricksfusion library

ANIMATION
None
None
Advanced Effects Complex visual animations
6
Backgrounds Vol. 1 Dynamic background animations
11
Beams
Ether Spire
Graviton
Mesh Gradient
Backgrounds Vol. 2 More dynamic backgrounds
12
Showcase Product display effects
13
Visual Effects Stunning visual enhancements
18
Animated Texts Typography animations
7
Interactions Hover and click effects
7
BricksFusion AI ASSISTANT
Section • 20 elements • 9 texts
Text AI
Enabled
Section AI
Enabled
Palette 70
Layout 12
Style 11
Spacing 8
Add 2
Remove 3
Theme 4
Responsive 6
Type 8
Transform

Modify. Don't regenerate.

Select any section. Choose a transformation or describe what you want. One click.

Palette

70

Layout

12

Style

11

Spacing

7

Add

7

Remove

4

Theme

4

Responsive

3

Type

7

PRESETS

Your style. Already defined.

62 design directions and 70 color palettes. Pick a mood, an industry, a personality, the AI folows it precisely.

5 categories: Industry, Aesthetic, Mood, Trends, Personality

70 audited color palettes, or define your own 6 colors

Each preset is a full design brief, not just a name

Mix any preset with any palette, 4,000+ unique combinations

PROJECT STYLE
Style Preset 62 presets
None Select a style preset
Filter presets...
None
Custom Style Write your own description
Industry SaaS, E-commerce, Agency, Healthcare...
18
Aesthetic Minimalist, Bold, Elegant, Brutalist...
12
Mood Dark, Light, Warm, Vibrant, Serene...
10
Trends 2024-25 Bento, Glass, Neubrutalism...
10
Purpose Hero, Features, Pricing, CTA...
10
Color Palette 70 presets
Rose Gold Elegance Feminine luxury, beauty
Search palettes...
Custom Colors Edit your own palette
Trust Professional, reliable, confidence-building
8
Bold High-impact, attention-grabbing, conversion-focused
8
Elegant Premium, sophisticated, luxury feel
8
Creative Innovative, fresh, unique personality
8
Calm Peaceful, wellness, approachable
8
BricksFusion
AI ASSISTANT
BENTO GRID 1
Text AI
Enabled
Section AI
Select section
Select a section to use these tools
AI ASSISTANT

Edit any text with AI.

Select any text element. Improve, rewrite, shorten, expand, or translate. One click, or batch edit an entire section at once.

Works on any text: headings, paragraphs, buttons, labels

Batch mode: select a section, edit all 10+ texts at once

22 languages organized by region, from Spanish to Japanese

AI Model

Your AI. Your choice.

Choose your preferred provider. Smart recommendations based on task complexity.

Your API keys · Direct billing · Zero markup

BYOK: Bring your own API key. No subscription, pay only what you use — we charge nothing.

now available Beta

Ready to build faster?

Pro LTD includes Bricksfusion Studio access. Price goes up after beta.

Buy LTDView All Plans