Claude Design: the complete visual studio

What you’ll be able to do

• Write an actionable visual brief and compare directions.
• Establish color, type, spacing, and component rules.
• Create desktop and phone artboards and test a small interactive flow.
• Refine targeted elements, assemble a campaign, and prepare a reviewed handoff.

A complete standalone course

Ten modules, approximately 220 minutes including practice. No design or coding background is required. The UAI exercises are free and work without an account. Creating your own artifacts in Claude requires an eligible Claude account. The gallery contains original teaching compositions, not claimed Claude-generated output.

01. Meet your design workspace

Goal: Find the current entry points and understand the conversation–canvas workflow.

Start with a modest artifact: a single invitation for a fictional public workshop. You need one audience, one message, and one action. A beautiful screen becomes useful when its reader can understand what to do next. This course follows a fictional “Open Studio” event so you can experiment without publishing real information.

In the current Claude experience, ask for a design in a conversation or choose the Design template from Artifacts. The canvas is where you inspect the result. This course’s practice canvas is a UAI simulation; it is not connected to Claude. Use the official walkthrough below to recognize the real product, then repeat the exercise in your own account.

Treat a generated design as a proposal. Read the content, inspect the hierarchy, and try its interactions. Keep the brief beside the artifact so you can trace each decision back to a requirement. Label invented content and placeholder images clearly. A prototype can demonstrate an experience without processing real bookings, messages, or payments.

Practice

1. Use the practice entry-point controls to open a sample design.
2. Watch the official product demonstration. Compare its conversation and canvas with the practice workspace.
3. In Claude, create a fictional workshop invitation and identify its headline, supporting detail, and action.

Create a design artifact for a fictional free community workshop called Open Studio. Audience: adults exploring creative AI for the first time. One page, one clear action: Explore the sessions. Use only these facts: a fictional event; no confirmed date, venue, capacity, or registration link. Mark unknown details as placeholders. Explain the intended reading order before designing. Do not publish or send anything.

Keep: A first invitation artifact plus a note identifying its three most important elements.

Watch for: Mistaking a polished placeholder for confirmed event information.

02. Write a visual brief

Goal: Turn “make it beautiful” into a clear, testable design request.

A useful design brief names the audience, purpose, required content, emotional tone, format, and constraints. Begin with a human situation: someone sees your workshop invitation while deciding whether AI is for them. What question must the page answer? What would make the next step feel clear and welcoming?

Describe visual choices as relationships. Ask for a headline that dominates the first view, generous space around the action, and short supporting copy. Specify a mood with two or three words rather than ten conflicting adjectives. Warm and editorial leads somewhere different from technical and precise. Neither is universally better; the brief determines the fit.

Separate fixed requirements from open choices. The name, accessibility information, and factual limits may be fixed. Type style and composition may remain open. Ask for two genuinely different directions and compare them against the same brief. Explain why you chose one. The point is to develop judgment, not to collect endless variations.

Practice

1. Complete the brief builder with an audience and a desired action.
2. Copy the resulting prompt into Claude and request two distinct directions.
3. Choose one direction using clarity, audience fit, and ease of taking the next step.

Design two distinct directions for Open Studio. Audience: first-time adult AI learners. Goal: help them explore a fictional workshop. Fixed content: the event name, a one-sentence purpose, three sample sessions, and one Explore sessions action. Direction A: quiet editorial, warm paper, strong serif headline. Direction B: energetic geometric, bold color blocks, crisp sans serif. Keep the same information in both. Explain the tradeoff of each. Mark dates and venue as unconfirmed.

Keep: A six-part brief and two directions with a written selection rationale.

Watch for: Changing the content and the style simultaneously, making comparison impossible.

03. Build a coherent brand system

Goal: Use a small visual system across several outputs.

A palette is a set of roles, not a pile of favorite colors. Define an ink color for readable text, a paper color for the main surface, an accent for actions, and a secondary surface. The preview in this lesson changes all of these together so you can see how one decision travels through the design.

Build a miniature kit: a heading, body copy, a button, a card, and a label. Compare their spacing and corner treatments. Consistency helps a viewer understand which pieces belong together. It also makes revision efficient: when you change a shared role, check every component that uses it.

For real brand work, supply assets you have permission to use and identify the exact version. Follow the official design-system setup guide when importing or configuring a reusable system in Claude. Review the output rather than assuming imported assets guarantee compliance. Check logo clear space, color roles, type availability, imagery rules, and the wording of interactive states.

Practice

1. Try the three complete palettes in the brand studio.
2. Choose one and create a small component sheet in Claude.
3. Apply the same roles to a poster, page, and social tile; inspect all three together.

Create a compact Open Studio design system. Define ink, paper, accent, and secondary-surface color roles; a two-level type scale; a spacing scale; a button; a card; and a small label. Explain when each role is used. Then apply the same system to an event invitation, a session card, and a square social tile. Preserve the same fictional content and identify any unavailable font substitutes.

Keep: A one-page brand kit with three consistent applications.

Watch for: Using a new accent color or button style for every screen.

04. Shape typography and layout

Goal: Control reading order using scale, spacing, and alignment.

Before adding decoration, decide the first three things a visitor should notice. For our invitation, those might be the event name, its promise, and the action. Size, weight, position, and surrounding space all influence that order. If every line is equally loud, the viewer has to construct the hierarchy for you.

Use the live controls to compare a serif-led editorial direction with a geometric sans serif direction. Increase the headline size, then check what happens to line breaks and the action. More dramatic type is not automatically clearer. Keep supporting copy readable and preserve enough space for the content to breathe.

Alignment gives separate elements a shared structure. A grid helps cards, labels, and images feel intentional. White space is part of that structure; it signals groups and creates rhythm. Review the design at normal reading size rather than only as a thumbnail. Ask for one focused revision at a time so you can identify what helped.

Practice

1. Change the type direction and headline scale in the live canvas.
2. Adjust spacing and compare the reading order before and after.
3. In Claude, request one hierarchy revision while preserving the facts and palette.

Revise the selected Open Studio direction for stronger hierarchy. Make the event name first, the one-sentence promise second, and Explore sessions third. Keep body text comfortable at normal viewing size. Align related elements to a shared grid and group each session title with its description. Preserve the palette and all facts. Explain the three changes you made and why.

Keep: A before-and-after layout with three annotated hierarchy decisions.

Watch for: Increasing every text size, which removes the contrast that establishes hierarchy.

05. Design across artboards

Goal: Adapt a composition to different shapes without shrinking everything.

A mobile design is a new arrangement of the same priorities. A desktop spread can place an illustration beside a headline; a phone may need to stack them. Keep the main action easy to find, shorten long lines, and avoid forcing a wide grid into a narrow viewport.

Use the device controls to compare the same content at two widths. Look for clipping, awkward line breaks, crowded labels, and excessive scrolling before the action. A visually attractive desktop screen can still fail on a phone. Check the longest realistic labels rather than only the shortest examples.

Ask for separate artboards when comparing layouts. Identify which elements are shared and which can change position or size. If the result will become software, write the behavior down: what stacks, what wraps, and what remains visible. A screenshot of a phone layout does not by itself prove responsive behavior; test the implemented page at intermediate widths too.

Practice

1. Switch the practice canvas between desktop and phone.
2. Create two artboards in Claude using the same content.
3. Annotate the stacking and wrapping rules and test an intermediate width when implemented.

Create desktop and phone artboards for Open Studio using the same brand system and content. Recompose the layout for the phone rather than shrinking the desktop. Keep the main action prominent, allow long session titles to wrap, and avoid horizontal scrolling. Add notes describing stacking, spacing, and navigation behavior. Distinguish the visual mockup from any working responsive implementation.

Keep: Two artboards plus explicit layout behavior notes.

Watch for: Calling two static screen sizes a fully tested responsive website.

06. Make a prototype people can try

Goal: Model a complete small flow, including missing-input and recovery states.

Choose one user task: explore a session and request a place in a fictional workshop. Map the beginning, the choice, the review, and the confirmation. Decide what happens if the visitor tries to continue without choosing. This is interaction design, not just a collection of attractive screens.

Try the course prototype. The choice is required before continuing, review lets you go back, and reset starts a fresh simulation. It never submits a real registration. Notice how each state explains where you are and what you can do next. If an action changes the page, its result should be visible.

In Claude, explicitly ask for a clickable prototype and name the behaviors. Test the happy path and at least one error path. Use realistic but fictional text and label simulated actions. Before handoff, record which buttons work, which are placeholders, and which services would be needed for production. A prototype is a tool for learning, not proof of a functioning backend.

Practice

1. Try continuing without selecting a session, then complete the example flow.
2. Go back and change the selection; verify the review updates.
3. Build the same four-state prototype in Claude and record three tests.

Build a clickable Open Studio session-selection prototype. States: welcome, choose one of three fictional sessions, review the choice, and confirmation. Require a selection before review. Let the user go back and change the choice. Include a reset action. Do not send data or connect services. Label the result as a simulation and list which production features are not implemented.

Keep: A working prototype with happy-path, error-path, and back-navigation test results.

Watch for: A convincing confirmation screen that implies a real reservation was made.

07. Iterate with precise feedback

Goal: Give targeted feedback and preserve what already works.

Replace “make it pop” with a location, a problem, a desired change, and a reason. For example: “In the hero action, change the label to Explore sessions so a first-time visitor understands the next step. Keep its size and position.” That request is much easier to evaluate.

Use conversation for changes that affect the structure and context. A targeted canvas comment can identify a specific element. Direct edits suit a small wording or layout adjustment when available. In our local practice, choose a target and edit its copy; the preview updates deterministically. It is a teaching exercise, not a live model response.

Compare before and after using the original brief. Did clarity improve? Did a new line break hide the action? Did a change to one component create inconsistency elsewhere? Keep a short revision log with the reason for each change. Stop iterating when the design meets the acceptance checks, rather than when you have exhausted every possible style.

Practice

1. Choose the headline or action in the annotation practice and apply a new label.
2. Use the comparison slider to inspect a dense layout against a clearer revision.
3. In Claude, make one focused change and verify that other requirements still hold.

Revise only the hero action label to “Explore sessions.” The current wording is vague for first-time visitors. Preserve the palette, typography, layout, and factual content. Show the revision and explain what changed. Then check that the longer label remains readable on the phone artboard and that its destination still matches its wording.

Keep: An annotated revision with a preserved-requirements checklist.

Watch for: A broad redesign request when only one element needs correction.

08. Create a visual campaign

Goal: Extend one direction into a page, poster, and social asset.

A campaign is a family of compositions. Preserve the core message and visual language while adapting to where the audience will see each piece. A poster can lead with a large statement; a page can explain the sessions; a social tile may need a short line that remains readable at small size.

Use the campaign preview to see a shared palette and type direction applied to three formats. Evaluate the group at once. Does the same event feel recognizable across the outputs? Does each format have an appropriate amount of information? Repeating a full webpage inside a tiny square rarely makes a useful social asset.

Ask Claude to separate the artboards and name the intended output sizes. Inspect image crops, margins, and the exact exported files. A design on a canvas can differ from an exported document. Keep editable sources, identify fonts and assets, and record any external licenses or permissions you still need. Do not imply an export is production-ready until you have opened it in its target environment.

Practice

1. Compare the three campaign formats using one selected palette.
2. Create the same family of assets in Claude with clear format requirements.
3. Open each export and check content, cropping, margins, and visual consistency.

Create an Open Studio campaign on separate artboards: a desktop event page, an A4 portrait poster, and a square social tile. Share the same palette, typography, and core message. Adapt the composition and amount of text to each format. Leave unconfirmed details visibly marked. Explain recommended export choices for each and list the checks I should perform after opening the actual exported files.

Keep: Three coherent assets with an export inspection record.

Watch for: Assuming a file exported successfully because the canvas looked correct.

09. Review accessibility and quality

Goal: Inspect contrast, focus, meaning, motion, and factual accuracy.

Beauty and usability reinforce one another when the design gives people clear ways to read and act. Start with contrast, comfortable text, visible focus, meaningful labels, and a predictable reading order. Color should not be the only signal that distinguishes a success state from an error.

The contrast tool calculates the ratio between two solid colors. Its normal-text threshold is a useful check, but it is only one part of accessibility. It cannot judge a whole screen, images behind text, alternative text, keyboard behavior, or the quality of a screen reader’s experience. Use it as evidence for one property, not a certification.

Review the real output with keyboard navigation and a narrow viewport. Reduce motion if it is distracting or if the viewer prefers it. Check every factual claim against the supplied material. A mockup may need annotation to explain behavior that cannot be tested yet. Keep failures and unverified checks visible in the handoff so the next person can act on them.

Practice

1. Try a low-contrast color pair, then improve it in the checker.
2. Use keyboard controls in your prototype and inspect focus visibility.
3. Record the actual checks, failures, and unverified items in the workbook.

Review this Open Studio artifact for readable text, text contrast, clear labels, visible keyboard focus where interactive, logical reading order, and narrow-screen layout. Check facts against the brief. Separate observed failures from items that require implementation or assistive-technology testing. Propose focused corrections and preserve the existing design direction.

Keep: A quality review with evidence, corrections, and explicitly unverified checks.

Watch for: Treating one passing contrast ratio as proof that the entire design is accessible.

10. Capstone: ship a reviewed design

Goal: Bring the entire workflow together and prepare an honest handoff.

Create a small but complete Open Studio design package: a written brief, a reusable visual kit, desktop and phone layouts, a four-state session prototype, a poster, and a social tile. Use the fictional content throughout. Include a revision log showing one meaningful improvement and why you made it.

Review the package using five dimensions: clarity, consistency, adaptability, interaction, and evidence. A strong result explains its own purpose and does not need a long verbal defense. Ask another person to describe what the page offers and what they would do next. Record their interpretation before explaining your intent.

Prepare a handoff note naming the source artifact, the chosen direction, the output files, the intended behavior, and the remaining work. Claude Code is one possible implementation path; follow the current official instructions for moving a design into development. Whatever the tool, compare the implementation with the design and retest interactions. Sharing and publishing require a final review of content, permissions, and destinations.

Keep a reproducible record of prompts, revisions, and checks. This course’s completion marks are learning aids saved on this browser; they are not a professional certification. Your portfolio should show the decisions you made and the evidence that the result works, alongside the finished visuals.

Practice

1. Complete every item in the capstone checklist and score the five review dimensions.
2. Open all exported files and ask a peer to try the prototype.
3. Write a handoff note with the source, outputs, behavior, test evidence, and remaining work.

Help me prepare the final handoff for my Open Studio design package. Inventory the brief, brand kit, desktop and phone artboards, four-state prototype, poster, and social tile. Compare them against the requirements. Report verified checks, failures, and checks not run. Draft a concise handoff note with implementation behavior, source assets, export formats, and remaining work. Do not publish or send the package.

Keep: A reviewed design package, evidence log, and implementation handoff.

Watch for: Hiding unfinished behavior behind polished visuals or an optimistic completion report.

Your practice: complete the Open Studio capstone

Build a fictional event package with a brief, brand kit, desktop and phone layouts, a four-state prototype, a poster, a social tile, a revision log, and a handoff. Open the actual exports and document keyboard, layout, factual, and interaction checks. Record remaining limitations.

Your finished artifact: A reviewed design package, completed workbook, and a handoff note that names the files, intended behavior, evidence, and unfinished work.

Official references

Product guidance checked October 22, 2026. Claude Design works inside Claude conversations and Artifacts. Its separate website is scheduled to close December 14, 2026. See current official guidance before choosing an entry point or export workflow.

• Get started with Claude Design
• Prototypes and UX
• Migration from standalone Design
• Text contrast

This independent UAI course does not provide professional certification.