documentation
The Studio Playbook.
Generate production-ready Bricks Builder sections with AI.
Describe what you want. Get JSON you can paste.
You bring the API keys.
Studio uses your own API keys. You pay providers directly. No middleman. No markup.
Why have all 3 API keys?
→ Different models, different strengths. Claude excels at design replication. Grok is blazing fast. OpenAI is reliable.
→ Cost optimization. Use economy tiers for simple sections, pro tiers for complex designs.
→ Redundancy. If one provider is down or rate-limited, switch instantly.
→ Experimentation. Find your perfect workflow by testing all providers.
Everything you need to build faster.
A complete toolkit for AI-powered section generation.
Generation Mode
Wireframe Mode
Choose from 316 professional wireframes in 20 categories. AI adapts the template to your content and colors.
Hero • Pricing • Features • Testimonials • FAQ • Team • Contact • Blog • CTA • Footer • Header • Cards • About • Login • Popup • Roadmap • Coming Soon • Error • Gallery • Changelog
Design System
62 Style Presets
Professional design presets across 5 categories. From SaaS to E-commerce, Minimalist to Glassmorphism.
Industry (15) • Aesthetic (15) • Mood (10) • Trends (12) • Personality (10)
Color System
70 Color Palettes
Curated color palettes with WCAG-compliant contrast. 6 colors per palette: Primary, Secondary, Accent, Background, Surface, Text.
Trust (12) • Bold (12) • Elegant (12) • Creative (12) • Calm (11) • Energetic (11)
Section AI
60+ Transform Actions
Transform existing sections instantly. Most actions are programmatic (no AI cost). Change layouts, styles, spacing with one click.
Layout • Style • Spacing • Add Elements • Remove • Theme • Responsive • Typography • Color Palette
Content Editing
Text AI
Edit text directly inside Bricks. Select any text element and transform it with AI. Works on single elements or batch mode.
Improve • Rewrite • Shorten • Expand • Translate (21 languages)
Advanced
More Power
Additional features to enhance your workflow and output quality.
• Reference Image — Upload a design, AI replicates it
• Deep Thinking — Claude extended reasoning (slower, better)
• 21 Languages — Generate content in any language
• Smart Model Selection — Auto-picks tier based on complexity
Get the best results.
Quick tips to maximize your output quality.
Be specific
"Hero for SaaS with headline, 3 stats, and 2 buttons" beats "make me a hero section".
Use Wireframe Mode
316 tested templates. More consistent results. Faster generation. Lower AI costs.
Set colors first
Define your palette before generating. AI applies your colors consistently across all elements.
Claude for design
When using Reference Image, Claude gives the best design replication results.
Economy for simple
Small wireframes (≤50 elements) work great with Economy tier. Save costs on simpler sections.
Transform, don't regenerate
Need layout tweaks? Use Section AI transforms. Most are instant and free (programmatic).
