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. Sign In to Claude Code
SetupLesson 1 of 23

Sign In to Claude Code

2 min readClaude Code for DesignersUpdated Jul 20, 2026

Claude Code connects to Claude using your Anthropic account. There are two ways to sign in. Pick whichever fits you; most individual designers use Option A.

Option A: Sign in with your Claude subscription (simplest)

If you have a Claude Pro or Max plan, you don't need an API key at all. Right after you install Claude Code (Lesson 3), you'll run the claude command, a browser window opens, and you sign in with the same Claude.ai account you already use. That's it: nothing to copy, store, or bill separately.

Claude Code is included with Pro, Max, Team, and Enterprise plans. Note: the free Claude.ai plan does not include Claude Code. If you're on Pro or Max, you can skip straight to Lesson 2; you'll sign in during setup.

Option B: Use an API key (usage-based billing)

Prefer pay-as-you-go billing, or on a team that provisions keys through the Console? Create an API key instead:

1

Create an Anthropic Account

  • Go to console.anthropic.com in your web browser
  • Click "Sign up" in the top right
  • Create an account using your email and password
  • Check your email for a verification link and click it
2

Generate Your API Key

  • Once logged in, find "API Keys" in the left menu
  • Click "Create Key"
  • Name it something like "Claude Code for Design"
  • Click "Create"
  • Copy your key immediately and save it somewhere safe (like a password manager)
Anthropic Console API Key Screenshot
Anthropic Console showing where to create and copy API keys
Keep Your Key Secure

Your API key is like a password. Never share it with anyone, post it in Slack/email/public docs, commit it to GitHub, or store it in plain text files in your projects.

Ready to sign in

  • Chose how you'll sign in: Claude subscription or an API key
  • If using an API key: generated it and stored it somewhere safe, out of any code files
  • If using a subscription: nothing to do yet, you'll sign in during setup

Next up: getting Node.js installed so the prototypes you build have somewhere to run.

Next Lesson →Install Node.js
← Back to Claude Code Course for Designers overview

On this page

  • Option A: Sign in with your Claude subscription (simplest)
  • Option B: Use an API key (usage-based billing)

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.