AI Guides › Workbench
By Nigel Guy · 7 min read
Most people meet Claude Design by typing "make me a landing page" and getting something competent and anonymous. That is the default: a blank brief produces the average of everything. The work gets interesting when you hand it a reference, so it has something specific to be consistent with.
The rule: give Claude Design a reference to work from and a list of what must not be copied. A reference without a boundary produces a knock-off; a boundary without a reference produces beige.
Anthropic announced Claude Design on 17 April 2026 as an Anthropic Labs product, powered at launch by Claude Opus 4.7. The help centre now describes it as a beta. It sits in a chat on the left with a canvas on the right. You reach it at claude.ai/design, from the sidebar in Claude Desktop, in any conversation, via the Artifacts tab, or from Claude Code. Mobile apps are for viewing; editing is on web and desktop.
It can take screenshots, images, DOCX, PPTX and XLSX files, and codebases as input. It can build a design system from a codebase, slide decks, brand guidelines, logos and fonts. Exports are zip, PDF, PPTX and standalone HTML, plus handoff to tools such as Claude Code. Anthropic's announcement also mentions a web capture tool for grabbing elements from a live site; I could not confirm its exact menu path, so look for it in the app rather than trusting a screenshot from a blog.
| Brief | What it does | Cost at time of writing | Best for | Catch |
|---|---|---|---|---|
| Motion reskin | Keeps a free template's structure and animation, replaces its look | Included in plan | Landing pages, decks, product tours | Check the template's licence first |
| Design-language borrowing | Extracts the principles of brands you admire into a reusable design system | Included in plan | Starting a brand, refreshing one | Principles, not logos or wording |
| Site rebuild | Recreates the layout and flow of a site you like from your own content | Included in plan | Rethinking your own site, learning structure | You rebuild your site, not theirs |
Claude Design is included on Pro, Max, Team and Enterprise, and counts towards your normal usage limits; larger requests such as full decks use more of your allowance. Pro is $20 a month (about £15 at time of writing) and Max starts from $100 (about £75 at time of writing). Check the £ price at checkout. Enterprise admins must switch the feature on in Organization settings.
Start from a template you are actually allowed to adapt: your own, one you bought, or one whose licence permits modification. Screenshot or upload it, then tell Claude what to keep and what to change.
You are a senior web designer working in Claude Design.
Context: I have attached a template, [TEMPLATE_NAME], that I have the right to adapt. My brand is [BRAND_NAME]: [ONE_LINE_DESCRIPTION]. Palette: [HEX_COLOURS]. Typefaces: [FONTS_OR_"suggest a pairing"]. Tone: [TONE_WORDS].
Goal: keep the template's layout and its motion behaviour ([DESCRIBE_THE_MOTION_TO_KEEP]), but replace its visual style with mine. A good result looks like it was designed for my brand from the start.
Steps:
1. List the motion patterns you can see in the template and confirm which you will keep.
2. Replace colour, type, imagery style and corner/shadow treatment with mine.
3. Rewrite every placeholder text block using my copy: [PASTE_COPY_OR_"ask me for it"].
4. Produce two variants, labelled A and B, differing mainly in [DIFFERENCE].
Constraints: do not reuse the template's logo, images or wording. Respect reduced-motion preferences. Keep text contrast readable.
If any input is missing, ask me before you start. Before answering, check that nothing from the original brand remains visible.
Fill in the square brackets. Then give feedback in specifics: "slow the reveal, keep the stagger" beats "make it nicer".
Design language means the rules underneath: spacing rhythm, type scale, how much colour is allowed, how corners and shadows behave, how the tone of voice sounds. Those are ideas. A logo, a typeface you have no licence for and a company's exact copy are not.
/design-sync in Claude Code, or from existing systems.You are a brand designer. I have attached screenshots from [BRAND_1], [BRAND_2] and [BRAND_3]. I admire them for [WHAT_YOU_ADMIRE].
Goal: write a design brief for [MY_BRAND] that borrows principles, not assets.
Steps:
1. For each reference, describe in plain words its spacing, type hierarchy, colour discipline, imagery style, motion and tone.
2. Name the three principles the references share.
3. Say which principle suits [MY_AUDIENCE] and which would feel wrong, and why.
4. Propose a design system for [MY_BRAND] using my colours [HEX_COLOURS] and fonts [FONTS], applying only the chosen principles.
Output: a table of principles, then the proposed system (colours, type scale, spacing, components, motion rules).
Guardrails: do not reproduce any logo, wordmark, illustration or copy. Do not use fonts I have not told you I can use. Ask me for anything missing rather than guessing. Before answering, check each proposed rule could not be mistaken for a copy of one brand.
The honest version of this is structure study. You are borrowing a pattern: hero, proof, pricing, call to action. You are not cloning a competitor's page.
You are a conversion-minded product designer. I have attached screenshots of a site whose structure I like: [REFERENCE_SITE_DESCRIPTION], and my own material: [MY_COPY], [MY_IMAGES], [MY_DESIGN_SYSTEM].
Goal: a page for [MY_PRODUCT] aimed at [MY_AUDIENCE] with the goal of [ACTION_I_WANT]. Good means a visitor understands the offer within a few seconds and knows the next step.
Steps:
1. Summarise the reference's section order and what job each section does.
2. Propose my page's section order, adapting it to my offer.
3. Build the page with my copy and assets only, desktop and mobile.
4. List anything in my copy that is missing or weak.
Constraints: no text, images or brand marks from the reference. If a section needs content I have not supplied, leave a labelled gap and ask me. Check before answering that the page reads as [MY_BRAND], not the reference.
If you already have a template you may adapt, start with Brief 1. If you have no brand yet, do Brief 2 first and let Brief 1 or 3 inherit the result. If the structure of your own site is the problem, go straight to Brief 3.