Welcome to the Claude Code Tutorial
This is a tutorial written for complete beginners. Even if you've never typed a single line of code, and the word "terminal" makes you nervous, that's perfectly fine — we'll start from the very, very basics and bring you up to speed step by step, using everyday analogies along the way.
Start from Chapter 0 →What Will This Tutorial Teach You?
Claude Code is an AI engineer that "lives inside your computer and does the work itself." It doesn't just reply with text — it can actually read your files, change your code, and run commands on your computer. This tutorial starts from scratch and teaches you how to work alongside it.
Below is the full chapter map, and every chapter is already written and ready to read. You can follow along with the sidebar on the left, or just click an entry in the contents below and read straight through, from Chapter 0 all the way to the appendices at the end.
Common Commands and Recommended Scenarios
Claude Code is useful for turning a need into a specification, making design decisions, delegating implementation, and reviewing work before delivery. Official capabilities include /plan, /agents, explicitly invoking an available agent with @"name (agent)", bundled skills, and /code-review. The names @"uiux (agent)", @"frontend (agent)", and /component-audit below are examples of a personal workflow; create them in your own ~/.claude or project configuration before using them.
| Scenario | Suggested command | How to use it |
|---|---|---|
| Turn a request into a specification | @"uiux (agent)" ultrathink | Personal workflow. Ask the UI/UX agent to clarify needs, constraints, layout, states, and acceptance criteria; it should not edit files. |
| Build an interface from that specification | @"frontend (agent)" ultrathink | Personal workflow. Pass the specification to the frontend agent, require the existing design system, and ask it to test its work. |
| Audit component structure | /component-audit | Personal workflow. Check component boundaries, duplicated logic, naming, state flow, and consistency of CSS and design tokens. |
| Explore or review a large task | /agents or an explicit @agent | Delegate research, test output, log analysis, or review; keep the main conversation focused on the summary. |
| Finish and verify | /diff, /code-review, /verify | Review the diff, then run review and verification appropriate to the change. |
Check before using: the example below only works after those personal agents and the skill have been configured with these exact names. Do not paste it as a first-time setup step.
# Personal workflow: specification → implementation → audit → finish
@"uiux (agent)" ultrathink. Confirm the requirements, user flow, layout hierarchy, component states, and acceptance criteria. Output a detailed specification only.
@"frontend (agent)" ultrathink. Implement the UI/UX specification using the existing design system; avoid unrelated refactors and test the result.
/component-audit
/code-review
/verifyOfficial @agent, subagents, skills, /code-review, and /verify are documented Claude Code capabilities. Personalized @"uiux (agent)", @"frontend (agent)", and /component-audit are names from your own custom workflow, not built-in commands.
Quick reminder
There's no need to rush through it all in one sitting. We suggest going in order and following along on your own computer as you read — that's the fastest way to learn. The A−／A＋ buttons in the top-right corner let you adjust the text size, and once you've set it, it'll be remembered when you turn to other chapters.