Video Summary - Claude Code Tutorial: From Prompt to Production

Overview

This video is a hands-on tutorial showing how to use Claude Code to take a small art-print shop (“Canvas and Co”) from prompt → built website → deployed site, while learning core Claude Code workflow concepts.

What the tutorial builds

A static website for a demo company (“Canvas and Co”) using a project starter folder.
It:
- Drafts a homepage plan
- Implements the homepage
- Adds an improved “Why” section
- Deploys the site to GitHub Pages

Claude Chat vs Claude Code (why Claude Code exists)

Claude Chat (chat-box workflow)

If you generate artifacts/files, you typically need to:
- download and import them elsewhere, or
- copy/paste them
Less ideal when working with many local files.

Claude Code (local codebase workflow)

Designed to work directly with a local codebase:
- It reads across a project/codebase
- Can edit files
- Can run tasks in the development environment

Framing: interface/audience focus

The difference is described as more about interface/audience focus than raw capability.
Claude Code traditionally sounded more terminal-heavy, but now includes a desktop app interface with a terminal area.

Setup required (and troubleshooting)

Requirements

Requires the Claude Desktop app
The tutorial assumes use with a Pro plan

Common first-launch error: “Git is required for a local session”

Explanation:
- Git is version control
- It tracks file changes over time
- It enables you to revert if Claude makes unwanted changes

Fix

Install Git (Windows download shown)
You may need to restart

Key concept: Permission modes (controls Claude’s ability to act)

Claude Code uses permission modes to regulate how much it can modify/execute on your machine:

Plan mode Safe: Claude does not take actions, only explores and creates a plan.
Ask permission Asks before performing actions.
Bypass Full control without safety checks/permission prompts.
Auto mode Acts like bypass but includes safety evaluation; it will ask if an action seems too dangerous.
Accept edit Allows some editing but still prompts frequently.

Workflow advice

For anything complex:
- Start in Plan mode
- Move to Auto (or other modes) to implement once the plan looks right

Context window management (LLM memory/limits)

The tutorial explains context window as the maximum amount of information Claude can hold/process (conversation + files/tools/etc.). If you exceed it, output quality degrades.

Commands introduced

/context: check current context usage
/compact: summarize prior conversation to free context while keeping rough continuity
/cle (clear): wipe conversation context to reset to near zero

Project structure: Markdown + cloud metadata

Markdown / “Claude MD”

Markdown is described as lightweight plain text for instructions.
A cloud.md (“cloud MD / cloud MD” in subtitles) is used to:
- Describe what the repository is about
- Document conventions and how to navigate the project
- Help Claude understand the codebase faster on future runs

`.docode` / “cloud” folder for configurations

There is a project configuration folder (subtitled as something like “doc.cloud / cloud”).
Used to store project rules, skills, and conventions so Claude follows consistent instructions.

`slashinit` and maintaining conventions

`/slashinit`

Claude analyzes the whole repo and creates an overall summary/navigation aid:
- including cloud.md
- plus structure understanding
Goal: avoid re-scanning everything each time by relying on cloud.md

Styling conventions via a design markdown

The tutorial adds a design markdown file (called “design.md / design MD”).
It stores branding/styling rules so later edits match “Canvas and Co”.
It’s placed under a rules location inside the project configuration folder.
Claude is then asked to re-style the homepage to apply the conventions successfully.
Emphasis: when building features, Claude should consult the configuration/rules in that folder.

MCP (Model Context Protocol), connectors, and permissions

What MCP is

MCP = Model Context Protocol, a standard for connecting Claude to external tools/services (connectors).
Examples mentioned: Google Drive, Slack, Notion (similar idea to connectors).

How tool access is controlled

You must set up/confirm connectors:
- If not connected, you authenticate
- You can set connector permissions (e.g., “list recent files” but require permission for more actions)

Skills (reusable step-by-step instructions)

What skills are

Skills are repeatable instructions packaged as a command.
Useful for formatting tasks with the same structure every time.

Skills created in the tutorial

Customer favorites skill
- Prompt reads latest sales/testimonials (from Google Drive)
- Extracts top products and customer feedback
Competitive research skill
- Gathers competitor info to support the website’s differentiation

How skills are used

After creation, you can run them as commands (subtitle shows something like slashc ..., i.e., a command prefix for executing the skill).
Skills reduce the need to re-copy long prompts and help keep project-specific context.

MCP + Skills together

The video frames their synergy as:

MCP enables Claude to access external data/tools
Skills provide consistent workflow/prompting
Skills can incorporate MCP-based actions to reliably perform tasks

Sub-agents (background research without blocking work)

What sub-agents are

Separate agents that run in their own context window,
perform a task, then return results.

Why use them

Don’t “pollute” the main context with one-off research
Don’t stall the current build

Sub-agent creation recipe (described)

A good sub-agent needs:

A clear task description
Which MCP connectors/tools it can use
Which skills it should apply when engaging with those tools

Demo behavior

While Claude is building, the tutorial spawns a sub-agent for competitive research in the background.
The user continues other tasks concurrently (e.g., “customer favorites” skill execution).
The result is written into a markdown file like competitive research.md.

Final content generation: building the “Why” section

Uses outputs from:
- customer favorites.md
- competitive research.md
Claude is prompted to write a “Why” section based on competitor positioning and customer testimonials.
Execution shown as:
- Plan mode → review plan → Auto mode to implement

Deployment: GitHub + GitHub Pages

Why GitHub is needed

Work is done locally first.
Publishing requires centralizing the code using a central repo.
Uses Git to push changes.

GitHub CLI setup

Installs GitHub CLI
Logs in via gh auth login (web browser flow)

Publishing process

Claude is prompted to:

Push code to GitHub
Use GitHub Pages to generate a live site link
Avoid pushing private sales/testimony data

Result

A live website appears via GitHub Pages
Some sections are noted as needing later styling tweaks

Routines (scheduled automation that runs without your computer)

What routines are

Compared to local “schedulers”:
- Routines run on Anthropic servers, not on your laptop
- So tasks still run even if your computer is off
Use triggers (e.g., weekly), then execute using code in your GitHub repository

Why GitHub centralization matters for routines

Anthropic still needs reachable code/skills/data definitions when your computer is offline.
Routines download/use the deployed repo to execute skills like:
- Fetch Google Drive info
- Perform competitor/customer research
- Generate reports (e.g., create/update Google Docs with a new research report)

Demo outcome

A routine connects to Google Drive and produces a weekly report:
- Finds competitors
- Summarizes customer favorites/testimonials
- Combines insights into a report to support website differentiation

Main speakers/sources

The tutorial appears to be led by a single instructor using the Claude Code interface (no distinct named secondary speakers).
Primary “sources” in the workflow:
- Claude Code / Claude (Anthropic)
- External systems:
  - Git / GitHub / GitHub Pages
  - Google Drive (via MCP connectors)
- Potentially Claude Code components:
  - MCP, skills, sub agents, routines

Claude Code Tutorial: From Prompt to Production

Key takeaways