aiux
PatternsPatternsNewsNewsAuditAuditResourcesResources
Overview

Setup

  • What Claude Design Is (and Isn't)
  • Your First Prompt: The Four-Part Framework
  • Importing Assets: Screenshots, Docs, and Codebases

Iteration

  • Iterating via Conversation
  • Inline Comments and Direct Edits
  • Tweaks: Explore Variations Without Chat

Design-system

  • Extracting Your Design System
  • Publishing and Applying Your Design System
  • Team & Enterprise Setup

Workflows

  • Prompt to Interactive Prototype
  • Prompt to Pitch Deck
  • Handoff to Claude Code for Implementation
  1. Guides
  2. /
  3. Claude Design Guide for Designers
  4. /
  5. Your First Prompt: The Four-Part Framework
SetupLesson 2 of 12

Your First Prompt: The Four-Part Framework

3 min readClaude Design for DesignersUpdated Apr 21, 2026

A good Claude Design prompt tells the model four things: the goal (what you're making), the layout (how it should be arranged), the content (what info goes in), and the audience (who will see it). Skip any one of these and the first draft wanders.

Here's the exact sequence we captured building Lineup, the kanban board used throughout this guide. Claude asks a short round of clarifying questions first, confirms direction, then generates the full board in one pass.

Step 1. Claude asks clarifying questions before generating the canvas.
Step 2. After answering, Claude confirms direction and begins laying out the board.
Step 3. The board renders end-to-end in one pass, ready to iterate on.

The four parts

1

Goal, what are you making and why

  • State the artifact and its purpose in one sentence.
  • Examples: 'a product landing page for a Series A launch', 'a 6-slide pitch deck for a design-ops proposal', 'a prototype of a settings page with a dark-mode toggle'.
2

Layout, how should it be arranged

  • Describe structure in plain language, you handle the skeleton, Claude handles the polish.
  • Example: 'Hero on top, three feature cards in a row, a testimonial block, FAQ at the bottom.'
3

Content, what actually goes in

  • Paste the real copy, bullet points, or key numbers. Don't write lorem-ipsum-style filler. Claude will produce something generic.
  • Real words in = real-looking output out.
4

Audience, who sees this

  • Naming the audience changes the design. 'Enterprise CISOs' produces a very different page than 'indie developers on Reddit'.
  • One sentence is enough, just enough for Claude to calibrate tone.

Prompt example

A working four-part prompt
Goal: A web-based kanban board called Lineup, a lightweight
Trello alternative for small product teams (5-15 people).

Layout:
- Top navbar: "Lineup" wordmark on the left, current project name in
  the center ("Q2 Product Launch"), user avatar + notifications bell
  on the right.
- Main area: 4-column kanban board. Backlog, To Do, In Progress, Done.
- Each column header: column name, card count pill, "+ Add card" button.
- Cards: title, 1-line description, 0-2 colored labels, up to 3 stacked
  assignee avatars, and a small icon row for comments/attachments.

Content:
- ~12 sample cards distributed across the columns, realistic SaaS
  product work:
  Backlog: "Research competitor pricing pages", "Interview 5 lapsed
  users", "Audit onboarding email sequence"
  To Do: "Finalize Q2 launch copy", "Design dark mode toggle",
  "Spec A/B test for pricing hero"
  In Progress: "Ship mobile signup flow", "Rebuild settings page",
  "Migrate analytics to PostHog"
  Done: "Kill off legacy admin panel", "Update terms of service",
  "Post-mortem on Feb incident"
- Labels visible on some cards: "design", "bug", "copy", "infra" ,
  distinct soft colors.

Audience: Product designers, PMs, and engineering leads at early-stage
SaaS startups. They find Asana too heavy and Trello too simple. They
want speed and keyboard-shortcut focus, not enterprise controls.
First pass is a draft, not a deliverable

Expect 3-5 rounds of iteration before a prototype is ready to share. Designers who try to one-shot a finished output end up fighting the model; designers who accept the first pass is rough get to polish faster.

Heads up, research-preview navigation bug

In our own testing we hit a recurring issue: while you're in a project with the canvas open, clicking around the UI can unexpectedly snap you back to the Claude Design home screen. Your work isn't lost, the project is saved and you can re-open it from the project picker. Just be aware it can happen and don't panic if it does. Expect this to get fixed as the product moves out of research preview.

Your first prompt shipped

  • Wrote a goal + layout + content + audience prompt
  • Submitted it and saw the canvas render
  • Saw the first draft ready for iteration

Next: how to add references so Claude starts closer to what you actually want.

← Previous LessonWhat Claude Design Is (and Isn't)Next Lesson →Importing Assets: Screenshots, Docs, and Codebases
← Back to Claude Design Guide for Designers overview

On this page

  • The four parts
  • Prompt example

aiux

AI UX patterns from shipped products. Demos, code, and real examples.

Have an idea? Share feedback

Get daily AI UX news

Resources

  • All Patterns
  • Browse Categories
  • Contribute
  • AI Interaction Toolkit
  • AI UX Audit
  • Agent Readability Audit
  • Newsletter
  • Documentation
  • Figma Make Prompts
  • Designer Guides
  • All Resources →

Company

  • About Us
  • Privacy Policy
  • Terms of Service
  • Contact

Links

  • Portfolio
  • GitHub
  • LinkedIn
  • More Resources

Copyright © 2026 All Rights Reserved.