CLAUDE /DESIGN + /DESIGN-SYNC
The complete setup guide by Arshman Khalid (@arshman)
https://arshmankhalid.com/claude-design/
Checked September 17, 2026

01. A quick setup check.

This guide uses Claude Code, Claude’s coding app that runs in your terminal. Its built-in /design workflow opens a visual canvas. You can describe the result in plain English.

Your account

Sign in with Claude

Use a Pro, Max, Team, or Enterprise account with Artifacts available. Enterprise access may need your organization’s owner to enable it.

Your app

Claude Code, up to date

/design requires version 2.1.234 or later and an artifact-enabled session. Updating is part of the next step.

Your starting point

A folder for your work

Open an existing project, or create a folder for your designs. Keep reference images, your logo, and brand notes close by.

For design sync

A React component repo

Have the code for the design system you want to import. Only have a logo and brand guide? There’s an asset-based route in step 05.

Official reference: Artifact availability & account access ↗ (https://code.claude.com/docs/en/artifacts#availability)

02. Install. Sign in. You’re in.

Choose your operating system. Run the installer in your computer’s Terminal or PowerShell, then open a new terminal window.

Open Terminal and run:

Terminal · install Claude Code 

curl -fsSL https://claude.ai/install.sh | bash

Open PowerShell and run:

PowerShell · install Claude Code 

irm https://claude.ai/install.ps1 | iex

Confirm that the install is working:

Terminal / PowerShell · check installation 

claude --version
claude doctor

Already have Claude Code?
For a native install, run claude update, then restart Claude Code. For a Homebrew install, use brew upgrade claude-code; for WinGet, use winget upgrade Anthropic.ClaudeCode. Update through the method you originally used.

Open your project and sign in

• Open a terminal inside your project folder. Most editors offer “Open in Integrated Terminal” from the folder’s context menu.
• Run the command below and follow the browser sign-in. Choose the Claude account you’ll use for designs.
Terminal / PowerShell · start Claude Code 

claude

If you’re already in Claude Code and need to sign in again, type /login. From this point on, slash commands go inside the Claude Code conversation.

✓ 
Checkpoint: you can see Claude Code’s conversation and type a message.

Official reference: Install and update Claude Code ↗ (https://code.claude.com/docs/en/setup)

Official reference: Start your first session ↗ (https://code.claude.com/docs/en/quickstart)

03. Make your first design.

Type /design followed by what you want to make. For a result like the reel, attach a few visual references and tell Claude the format, subject, and brand direction.

What you’re making Format / size Reference images Your brand 

Inside Claude Code · example brief 

/design Create three 9:16 posters for my AI workshop. Use the attached references, black and orange brand colors, and the headline “Create with AI.”

• Let Claude build the artboards. Open the design artifact or canvas link it returns.
• Pick a direction. Compare the options, then request one specific change at a time: larger headline, different layout, or more space around the logo.
• Refine on the canvas. Where editing and saving are enabled, adjust the design and save a new version. Other sessions can view and export PNG or PDF.

Give it useful context

Add your logo, a small set of references, and the actual words you need in the design. Put recurring brand rules in your project’s CLAUDE.md so they’re easy to reuse.

Check the result at real size

For a 9:16 poster, look at it on your phone. Check the headline, contrast, cropping, and space for platform overlays before you export.

Official reference: Create and refine a design canvas ↗ (https://code.claude.com/docs/en/artifacts#draft-a-design-canvas)

04. Bring your design system.

/design-sync takes an existing React design system from your repository and brings it into Claude Design. Start Claude Code inside the repo containing your components and design tokens.

Source: Your React repo

→ /design-sync→ Destination: Claude Design

1. Authorize design-system access

Inside Claude Code · authorize design access 

/design-login

Complete the Claude account authorization. This connects design-system access separately from your normal Claude Code login.

2. Start the import

Inside Claude Code · sync this repository 

/design-sync

You can add a project hint, such as /design-sync My Brand. Follow the questions Claude presents about your project and let it finish converting and validating the components.

The component library shown in the reel: your real UI becomes a design starting point.

Give the first sync time to finish.
The initial run validates every component. A large library can take hours. Read the progress and resolve any reported component issues before using the imported system.

Official reference: /design-login and /design-sync command reference ↗ (https://code.claude.com/docs/en/commands)

05. Make the next design feel like you.

Open Claude Design (https://claude.ai/design) with the account you used to authorize the sync. Find your imported system and use it for a small test project.

• Choose your organization. In standalone Claude Design, use the project picker in the lower-left corner. Check that its design system is published, then start a new project from that organization’s home.
• Make one simple screen first. Ask for a signup screen or a product card using that system. Compare its type, colors, buttons, and spacing with your source components.
• Keep the source current. When you change your React components or tokens, run /design-sync again and inspect the refreshed result.
Only have brand assets? Start here.
Use Claude Design’s design-system setup with your logo, color palette, fonts, screenshots, and brand documents. Review what it extracts and test a sample project. In the standalone setup, publish the system when it’s ready for your organization to use.

Using Design inside Claude instead? To bring an existing standalone system into the integrated experience, open the Design tab and choose Migrate team design systems. Complete any cleanup Claude offers. You can then manage your systems in Settings → Design systems.

Keep a short brand checklist next to your first design: one heading, one body paragraph, one button, and one card. It’s a quick way to spot a font or spacing mismatch before building a whole page.

Official reference: Set up a design system from code or brand assets ↗ (https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design)

Official reference: Find and use Design in Claude ↗ (https://support.claude.com/en/articles/14604416-get-started-with-claude-design)

06. From a canvas to something real.

For posters and graphics

Export the approved design as PNG or PDF. Check the final text, image quality, and dimensions before sharing it.

For a website or interface

Choose an artboard and tell Claude Code to implement that direction in your project. In Claude Design, you can also use Export → Handoff to Claude Code.

Review the implementation in the browser. Test mobile width, navigation, forms, and button states. A good-looking artboard is the starting point; these checks make it usable.

✓ 
Your complete loop: describe → design → refine → implement → review.

Official reference: Design-to-code workflow ↗ (https://code.claude.com/docs/en/whats-new/2026-w34)

Official reference: Export and hand off a design ↗ (https://support.claude.com/en/articles/14604416-get-started-with-claude-design)

07. If something gets stuck.

Q: My terminal says “claude: command not found.”

Open a new terminal after installing, then try claude --version. If it still fails, check the installer’s PATH instructions and run through the official installation fixes (https://code.claude.com/docs/en/troubleshoot-install). If you have multiple installs, check which -a claude on Mac/Linux or where.exe claude on Windows.

Q: I can’t see /design.

Check claude --version in your terminal. Update to 2.1.234 or newer and restart. Inside Claude Code, use /help to check available commands. Sign in with /login and confirm Artifacts are available for your account and organization. An API-key-only session can’t publish these artifacts.

Q: Design Sync can’t access my account.

Run /design-login and finish its browser authorization with the correct Claude account. The design-system connection has its own login flow. If you’re in a managed workspace, confirm access with its owner. Check the command reference (https://code.claude.com/docs/en/commands) for provider availability.

Q: I don’t have a React component library.

Use the brand-asset setup in step 05. Start with your logo, fonts, colors, and a few good examples. The repository-based /design-sync flow is built around React design systems.

Q: The first sync is taking a long time.

Large component libraries need time for conversion and validation. Keep an eye on the progress output. If Claude reports a failure, address that specific component or dependency and retry; don’t assume a long initial run has frozen.

Q: I can view the canvas but can’t save edits.

Saving depends on the features available in your session. You may still be able to view and export PNG or PDF. Check artifact availability (https://code.claude.com/docs/en/artifacts) and your organization’s settings.

Official reference: Troubleshoot installation and sign-in ↗ (https://code.claude.com/docs/en/troubleshoot-install)

↗. Go straight to the source.

Researched against Anthropic’s documentation and paired with the workflow from my reel. Checked September 17, 2026. Menu names and availability can change as Claude Design develops.

Installation & updates (https://code.claude.com/docs/en/setup)Claude Code quickstart (https://code.claude.com/docs/en/quickstart)Slash-command reference (https://code.claude.com/docs/en/commands)Design canvases & availability (https://code.claude.com/docs/en/artifacts)Get started with Claude Design (https://support.claude.com/en/articles/14604416-get-started-with-claude-design)Set up your design system (https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design)Installation troubleshooting (https://code.claude.com/docs/en/troubleshoot-install)The /design release notes (https://code.claude.com/docs/en/whats-new/2026-w34)

© 2026 Arshman Khalid