Skip to content
⌘K
How-To

Prompt templates

Pre-written prompts that produce correct Atelier UI code on the first try. Each prompt instructs the model to fetch the full API reference before generating.

How to use

When you need this: use these prompts after the workshop, when you are starting fresh projects or working in an LLM client without MCP support. During the workshop itself you will mostly let Claude Code drive the Storybook MCP directly.

Each prompt fetches llms-full.txt first — the complete API reference. The LLM reads it before generating, so it uses the correct prop names and import paths without hallucinating.

  1. Select your framework below.
  2. Click Copy prompt on any card.
  3. Paste into your LLM of choice (Claude, ChatGPT, Gemini, …) and send.
Framework
01

AI-Native

Chat interface
A chat UI with message history, a text input, and a send button. Shows a skeleton while the response streams.
Fetch the Atelier UI API reference first:
https://atelier.pieper.io/llms-full.txt


Build a chat interface using Atelier UI components. Use @atelier-ui/react. Use functional components with hooks. Handle state with useState.


Requirements:
- Message list with user and assistant message bubbles (different alignment/background)
- AtlTextarea with autoResize for the chat input field
- AtlButton (primary, "Send") to submit the message
- AtlSkeleton (3 rows) shown while the assistant response is loading
- AtlCard wrapping the whole chat panel
- Keyboard shortcut: pressing Enter submits the message


State to manage:
- messages: Array<{ role: 'user' | 'assistant'; content: string }>
- inputValue: string
- isLoading: boolean


Do not call a real API — use a 1.5s setTimeout to simulate a response.
Generated code output
Displays AI-generated code with a AtlCodeBlock inside a AtlCard, with a regenerate button.
Fetch the Atelier UI API reference first:
https://atelier.pieper.io/llms-full.txt


Build a "generated code" panel using Atelier UI components. Use @atelier-ui/react. Use functional components with hooks. Handle state with useState.


Requirements:
- AtlCard with a header ("Generated Component") and content area
- AtlCodeBlock showing a hardcoded TypeScript snippet (language="typescript", filename="component.ts", showLineNumbers=true)
- A "Regenerate" AtlButton (variant="outline") below the code block
- A AtlBadge (variant="success") in the card header showing "Ready"
- While "regenerating" (simulate with 1.2s timeout), show AtlSkeleton with 4 rows instead of the code block and change the badge to variant="warning" with text "Generating…"
02

Forms

Login form
Email + password fields in a card, with a submit button and basic validation feedback.
Fetch the Atelier UI API reference first:
https://atelier.pieper.io/llms-full.txt


Build a login form using Atelier UI components. Use @atelier-ui/react. Use functional components with hooks. Handle state with useState.


Requirements:
- AtlCard (max-width 400px, centered) containing:
  - Card header: "Sign in to your account"
  - AtlInput (type="email", label "Email", required)
  - AtlInput (type="password", label "Password", required)
  - AtlButton (variant="primary", full width, "Sign in")
  - AtlButton (variant="outline", full width, "Continue with Google")
- Show AtlAlert (variant="danger") above the form if both fields are empty on submit
- Show loading state on the Sign in button while submitting (simulate 1.5s)
Settings page
Profile and notification settings inside cards with save feedback via a toast or alert.
Fetch the Atelier UI API reference first:
https://atelier.pieper.io/llms-full.txt


Build a settings page using Atelier UI components. Use @atelier-ui/react. Use functional components with hooks. Handle state with useState.


Requirements:
- Page title "Settings"
- Two AtlCard sections:


  Profile card:
  - AtlInput for "Display name" (type="text")
  - AtlInput for "Email" (type="email")
  - AtlSelect with options: "UTC", "US/Eastern", "US/Pacific", "Europe/London"
  - AtlButton (primary, "Save profile") — show loading for 1s, then show AtlAlert (variant="success", "Profile saved!")


  Notifications card:
  - AtlToggle labeled "Email notifications"
  - AtlToggle labeled "Weekly digest"
  - AtlToggle labeled "Product updates"
  - AtlButton (outline, "Save preferences")
03

Data Display

Stats dashboard
Three metric cards with numbers, labels, and status badges in a responsive grid.
Fetch the Atelier UI API reference first:
https://atelier.pieper.io/llms-full.txt


Build a stats dashboard using Atelier UI components. Use @atelier-ui/react. Use functional components with hooks. Handle state with useState.


Requirements:
- Page title "Dashboard"
- Responsive grid (3 columns on desktop, 1 on mobile) of AtlCard components:
  1. "Total Requests" — value: 12,847 — AtlBadge (variant="success") "+12% this week"
  2. "Avg Latency" — value: 342ms — AtlBadge (variant="warning") "p95: 890ms"
  3. "Error Rate" — value: 0.3% — AtlBadge (variant="success") "Below threshold"
- Each card: large bold metric number, muted label below it, badge in card header
- AtlProgress bar below each metric (values: 78, 34, 8 out of 100)
Data table with pagination
A sortable table of users with status badges, and pagination controls below.
Fetch the Atelier UI API reference first:
https://atelier.pieper.io/llms-full.txt


Build a data table using Atelier UI components. Use @atelier-ui/react. Use functional components with hooks. Handle state with useState.


Requirements:
- Hardcode 20 users: { id, name, email, role: 'admin'|'editor'|'viewer', status: 'active'|'inactive' }
- AtlTable with columns: Name, Email, Role, Status, Actions
- Status column: AtlBadge — variant="success" for active, variant="default" for inactive
- Role column: AtlBadge — variant="info" for admin, no variant for others
- Actions column: AtlButton (size="sm", variant="outline", "Edit") per row
- AtlPagination below the table — show 5 users per page
- AtlInput above the table for filtering by name (client-side)
04

Navigation

Multi-step form wizard
A 3-step wizard using AtlStepper with back/next buttons and validation gating.
Fetch the Atelier UI API reference first:
https://atelier.pieper.io/llms-full.txt


Build a multi-step form wizard using Atelier UI components. Use @atelier-ui/react. Use functional components with hooks. Handle state with useState.


Requirements:
- AtlStepper with 3 steps: "Account", "Profile", "Review"
- Step 1 — Account: AtlInput (email, required), AtlInput (password, required)
- Step 2 — Profile: AtlInput (display name), AtlSelect (timezone), AtlToggle (marketing emails)
- Step 3 — Review: Read-only summary of entered values in a AtlCard
- Navigation: AtlButton (outline, "Back") + AtlButton (primary, "Next" / "Submit" on last step)
- Validate required fields before allowing Next — show AtlAlert (variant="warning") if invalid
- On Submit: show AtlAlert (variant="success", "Account created!") and reset to step 0
Tabbed content panel
Three tabs (Overview, Analytics, Settings) each with different content.
Fetch the Atelier UI API reference first:
https://atelier.pieper.io/llms-full.txt


Build a tabbed panel using Atelier UI components. Use @atelier-ui/react. Use functional components with hooks. Handle state with useState.


Requirements:
- AtlTabGroup with 3 tabs:
  1. Overview — AtlCard with a paragraph of placeholder text and an AtlBadge (variant="success", "Active")
  2. Analytics — Three AtlProgress bars labeled "Impressions", "Clicks", "Conversions" (values 82, 47, 23)
  3. Settings — AtlToggle ("Public visibility"), AtlInput ("Custom domain"), AtlButton (primary, "Save")
- AtlCard wrapping the entire panel
Edit this page on GitHub