Module 5, Lesson 4: Connect Claude Design to Claude Code
How do you connect Claude Design to Claude Code? In Claude Design, use Share, then Send to, then Claude Code to generate a connection prompt. Trim out the implement section first, since you only want to connect here, not start a build.
Paste it into WebStorm, run claude, and confirm it worked by asking Claude Code to read your design project. The Product Path walks the exact clicks.
How do you connect Claude Design to Claude Code?
You connect them by generating a connection prompt from Claude Design's Send to menu, trimming out its implement section, and handing that trimmed prompt to Claude Code in your terminal. Running it prompts you to log in and authorize Claude Code to read your design system, wiring the two tools together.
You verify the connection by asking Claude Code to read your design project directly; if it can describe your screens, the link is live, even though the design file is not fully synced yet at this stage.
Before We Start
From previous lessons:
- Your design is done: a phased, interactive prototype built in Claude Design, refined through feedback. Module 5, Lesson 3
- WebStorm is set up with your project folder, including your MCP configuration. Module 3, Lesson 1
- Claude Code is installed. Module 3, Lesson 3
Tools / setup you'll need:
- Claude Design, with your finished design open
- WebStorm, with your project open
- A terminal (inside WebStorm or standalone)
By the end of this lesson, you'll:
- Have generated a connection prompt from Claude Design and handed it to Claude Code
- Have logged Claude Code into Claude Design and authorized design system access
- Have confirmed Claude Code can actually read your design file and project
- Know why your design isn't fully synced yet, and what's coming next to fix that