Canvas — UI Generation Built for AI

Before

How Claude sees your app today

C

Claude

Y

You

Can you build me a pricing page? Three tiers, toggle for annual/monthly, feature comparison table.

C

Claude

I can write the HTML/ERB code, but I can't see how it looks.

I don't know your existing design system, CSS classes, or component patterns.

Here's some generic code—you'll need to style it to match your app.

Y

You

*Spends 3 hours fixing styles, matching design system, adjusting spacing...*

After

How Claude sees your app with Canvas

C

Claude

Canvas connected

Y

You

Can you build me a pricing page? Three tiers, toggle for annual/monthly, feature comparison table.

C

Claude

Let me analyze your design system first...

Using canvas.analyze_design_system

canvas.analyze_design_system()

Design System Detected

• Tailwind CSS with custom theme

• Card component: rounded-2xl, shadow-sm

• Buttons: btn-primary, btn-secondary

• Colors: terracotta, cream, charcoal

Got it. Generating with your design system...

Using canvas.generate_view

canvas.generate_view("pricing",

tiers: 3, toggle: true, comparison: true)

Preview

Pricing page with 3 tiers

Ready for review. View preview at /preview/pricing

Want me to adjust anything before we save it?

Generation time: 18 seconds

The Difference

Without Canvas

— Claude generates generic code
— You style everything manually
— No live preview
— Hours of iteration

With Canvas

+ Claude knows your design system
+ Pixel-perfect from the start
+ Live preview before saving
+ Seconds, not hours

How It Works

1

Learn your design system

Canvas analyzes your existing views, components, and CSS.

# Automatically extracted

colors: ["terracotta", "cream", "charcoal"]

components: ["card", "button", "badge"]

2

Generate with context

AI creates views that match your existing patterns.

Uses existing partials

_card.html.erb, _button.html.erb

3

Preview before saving

See exactly how it looks. Iterate in real-time.

canvas.preview("pricing")

# Opens /preview/pricing in browser

4

Save when ready

One command writes the files to your codebase.

Created app/views/pages/pricing.html.erb

The Tools AI Uses

Available via MCP (Model Context Protocol)

canvas.generate_view(name)

"Create a pricing page"

canvas.generate_component(name)

"Create a modal component"

canvas.preview(path)

"Show me how it looks"

canvas.update_view(path, changes)

"Make the header bigger"

Get Started

One gem. Zero config. Works in 30 seconds.

# Add to your Gemfile

gem 'brainzlab'

# Run bundle

$ bundle install

# That's it. AI-powered UI generation is ready.

Coming Soon

We're building Canvas as part of Phase 2. Follow along to get early access.

Follow the Journey View All Products