Master Claude Code: From Quick Setup to Advanced AI‑Powered Development

What Is Claude Code?

Claude Code is an AI‑powered coding assistant from Anthropic that can generate code, understand an entire project, plan tasks, and invoke tools to complete complex development work.

1. Basic Operations: Environment Setup and Core Modes

Quick environment setup : Visit the Claude Code website, copy the installation command, and run it in a terminal. Create a directory (e.g., zsxx-ai) and start the tool with the claude command.

Login options include a subscription (Claude Pro/Max), an API token (pay‑as‑you‑go), or environment variables for alternative models such as GLM or Minimax.

Three core modes can be switched on demand:

Default mode : Requires user confirmation for file operations, providing maximum safety.

Automatic mode : Executes file operations without confirmation.

Plan mode : Only discusses a solution without performing actions, useful for complex design brainstorming. Switch modes with Shift+Tab.

2. Complex Task Handling: Project Refactoring and Workflow Management

Project refactor example : Using Claude Code, a simple HTML todo app is first built. Then a refactor request is issued to rebuild the app with Vue 3, Vite, Pinia, Element Plus, Vue Router, Axios, and TypeScript while preserving existing features and UI style.

Switch to Plan mode ( Shift+Tab) to describe the new architecture, use Ctrl+g to open the editor if needed, and confirm with Enter. Claude Code generates a refactor plan that can be executed in Automatic or Default mode, or additional requirements can be appended.

Execution options presented by Claude Code:

Yes – clear context and automatically accept changes (shortcut Shift+Tab).

Yes – automatically accept changes.

Yes – manually confirm each change.

Provide custom adjustments in the dialog.

Terminal and background task management : In Automatic mode, commands like npm install still require confirmation; the risky dangerously skip permissions flag can bypass this. To run services (e.g., npm run dev) without blocking the tool, press Ctrl+b to send the task to the background, view active tasks with /tasks, and close a task with k.

3. MCP Usage and Context Management Techniques

Image‑driven development : Export a Figma design as PNG, then drag or paste it (Ctrl+V) into Claude Code to automatically adjust the code to match the design.

For higher fidelity, install the Figma MCP Server and use the /mcp command to retrieve spacing, fonts, and other details. Example command:

claude mcp add --transport http figma https://mcp.figma.com/mcp

After installation, resume a previous session with /resume or start a new one directly using claude -c. The /mcp command may require authorization before the server becomes active.

Flexible context management and rollback : /compact compresses the conversation context, optionally preserving core requirements, reducing token usage. /clear wipes the entire context, useful for unrelated new tasks. /rewind (or double‑press Esc) opens a rollback interface supporting three modes: code + dialog, code‑only, or dialog‑only. Note that only files created by the tool can be rolled back automatically; terminal‑generated files require manual deletion or Git rollback. /init generates a Claude.md configuration file (supports Chinese) containing project metadata and preferences, automatically loaded on startup. /memory provides quick editing of this configuration.

4. Advanced Features: Hooks, Agent Skills, Sub‑Agents, and Plugins

Hook : Use /hooks to define custom actions that run before or after a tool execution (e.g., code formatting with prettier or JSON processing with jq). Choose the execution timing, associate the hook with specific tools, and set the scope (project‑level, user‑level, etc.).

Agent Skill : Create a skill.md file to describe a fixed task format, then view configured skills with /skills. Invoke a skill directly with /[skill name] or automatically when the corresponding requirement is detected.

Sub‑Agent : Launch an independent agent using /agent. The sub‑agent has its own context, tools, and skills, returns only the final result, and does not pollute the main conversation. This is ideal for isolated tasks such as automated code reviews.

Plugin : Package skills, sub‑agents, and hooks into a “plugin bundle” via /plugin. The plugin manager lets you install UI‑design extensions, language‑specific LSPs, and other capabilities. Installed plugins automatically provide the associated functionality and can be shared as custom configurations.

Claude Code’s plugin ecosystem is growing, covering UI design, language support, and more, making the assistant a versatile addition to modern development workflows.