Your dev server needs its own terminal to keep running. The fix is simple: open a second terminal and put Claude Code there. From now on, the loop is "edit in one window, watch the browser update from the other."
Get Back to Editing
Open Another Terminal Window
To keep editing with Claude Code while your prototype runs, open a new Terminal window:
- Mac: Command + T (in Terminal app)
- Windows: Ctrl + Shift + 2 (in Command Prompt)
Navigate to Your Project
In the new Terminal, run:
Terminal
cd my-first-prototypeStart Claude Code Again
Run:
Terminal
claudeNow you have:
- Terminal #1: Your dev server (showing localhost:5173)
- Terminal #2: Claude Code (where you edit)
- Browser: Your live prototype updating in real-time
Congratulations!
- Created your first prototype with Claude Code
- Saw it live on your machine
- Understand the foundation of design workflows with Claude Code
You've created your first prototype with Claude Code and seen it live on your machine. This is the foundation of everything you can do with Claude Code as a designer.
Stuck on your own project? Book 45 minutes with me for $49.
The patterns behind this lesson
Contextual AssistanceOffer timely, proactive help and suggestions based on user context, history, and needs.Augmented CreationEmpower users to create content with AI as a collaborative partner.Progressive DisclosureGradually reveal information, options, or AI features to reduce cognitive load and simplify complex tasks.