Most people write UI prompts wrong. They dump everything into one massive request and hope the AI figures it out. "Design me a dashboard with analytics, user management, settings, notifications, and a sidebar navigation with collapsible sections." The result? A generic mess that matches nothing in particular.
The prompt to UI workflow works better when you think smaller. Much smaller.
This guide introduces composable design prompting—a method borrowed from software architecture that treats prompts as building blocks instead of monolithic instructions. You'll learn how to break complex interfaces into atomic pieces, then combine those pieces into designs that actually match your vision.
The Problem with Monolithic Prompts
Here's a prompt someone might write for a project management dashboard:
"Create a project management dashboard with a left sidebar showing projects and teams, a main content area with task cards in a kanban board layout, a top header with search and user profile, task filtering by status and assignee, a quick-add task button, project progress charts, team member avatars on tasks, due date indicators, and dark mode support."
That's 60+ words describing 10+ distinct features. The AI has to make dozens of design decisions simultaneously. Which element gets visual priority? How do the pieces relate spatially? What happens when there are zero tasks versus hundreds?
The AI averages across its training data and produces something that looks like every project dashboard—and therefore looks like nothing specific.
Monolithic prompts fail for three reasons:
Decision overload. Each element requires choices about size, position, style, and behavior. Cramming them together forces the AI to make all choices at once, with no feedback loop.
Lost hierarchy. When everything appears in one list, the AI can't tell what matters most. The sidebar gets equal weight to the main content area. The search bar competes with the progress charts.
No iteration path. If the header looks great but the kanban board feels off, you can't fix just the board. You'd need to re-prompt everything and hope the header stays the same.
There's a better way.
Atomic Prompts: The Building Blocks of UI
In software architecture, there's a principle called granularity: tools should be atomic primitives. Complex features emerge from combining simple pieces, not from building monolithic systems.
The same idea applies to prompting. An atomic prompt describes one thing well instead of many things poorly.
Here are the four categories of atomic UI prompts:
Layout Prompts
Layout prompts define spatial structure without specifying content.
Atomic layout prompt:
"Create a two-column layout. Left column is 280px wide and fixed. Right column fills remaining space. Both columns scroll independently."
This prompt makes exactly one decision: how space divides. The AI isn't distracted by what goes in each column.
More layout atoms:
- "Header bar, 64px tall, fixed to top of viewport"
- "Three-column grid with equal widths and 24px gaps"
- "Split view with draggable divider between panels"
Component Prompts
Component prompts describe individual UI elements in isolation.
Atomic component prompt:
"Design a task card showing: task title (one line, truncate with ellipsis), assignee avatar (32px circle), due date with color coding (green for future, yellow for soon, red for overdue), and a checkbox on the left edge."
This prompt focuses entirely on one card. The AI can nail the proportions, spacing, and visual hierarchy without worrying about where the card lives or what surrounds it.
More component atoms:
- "User avatar with online status indicator (green dot, bottom-right)"
- "Search input with icon, placeholder text, and clear button"
- "Progress bar showing percentage complete with label"
State Prompts
State prompts describe how components change under different conditions.
Atomic state prompt:
"Show the task card in three states: default, hover (subtle shadow lift, background shifts slightly lighter), and selected (blue left border, light blue background tint)."
State prompts prevent the common mistake of designing only the happy path. Real interfaces have empty states, loading states, error states, and interaction states.
More state atoms:
- "Empty state for task list: illustration, headline, subtext, and primary action button"
- "Loading skeleton matching the task card dimensions"
- "Error state with red border, error icon, and retry action"
Interaction Prompts
Interaction prompts describe behavior and motion.
Atomic interaction prompt:
"The sidebar collapses to icon-only mode (64px) when clicking the toggle. Show a smooth 200ms transition. In collapsed mode, hovering an icon shows a tooltip with the full label."
These prompts capture what static mockups miss: how the interface feels in motion.
More interaction atoms:
- "Dropdown menu appears below trigger, aligned left, with 150ms fade-in"
- "Drag a task card to reorder within column, show drop indicator line"
- "Modal slides up from bottom on mobile, fades in on desktop"
Combining Atomic Prompts into Complete Interfaces
Individual atoms aren't useful on their own. The power comes from composition—combining simple pieces into complex wholes.
Here's how to build a complete interface from atomic prompts:
Step 1: Establish the Layout Foundation
Start with pure structure. No content, no styling details.
"Create a standard app layout: fixed header (64px), fixed left sidebar (280px), and a main content area that fills the remaining space and scrolls vertically."
Get this right first. The layout is your foundation.
Step 2: Design Components in Isolation
With the layout established, design each major component separately.
Sidebar prompt:
"Design a sidebar navigation with: app logo at top, a list of navigation items (icon + label), a section divider, a secondary list for settings and help, and user profile at the bottom showing avatar and name."
Header prompt:
"Design a header bar with: breadcrumb navigation on the left, a search input in the center (expandable on focus), and on the right: notification bell with badge count, and user avatar dropdown trigger."
Task card prompt:
"Design a task card for a kanban board: title, assignee avatar, due date pill, priority indicator (colored left border), and a hover state showing a quick-actions menu."
Step 3: Handle States for Each Component
For each component, consider its states.
Sidebar states:
"Show sidebar in expanded (280px with labels) and collapsed (64px icons only) states. Include the toggle button position in each state."
Empty states:
"Design the empty state for a kanban column: dashed border outline, plus icon, and 'Add a task' text. Subtle enough to not dominate when other columns have content."
Step 4: Compose the Final Interface
Now combine your tested components into the full layout.
"Compose the project dashboard using: the app layout (header + sidebar + main area), sidebar with navigation and collapsed toggle, header with search and notifications, and the main area showing a kanban board with three columns (To Do, In Progress, Done). Each column contains 2-3 task cards. Show one empty column to demonstrate the empty state."
This final prompt is specific because it references components you've already designed. The AI isn't making up each element—it's assembling pieces that already work.
Practical Prompt to UI Workflow
Here's a workflow you can follow for any interface:
1. Sketch your atoms (5 minutes)
Before touching Prototyper, list the distinct pieces:
- What layout structure do you need?
- What are the major components?
- What states must each component handle?
2. Prompt layout first
Get the bones right. A two-column layout? A top-nav plus content area? Establish spatial relationships before adding detail.
3. Build components one at a time
Take your highest-priority component and nail it. Get the typography, spacing, and visual hierarchy exactly right. Then move to the next component.
4. Test states early
Don't wait until the end to consider empty states or loading states. Prompt for them while each component is fresh.
5. Compose with confidence
When you combine components, you're not gambling. You know each piece works. Composition becomes assembly, not invention.
When to Use Monolithic vs. Atomic Prompts
Atomic prompting isn't always necessary. Here's when each approach makes sense:
Use atomic prompts when:
- The interface has 5+ distinct components
- You need precise control over specific elements
- Multiple states matter (empty, loading, error, etc.)
- You plan to iterate extensively
- Components might be reused elsewhere
Use monolithic prompts when:
- You're exploring early concepts quickly
- The interface is genuinely simple (a single card, a basic form)
- You want to see diverse interpretations
- Speed matters more than precision
Many projects start with a monolithic exploration prompt, then shift to atomic prompts once direction is clear.
Examples: Atomic Prompts in Action
Example 1: Settings Page
Monolithic approach (less effective):
"Design a settings page with sections for profile, notifications, privacy, and billing, with toggles and form fields and save buttons."
Atomic approach:
Layout: "Single-column layout, max-width 680px, centered. Sections stack vertically with 48px gaps."
Section component: "Settings section with: section title (bold, 18px), description text (muted color, 14px), and content area below for controls."
Toggle row: "Setting row with label on left, description below label (smaller, muted), and toggle switch on the right. Entire row is clickable."
Form section: "Profile form with: avatar upload (circular, with edit overlay on hover), text inputs for name and email, and a save button aligned right."
Compose: "Settings page with four sections stacked: Profile (avatar + form), Notifications (list of toggle rows), Privacy (toggle rows), Billing (current plan display + change plan button)."
Example 2: Onboarding Flow
Monolithic approach:
"Design a three-step onboarding flow for a new user signing up."
Atomic approach:
Layout: "Full-screen centered card layout. Card is 480px wide, vertically centered. Progress indicator at top."
Progress component: "Three-step progress indicator. Steps show: completed (checkmark, filled), current (number, highlighted), and upcoming (number, muted). Steps connected by lines."
Step 1: "Welcome step with: headline, short description, illustration above, and 'Get Started' primary button."
Step 2: "Workspace setup with: text input for workspace name, optional team member invite (email input with add button), and Continue/Back buttons."
Step 3: "Complete step with: success illustration, confirmation headline, summary of setup, and 'Go to Dashboard' button."
States: "Show validation error state on workspace name input: red border, error message below, button disabled until valid."
Start Thinking in Atoms
The shift from monolithic to atomic prompting changes how you think about design. Instead of describing complete screens, you describe building blocks. Instead of hoping the AI interprets your vision correctly, you verify each piece works before combining.
This prompt to UI workflow produces better results because it matches how AI actually processes information. Smaller, focused prompts give clearer constraints. Clearer constraints yield more predictable outputs.
Start with your next design task. Identify three atomic pieces you could prompt separately. Build each one, then combine them. Notice how much more control you have over the final result.
The best interfaces aren't designed all at once. They're composed from pieces that each do one thing well.