/design

What /design does

This skill drafts UI mockups, screen flows, landing pages, or posters as artboards on a single canvas. These are published as a Claude Design artifact, editable in a desktop browser with automatic saving. Artboards can be exported as PNG or PDF.

Syntax

/design

Quick drill

Three cards from the /cards deck. Open each to check your answer.

1. Which command drafts UI mockups, screen flows, landing pages, or posters as artboards on a single canvas?

   • Launches a full-featured design application
   • Generates code for UI components
   • Analyzes existing design system files
   • Drafts UI mockups and other design artifacts
   Show answer

   /design: Drafts UI mockups and other design artifacts

2. Which command authorizes design-system access for /design-sync by linking with your claude.ai account?

   • Logs into your Claude Code account
   • Creates a new claude.ai design account
   • Manages design system user permissions
   • Authorizes design-system access for /design-sync
   Show answer

   /design-login: Authorizes design-system access for /design-sync

3. Which command converts a repository's React design system and uploads it to Claude Design?

   • Updates Claude Design with new features
   • Uploads a React design system to Claude Design
   • Synchronizes local design files with cloud storage
   • Generates a React component library
   Show answer

   /design-sync: Uploads a React design system to Claude Design