Code without a preview is just text. You'll have Claude Code set up a local project, spin up a dev server, and open localhost:5173 in your browser to see your prototype rendered in real-time, refreshing automatically every time Claude Code makes a change.
See Your Prototype Live
Let Claude Code Set Up the Project
Still inside Claude Code, ask it to make your folder runnable:
Set up this folder as a React + Vite project with Tailwind CSS, install the dependencies, and make sure my button component shows on the page.Claude Code scaffolds the project, installs what it needs, and wires in your component. Approve the commands if it asks. (Vite is the modern, fast replacement for older tools like create-react-app.)
Start Your Development Server
Now exit Claude Code (type exit) and start the dev server:
npm run devYour prototype opens in your browser at localhost:5173. Leave this terminal running.
Watch for Live Updates
When Claude Code makes changes, your browser automatically updates. No manual refresh needed!
Live preview running
- Had Claude Code scaffold a React + Vite + Tailwind project
- Started the dev server with npm run dev
- Confirmed the prototype renders at localhost:5173 with live reload
Two windows, one workflow. Last lesson in this module: keeping the dev server running while you keep editing.