/design artboards

Use /design to compare artboards before changing your website. You will write a focused brief, inspect a design canvas, refine one direction, and give Claude a clear implementation request.

Before you start

• An interactive Claude Code CLI session with version 2.1.265 or later, signed in to a Pro, Max, Team, or Enterprise claude.ai account.
• Artifacts available in the session, with Anthropic as provider. API-key and third-party-provider sessions cannot publish artifacts.
• On Enterprise, an Owner must enable the Design template. Organization artifact policies can also block the workflow.
• Real page copy, the action visitors should take, brand details, and a saved working version of the website before implementation.

Want to do it yourself?

Difficulty

6 out of 10

Estimated completion time

45–90 minutes for a first design pass

Skills you’ll need: Describe the design constraints, compare visual variations, and check the selected result at a practical screen size.

I’ll do it myselfI’d rather get help

How this helps your brand

Comparing layouts with the same real content helps you choose how customers will understand a page and find its main action. Implementing and testing the chosen direction connects the design proposal to a working website.

1. 1

   Step 1: Choose one page and one decision

   Start with a page such as Contact, not a whole-site redesign. Write down what is wrong with the current experience: visitors cannot find the enquiry form, the page feels crowded, or the main action disappears on a phone.

   Gather the actual heading, field labels, contact details, and brand colors. Decide which information must appear first. These are design inputs; leave unknown details marked as missing.

2. 2

   Step 2: Send a brief with /design

   In Claude Code, type /design followed by your brief, or paste the prompt below. Ask for a small number of distinct directions that solve the same problem using the same content.

   Claude publishes a Claude Design artifact containing artboards and returns a canvas link. Open it in a desktop browser to review the options. This canvas is a design proposal; you still need to ask for implementation.

3. 3

   Step 3: Compare the options as a visitor

   Inspect the artboards against the same questions. Do not pick solely on color. Try to answer the visitor’s most urgent question from what appears first.

   • Can a new visitor tell what this page is for?
   • Is the main action visible and clearly worded?
   • Does the proposed phone layout keep the same essential information?
   • Are the text and business details accurate, without invented promises?

   Illustrated exampleCompare the visitor’s path, using the same content

   Same brief: Northline Studio · Contact page · Request a quote

   A Details first

   Northline StudioLet’s talk about your home.

   Opening hours[MISSING]

   NameEmailYour projectRequest a quote

   Visitors pass the hours before reaching the enquiry form.

   B Form first

   Northline StudioLet’s talk about your home.

   NameEmailYour projectRequest a quote

   Opening hours[MISSING]

   The main action comes first. Hours remain visibly missing.

   Decision

   Choose B for the clearer path to an enquiry. Review its phone artboard before implementation.

4. 4

   Step 4: Refine one artboard

   Choose a direction and name it when you reply to Claude. Give one precise change, such as “Keep option B, move the opening hours below the form, and make Request a quote the only primary button”.

   You can select an artboard element and edit it in the browser; those edits save automatically. Export the chosen artboard as PNG or PDF if you need a record. Describe the final changes in your implementation request too.

5. 5

   Step 5: Recover if the canvas is missing

   If Claude only writes a local file or says it cannot publish, ask it to explain the artifact availability failure. Check the signed-in account, version, provider, and organization policy before retrying.

   If /design is unavailable on Enterprise, ask the Owner whether the Design template is enabled. Do not assume that opening an ordinary chat or changing your prompt unlocks the feature.

6. 6

   Step 6: Implement and check the chosen direction

   Return to the same Claude Code session with the canvas link and the chosen artboard name. Ask Claude to implement that direction in the existing page, preserve its working behavior, and list the files changed.

   Open the resulting website and test the main action at phone and desktop widths. A layout that looks good on an artboard can still fail when the real page has longer text, validation messages, or a working menu.

   Illustrated exampleCarry the chosen artboard into the working page

   Chosen canvas artboardB · Form first

   Hours below the form. One primary action.

   Return to the same Claude Code session

   Implementation request

   Use the canvas link I shared and implement B · Form first on the existing Contact page. Keep opening hours below the form and make Request a quote the only primary button. Preserve the working form behavior and list the files changed.

   Check the real website

   • Submit an enquiry at phone and desktop widths.
   • Try longer project text and missing required fields.
   • Confirm the menu works and the main action stays visible.

/design Create three distinct artboard directions for [page] of [website or business]. The visitor is [audience], and their main action is [action]. The current problem is [specific issue]. Use this exact content: [copy and labels]. Follow these brand rules: [colors, type, logo guidance]. Show desktop and phone layouts for each direction. Keep unknown business details visibly marked as missing. Explain the main tradeoff of each option. Publish the design canvas for review and stop before modifying the website code.