Claude Design prompts that don't give you the default look

A Claude Design prompt avoids the default look when it carries values: the palette in hex, the typefaces and their scale, an easing curve with a duration, the section order and the media the page uses. Anthropic's own advice is to state the goal, the layout, the content and the audience, and that advice gets the structure right. It leaves every visual decision to whatever Claude picks when nobody decides.

This guide covers the second half of the prompt, the half that decides how the page looks. It sits next to our Claude Design review, which covers what the tool produces from a plain request.

What Claude Design is today#

Claude Design is Anthropic's tool for making designs, interactive prototypes, one-pagers and landing pages by talking to Claude. It launched on April 17, 2026 as an Anthropic Labs research preview running on Claude Opus 4.7, with its own address at claude.ai/design.

Since September 16, 2026 it lives inside Claude. Anthropic's help article describes it as one of the templates an artifact can start from, and you can reach it four ways:

• In any conversation: ask for a design, or choose Output, then Design, in the message box.
• In the Artifacts tab: pick a Design template.
• In Claude Code: use the /design command to create, edit and sync designs.
• In the iOS and Android apps: request and edit designs; sharing settings need the web or desktop app.

It is available on the Free, Pro, Max, Ultra, Team and Enterprise plans, and design work draws from the same usage limits as everything else you do in Claude. The standalone site at claude.ai/design closes on December 14, 2026, so move any design system you built there before that date.

Three properties matter for prompting. Claude builds the design on a canvas beside the conversation, and you refine it through chat, inline comments or direct edits on the canvas. It can import a design system from a GitHub repo, design files, uploads or a local codebase, and it checks its own output against that system. And the result leaves as a .zip, a PDF, a PPTX, Google Slides or standalone HTML, goes to tools such as Canva, Lovable, v0, Netlify, Vercel and Wix, or is handed to Claude Code to become a real project.

Where the default look comes from#

Anthropic's example prompts are good prompts for structure. One reads: "Build a landing page for our new API product with a hero section, code examples, and pricing." It names the sections and the content, and leaves out the color, the typeface, the curve and the film.

Every slot a prompt leaves open still gets filled, from the middle of what pages like it usually look like. In our review that middle was:

• a neutral geometric sans for everything
• a gray on the neutral axis, such as #6B7280
• 8px radius on every corner
• each section fading up 20px over roughly 300ms

None of it is a fault in the tool. It is what an unfilled slot looks like, and it is the same median every builder lands on.

A design system import does not change this for a marketing page. A product team's system carries buttons, inputs, tokens and card patterns. It rarely carries a hero film, a scroll sequence or a headline set at 9rem, and those are the parts that make a landing page look directed, so they have to arrive in the prompt.

Here is what a page looks like when every slot is filled. Each of these is a full art direction in the Thanor library, written as values:

None of these would come back from "a bold fintech landing page" or "a modern AI startup hero". They come back from a list of decisions, and the next section is that list.

The six slots a Claude Design prompt has to fill#

The first four rows are what people mean by design tokens, and a separate guide covers them as tokens. The last two rows are the ones almost nobody writes, and they carry most of the difference between a page that looks generated and one that looks made.

Every section needs a job. "Features" tells Claude to draw three cards with icons. "A 7/5 split where the left column argues one claim in two sentences and the right column shows it running" tells Claude what the block is for, which lets it compose instead of fill.

Media needs to be concrete because Claude cannot invent your film. If the hero is a looping clip, give the file, say it is muted and loops, and say how it sits in the frame (object-fit: cover, focus at 60% 40% on mobile). If the page has no media, say so, and say what carries the hero instead: type at full width, a color field, a drawn mark.

A Claude Design prompt skeleton#

This is the shape to paste, filled with your own values. The values below are illustrative; the order is the part to keep.

PAGE
One-page site for <brand>, which sells <what> to <who>.
The page has one job: <the single action a visitor should take>.
TOKENS
page #0E0E10, raised #17171B, text #F4F1EA
muted #A39E93 (warm, never a neutral gray)
accent #FF4F1F, at most two uses per screen
border 1px rgba(244,241,234,0.08)
radius 2px controls, 14px cards
spacing 4 / 8 / 12 / 20 / 32 / 52
TYPE
display: a heavy grotesk, clamp(3.5rem, 10vw, 9rem), line-height 0.92, tracking -0.03em
body: 17px / 1.6, measure 64ch, ratio 1.25, two weights only
MOTION
reveal: opacity and translateY(24px), cubic-bezier(0.22, 1, 0.36, 1), 680ms
stagger 80ms, first viewport only
hover response: 200ms, cubic-bezier(0.32, 0.72, 0, 1)
prefers-reduced-motion: no transforms at all
SECTIONS, in this order
1. Hero: headline across 7 of 12 columns, film in the other 5, one button
2. Proof: four client marks in one row at 40% opacity
3. Argument: one claim, two sentences, a 7/5 split
4. Signature moment: <the one interaction this page is remembered for>
5. Objections: an accordion of four questions
6. Close: one line and the button again
MEDIA
hero film: <url>, muted, loops, poster <url>, object-fit cover
REFUSE
gradients, an icon set, a testimonial carousel, a third typeface

Tokens go first so every later block can point at them. Refusals go last, where they stay in force to the end of the generation. Claude will ask clarifying questions when something is missing, which is one more reason to leave nothing open.

If your company already has a design system in Claude, attach it as well. The system keeps the buttons and inputs on brand, and the prompt supplies the hero, the motion and the order that the system does not contain.

Motion is the slot nobody fills#

Anthropic's launch post lists code-powered prototypes with voice, video, shaders and 3D among the things Claude Design is for. That range only appears when the prompt describes motion as mechanics. "Animated" gets you the fade from the median; a description of what drives the motion gets you a page that moves on purpose.

Every motion line in a prompt should answer three questions:

1. What drives it. Time, the scroll position or the pointer. Most pages that feel directed bind their one big moment to the scroll or the cursor and keep everything else still.
2. The curve and the duration. cubic-bezier(0.22, 1, 0.36, 1) over 680ms for an entrance, 200ms for a hover, and for a scroll-driven film a scrub with a short lag, for example 0.4s, so the frames follow the wheel without stepping.
3. The scope. Which elements move, and which never do. A page where every block fades in has no moment, because the eye cannot tell which movement mattered.

A scroll-bound film reads like this: "The hero film is pinned for 300vh; its playback position follows scroll progress from 0 to 1; headline lines enter one by one at 0.2, 0.45 and 0.7." A cursor-bound one reads like this: "The character's eyes follow the pointer, eased at 0.12 per frame, clamped to 18deg."

Both are one mechanism on one section, stated as physics. For more of these written out with their values, see the guide to website animation effects.

Iterating without sliding back to the median#

The first generation is a draft, and Anthropic says as much. How you ask for changes decides whether the page keeps its direction or drifts back toward the default with each round.

Anthropic's own tips point the right way. Its example of feedback that works is "Tighten the spacing between form fields to 8px", set against "This doesn't look right", which gives Claude nothing to act on. It recommends inline comments for targeted changes, chat for structural ones and direct canvas edits for quick visual moves, plus asking for two or three variations when you are unsure.

Feedback that keeps the direction is written in the same units as the prompt:

• "Headline to clamp(4rem, 11vw, 10rem), tracking -0.035em, keep line height 0.92."
• "Replace every #6B7280 with #A39E93."
• "Reveals at 680ms on the curve in the tokens, not 300ms."
• "On mobile, set the hero film's focus to 60% 40% so the subject stays in frame."

Two habits protect the work. Before a big change, say "Save what we have and try a completely different approach", the phrasing Anthropic suggests, because Claude Design has no version history yet. And when you open a new chat tab inside a project, paste the tokens block again, so the new thread starts from your values instead of from the median.

If you would rather build in a repo than on a canvas, the same prompt works in Claude Code; the Claude Code guide covers that route.

Paste a finished art direction instead#

Writing the skeleton above well is the design work itself, and it takes time. That is the job the Thanor library does. Each design is a live, moving preview with a long, exact prompt behind it, and the prompt is a full art direction written as values:

• the palette in hex
• the typefaces and the size scale
• spacing
• easing curves and durations
• the section order and every interaction
• hosted films, cut-outs and stills that the built page uses

Paste one into a Claude conversation, choose Design, and Claude Design builds that site. The same prompt works in ChatGPT, Gemini, Cursor, Lovable, v0 or Bolt, so it is not tied to one tool; the comparisons with Google Stitch and with Figma Make cover where else it fits; for OpenAI's page builder, see the ChatGPT Sites review.

To skip the clipboard, connect the Thanor MCP. It is listed in Claude's connectors directory and included in every paid plan, and with it Claude searches the catalog and pulls a design's full art direction into the conversation by itself. For a hero that needs a film and nothing else, the animated backgrounds page has looping clips whose URLs you can paste straight into the media block. What you build is yours to use for yourself or for paying clients. The plans are on the pricing page.

To see which model to pair with which job, the model comparison for web design covers the field, and the Opus 5.5 write-up covers Anthropic's newest Opus model on the same job.

Open Vesperion and paste it into Claude Design#

Open Vesperion and copy its prompt; it is free with a free Thanor account, and Claude Design is on Claude's Free plan as well, so the whole test costs nothing. Start a conversation, choose Design, paste the prompt whole and let it build.

Then check the work the way you would check a contractor's: open the exported HTML, find the hex values, the curve and the section order, and confirm each arrived as written. Where one did not, quote the line back to Claude instead of describing the look. Once you have seen the difference a full specification makes, browse the library for the page you actually need, or read how to build the same page as an artifact and ship it.