Complete Beginner's Guide to Claude Code in 19 Minutes

Many people assume you need programming skills to use Claude Code, but the opposite is true. Claude Code's desktop app lets anyone build applications, websites, Chrome extensions, automation tools, and all kinds of projects using natural language. This article, based on a detailed tutorial by a Bilibili creator, systematically walks through the entire process from installation to deployment — even if you've never written a single line of code.

Environment Setup and Basic Configuration

Using Claude Code requires two prerequisites: a paid Claude account (the Pro plan works, though the Max plan offers more usage) and the Claude desktop app — note that this is not the web version.

The fundamental difference between the Claude Code desktop app and the regular web version is that it has read/write access to your local file system and the ability to execute terminal commands. The web version of Claude runs only within a browser sandbox and cannot directly manipulate files on your computer. The desktop app runs via a local agent, enabling it to create folders, write code files, start local servers, run test scripts, and more. This architecture elevates it from a conversational AI to a true development environment agent, capable of completing the entire development workflow end-to-end — from code generation to local preview.

Once installed, the desktop app displays three tabs: Chat (equivalent to the web version), Collaborate, and Code. All core project-building operations happen in the "Code" tab.

One important preparation step: Claude Code creates and edits files directly on your computer, so you need to designate a working folder. It's recommended to create a dedicated Claude Code folder, then set up subfolders for each new project to keep your project structure clean and organized.

Your First Build: From Prompt to Finished Product

Getting started is very intuitive. Type what you want in the prompt box, just like chatting with any AI. The tutorial example was: "Build me a game that teaches me how to type faster. Make it visual, gamified, fun, and effective."

Use Plan Mode to Improve Build Efficiency

Before sending your prompt, there's one crucial step: switch to Plan Mode. In this mode, Claude won't start building immediately. Instead, it outputs a complete plan for you to review and adjust. Refining the plan upfront is far more efficient than tearing things down halfway through.

Claude will also proactively ask clarifying questions — about visual style, feature preferences, and so on. After you answer these, it returns a detailed plan covering gameplay loops, architecture design, build order, and more. Once you approve the plan, Claude begins building automatically.

The Agent's Autonomous Testing and Bug-Fixing Capabilities

This is where Claude Code's power as an agentic model really shines: it doesn't just write code — it autonomously tests, identifies issues, and fixes them. While building the typing game, Claude automatically opens the game interface, clicks buttons, and types text to clear levels, ensuring everything runs correctly. When it discovers incorrect parameters, it self-corrects without any human intervention.

Agentic models represent a major evolutionary direction in AI. Traditional large language models operate in a "question-and-answer" fashion — the user inputs a prompt, and the model returns text. Agentic models, by contrast, possess autonomous planning, tool invocation, environment perception, and self-correction capabilities. In Claude Code, agentic behavior manifests as: autonomously deciding the next action (such as opening a browser to test), calling external tools (like terminal commands), observing execution results (such as analyzing screenshots of the interface), and adjusting behavior based on feedback. This "perceive-decide-act-feedback" loop is the core characteristic that distinguishes agents from ordinary chatbots. Companies like OpenAI and Google are also advancing similar agentic capabilities in their products.

Subsequent modifications are equally simple — just describe them in natural language. If a visual reference is more convenient, you can paste a screenshot directly into the chat. For example, when the tutorial creator noticed Claude had left its own test scores in the game, they simply screenshotted it and said "remove this" — done.

Project Memory: The Role of the CLAUDE.md File

Once your project takes initial shape, there's something you should do immediately: type the /init command to have Claude create a CLAUDE.md file.

This is a permanent reference document. Claude reads through all the code and chat history, then organizes the project's key information into a Markdown file saved directly in the project folder. It's not code — just a simple text file.

The value of this file becomes clear when chat history grows long and the context window approaches saturation. You can start a brand-new conversation pointing to the same folder, and Claude can quickly understand the full project by reading CLAUDE.md. The context window is one of the core limitations of large language models — it refers to the total amount of information the model can "remember" within a single conversation, measured in tokens. Even the most advanced models have context window limits (Claude currently supports approximately 200K tokens). As a complex project's conversation history accumulates and code files multiply, the context window will eventually saturate. At that point, the model is forced to discard earlier information, causing it to "forget" critical design decisions. The CLAUDE.md file is essentially an external memory mechanism — it persistently stores the project's architecture, tech stack, key conventions, and other information in the file system, allowing the model to quickly restore project awareness in new conversations, bypassing context window limitations.

It's recommended to proactively have Claude update this file with important information after long conversations.

Three Power-Up Features: Connectors, Skills, and Plugins

Claude Code's base functionality is already impressive, but these three enhancement features take it to the next level.

Connectors (MCP): Integrating External Tools

Connectors link Claude to external tools and are found under the "Customize" menu. Anthropic officially calls them connectors, while the technical community commonly refers to them as MCP (Model Context Protocol). Pre-built connectors already support Gmail, Google Calendar, Notion, and many other popular tools.

MCP (Model Context Protocol) is a standardized protocol open-sourced by Anthropic in late 2024, designed to establish a unified communication interface between AI models and external data sources/tools. Before MCP, every AI application that needed to connect to different external services (like Gmail, Notion, databases, etc.) required custom integration code, creating an M×N complexity problem. MCP simplifies this to M+N: tool providers implement the MCP server once, AI applications implement the MCP client once, and they can interoperate. It uses the JSON-RPC 2.0 protocol and supports three core capabilities: resource reading, tool invocation, and prompt templates. MCP has gained widespread community support, with thousands of open-source MCP server implementations on GitHub.

Strongly recommended: connect Context7 — it pulls the latest documentation for frameworks like React, Expo, Tailwind, and Vercel, ensuring Claude always works with up-to-date information and significantly reducing hallucination issues. AI hallucination refers to large language models generating content that appears plausible but is actually incorrect. This problem is especially pronounced in coding scenarios: model training data has a cutoff date, while frontend frameworks and library APIs update extremely frequently. For example, React 19 introduced new hook patterns, and Tailwind CSS v4 changed its configuration approach. If the model still generates code based on outdated documentation, it produces non-functional code. Context7 uses the MCP protocol to pull the latest official documentation for these frameworks in real time, injecting it into the model's context so that code generation references current API specifications rather than outdated training data, significantly reducing hallucinations caused by stale information.

Skills: Reusable Workflow Templates

Skills are reusable workflow templates. Beyond pre-built skills, you can package your own frequently repeated workflows into skills. For example, after completing a multi-iteration process, tell Claude to "package this as a skill," and you can reuse it with one click going forward.

The tutorial demonstrated a "Security Audit" skill — before publicly releasing a project, Claude automatically checks for vulnerabilities, exposed API keys, and other security risks.

Plugins: Capability Bundles

Plugins are bundled collections of skills, MCPs, and other tools. The Superpowers plugin is recommended — it adds capabilities like brainstorming, sub-agent debugging, and more, which Claude automatically invokes when needed.

In summary: MCP connects tools, Skills define workflows, Plugins bundle everything.

Hands-On: Building a Productivity App Connected to Real Tools

The tutorial showcased a more practical use case: building a kanban-style to-do app that automatically extracts action items from meeting notes.

The prompt was: "Build a kanban-style app that extracts action items from meeting notes and puts them into a to-do list. Cards should be movable between To Do, In Progress, and Done columns. Use the connected Granola MCP to pull meeting notes and extract action items."

Claude nailed it on the first try — it pulled recent meeting records, identified all action items with their assigned owners, and generated a drag-and-drop kanban interface. This case demonstrates that once you start integrating existing tools through connectors, what you can build grows exponentially.

Going Live: From Local to Public

Once your project is ready, how do you make it accessible to others? Three steps: install Git, connect to GitHub, and deploy via Vercel.

These three tools each serve a distinct role in the modern software development and deployment pipeline. Git is a distributed version control system created by Linus Torvalds (the creator of Linux) in 2005 — it tracks every change to your code locally and supports rollbacks, branching, and other operations. GitHub is a cloud-based code hosting platform built on Git (acquired by Microsoft for $7.5 billion in 2018) — it syncs local Git repositories to the cloud, enabling code backup, collaboration, and sharing. Vercel is a frontend deployment platform founded by Guillermo Rauch, the creator of the Next.js framework — it integrates deeply with GitHub, automatically monitoring repository changes and triggering build and deployment pipelines (CI/CD) with every code push, publishing static sites or serverless applications to global CDN nodes. Together, these three form a complete pipeline from local development to global publication.

Install Git and Connect GitHub

Simply tell Claude: "Check if I have Git installed, and if not, install it for me." Newer Macs come with Git pre-installed. The steps differ slightly for Windows users, but Claude will provide specific instructions based on your system.

Connecting your GitHub account is the most tedious part of the entire process — it requires running a few commands in the terminal and completing authentication. But the good news: you only need to do this once. For every new project afterward, just say "create a new GitHub repository and push all current code," and Claude handles everything.

One-Click Deployment with Vercel

With a GitHub repository in place, deploying to Vercel is straightforward:

1. Sign up for Vercel for free using your GitHub account
2. Import the corresponding GitHub repository
3. Click "Deploy"

Within seconds, your project gets a live URL that anyone can access via the link. Plus, Vercel automatically detects code changes in GitHub and redeploys — subsequent updates are fully automated.

Model Selection and Context Management Tips

Claude Code offers multiple models to choose from, each consuming different amounts of tokens. Tokens are the basic unit by which large language models process text — roughly every 4 English characters or 1-2 Chinese characters correspond to one token. Every model input and output consumes tokens, and consumption varies dramatically across models. Taking Anthropic's model family as an example: Claude Opus is the most powerful but also the most expensive, suited for complex reasoning and architecture design; Claude Sonnet strikes a balance between capability and cost; Claude Haiku is the lightest and fastest option. In Claude Code's subscription plans, the core difference between the Pro plan ($20/month) and the Max plan ($100 or $200/month) is the available token quota.

A practical rule of thumb:

• Pro plan users: Use the highest-tier model (like Opus or Sonnet) for planning and initial builds, then switch to a lower-tier model for subsequent edits
• Max plan users: Can typically use the highest-tier model throughout

Regarding context management: you can check context window usage at the bottom of the interface. When the context approaches saturation, Claude automatically compresses it, but details gradually get lost. It's recommended to have Claude create a summary before starting a new conversation, then paste that summary into the new chat. Combined with the CLAUDE.md file, this enables seamless continuation of previous work.

Final Thoughts

From zero to deployed, the core logic of the entire workflow is actually quite simple: describe your requirements in natural language → review the plan → approve the build → iterate and refine → push and deploy. You don't need to understand any code — just describe what you want as if you're explaining it to another person.

The best way to learn more is to start building. Pick something you'd actually use yourself, ask Claude for help when you hit problems, and you'll naturally pick up more techniques along the way.