aiux
PatternsPatternsCoursesCoursesNewsNewsResourcesResourcesSavedSaved
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 Course
  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 Jul 20, 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.

The current Claude Design UI mid-first-prompt: a 'Claude has some questions' panel in the left chat, and the canvas showing a generated set of multiple-choice clarifying questions (design type, submission method, output format) before it commits to a full design.
What this looks like in the current UI (here on a different project). The step-by-step clips below were captured on an earlier build, but the flow, clarifying questions first, then a full first pass, is the same.
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

Early research-preview builds had a recurring issue where clicking around the UI with the canvas open could snap you back to the Claude Design home screen. Anthropic's mid-2026 updates appear to have addressed it, and it's no longer on their documented list of known limitations. If you ever do get bounced to the home screen, don't panic: your work is saved and you can re-open the project from the project picker.

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 Course 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

Services

  • Audit my product
  • Request an audit

Resources

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

Company

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

Links

  • Portfolio
  • GitHub
  • LinkedIn
  • More Resources

Copyright © 2026 All Rights Reserved.