aiux
Patterns & SkillsPatterns & SkillsCoursesCoursesNewsNewsResourcesResourcesSavedSaved
Overview

Setup

  • Sign In to Claude Code
  • 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 (Let Claude Code Handle Git)

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. Start Your First Claude Code Session
PrototypeLesson 9 of 23

Start Your First Claude Code Session

2 min readClaude Code for DesignersUpdated Jul 20, 2026

Time to actually launch Claude Code. You'll open a terminal, run one command, sign in, and pick a model. Three minutes from here to a working session.

Start Your First Claude Code Session

Open Terminal

  • Mac: Command + Space → "Terminal" → Enter
  • Windows: Windows logo → "Command Prompt" → Enter

Launch Claude Code

Type this command and press Enter:

Terminal
claude

Sign In (if you haven't already)

The first time you run claude, you'll sign in, either through the browser with your Claude subscription or by pasting the API key you saved. After that, Claude Code remembers you.

If you're pasting an API key, it won't appear as you type. That's normal for security!

Choose a Model

Claude Code uses the sonnet model (Claude Sonnet 5) by default, the best balance of speed and quality for design work. Switch anytime with the /model command; try opus (Claude Opus 4.8) for heavier reasoning, or haiku for quick, simple tasks.

Handy Claude Code Commands

A few built-in shortcuts worth knowing. Type /model to switch models, /clear to start a fresh chat while keeping your project, /code-review to have Claude Code check your code for issues, and /help to see everything. Press Shift + Tab to toggle plan mode, where Claude Code shows its plan before it changes any files, which is great while you are learning.

You're inside Claude Code

  • Opened a terminal session
  • Launched Claude Code with the claude command
  • Signed in and chose your model

Next: giving Claude Code a project folder to work in so your files don't end up scattered.

← Previous LessonBring Code Back to FigmaNext Lesson →Create Your Project Folder
← Back to Claude Code Course for Designers overview

On this page

  • Start Your First Claude Code Session
  • Open Terminal
  • Launch Claude Code
  • Sign In (if you haven't already)
  • Choose a Model

aiux

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

Have an idea? Share feedback

Get daily AI UX news

Services

  • Audit my product
  • Request an audit

Resources

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

Company

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

Links

  • Portfolio
  • GitHub
  • LinkedIn
  • More Resources

Copyright © 2026 All Rights Reserved.