Design System

Pages · AI Apps

AI application screens — chat, image generation, text-to-speech — full pages over the shared app shell, composed from the kit over mock fixtures.

ai-chatAppShell · conversation bubbles · prompt suggestions · model picker · composer · built

An AI chat — a conversation with the assistant, suggested prompts and a model picker.

Assistant

Ask anything — grounded in your numbers

MO
Model
Claude Opus 4.8Claude Sonnet 5Claude Haiku 4.5
YOU
Summarize this quarter’s revenue trend in one honest sentence.
AI
Revenue rose 12.4% month-over-month to $48,290, driven mostly by three enterprise settlements — though conversion softened 0.4%, so the growth is concentrated, not broad.
YOU
What would make that growth broad instead of concentrated?
AI
Lift the self-serve conversion rate. Two levers show up in the data: a clearer pricing page and shorter onboarding — both currently in review on the board.
Draft a launch announcementExplain this chartReconcile Q3 invoicesWrite release notes
ai-chat-v2AppShell · session list · centered thread · streaming-style answer · composer · built

An AI chat, workspace layout — a session sidebar beside a centered conversation thread.

Assistant · Workspace

Sessions, side by side

MO
Claude Opus 4.8Q3 revenue trend
YOU
Summarize this quarter’s revenue trend in one honest sentence.
AI
Revenue rose 12.4% month-over-month to $48,290, driven mostly by three enterprise settlements — though conversion softened 0.4%, so the growth is concentrated, not broad.
YOU
What would make that growth broad instead of concentrated?
AI
Lift the self-serve conversion rate. Two levers show up in the data: a clearer pricing page and shorter onboarding — both currently in review on the board.
Draft a launch announcementExplain this chartReconcile Q3 invoicesWrite release notes
ai-imageAppShell · prompt bar · settings panel · generated-image grid · built

An AI image generator — a prompt bar, generation settings and a grid of results.

Image studio

Describe it — generate four takes

MO

Settings

Applied to every take

Aspect ratio

1:13:216:99:16

Style

PhotorealIllustrationIsometricLine art

Count

124
A1

Aurora over a still lake, long exposure

A2

Brass desk lamp, warm dim, studio light

A3

Isometric server room, teal and violet

A4

Matte ceramic pour-over on stone

ai-speechAppShell · text input · voice picker · waveform · clip list · built

A text-to-speech app — text input, a voice picker, a waveform and rendered clips.

Speech studio

Turn text into a spoken clip

MO

Script

Download
≈ 0:34 · 512 chars

Voice

Pick a narrator

AAria · warmSelectedVVale · neutral▶NNova · bright▶OOrin · low▶

Recent clips

Rendered this session

▶

Launch announcement

Aria · warm

0:38MP3
▶

Release notes v4.8

Vale · neutral

1:12MP3
▶

Onboarding welcome

Nova · bright

0:24MP3