Hero
free
Bold headline showcasing the product's main value proposition with supporting text and two CTA buttons
Split layout — text left, image right
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.
Opens inside the editor. Reads your design system. Generates with your variables.
Native panel inside Bricks. No external apps, no context switching.
Auto-syncs with your Style Manager. Colors, spacing, typography read automatically.
Assigns your existing Global Classes to generated elements. With any CSS framework.
One-click insert directly to your canvas.
Select any element, edit it with AI. Select a section, transform it.
One license, all your client sites. Admin controls what editors can access.
See Global Classes in action
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
FRAMEWORK
Style Manager
SYNCED
Select which tokens the AI should use.
Colors
5 colors · 35 total
Spacing
1 scale
xs
s
m
l
xl
2xl
3xl
Typography
1 scale
xs
sm
base
lg
xl
2xl
3xl
4xl
Global Classes
8/12
.section-padding
Section vertical padding
.btn-primary
Primary action button
.btn-outline
Ghost button with border
.heading-xl
Extra large heading
FRAMEWORKS
Your framework. Your variables.
Use a CSS framework? We support your variables. Use Bricks native? We read your Style Manager.
Bricks Builder: auto-syncs with your Style Manager. Colors, spacing, typography read directly from Bricks 2.2+
Full support for ACSS, Core Framework, and AT Framework. AI uses your variables natively.
Vanilla mode for projects without a framework. Hex colors, pixel values, full manual control.
Global Classes assigned automatically to generated elements. Works with any framework.
See Style Manager sync in action
PAGE COMPOSER
One prompt. Entire page.
Describe what you need. AI plans every section, you review the structure. Then it builds the entire page at once.
AI builds a section-by-section plan before generating. Review the structure, then confirm, you control what gets built.
Every section shares the same design DNA. Colors, typography, and spacing stay consistent across the entire page.
Sections generate in parallel. A full page ready in seconds, not hours of manual work.
Works with your current setup: framework, style preset, color palette, and language. No extra configuration needed.
Live progress as each section completes. Full cost breakdown for the entire page.
See Page Composer in action
Page Plan
6 sections
~$0.0847
CARDS
Rounded corners (12px) with subtle shadow
RHYTHM
Alternating light and dark backgrounds
HEADINGS
Bold weight, left-aligned hierarchy
BUTTONS
Rounded pill shape, solid fill
DENSITY
Balanced, comfortable spacing
VISUALS
Clean and modern, minimal decoration
Features
free
3-column grid highlighting key capabilities with icons, titles, and short descriptions
Centered grid — 3 equal columns
Testimonials
free
Customer quotes in card layout with avatar, name, company, and star rating
Horizontal scroll or 3-column grid
Pricing
wireframe
3-tier comparison table with feature checklist and annual/monthly toggle
3 equal columns — highlighted middle tier
FAQ
wireframe
Accordion-style frequently asked questions about the product and service
Single column — expandable items
Call to Action
free
Final conversion section with email signup form and trust badges
Centered layout — dark background
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 extracts the structure and rebuilds it with your colors and variables.
Magic Image: AI generates contextual images automatically
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
See image replication in action
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
See animations in action
ANIMATION
None
None
Advanced Effects
Complex visual animations
6
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
AI ASSISTANT
Section • 20 elements • 9 texts
Text AI
Enabled
Section AI
Enabled
Palette
70
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
See Transform & Text AI in action
PRESETS
Your style. Already defined.
62 style presets. 70 color palettes. Each one is a full design brief, not just a name.
5 categories: Industry, Aesthetic, Mood, Trends, Personality
70 audited color palettes, or define your own 6 colors
Style presets work with any framework. Color palettes apply to Vanilla mode.
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
BENTO GRID 1
Text AI
Enabled
Section AI
Select section
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.
Grok
Grok 4 · Grok 4.1 Fast
Claude
Opus 4.5 · Sonnet 4.5 · Haiku 4.5
Open AI
GPT-5.2 · GPT-4o · GPT-4o Mini
Gemini
Gemini 3 Pro · Gemini 3 Flash · Gemini 2.5 Flash
OpenRouter
300+ Models · DeepSeek · Llama · Mistral
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.