Describe it. Paste it. Ship it.
Generate native Bricks sections from a description, a wireframe, a screenshot, or raw HTML. Your design system. Your variables. Ready to paste.
5
AI Providers
374
Wireframes
62
Style Presets
22
Languages
Three steps. That's it.
01
Describe
Write what you need, upload a reference screenshot, or paste existing HTML. Studio handles the rest.
02
Generate
AI builds native Bricks JSON using your colors, spacing, typography, and framework variables.
03
Paste
Copy into Bricks Builder. Your framework is already applied. Edit visually and ship.
Lives inside your editor.
No external apps. No context switching. Studio opens as a native panel inside Bricks Builder and reads your design system automatically.
A pricing section with 3 plans, highlighted middle tier, toggle for monthly/annual, dark background with gradient accent...
Preview will appear here
Two words. Perfect section.
Write “pricing section.” Studio already knows your products, prices, and brand voice — and asks the right questions before generating. The output is a design specification where every word is an instruction.
- Brand Discovery captures your business in 9 quick questions: product names, real prices, CTAs, audience, restrictions. Configured once, injected into every generation.
- Design Architect guides each prompt through 2–3 rounds of smart questions. With a brief configured, it skips context and asks only layout decisions.
- Category tracking — content, structure, layout — ensures nothing is missing before the spec is built.
- The composed output is an executable instruction set: exact plan names, prices, card hierarchy, CTA labels. Not marketing copy.
pricing section
Your framework. Your variables.
AI generates with var(--primary), not hex values. Every framework has its own variable mapping.
- Auto-syncs with Bricks Style Manager. Colors, spacing, and typography read directly from Bricks 2.2+.
- Import your ACSS, Core Framework, or AT Framework config file for exact token matching.
- Vanilla mode for projects without a framework. Hex colors, pixel values, full manual control.
- Global Classes assigned automatically to generated elements.
Bricks BuilderSelect which tokens the AI should use.
374 wireframes. Zero decisions.
Activate Wireframe Mode and AI picks the best layout from 374 templates. It adapts the structure to your content. 60–70% fewer tokens than generating from scratch.
One prompt. Entire page.
Describe the page you need. AI plans every section, shows you the structure, then builds the entire page at once.
- AI creates a section-by-section plan. Review and edit before generating.
- Design DNA keeps colors, typography, and spacing aligned across every section.
- Sections generate in parallel. Full page ready in seconds.
- Live progress and cost breakdown for each section.
Split layout — text left, image right
3 columns — highlighted middle tier
Centered layout — dark background
See it. Build it.
Upload a screenshot of any design. AI extracts the structure and rebuilds it with your colors and variables.
- Extracts structure, not colors. Your palette is always applied.
- Works with any screenshot: Dribbble, competitors, Figma mockups.
- Image AI generates contextual images that match your section.
Drop a screenshot or click to upload
pricing-reference.png
847 KB · Added
Paste HTML. Get native Bricks.
Drop any HTML component into Studio. It converts markup into native Bricks elements — headings, text, buttons, images. Code blocks only when necessary.
- Split editor with tabs for HTML, CSS, and JavaScript.
- Maximizes native elements. Avoids unnecessary code blocks.
- Framework variables applied to the converted output.
- Works with any source: CodePen, Tailwind UI, component libraries.
<div class="pricing-grid">
<h2>Choose your plan</h2>
...
Modify. Don't regenerate.
Select any section. Choose a transformation or describe what you want. One click. Same section, different result.
Every detail. Covered.
Text AI
Select any text element. Improve, rewrite, shorten, expand, or translate into 22 languages. Batch mode edits an entire section at once.
Select any text element. Improve, rewrite, shorten, expand, or translate into 22 languages. Batch mode edits an entire section at once.
62 style presets across 5 categories. 70 audited color palettes. Each preset is a complete design brief that shapes how AI generates, not just a label.
Generate contextual images with DALL-E 3, Grok, or Gemini. Studio analyzes your section and creates images that fit the layout and mood.
Claude extended thinking mode. AI reasons step by step before generating. Slower, but significantly more precise layouts for complex sections.
Generate content in English, Spanish, German, French, Japanese, Chinese, and 16 more. Proper formality and cultural context built in.
After Page Composer, Studio extracts your design patterns and applies them to future generations. Every section feels like it belongs to the same site.
Every generation saved and grouped by time. Filter by type, see cost per generation, and reload any previous result with one click.
Not sure what to write? AI asks progressive questions to build a detailed creative brief. Supports multiselect answers and auto-detects your language.
Your API key. Their bill. We charge nothing.
Studio uses a Bring Your Own Key model. You create a free API key from any provider and pay them directly for what you use. No monthly AI subscription. No hidden fees.
$1–5
per month — what most users spend
Cost per generation
Shown after every generation so you always know what you spent
Prompt Caching
Saves up to 67% on repeated prompts. Active by default on Claude.
Your AI. Your choice.
Five providers. Three tiers per provider. Switch any time.
Opus 4.6 · Sonnet 4.6 · Haiku 4.5
GPT-5.2 · GPT-4o · GPT-4o Mini
Grok 4 · Grok 4.1 Fast
Gemini 3 Pro · 3 Flash · 2.5 Flash
OpenRouter
400+ Models · DeepSeek · Llama · Mistral
BYOK · Your API keys · Direct billing · Zero markup
Stop building sections by hand.
Pro LTD includes full Studio access. €279 once. Every update. Every new feature. No renewals.
Secure checkout · Instant access · No subscription