Baby Baltazar
Designer Guide

Baby Baltazar

Create UI components and layouts using AI. Preview them here, then dev teams install them in production.

Browse ComponentsBrowse Views

What You Can Do

Yes, You Can
  • Create new UI components (buttons, cards, charts)
  • Create page layouts (dashboards, forms, lists)
  • Modify colors, spacing, typography
  • Add animations and interactions
  • Preview with realistic mock data
  • Iterate freely without affecting production
Not Your Responsibility
  • Writing API calls or backend logic
  • Database queries or data fetching
  • Authentication or security
  • Deploying to production
  • Writing tests
  • Pushing to main branch (always use PR)

How to Create Things

Use AI commands in Claude Code or Cursor. Just type the command and describe what you want.

Component
A single, reusable UI element
registry:ui

When to create:

  • • It's a single UI element (button, card, badge)
  • • It accepts data via props
  • • It can be reused in different places
  • • Dev teams will install it via CLI

Examples:

ButtonCardAvatarPieChartBadgeInput

How to ask AI:

/component earnings-card

Then describe: "A card showing total earnings with a trend indicator and sparkline chart"

Block
A complete page layout with multiple files
registry:block

When to create:

  • • It's a complete page section
  • • It needs multiple components working together
  • • It shows how data should be displayed
  • • Dev teams will use it as a starting point

Examples:

Dashboard layoutLogin formProject browserSettings page

How to ask AI:

/block earnings-dashboard

Then describe: "A dashboard with earnings summary cards, a line chart showing trends, and a table of recent transactions"

Blocks include mock data. Dev teams will replace it with real API calls.

View
A demo page for testing (not distributed)
app only

When to create:

  • • You want to test components together
  • • You need a demo for stakeholders
  • • It's for this app only, not for distribution
  • • You want to experiment with layouts

Examples:

/views/dashboard/views/earnings/views/catalog

How to ask AI:

/view analytics

Then describe: "A page showing streaming analytics with charts for plays, listeners, and revenue"

Your Workflow

1

Describe

Tell AI what you want to create. Be specific about the visual design and behavior.

2

Preview

Check the result in the browser. Components appear in the gallery, views in the demo app.

3

Iterate

Ask AI to make changes. "Make it bigger", "Add a hover effect", "Change the color".

4

Release

Run /release to update docs and create a PR for review.

Quick Decision Guide

Want to create a button, card, chart, or small UI piece?

→ Create a Component with /component

Want to create a full page layout that dev teams can install?

→ Create a Block with /block

Want to test or demo something without distributing it?

→ Create a View with /view

Not sure? Want to understand the system better?

→ Run /design for a detailed explanation

All Commands

/design

Learn about the system

/component <name>

Create a UI component

/block <name>

Create a page layout

/view <name>

Create a demo page

/release

Build & create PR

/review

Check code quality