Claude Code Ecosystem Learning Guide

Claude Code is an AI programming and intelligent agent product ecosystem from Anthropic, covering terminal, IDE, desktop, web, and browser. This guide is your navigation map into the Claude Code ecosystem, helping you master all core capabilities in the shortest path.

Product Landscape

The Claude Code ecosystem comprises 5 core products, each designed for different use cases:

Claude Code Ecosystem
├── Claude Code (Programming Agent) — Write code, debug, submit PRs
│   ├── Terminal CLI        — Command-line interaction, most flexible
│   ├── VS Code Extension     — Embedded in editor, inline diff
│   ├── JetBrains Extension    — IntelliJ/PyCharm/WebStorm integration
│   ├── Desktop App         — Visual diff, parallel sessions, PR monitoring
│   └── Web Version           — Runs in browser, no installation needed
├── Claude.ai Platform (Conversational Intelligence) — Analysis, writing, research
│   ├── Projects        — Persistent context + knowledge base
│   ├── Research        — Multi-turn deep web research
│   ├── Artifacts       — Interactive code/document/chart output
│   └── Extended Thinking — Deep reasoning
├── Claude Design (Design Prototype) — Codebase-driven brand prototypes
│   └── Conversational generation → Fine-tune iteration → Handoff to Claude Code
├── Cowork (Desktop Agent) — Handle local files, automate repetitive work
│   └── Read/write files, generate docs, scheduled tasks
└── Connectors (Connections) — Connect external services
    └── Gmail, Notion, GitHub, Slack, and 50+ other services

Quick Decision: Which Should I Use?

What do I want to do?
├── Write code / Debug / Refactor / Submit PRs
│   └── → Claude Code
│       ├── In terminal? → CLI (claude command)
│       ├── In IDE? → VS Code / JetBrains extension
│       ├── Want visual diff? → Desktop App
│       ├── No environment set up? → Use claude.ai/code in browser
│       └── Away from computer? → Remote control / Dispatch
├── Write / Analyze / Research / Learn
│   └── → claude.ai (web or mobile)
│       ├── Need persistent context? → Create Project
│       ├── Need deep reasoning? → Enable Extended Thinking
│       ├── Need to research online? → Enable Research
│       └── Need to generate professional docs? → File creation (Excel/Word/PPT)
├── Design prototype / Landing page / Dashboard
│   └── → Claude Design
│       ├── Have brand guidelines? → Configure Design System first
│       ├── Want to replicate existing page? → Use Web Capture
│       └── After design → Handoff to Claude Code for implementation
├── Connect external services (Gmail / Notion / GitHub / Slack)
│   └── → Connectors
│       ├── One-time query? → Enable connector in claude.ai
│       ├── Ongoing use? → Bind to Project
│       └── Scheduled automation? → Combine with cloud scheduled tasks
└── Handle local files / Automate repetitive work
    └── → Claude Desktop / Cowork
        ├── One-time file read/write → Cowork tab
        ├── Scheduled tasks (need local files) → Desktop scheduled tasks
        ├── Scheduled tasks (don't need local files) → Cloud scheduled tasks
        └── Control apps/browser → Computer Use

Core Concepts at a Glance

Before diving into each product, understand these core concepts that span the entire ecosystem. See Glossary for details.

Concept	One-Line Explanation	Where It Appears
MCP (Model Context Protocol)	Open protocol for connecting external tools; Connectors and plugins are built on it	Global
Skills	Reusable specialized workflows; Claude auto-detects context and loads them	Claude Code / Claude.ai / Cowork
Hooks	Scripts that auto-trigger before/after tool calls	Claude Code
Plugins	Extension packages bundling Skills + Agents + Hooks + MCP	Claude Code / Cowork
Sub-agents	AI assistants with independent personas and permissions; can process tasks in parallel	Claude Code

Learning Path

Stage 1: Get to Know the Claude.ai Platform

Start with the web interface you'll use daily, establishing a productivity baseline.

Goal: Use Projects to manage context, use Research for deep investigation, understand Artifacts output.

Step	Content	Link
1	Claude.ai platform feature overview	Claude.ai Platform Guide
2	Create dedicated workspace with Projects	→ Projects chapter
3	Enable Extended Thinking for complex problems	→ Extended Thinking chapter
4	Use Research for multi-turn web investigation	→ Research chapter
5	Understand Artifacts and file creation	→ Artifacts chapter

Stage 2: Get Started with Claude Code

The core tool for frontend engineers, letting AI truly participate in your development workflow.

Goal: Run Claude Code in a project, understand the role of CLAUDE.md, MCP, and Hooks.

Step	Content	Link
1	What Claude Code is and its interfaces	Claude Code Product Overview
2	Installation + First run	→ Quick Start
3	Understand keyboard shortcuts and permission modes	→ Interaction Basics
4	Manage project context with CLAUDE.md	→ Project Context Management
5	Connect MCP for external tools	→ MCP Integration
6	Daily development workflows	→ Practical Workflow cookbook
7	Configure permissions, Hooks, plugins (quick reference)	→ Cheatsheet
8	Look up terms you forget in the glossary	→ Glossary

Stage 3: Connect External Services with Connectors

Connect Claude to tools you actually use, letting it read real data and execute real operations—this comes right after Claude Code because it builds on the MCP concepts you just learned.

Goal: Connect Google Workspace / Notion / GitHub, combine with scheduled tasks for cross-service automation.

Step	Content	Link
1	Understand the Connectors-MCP relationship	Connectors
2	Connect Google Workspace	→ Google Workspace
3	Connect project management tools	→ Key Connectors in Detail
4	Combine with Projects for long-term use	→ Combining Connectors with Projects
5	Enable scheduled task automation	→ Connectors + Scheduled Tasks

Stage 4: Prototype with Claude Design

Integrate AI-designed interfaces into your codebase, generating on-brand prototypes that hand off directly to Claude Code.

Goal: Configure design system, use web capture to rebuild existing pages, seamlessly transition to Claude Code via handoff bundle.

Step	Content	Link
1	Understand Claude Design positioning and core concepts	Claude Design User Manual
2	Configure design system (link codebase)	→ Quick Start
3	Master four site-building workflows	→ Site-Building Workflows
4	Learn handoff bundle to transition to Claude Code	→ Handoff Integration
5	Understand export targets and Canva integration	→ Export Options

Stage 5: Automate with Cowork

Turn Claude into your personal desktop agent for handling file organization, recurring reports, and other repetitive work.

Goal: Create scheduled tasks, install plugins, understand Cowork security boundaries.

Step	Content	Link
1	Understand what Cowork is	Cowork Complete Guide
2	Authorize folders and execute first task	→ Quick Start
3	Create recurring automation tasks	→ Scheduled Tasks
4	Install plugins to extend capabilities	→ Plugin System
5	Understand security boundaries	→ Safe Usage

Stage 6: Plugin Development

Develop reusable Claude Code plugins for your team or the community.

Goal: Understand plugin structure, develop and publish a complete plugin package.

Step	Content	Link
1	Understand plugin core concepts	Plugin Development Manual
2	Master directory structure and plugin.json	→ Directory Structure
3	Develop five core components	→ The Big 5 Core Components
4	Local debugging and validation	→ Local Debugging
5	Publish to npm / Marketplace	→ Publishing Guide

Feature Quick Reference

Claude.ai Platform Features

Feature	Purpose	Doc Link
Projects	Persistent context + RAG knowledge base	Claude.ai
Extended Thinking	Complex reasoning, math, planning	Claude.ai
Research	Multi-turn deep web research	Claude.ai
Artifacts	Standalone code/document/chart output	Claude.ai
Interactive Charts	Actionable data visualization	Claude.ai
Web Search	Real-time information retrieval	Claude.ai
Voice Mode	Hands-free two-way voice conversation	Claude.ai
File Creation	Generate Excel/Word/PPT/PDF directly	Claude.ai
Memory	Save preferences across conversations	Claude.ai
Skills	Load specialized workflows	Claude.ai
Private Chat	Conversations not used for training	Claude.ai

Claude Code Core Features

Feature	Purpose	Doc Link
Terminal CLI	Direct interaction in project directory	Claude Code
VS Code / JetBrains	Embedded editor integration	Claude Code
Desktop App	Visual diff, parallel sessions, PR monitoring	Claude Code
Web Version	Runs in browser, no installation	Claude Code
CLAUDE.md / Memory	Project-level persistent context + auto memory	Claude Code
MCP Integration	Connect databases, APIs, tools	Claude Code
Hooks	Auto-trigger (lint, format, custom scripts)	Claude Code
Skills	Load specialized workflows	Claude Code
Sub-agents	Multi-agent parallel processing	Claude Code
Dynamic Workflows	Scripted orchestration of large-scale agent workflows	Claude Code
Cross-Session Messaging	Cross-session message collaboration	Claude Code
Agent Teams	Multi-session team collaboration	Claude Code
Channels	External message sources (Telegram/Discord/iMessage)	Claude Code
Worktree	Git worktree parallel isolation	Claude Code
Scheduled Tasks	Cloud/desktop scheduled tasks	Claude Code
Remote Control	Mobile/browser remote control of local session	Claude Code
Computer Use	Control desktop GUI applications	Claude Code
Headless Mode	CI/CD script automation	Claude Code
Diagnostic Tools	Built-in diagnostic commands like /doctor, /context, /hooks	Claude Code
Verification Mode	Writer→Reviewer, Tests→Iterate→Pass self-verification modes	Claude Code
Practical Workflows	Prompt patterns and best practices for 9 daily scenarios	Practical Workflow cookbook
Config Quick Reference	Settings Scope five-layer priority, permissions/Hook/plugin config	Cheatsheet
Plugin System	Extend commands and skills	Plugin
/powerup	Built-in interactive feature tutorial	Claude Code

Claude Design Core Features

Feature	Purpose	Doc Link
Design System Import	Extract brand guidelines from GitHub repo	Claude Design
Web Capture	Capture real-time elements from any URL	Claude Design
Adjustment Knobs	Dynamic sliders for spacing/color/border-radius	Claude Design
Handoff Bundle	Design files + conversation handoff to Claude Code	Claude Design
Export as Standalone HTML	Static hosting deployment	Claude Design
Send to Canva	Fully editable Canva design	Claude Design

Connectors Core Features

Feature	Purpose	Doc Link
Google Workspace	Gmail / Calendar / Drive	Connectors
Microsoft 365	Outlook / Teams / SharePoint (read-only)	Connectors
GitHub	PR / Issue / code search	Connectors
Slack	Message search / send	Connectors
Notion / Linear / Asana	Task and page management	Connectors
Custom Remote MCP	Connect internal or self-built tools	Connectors

Cowork Core Features

Feature	Purpose	Doc Link
Local File Read/Write	Direct computer file operations	Cowork
Generate Professional Docs	Excel / PPT / Word	Cowork
Scheduled Tasks	Daily reports, auto organization	Cowork
Plugin System	Install/customize skills and connectors	Cowork
Computer Use	Control browser and applications	Cowork
Cross-App Collaboration	Dispatch tasks from anywhere	Cowork

Model Reference

Claude Code and the Claude.ai platform support the following models (as of August 2026):

Model	Positioning	Best For
Claude Opus 5	Latest flagship	Most complex tasks, deep reasoning, enterprise-grade agents
Claude Fable 5	Cutting-edge (limited)	Creative writing, complex reasoning (Pro/Max/Team/Enterprise)
Claude Opus 4.8	High performance	Programming, agent tasks, complex code engineering
Claude Sonnet 4.6	Balanced (default)	Daily development, writing, most tasks
Claude Haiku 4.5	Fast lightweight	Simple Q&A, batch processing, low-cost scenarios

Note: Claude Code supports the --model parameter to switch models. Claude Design uses a separate Opus-level vision model with quota independent of Claude.ai conversation limits.

Resources

• Claude Code Cheatsheet · High-Quality Information Sources — Complete verified list of official docs/Cookbook, core team accounts & blogs, high-quality GitHub repos, Awesome Lists, and third-party blogs; also the basis for this tutorial's continuous updates
• Claude Code Official Documentation
• Claude.ai Help Center
• Claude Pricing
• MCP Registry
• Connectors Full Collection
• Claude Design Product Entry