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)
- LlmInput with autoResize for the chat input field
- LlmButton (primary, "Send") to submit the message
- LlmSkeleton (3 rows) shown while the assistant response is loading
- LlmCard 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 LlmCodeBlock inside a LlmCard, 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:
- LlmCard with a header ("Generated Component") and content area
- LlmCodeBlock showing a hardcoded TypeScript snippet (language="typescript", filename="component.ts", showLineNumbers=true)
- A "Regenerate" LlmButton (variant="outline") below the code block
- A LlmBadge (variant="success") in the card header showing "Ready"
- While "regenerating" (simulate with 1.2s timeout), show LlmSkeleton 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:
- LlmCard (max-width 400px, centered) containing:
  - Card header: "Sign in to your account"
  - LlmInput (type="email", label "Email", required)
  - LlmInput (type="password", label "Password", required)
  - LlmButton (variant="primary", full width, "Sign in")
  - LlmButton (variant="outline", full width, "Continue with Google")
- Show LlmAlert (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 LlmCard sections:


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


  Notifications card:
  - LlmToggle labeled "Email notifications"
  - LlmToggle labeled "Weekly digest"
  - LlmToggle labeled "Product updates"
  - LlmButton (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 LlmCard components:
  1. "Total Requests" — value: 12,847 — LlmBadge (variant="success") "+12% this week"
  2. "Avg Latency" — value: 342ms — LlmBadge (variant="warning") "p95: 890ms"
  3. "Error Rate" — value: 0.3% — LlmBadge (variant="success") "Below threshold"
- Each card: large bold metric number, muted label below it, badge in card header
- LlmProgress 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' }
- LlmTable with columns: Name, Email, Role, Status, Actions
- Status column: LlmBadge — variant="success" for active, variant="default" for inactive
- Role column: LlmBadge — variant="info" for admin, no variant for others
- Actions column: LlmButton (size="sm", variant="outline", "Edit") per row
- LlmPagination below the table — show 5 users per page
- LlmInput above the table for filtering by name (client-side)
04

Navigation

Multi-step form wizard
A 3-step wizard using LlmStepper 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:
- LlmStepper with 3 steps: "Account", "Profile", "Review"
- Step 1 — Account: LlmInput (email, required), LlmInput (password, required)
- Step 2 — Profile: LlmInput (display name), LlmSelect (timezone), LlmToggle (marketing emails)
- Step 3 — Review: Read-only summary of entered values in a LlmCard
- Navigation: LlmButton (outline, "Back") + LlmButton (primary, "Next" / "Submit" on last step)
- Validate required fields before allowing Next — show LlmAlert (variant="warning") if invalid
- On Submit: show LlmAlert (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:
- LlmTabGroup with 3 tabs:
  1. Overview — LlmCard with a paragraph of placeholder text and an LlmBadge (variant="success", "Active")
  2. Analytics — Three LlmProgress bars labeled "Impressions", "Clicks", "Conversions" (values 82, 47, 23)
  3. Settings — LlmToggle ("Public visibility"), LlmInput ("Custom domain"), LlmButton (primary, "Save")
- LlmCard wrapping the entire panel