aiux
PatternsPatternsCoursesCoursesNewsNewsResourcesResources
Overview

Setup

  • Get Your Anthropic API Key
  • Install Node.js
  • Install Claude Code

Figma ↔ Code

  • Set Up Figma MCP
  • Turn Figma Frames into Code
  • Using Figma Links in Prompts
  • Figma to Code Best Practices
  • Bring Code Back to Figma

Prototype

  • Start Your First Claude Code Session
  • Create Your Project Folder
  • Generate Your First Prototype
  • See Your Prototype Live
  • Get Back to Editing

GitHub

  • Create a GitHub Account
  • Create a Repository on GitHub
  • Connect Your Local Project to GitHub
  • Save Your Changes Going Forward
  • Share Your Work & Use Claude's /save Command

Best Practices

  • How to Describe Your Design to Claude Code
  • Testing Your Prototype
  • Iterating Based on Feedback
  • Handing Off Work to Developers
  • Troubleshooting Common Issues
  1. Guides
  2. /
  3. Claude Code Course for Designers
  4. /
  5. Get Back to Editing
PrototypeLesson 13 of 23

Get Back to Editing

1 min readClaude Code for DesignersUpdated Feb 18, 2026

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-prototype

Start Claude Code Again

Run:

Terminal
claude

Now you have:

  • Terminal #1: Your dev server (showing localhost:3000)
  • 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.

← Previous LessonSee Your Prototype LiveNext Lesson →Create a GitHub Account
← Back to Claude Code Course for Designers overview

On this page

  • Get Back to Editing
  • Open Another Terminal Window
  • Navigate to Your Project
  • Start Claude Code Again

aiux

AI UX patterns from shipped products. Demos, code, and real examples.

Have an idea? Share feedback

Get daily AI UX news

Resources

  • All Patterns
  • Browse Categories
  • Contribute
  • AI Interaction Toolkit
  • Agent Readability Audit
  • Newsletter
  • Documentation
  • Figma Make Prompts
  • Designer Guides
  • All Resources →

Company

  • About Us
  • Privacy Policy
  • Terms of Service
  • Contact

Links

  • Portfolio
  • GitHub
  • LinkedIn
  • More Resources

Copyright © 2026 All Rights Reserved.