2.1 Choosing Your Entry Point

Choosing Your Entry Point

Claude Code runs on three primary surfaces, and the right one depends on how comfortable you are with developer tools.

All three surfaces connect to the same Claude Code engine. Your CLAUDE.md files, settings, and connected tools work across all of them. You are not locked into one choice. But your first experience matters, and I want you to start where the friction is lowest.

Here is how the three options compare for designers:

The Desktop app has a visual interface you navigate with clicks and menus, the same way you use Figma or any other design tool. It shows you a side-by-side comparison before any file is changed. It has a built-in file browser, a preview pane where you can see your running design, and a layout you can rearrange by dragging panes around.

VS Code is a strong second choice if you already use it for editing CSS or inspecting code. The extension integrates directly into the editor, so you can highlight code and ask Claude about it.

The terminal is the most powerful surface, but it is also the most intimidating for designers who have never used one. It is there when you want it, and later chapters cover it for specific tasks. For now, it is not your starting point.

2.2 Installation Walkthrough

Installation Walkthrough

Step-by-step installation for the Desktop app, with fallback instructions for VS Code and the terminal.

I am going to walk you through the Desktop app installation first because it is the most straightforward path for designers. After that, I will cover VS Code and the terminal as alternatives.

Path A: Desktop App (Recommended)

The Desktop app is a standalone application you download and install, the same way you installed Figma or Sketch. No terminal, no package managers, no prerequisites beyond a paid Anthropic account.

You are now looking at the Claude Code workspace. The prompt box at the bottom is where you type your instructions. Before we use it, let me cover the alternative paths.

Path B: VS Code Extension

If you already use VS Code for any part of your workflow — editing CSS, inspecting code snippets, working with developers — the extension is a natural fit. It puts Claude Code directly inside your editor.

If the extension does not appear after installation, restart VS Code or run Developer: Reload Window from the Command Palette.

Path C: Terminal CLI

The terminal is the fastest path once you are comfortable with it. For now, I am including it for completeness. You can skip it and come back later.

macOS and Linux:

curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell:

irm https://claude.ai/install.ps1 | iex

Verify the installation:

claude --version

This prints the installed version number. If you see a version number, Claude Code is installed. If you see command not found, the install directory is not in your PATH. Run this fix:

echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc
claude --version

For a thorough check, run the diagnostic command:

claude doctor

Regardless of which surface you chose, the next steps work the same way. You type what you want, Claude responds, and you decide whether to accept the changes.

2.3 Your First Conversation with Claude

Your First Conversation with Claude

Using Claude Code is a conversation, not a command line. You describe what you want, and Claude responds with a plan and actions.

Think of it like giving a brief to a junior developer. You would not hand them a single word and expect great results. You would describe the intent, the constraints, and the outcome you want. The same principle applies here.

Let me walk you through your first interaction. Open Claude Code in whichever surface you installed.

Desktop App: Your First Prompt

What can you help me with? I'm a designer, not a developer.

That was your first interaction. You asked a question, and Claude answered. Nothing was changed on your machine. No files were touched. This was a read-only conversation.

Now let me show you what happens when you ask Claude to do something:

Create an index.html file with a centered heading that says "Hello, Design!"

When you send this prompt, several things happen in sequence:

VS Code: Your First Prompt

If you are using the VS Code extension, the flow is the same:

Create an index.html file with a centered heading that says "Hello, Design!"

Terminal: Your First Prompt

For terminal users, the flow looks like this:

cd ~/Desktop/my-design-project
claude

> What can you help me with? I'm a designer, not a developer.

Claude responds with an explanation. Then try:

> Create an index.html file with a centered heading that says "Hello, Design!"

Claude shows the proposed change and asks for confirmation. Press y to accept or n to reject.

Congratulations. You have completed your first Claude Code interaction. You described what you wanted, reviewed what Claude proposed, and decided whether to apply it. That is the fundamental loop — describe, review, accept or reject, iterate. Every session follows this pattern.

2.4 Understanding What You Are Looking At

Understanding What You Are Looking At

The Claude Code interface has several elements, and each one carries specific information about your conversation and your project.

If you are used to Figma, you are accustomed to a canvas with layers, properties, and tool panels. Claude Code has its own layout, and once you understand what each element shows, the interface feels familiar rather than overwhelming.

Desktop App Interface

The Desktop app is organized into draggable panes you can rearrange. Think of it like arranging panels in Figma — you drag the panes where you want them.

The main panes are:

Prompt Box Controls

The prompt box at the bottom of the Code tab has several controls:

[Environment: Local] — Choose Local (your machine), Remote (cloud), or SSH
[Folder: my-design-project] — Choose which project folder Claude works in
[Model: Sonnet] — Pick which model responds (Opus, Sonnet, Haiku)
[Mode: Ask permissions] — Controls how much autonomy Claude has
[+] — Attach files, add connectors, access skills
[Send] — Submit your prompt

Permission Modes

Permission modes are the safety net. They control how much Claude can do without asking you first. Think of permission modes like approval settings in a design review tool — you control how much autonomy your collaborator has.

Start with Ask permissions. You will see every proposed change before it touches your files. Switch to other modes when you feel confident about the output quality.

VS Code Extension Interface

The VS Code extension presents the same information in a panel layout:

Spark icon (editor toolbar or Activity Bar) — Opens the Claude panel
Prompt box (bottom of panel) — Type instructions here
Permission mode indicator — Click to switch modes
@-mention support — Type @filename to include a file as context
Session history button (top of panel) — Browse past conversations

One feature unique to VS Code: @-mentions. When you type @ followed by a file name in the prompt box, Claude includes that file's contents as context. This is like saying "look at this file" before giving your instruction.

@styles.css The heading font looks too small. Increase it to 24px.

The extension also supports selection awareness. If you highlight specific lines of code in the editor, Claude can see what you selected and responds with that context in mind.

Keyboard Shortcuts Worth Knowing

You do not need to memorize these, but they speed things up once you are comfortable:

Desktop app (Mac):

Cmd+N          New session
Cmd+W          Close session
Esc            Stop response
Cmd+Shift+D    Toggle diff pane
Cmd+Shift+P    Toggle preview pane
Cmd+/          Show all shortcuts

VS Code extension:

Cmd+Esc        Toggle focus between editor and Claude
Cmd+Shift+Esc  Open Claude in a new tab
Option+K       Insert @-mention for files
Cmd+N          New conversation

Replace Cmd with Ctrl on Windows and Linux.

2.5 Setting Up for Design Work

Setting Up for Design Work

Create a project folder that becomes your workspace for the prototype exercise in Chapter 3.

Every Claude Code session starts in a folder. That folder is your workspace — the place where Claude reads files, creates files, and makes changes. Think of it like a Figma project file: everything related to one piece of work lives in one place.

Creating Your Project Folder

Desktop app:

VS Code:

Terminal:

mkdir ~/Desktop/my-design-project
cd ~/Desktop/my-design-project
git init
claude

The git init command creates a Git repository in your folder. This gives you checkpoints — snapshots of your files that you can rewind to if Claude goes in a direction you do not like. Think of it like Figma's version history, but for your code files.

Adding a CLAUDE.md File

CLAUDE.md is a special file you place in your project folder. Claude reads it at the start of every session. Think of it like a brand style guide in Figma — a document that defines your colors, typography, spacing, and component rules. Except this one is read by Claude before every conversation, not by a human developer.

For now, let me show you how to create a basic one. In your Claude Code session, type:

Create a CLAUDE.md file with these instructions:
- Use semantic HTML for all markup
- Use CSS custom properties for colors and spacing
- Write clean, well-structured CSS with comments for sections
- When building UI, prioritize accessibility and responsive design

Claude creates the file and shows you the diff. Accept the change. Now, every time you start a new session in this folder, Claude reads those instructions and follows them.

Chapter 5 goes deep into CLAUDE.md for designers — design tokens, brand colors, typography scales, and component conventions. For now, this basic version gives you a foundation.

Your Project Structure

After creating the CLAUDE.md file, your project folder looks like this:

my-design-project/
  CLAUDE.md        <-- Instructions Claude reads every session
  .claude/         <-- Claude Code config (auto-created, ignore for now)
    settings.json

In the next chapter, you will add an index.html file and start building your first design prototype. This folder will grow as you build, but the structure stays simple.

Verifying Your Setup

Before moving on, confirm everything is working. In your Claude Code session, type:

Read the CLAUDE.md file and confirm you understand the instructions.

Claude should respond by reading the file and summarizing the instructions back to you. If it does, everything is connected and working. You have a workspace, Claude understands your preferences, and you are ready to build.

You installed Claude Code. You had your first conversation. You understand the interface. You have a project folder with a CLAUDE.md file. Everything from this point builds on what you did here.

In Chapter 3, you will use this workspace to build your first design prototype — a hero section for a product landing page, generated entirely from a description. You will go from an idea in your head to a working, viewable prototype in a single session.