# Claude on WholeTech — A complete guide to Anthropic's tools > A complete, plain-language guide to Claude and the wider Anthropic toolkit: products, design workflow, integrations, and machine builds. Maintained by the WholeTech network. ## Claude on WholeTech — A complete guide to Anthropic's tools URL: https://claude.wholetech.com/ Claude on WholeTech — A complete guide to Anthropic's tools A complete guide, plain-language Hello, Claude . A complete, in-plain-language guide to Anthropic's tools — what they are, when to use them, and the exact steps to get going. Maintained by the WholeTech network. If you can copy a sentence from a webpage and paste it into a terminal, you have everything you need to follow this guide. Last updated: May 2026 Reading time: 25 min · Hands-on: 2 hours Audience: beginners → builders 01 — Quick Start Pick where you want to begin There are four doorways into Claude. The web app needs zero setup. Claude Code is a terminal tool that can read, write, and run code on your computer — install paths are slightly different on Windows, Mac, and Linux/Unix, so pick yours below. Most people start with the web app, then graduate to Claude Code within a week. W 1. Web App claude.ai · 0 min setup Just sign up and start chatting. No install, no terminal. Use this for everyday questions, research, writing, image analysis, and quick prototypes via Artifacts. Open claude.ai → ⊞ 2. Claude Code on Windows newby/ · ~15 min Install the terminal app step-by-step on Windows. Once installed, Claude can read your files, edit documents, organize folders, and run code — anything you can do in a shell. Open the Windows guide → ⌘ 3. Claude Code on Mac newby-mac/ · ~10 min Same idea, shorter path on macOS — no Git Bash needed, the built-in Terminal handles everything. Five steps from a fresh Mac to your first prompt. Open the Mac guide → >_ 4. Claude Code on Linux and Unix newby-linux/ · ~5 min For Ubuntu, Debian, Fedora, Arch, WSL, BSD, and friends. Install Node, run one npm command, you're in. Tailored notes for the major package managers. Open the Linux/Unix guide → Not sure which to pick? If you've never used a terminal, start at claude.ai . Once you find yourself wanting Claude to do things on your computer (not just answer questions), come back and install Claude Code. 02 — The Map What's in this guide Four main sections, each one a self-contained walk-through. The Quick Start above gets you running. The pages below answer "now what?" — a tour of every Anthropic surface, how to use Claude as a design partner, and how to wire it up to the rest of your toolkit. /products Products & Surfaces → The full Anthropic toolkit, top to bottom — Claude.ai, Claude Code, the API, the Agent SDK, MCP, Skills, Artifacts, Files, Memory, Computer Use, Tool Use, Batch, Citations, Managed Agents, models, and what's on the horizon. One page, every door clearly labeled. Claude.ai Claude Code API Agent SDK MCP + 12 more /design Claude for Design → How to use Claude as a design partner — Artifacts as a sketchbook, the frontend-design plugin, image-in to component-out, design system generation, and iteration patterns. Includes recipes for hero sections, landing pages, and full themes. Artifacts frontend-design image input recipes /integrations Integrations → Wire Claude into Google Stitch, Figma, Vercel v0, Cursor, GitHub Actions, n8n, and the MCP servers (Drive, Gmail, Calendar, Slack, YouTube). Includes chaining recipes so each tool does what it's best at. Google Stitch Figma v0 MCP servers /computers Workstations → The WholeTech network's machine inventory and naming convention — the Mac minis, Beelinks, Windows boxes, and the wall-mounted MeLE PCG35 + TCL 98 build that runs Claude full-time. 23 machines naming PCG35 build 03 — At a Glance Every Anthropic surface , on one screen Each chip points to a section on the products page . Solid borders are shipping today. Dashed borders are forward-looking — features that are early-access, recently announced, or on the rumored roadmap. Claude.ai web · mobile Claude Code CLI · IDE · web Claude Cowork agentic desktop Claude Design prototypes · slides API SDKs · streaming Agent SDK build agents MCP tool protocol Skills slash commands Artifacts live previews Projects workspaces Files API upload · cite Memory persistent Tool Use function calling Computer Use screen control Batch API 50% cheaper Citations grounded Prompt Caching 90% off Extended Thinking deep reason Managed Agents cloud · preview Mythos forward-looking 04 — How to read this Three ways to use this site A Front to back Read it like a manual. Quick Start → Products → Design → Integrations. About 25 minutes of reading and you'll know what every Anthropic surface does and which one fits your job. B Pick a doorway If you already know what you want — say, "build a landing page with Claude" or "wire Claude into my Google Drive" — jump straight to /design or /integrations . Each section is self-contained. C Bookmark it Treat the /products page as a reference card. Whenever you hit a feature in conversation ("can Claude use my screen?"), come back, find the section, and follow the steps. --- ## Agent SDK — Claude on WholeTech URL: https://claude.wholetech.com/agent-sdk/ Agent SDK — Claude on WholeTech home / products / agent-sdk Build agents Agent SDK shipping Anthropic's higher-level harness for building agents — programs that loop, use tools, and pursue a goal until done. 01 — In one sentence The harness Claude Code is built on . If you've used Claude Code and wondered "how is it doing all this looping," the answer is: the Agent SDK. You can build your own version on the same infrastructure — a goal, some tools, a budget, and Claude runs until done. What you get An agent loop that runs until it decides it's finished (or hits a step budget). Built-in tools — file read/write, bash, web fetch, glob, grep — opt in or out. Sub-agents, so a planner can spawn workers. Persistent memory and conversation state. Context-window management — the SDK summarizes earlier turns when the window fills. 02 — When to use the SDK vs plain API Different jobs. Reach for the plain API Single-shot calls. Structured I/O. Classification. Extraction. You control the prompt; you parse the answer. Reach for the Agent SDK Multi-step work where Claude needs to read files, run code, make decisions, iterate. You hand it a goal; it figures out the steps. 03 — First agent From zero to a running loop. Install: pip install claude-agent-sdk or npm install @anthropic-ai/claude-agent-sdk . Write a goal as a plain-English instruction: "Read every .md file in ./docs, find broken links, write a report to ./report.md." Pick the tools the agent is allowed to use (file tools yes, bash maybe, web fetch maybe). Run it. The SDK loops, calls tools, reports back when done. from claude_agent_sdk import Agent agent = Agent( model="claude-sonnet-4-6", tools=["read_file","write_file","glob","grep"], goal="Find broken links in ./docs and write a report to ./report.md", max_steps=40, ) agent.run() 04 — Patterns that work Three shapes you'll reuse. Loop-until-done Single agent, file + bash tools, plain goal. Walk away. Most Claude Code uses live here. Planner + workers One agent breaks the job into chunks, spawns sub-agents, collects results. Use sub-agents when chunks are independent. Tool-only orchestrator The agent never reads or writes files; it only orchestrates calls to your in-house APIs. Useful when data must stay in your systems. 05 — Operational habits Don't ship without these. Step budget. Always cap max_steps . A runaway loop wastes money fast. Permissioned tools. Whitelist explicit folders for file tools. Never give bash on a daily-driver machine without thinking. Token telemetry. Log response.usage per step. Dashboards in week one. Resume on failure. Persist agent state so a crash can pick back up. Human approval gates for irreversible actions — push, deploy, send-mail, destructive SQL. Treat agents like junior employees with admin rights. Sandbox first, narrow scope, watch the first few runs. More on this site Related products . Every Anthropic surface has its own page on this guide. Claude Code agent in your terminal Claude API build on top MCP tool protocol Skills slash commands Artifacts live previews Projects workspaces Files API upload · cite Memory persistent Tool Use function calling Computer Use screen control Batch API 50% cheaper Citations grounded Prompt Caching 90% off Extended Thinking deep reason Managed Agents cloud · preview Mythos forward-looking Claude Cowork agentic desktop Claude Design prototypes · slides --- ## Claude API — Claude on WholeTech URL: https://claude.wholetech.com/api/ Claude API — Claude on WholeTech home / products / api Build on top Claude API shipping Direct programmatic access to the models. SDKs for Python, TypeScript, Java, Go, Ruby, and .NET. Bedrock and Vertex if you need cloud-native deployment. 01 — When to use it Reach for the API when… You're embedding Claude in a product you ship to other people. You want a structured response (JSON, classification, extraction). You want it cheap and high-volume (Batch API, prompt caching). You need it inside your VPC — Bedrock or Vertex. If you just want to do a thing once, claude.ai is faster. 02 — Your first call Five minutes, end to end. Get a key at console.anthropic.com . Add a small balance ($5 is plenty to learn). Save it as an env var so it never lands in code: export ANTHROPIC_API_KEY=sk-ant-… (Mac/Linux) or setx ANTHROPIC_API_KEY "sk-ant-…" (Windows). Install the SDK: pip install anthropic or npm install @anthropic-ai/sdk . Send a message: import anthropic client = anthropic.Anthropic() msg = client.messages.create( model="claude-sonnet-4-6", max_tokens=1024, messages=[{"role": "user", "content": "Hello, Claude."}], ) print(msg.content[0].text) 03 — The message shape Three things to know. System prompt sets behavior and context. It's the same on every turn. Messages are an alternating list of user and assistant turns. Each is text, images, documents, or tool calls/results. Response content is a list of blocks. Plain replies have one text block. Tool-using replies may have tool_use blocks you execute and feed back. Pick the model with model="claude-…" . As of May 2026 the latest 4.x family includes Opus 4.7, Sonnet 4.6, Haiku 4.5. Default to Sonnet for cost-quality balance. 04 — Capabilities What you turn on. Tool Use Define functions in JSON schema. Claude decides when to call them; you execute and return. Prompt Caching Mark long, repeated context (system prompt, big documents) as cacheable. ~90% cost reduction on cache hits. Extended Thinking Give Claude a thinking budget. Better answers on hard reasoning. Citations Pass documents in; Claude grounds its answer with span-level citations. Vision Drop images in messages. Claude reads them as content. Files API Upload once, reference by ID across calls. Pairs with caching for big PDFs. Batch API Half-price async lane. Submit a batch, pick it up later. Great for backfills. Computer Use Screenshots in, mouse/keyboard out. Drives apps that have no API. 05 — Best practices Habits that pay back fast. Always turn on prompt caching if the same system or doc context is sent more than once. It's the biggest cost lever you have. Stream long responses ( stream=True ) so users see typing instead of waiting. Set max_tokens low for tool-driven loops; raise it only for the final synthesis turn. Capture response.usage on every call. Build a dashboard in week one, not month six. Test with Haiku first. If the prompt holds at Haiku, it'll fly at Sonnet. Workspaces in console.anthropic.com let you scope keys per project, set spend caps, and watch usage. Use them. 06 — Cloud-native paths If you live on AWS or GCP. Amazon Bedrock — Claude is a first-class model. Same SDK with a Bedrock client. IAM, VPC, CloudWatch. Google Vertex AI — same idea on GCP. Service-account auth, quotas, audit logs. Use these when corporate policy says data must not leave your cloud, or when you already pay one of those bills. More on this site Related products . Every Anthropic surface has its own page on this guide. Claude Code agent in your terminal Agent SDK build agents MCP tool protocol Skills slash commands Artifacts live previews Projects workspaces Files API upload · cite Memory persistent Tool Use function calling Computer Use screen control Batch API 50% cheaper Citations grounded Prompt Caching 90% off Extended Thinking deep reason Managed Agents cloud · preview Mythos forward-looking Claude Cowork agentic desktop Claude Design prototypes · slides --- ## Artifacts — Claude on WholeTech URL: https://claude.wholetech.com/artifacts/ Artifacts — Claude on WholeTech home / products / artifacts Live previews Artifacts shipping Live, editable, side-panel previews of code, charts, components, and documents — the most useful design feature in claude.ai. 01 — In one sentence A side panel that renders . When Claude builds you a webpage, a React component, a chart, or a Mermaid diagram, the result lands in an Artifact panel — rendered live, editable, exportable. You iterate by talking; the preview updates in seconds. This is the single most underused feature on claude.ai. 02 — What can be an Artifact The vocabulary. Single-file HTML Embedded CSS + JS. Full landing pages, dashboards, calculators, mini-tools. React components Tailwind, lucide-react icons, recharts. Drop straight into a Next.js project. SVG & Mermaid Diagrams, flowcharts, illustrations. Markdown Articles, reports, README drafts you'll publish elsewhere. Mini-games & canvas demos Interactive teaching tools, simulations, puzzles. JSON / config Useful when shaping a structured output you'll feed downstream. 03 — The iteration loop Five minutes from idea to shippable. Open a fresh chat at claude.ai . Describe what you want in one paragraph: who it's for, what they should do, what mood, what brand colors. Drop a reference if you have one — screenshot of a site you like, a logo, a photo. Claude reads images. Iterate. "Hero too tall, push CTA above fold, swap green for #d97757." The Artifact updates in place. Hit copy at the top of the panel and paste the HTML into your CMS / static site / repo. 04 — Recipes Things to ask for first. Hero section. "Build a hero for {company}, audience {who}, action {do this}, mood editorial-warm, brand color {hex}." Pricing page. Three tiers, monthly/yearly toggle, comparison table. Calculator. "Mortgage calculator with sliders for principal, APR, term — display monthly payment and total interest." Dashboard mock. "Admin dashboard for a property manager — stat cards, table of tenants, sidebar nav." Chart. "Recharts bar chart of monthly revenue 2024 vs 2025, brand color {hex}." Mermaid diagram. "Sequence diagram of OAuth flow, four actors." Deeper walkthroughs live at /design . 05 — Export Get it out. Copy — the canonical button. Pastes the source. Publish — claude.ai can publish an Artifact to a sharable URL. Useful for showing someone without sending a file. Hand off to Claude Design for prototype-grade refinement. Hand off to Claude Code when the artifact graduates into a real codebase. More on this site Related products . Every Anthropic surface has its own page on this guide. Claude Code agent in your terminal Claude API build on top Agent SDK build agents MCP tool protocol Skills slash commands Projects workspaces Files API upload · cite Memory persistent Tool Use function calling Computer Use screen control Batch API 50% cheaper Citations grounded Prompt Caching 90% off Extended Thinking deep reason Managed Agents cloud · preview Mythos forward-looking Claude Cowork agentic desktop Claude Design prototypes · slides --- ## Batch API — Claude on WholeTech URL: https://claude.wholetech.com/batch/ Batch API — Claude on WholeTech home / products / batch Async & cheaper Batch API shipping Submit large jobs asynchronously, pick them up later, pay roughly half the price of synchronous calls. 01 — Why it exists Half-price, no rush. Some workloads don't need answers in real time — overnight backfills, classification of months of records, summary generation across an archive. The Batch API lets you submit a list of message-create requests, walk away, and pick them up when the batch finishes. Cost is about 50% of synchronous calls. 02 — When to use it The decision rule. Reach for batch when… Latency doesn't matter. The job is > 100 calls. You can wait minutes-to-hours for results. You care about cost. Skip it when… The user is waiting. Total volume is tiny. You need to chain results together (one call's output feeds the next) — that's a synchronous loop. 03 — The shape Requests in, results out. Build a JSONL file , one request per line, each with a custom_id you'll use to match results back. Submit the batch. The API returns a batch_id . Poll status until it's ended . Download results. A JSONL file in the same order, each row keyed by your custom_id . 04 — Patterns What batch is great for. Tagging an archive. 50,000 articles, classify each into one of 8 categories. Backfill summaries. Five years of meeting notes, summarize each. A/B prompt experiments. Run the same 1,000 inputs through 3 prompt variants; compare outcomes. Eval datasets. Score model responses against a rubric. 05 — Operational habits Don't lose a batch. Persist the batch_id and the input JSONL the moment you submit. Crashes happen. Use stable custom_id s so you can rejoin to source records. Cap each batch around 10,000–50,000 requests. Smaller chunks recover faster from a partial failure. Track cost per batch. Log input tokens, output tokens, completed-vs-failed counts. Combine with caching when prefixes repeat across requests (same system prompt, same docs). More on this site Related products . Every Anthropic surface has its own page on this guide. Claude Code agent in your terminal Claude API build on top Agent SDK build agents MCP tool protocol Skills slash commands Artifacts live previews Projects workspaces Files API upload · cite Memory persistent Tool Use function calling Computer Use screen control Citations grounded Prompt Caching 90% off Extended Thinking deep reason Managed Agents cloud · preview Mythos forward-looking Claude Cowork agentic desktop Claude Design prototypes · slides --- ## Prompt Caching — Claude on WholeTech URL: https://claude.wholetech.com/caching/ Prompt Caching — Claude on WholeTech home / products / caching 90% off repeated context Prompt Caching shipping Mark long, repeated context as cacheable. Cache hits cost about 10% of the un-cached price. 01 — Why it matters Your biggest cost lever. If your app sends the same long system prompt or the same big document on every call, prompt caching is the single most valuable optimization. Cache hits cost about 10% of the un-cached price. On document-heavy workloads, this turns a $1,000/month bill into $100. 02 — How it works Mark a block. Identify the repeated content — system prompt, large reference doc, fixed instruction set. Add a cache breakpoint: "cache_control": {"type": "ephemeral"} on that content block. Send the call. The block is hashed; subsequent calls within the cache lifetime hit the cache. Cache lifetime is currently 5 minutes by default; longer durations are available on some plans. messages = [{ "role":"user", "content":[ {"type":"text", "text": LONG_SYSTEM_PROMPT, "cache_control":{"type":"ephemeral"}}, {"type":"text", "text": "Now answer my question: …"} ] }] 03 — When you'll see hits Cache windows. Bursts of related calls. User asks 10 questions about the same document — cache hits all the way down. Pipelines that fire repeatedly. A daily news job that runs many calls with the same instructions — cache between successive calls in the run. Multi-turn agents. Earlier turns become the cached prefix for later turns. If your latency between calls exceeds the cache TTL, you won't see hits. Either pace your calls, or — for longer durations — request extended cache lifetimes from Anthropic. 04 — The cache ladder Where to put breakpoints. You can mark up to four cache breakpoints per request. Stack them from most-stable to least: System prompt — almost never changes per call. Tool definitions — change rarely. Reference documents — same document across many calls in a session. Conversation history — accumulating prefix. The user's current question goes after all four — un-cached. 05 — Watch the metrics Don't fly blind. Every response carries usage fields including cache_creation_input_tokens and cache_read_input_tokens . Build a dashboard that tracks cache hit ratio and blended cost per call . Two of the three best optimization wins of the past year for this network came from pushing this ratio up. Don't change the cached prefix unnecessarily — even one whitespace difference invalidates the cache. Templating discipline matters. More on this site Related products . Every Anthropic surface has its own page on this guide. Claude Code agent in your terminal Claude API build on top Agent SDK build agents MCP tool protocol Skills slash commands Artifacts live previews Projects workspaces Files API upload · cite Memory persistent Tool Use function calling Computer Use screen control Batch API 50% cheaper Citations grounded Extended Thinking deep reason Managed Agents cloud · preview Mythos forward-looking Claude Cowork agentic desktop Claude Design prototypes · slides --- ## Citations — Claude on WholeTech URL: https://claude.wholetech.com/citations/ Citations — Claude on WholeTech home / products / citations Grounded answers Citations shipping Pass documents in; Claude grounds its answer with span-level citations back to the source. 01 — Why it exists Trust, but verify. Citations make Claude's answers verifiable. You pass documents into a message; Claude returns text where every claim is linked to a span of a source document. Users can hover and see exactly where each statement came from. The same primitive powers RAG-style products without the bespoke retrieval plumbing. 02 — The shape Documents in, citations out. Pass each document as a content block of type document with citations.enabled = true . Ask the question as a normal text block. Receive a response where text segments come paired with citations arrays — page numbers, line ranges, or character offsets back to the source. Render in your UI by hyperlinking each cited span back to the source. 03 — Document shapes What you can ground on. PDFs Citations carry page numbers. Best UX — direct hover-to-page. Plain text Character spans. Easy to highlight inline. Custom-content blocks Pre-chunked text with explicit ranges. Lets you control granularity. 04 — UX patterns How users want it. Hover footnotes. Tiny [1] superscripts; hover to see the source span. Sidebar evidence. Highlight the cited span on the source document beside the answer. Confidence by coverage. Show users when a sentence has zero citations — that's a hallucination risk. Citation copy. When users copy text, copy the citations too. Useful in legal / academic flows. 05 — Pairs well with Combine. Files API — upload large PDFs once, reference repeatedly. Prompt Caching — long source docs are perfect cache material. Tool Use — let Claude fetch the right document(s) before answering. More on this site Related products . Every Anthropic surface has its own page on this guide. Claude Code agent in your terminal Claude API build on top Agent SDK build agents MCP tool protocol Skills slash commands Artifacts live previews Projects workspaces Files API upload · cite Memory persistent Tool Use function calling Computer Use screen control Batch API 50% cheaper Prompt Caching 90% off Extended Thinking deep reason Managed Agents cloud · preview Mythos forward-looking Claude Cowork agentic desktop Claude Design prototypes · slides --- ## Claude Code — Claude on WholeTech URL: https://claude.wholetech.com/code/ Claude Code — Claude on WholeTech home / products / code Coding · Agentic Claude Code shipping An agent that lives in your terminal, your IDE, your desktop, or the web — same Claude, same context, same permission to act. 01 — In one sentence Claude in a place where it can act . Claude.ai is a chat. Claude Code is a coworker with hands. It reads files, edits them, runs commands, installs dependencies, runs the test suite, opens a browser, captures a screenshot, commits, opens a PR, ships. Same model, vastly more leverage. Where it runs CLI (terminal) The original. Type claude in any folder. Works on macOS, Linux, Windows (PowerShell or WSL). Desktop apps Native Mac and Windows apps with a friendlier UI. Same engine, same context. Web — claude.ai/code Cloud sandbox. Nothing to install. Great for ChromeOS, iPad, or trying it out. IDE plugins VS Code, Cursor, JetBrains, Zed. Adds a panel that shares context with your editor. 02 — Install Install in five minutes . Anthropic now ships a native installer that doesn't depend on Node. The npm path still works and is documented as the alternative. Recommended — native macOS / Linux / WSL: curl -fsSL https://claude.ai/install.sh | bash Windows PowerShell: irm https://claude.ai/install.ps1 | iex Homebrew: brew install --cask claude-code WinGet: winget install Anthropic.ClaudeCode Alternative — npm npm install -g @anthropic-ai/claude-code Requires Node 18+. Fine if you already have a Node toolchain — otherwise prefer the native installer. Step-by-step beginner walk-throughs: /newby (Windows), /newby-mac (Mac), /newby-linux (Linux/Unix). 03 — First task Your first real use. Open a terminal in a project folder. Any folder with code, docs, or files you want Claude to know about. Run claude . First time, it opens the browser to log in. Run /init to generate a CLAUDE.md file documenting the codebase. Claude reads this every session. Type a plain-English task. "Find the auth code, add rate limiting, write a test, run it." Claude shows what it'll do; you approve. Watch one round. After that, you'll trust the patterns and can leave it running on bigger tasks. 04 — Slash commands worth knowing The built-in vocabulary . /help — list every command and skill loaded in this session. /init — generate a CLAUDE.md for this codebase. /clear — reset the conversation (and the context window). /cost — what this session has spent. /review — review pending changes on the current branch. /security-review — scan pending changes for OWASP-style vulnerabilities. /loop m — run a command on a recurring interval. /schedule — schedule a remote agent on a cron. /exit — quit. Plugins extend this vocabulary — see /skills . 05 — Plugins & skills Extend with plugins . Anthropic and the community publish plugins that add slash commands, MCP servers, and skills. Examples bundled in Paul's setup: frontend-design — production-grade UI work without the AI-slop look. Adds /frontend-design . See /design . claude-api — building, debugging, optimizing Anthropic SDK apps; auto-applies prompt caching. fewer-permission-prompts — scans your transcripts and writes an allowlist so Claude stops asking permission for routine things. session-close — Paul's 9-step end-of-session checkpoint (deploy, backup, mirror, surface action items). Build your own by dropping a SKILL.md into ~/.claude/skills// . Documented in /skills . 06 — Real uses on this network What we actually use it for. Daily news pipeline — fetch RSS, write articles with the API, post to 22+ sites. wholetech.com/worklog . Fleet security scans — Playwright-based, 100+ domains, A grades on every header. wholetech.com/playwright . Daily site sitemaps — diary at sitemap.wholetech.com . Tenant rent reminders, lease drafts, warranty claim correspondence. The site you are reading right now — built and maintained inside Claude Code. More on this site Related products . Every Anthropic surface has its own page on this guide. Claude API build on top Agent SDK build agents MCP tool protocol Skills slash commands Artifacts live previews Projects workspaces Files API upload · cite Memory persistent Tool Use function calling Computer Use screen control Batch API 50% cheaper Citations grounded Prompt Caching 90% off Extended Thinking deep reason Managed Agents cloud · preview Mythos forward-looking Claude Cowork agentic desktop Claude Design prototypes · slides --- ## Computer Use — Claude on WholeTech URL: https://claude.wholetech.com/computer-use/ Computer Use — Claude on WholeTech home / products / computer-use Eyes and hands Computer Use beta Claude looks at screenshots and emits mouse + keyboard actions to drive a real computer. 01 — What it is Eyes and hands. A capability where Claude looks at screenshots and returns mouse + keyboard actions. You run a loop: capture the screen, send to Claude, execute the actions Claude returns, repeat until done. Useful for automating apps with no API. 02 — Realistic uses Where it earns its keep. Filling browser forms across sites that block scraping. Driving legacy desktop software during a migration. QA — visiting a list of pages and reporting what's broken. Bulk-processing tasks in apps with no batch UI. 03 — Try it safely Sandbox first. Run it inside a VM or container. Anthropic publishes a Docker reference image. Don't point it at your daily-driver desktop. Pull the reference container from ghcr.io/anthropics/anthropic-quickstarts . Set ANTHROPIC_API_KEY and start the container; it serves a web UI you chat with. Give a small task first — "open Firefox, search for cat pictures" — to feel it out. Treat it like a junior intern with admin rights. Sandbox first, narrow scope, watch the first few runs. 04 — Patterns What works. Discrete tasks with clear endings. "Open this PDF, copy the table to a CSV, save and quit." Verify checkpoints. After each subtask, ask Claude to confirm what it sees on the screen before continuing. Snapshot on failure. When the loop bails, save the last screenshot. Most "why did it stop" questions answer themselves with the picture. Cap step count. A runaway computer-use loop can rack up tokens fast. 05 — Alternatives Don't reach for it first. If the target system has an API, an MCP server, or a Playwright/Puppeteer wrapper, those are cheaper, faster, and more reliable than Computer Use. Reach for Computer Use when the only available interface is a GUI. More on this site Related products . Every Anthropic surface has its own page on this guide. Claude Code agent in your terminal Claude API build on top Agent SDK build agents MCP tool protocol Skills slash commands Artifacts live previews Projects workspaces Files API upload · cite Memory persistent Tool Use function calling Batch API 50% cheaper Citations grounded Prompt Caching 90% off Extended Thinking deep reason Managed Agents cloud · preview Mythos forward-looking Claude Cowork agentic desktop Claude Design prototypes · slides --- ## Claude Cowork — Claude on WholeTech URL: https://claude.wholetech.com/cowork/ Claude Cowork — Claude on WholeTech home / cowork Section 04 — Knowledge work Claude Cowork — a coworker, not a chatbot. Cowork runs on your desktop, connects to your local files and apps, and completes multi-step knowledge-work tasks from start to finish. Where chat is a conversation, Cowork is a working session: you describe the job, Claude plans and executes it, and you steer along the way. Generally available on every paid plan since early 2026. If Claude Code is the agent for builders, Cowork is the agent for everyone else — analysts, researchers, ops, legal, finance. Contents What Cowork is Cowork vs Chat vs Code Who it's for Getting started The permission model Integrations Patterns that work Org controls & admin Cowork on Bedrock Safety habits 01 — In one sentence Claude with permission to work . Cowork is the Claude desktop app with permission to read, edit, and create files in folders you specify, and the ability to drive connected applications. You don't ask "how would I do this" — you ask Claude to do it. Output is real artifacts, in their right places, ready to use. The shape of a Cowork session You describe the task in plain English. "Pull the last six months of board minutes from this folder, identify every action item, and write a status memo for next Tuesday." Claude plans. It outlines steps and shows what files and apps it'll touch. You approve or edit the plan. Claude executes. Reads documents, drafts content, makes edits, opens browsers, calls connected apps. You steer. At checkpoints Claude pauses and shows progress. You correct, redirect, or let it continue. Done — the artifact is on disk, in the doc, on the calendar, in the email draft. 02 — Cowork vs Chat vs Code Three doorways into the same Claude. All three run the same models. The difference is what each one is allowed to do and where it lives. Surface What it is Where it runs Best for Chat (claude.ai) A conversation. Reads what you paste; produces text and Artifacts. Web & mobile. Questions, drafting, brainstorming, single-shot answers. Cowork An agent. Reads, edits, creates files in scoped folders. Drives connected apps. Desktop app (Mac/Win); also runnable on AWS Bedrock. Multi-step knowledge work over your files and apps. Claude Code An agent for codebases. CLI, IDE plugins, web sandbox. Terminal, IDE, claude.ai/code. Software work — repos, tests, deploys, infra. Same context, different hands. A team can run Chat for thinking, Cowork for executing knowledge tasks, and Claude Code for software — all under the same plan, with the same memory, the same connected accounts. 03 — Who it's for People who work in files . Anthropic positions Cowork at researchers, analysts, operations teams, legal professionals, and finance teams — anyone who spends their day moving between documents, spreadsheets, slide decks, email, and shared drives. The pitch: spend your time on judgment, not assembly. 📑 Legal Diff contracts against a template. Pull up every NDA exception clause across the portfolio. Draft the response letter. 📊 Finance & analytics Reconcile a month-end. Build the variance memo. Export the chart pack. ⚙️ Operations Triage the inbound vendor invoices. Update the tracker. Flag exceptions for a human. 🔬 Research Read 80 PDFs. Cluster by theme. Draft the literature-review section with citations. 📝 Comms / editorial Read the source thread, draft the press release, suggest the tweet, queue it in the CMS. 🏘️ Property & small biz Read the tenant roster, draft the rent reminders, log payments, surface late accounts. 04 — Getting started Five minutes from install to first task. Install the Claude desktop app. Download from claude.ai/download . Mac and Windows native. (Cowork runs inside the desktop app — there's no separate installer.) Sign in. Cowork is included on Pro, Max, Team, and Enterprise plans. Open the Cowork tab. Tabs: Chat (the familiar conversation surface), Cowork (the working surface). Pick a working folder. A specific directory you want Claude to be able to read and write in. Start small — a single project folder. Connect the apps you want Claude to use — Drive, Gmail, Calendar, Slack, DocuSign, FactSet. Each is OAuth; you can disconnect at any time. Describe a task. Plain English. Watch the plan. Approve. Steer. First-task suggestion: point Cowork at a folder of meeting notes and ask it to "read these notes from the last quarter, list every commitment by person, and write a status table to status.md ." Low risk, high value, very short feedback loop. 05 — Permissions Scoped by you . Cowork can only touch what you let it touch. The permission model has three layers — folders on disk, connected apps, and per-action prompts. Folder scope You name the directories Claude can read or write. Anything outside is invisible to it. Add and remove scopes as projects shift. App scope Each connected app (Drive, Gmail, etc.) is OAuth with its own scope. Read-only Drive is different from full Drive; choose what fits. Action prompts Destructive or external-facing actions (send email, sign document, delete file) prompt for explicit confirmation by default. Recommended starter scopes: one project folder on your desktop, read-only Drive, read-only Calendar, draft-only Gmail (no send-without-confirmation). Loosen as you build trust. 06 — Integrations The connected apps . Cowork ships with first-party integrations that cover the apps most knowledge workers live in. Anthropic added a wave of business connectors in early 2026: Drive, Gmail, DocuSign, FactSet alongside the original Calendar and file-system integrations. Google Workspace Drive (search files, read & edit Docs/Sheets/Slides), Gmail (search, read, draft, send), Calendar (read, suggest times, create events). DocuSign Read envelope status, draft new envelopes from templates, route for signature. Pairs well with legal and ops workflows. FactSet Pull market data, company financials, indices into research and modeling sessions. Local file system Read and write files in scoped folders. PDFs, Office docs, CSVs, Markdown, code, archives. Web Browse, fetch, and read public pages. For login-walled sites, Cowork can drive a browser session you've authenticated. MCP servers Anything you connect via Model Context Protocol — Slack, Postgres, GitHub, Brave Search, your in-house APIs. Same protocol Claude Code uses. Anthropic publishes connectors at a steady pace. Treat the list above as a snapshot of mid-2026; check the in-product directory for the current set. 07 — Patterns that work Five shapes worth copying . After a few months of real Cowork use, the same patterns keep paying back. Lift them whole. 1 · Triage "Read everything in ./inbox/ , sort by urgency and topic, and write a one-paragraph briefing on top of each cluster." Reproducible at the start of every Monday. 2 · Reconcile "Compare these two spreadsheets. Find rows that differ. For each difference, draft an explanation in plain English." Pair with read-only access to the source-of-truth system. 3 · Synthesize "Read these 40 PDFs. Pull every claim about X. Cluster the claims. Draft a memo with citations." Pair with the Files API or with on-disk PDF folders. 4 · Generate & route "For each tenant in tenants.csv who hasn't paid May rent, draft a friendly reminder, save as a draft in Gmail, and log it to ./reminders/2026-05.md ." Drafts only — never auto-send the first time you wire this up. 5 · Watch & report Pair with /schedule : every weekday at 6am, run a Cowork-style routine that reads connected app data, writes a status file to disk, and emails it to you. 08 — Org controls What admins get. Anthropic shipped organization controls, role-based access, and centralized integration management with Cowork's general-availability rollout. The relevant controls for IT and security teams: Role-based access — admins, members, viewers, billing-only. Scope what each role can see and configure. Centralized integrations — the org connects an app once; members opt in. No more individual OAuth approvals scattered across a workforce. Audit logs — what was searched, which files were read, what was written, what was sent. Useful for regulated environments. Data controls — retention windows, regional residency for compatible plans, opt-out of training (default on enterprise plans). SSO & SCIM — Okta, Azure AD, others. Provision and de-provision via your existing identity stack. Pricing note: Cowork is included on every paid plan — Pro, Max, Team, Enterprise — with no per-seat add-on. Enterprise gets the org controls; smaller plans get the same agent without admin tooling. 09 — Cowork on Bedrock Run it inside your AWS . For organizations that need data and prompts to stay inside their AWS account, AWS and Anthropic ship Cowork on Bedrock. Same agent, same connectors, but the inference happens through Bedrock rather than Anthropic's first-party API. Data path — prompts and outputs traverse your Bedrock environment; logs land in CloudWatch. IAM — role-based access via the AWS identity model; layer over the Cowork role model. Cost path — billed against your AWS account at Bedrock rates; one bill instead of two. Use case — financial services, healthcare, public-sector deployments where vendor-cloud egress is prohibited. For most teams the standard Anthropic-hosted Cowork is faster to set up and easier to administer; Bedrock is the right answer when policy requires it. 10 — Safety habits Treat the agent like a capable junior . The model is good. The judgment is yours. A handful of habits keep Cowork productive and safe. Start in a sandbox folder. A dedicated ~/cowork/ directory you can wipe between projects. Build trust before pointing it at your main drive. Drafts before sends. Connect Gmail with draft-only scope until Cowork has produced a few hundred messages you've sanity-checked. Two-step destructive actions. Anything irreversible — delete, sign, send-now, drop-table — gets a confirmation prompt. Don't disable that. Periodic audit. Once a week, scan the audit log for any tool call you don't recognize. Memory hygiene. Cowork remembers what you tell it about your work. Review and prune the memory file the same way you'd review a colleague's onboarding notes. Don't paste secrets. If a credential lands in a Cowork session, rotate it. Same rule as for any other shared tool. Pair Cowork with your existing patterns . If you already use Projects for context, Skills for repeat workflows, and Memory for persistence, those carry over directly. Cowork is the surface where they all execute. More on this site Related products . Cowork sits alongside the rest of the Claude surfaces. Each has its own page on this guide. Claude Code agent in your terminal Claude Design prototypes · slides Projects workspaces Skills slash commands Memory persistent Managed Agents cloud · preview MCP tool protocol Integrations network guide --- ## Claude for Design — Claude on WholeTech URL: https://claude.wholetech.com/design/ Claude for Design — Claude on WholeTech home / design Section 03 — Special emphasis Claude is a remarkable design partner . It judges layout the way a senior art director does, iterates faster than any human, reads images, writes the code, and ships the result. This page is a hands-on guide to using all of that — with recipes you can run today. If you've only used Claude as a chatbot, this is the page that changes how you think about it. Contents Claude Design — the product Gallery — every kind of site Cloning & rebuilding existing sites Why Claude is good at design Your design toolkit The core workflow Recipe: hero section in 5 min Recipe: full landing page Recipe: image → coded UI Recipe: design system from a brand kit Recipe: rebuild a tired site The frontend-design plugin Pairing with image generators Pairing with Google Stitch & Figma Iteration patterns that work Pitfalls to avoid 00 — The product Claude Design — Anthropic's purpose-built design surface. Anthropic launched Claude Design on April 17, 2026 — a dedicated product for turning prompts into prototypes, slide decks, one-pagers, and mockups. Powered by Opus 4.7. In research preview for Pro, Max, Team, and Enterprise plans. Live HTML, not static images Output is clickable, testable, refinable. You can edit inline, talk to it, drag sliders. Design-system aware Reads your team's design files and codebase so output matches your existing visual style. Many export formats PDF, sharable URL, PPTX, or send straight to Canva. Hands off to Claude Code One instruction packages the design as a handoff bundle for Claude Code — exploration to production code, closed loop. Voice + sliders + comments Refine by talking, by inline-commenting, or by dragging sliders for spacing/scale/density. Where it lives Inside the Claude desktop app and on claude.ai, alongside Cowork and Chat. Same login, same context. How it relates to everything else on this page The recipes and patterns below all work in Claude Design and in plain Artifacts on claude.ai and with the frontend-design plugin in Claude Code. Pick the surface that matches your task — Claude Design for prototype-grade exploration, Artifacts for one-off Q&A, frontend-design for production-grade UI in a real codebase. 01 — Gallery Every kind of website Claude can design . Eleven design vocabularies, eleven live examples on this network. Each one was built with Claude — Artifacts, Claude Design, or the frontend-design plugin. Click through to see the real thing. Editorial · dark firth.com Long-form fan archive. Serif body type, restrained palette, strong hierarchy. Wayback restoration. firth.com Luxury real estate lakehamiltonhomesforsale.com Dark editorial luxury. Dense typography, gold accents, calm authority. Zero-competition keyword spoke. lakehamiltonhomesforsale.com Warm cream & sage retirehotsprings.com Cream paper, sage accents, calculator UI. Built for retirees searching for "should we move there." retirehotsprings.com BBS · terminal atxbbs.com Bulletin-board nostalgia rebuilt as a modern web app. Mono type, deliberate scanlines, real DBs underneath. atxbbs.com Archive · cultural barneyebsworth.com Family/cultural archive. Generous whitespace, gallery-grade imagery, scholarly tone. barneyebsworth.com Sports · burnt orange austintexasfans.com UT burnt orange + Big Shoulders Display + cream paper. frontend-design rebuild, owner-confirmed brilliant, live same day. austintexasfans.com Real-estate hub realhotsprings.com 26-page mega-hub with 25 niche subdomains. Map + listings + calc + lead form, brand.json swap-to-rebrand. realhotsprings.com E-commerce · Regency austen.com / store Regency literary-magazine palette: Cormorant Garamond, cream paper, dusty rose. Storefront with affiliate inventory. austen.com/store Content site · STR bnbhot.com 21-page short-term-rental guide. Three theme variants, revenue calculator, case studies. Network's highest measured human traffic. bnbhot.com Reference · directory girlhoop.com Women's basketball reference: WNBA + global + Olympics + college + Texas + HS, 1,227-program directory, Chrome extension. girlhoop.com Plain-language guide claude.wholetech.com The page you're on. Dark editorial guide aesthetic. #d97757 Anthropic warm + Space Grotesk + Inter + JetBrains Mono. claude.wholetech.com Want a different vocabulary? Hand Claude a screenshot of any site you admire and ask for "this energy." The catalog above is just what we've shipped — Claude can match almost any visual language you can describe. 02 — Cloning & rebuilding Take an existing site and repurpose it. A whole separate skill: feeding Claude an existing website (yours, a Wayback archive of one that disappeared, or a client's tired 2014 design) and having it study the structure, decide what to keep, redesign what's tired, rebuild the whole thing cleanly, and verify nothing went missing. Detailed cloning playbook → /design/cloning/ Nine steps, fourteen sections, seven copy-paste prompts. Capture · audit · decide · brief · prototype · build · improve · verify · ship. Three real case studies from this network. Open the cloning page → 01 Why Claude is good at design Claude reads images, has internalized a vast catalog of well-designed sites, writes clean HTML/CSS, judges its own output, and iterates instantly. The combination is more useful than any single skill in isolation. 👁️ Reads images Drop a screenshot, a sketch, a logo, a moodboard. Claude treats pixels as content. "Build me this" is a real prompt. 🎨 Has taste It has seen Stripe, Linear, Vercel, Apple, Frank Chimero. Ask for "editorial" or "Linear-flavored" and it understands. ⚡ Codes fast HTML, CSS, Tailwind, React, SVG, Mermaid — all native. The artifact updates in seconds. 🔁 Iterates cheaply "Tighten the type, shrink the hero, swap the green for cream." A version is back before you finish your coffee. 🧭 Judges its own work Ask "what would you fix here?" and Claude critiques honestly — alignment, contrast, hierarchy. 🧱 Generates systems, not pages It can output a tokens file, a component library, and a sample page that all use the same vocabulary. 02 Your toolkit Four entry points. Pick the one that fits the task and the medium. 1. Artifacts on claude.ai Best for: single pages, prototypes, components, charts. Zero setup. Live preview pane updates as you iterate. Copy the HTML or React when done. Open claude.ai → 2. claude.ai/code (web) Best for: bigger projects with multiple files — a full site, a small app. Cloud sandbox; nothing to install. Branches and previews live. Open claude.ai/code → 3. Claude Code (local) Best for: work in an existing codebase. Claude reads the repo, edits files, runs the dev server, tests in a browser, commits. See /newby or /newby-mac to install. 4. The frontend-design plugin Best for: distinctive, production-grade UI that doesn't look "AI-generated." Adds a /frontend-design skill to Claude Code. Walk-through below ↓ 03 The core workflow There's one rhythm under every recipe in this guide. Learn it once and the rest is variation. Brief in one paragraph. Audience, action you want them to take, mood, brand palette. Don't write a spec — write what you'd say to a freelancer over coffee. Anchor with references. Drop screenshots of sites you like (or don't like). Claude reads them. Specificity beats adjectives — "I want this energy" + image is better than "modern but warm." Generate a draft. Don't tweak yet. Look at the whole thing. Decide what's working and what isn't. Critique then revise. One pass of feedback per round. "The hero is too tall, the type is too small, the green should be cream." Three changes max per round. Stop earlier than you want. Most rounds make it better. After about round five, returns flatten and Claude starts overthinking. Ship round four. The single best habit: at the end of any round, ask Claude "what would you fix if I gave you another pass?" The list it produces is usually the right list. Recipe Hero section in 5 minutes The fastest possible win. Open a fresh chat, paste a brief, get a polished hero you can drop into any page. Open claude.ai , new chat. Paste a brief. Use the template below. Replace the four placeholders. Wait ~30 seconds. An Artifact opens with a live preview. Take one critique pass. Look at the result. Pick the two things that bug you. Say them. Copy the HTML via the copy button on the artifact panel. Paste into your page. Build a hero section for {{ company }} , a {{ what they do, in one sentence }} . Audience: {{ who they're talking to }} . The single action I want a visitor to take: {{ click X / sign up / call }} . Mood: editorial, calm, confident. Brand color is {{ hex }} . Use Inter for body, Space Grotesk for headlines, JetBrains Mono for any tags. No stock-photo people. No emoji. Hero should be tall but not full-screen — leave room to scroll. Output: a single self-contained HTML file with embedded CSS. No frameworks. Why this prompt works Concrete brand vocabulary (color hex, fonts) anchors the design. Negative constraints ("no stock-photo people, no emoji") prevent the most common AI tells. Single action tells Claude what the design has to do. "Self-contained HTML" means you can copy-paste it without setting up a build. Recipe Full landing page in 30 minutes Same workflow as the hero, scaled up. Treat each section as its own brief. Don't try to one-shot the whole page — Claude will do it, but the quality drops. Sketch the sections in plain text first. "Hero, three-up value props, social proof, deeper feature with screenshot, FAQ, CTA, footer." This is your outline. Generate the page in one prompt using that outline. Get a draft. Walk top to bottom. For each section, give one round of focused feedback. "The three-up cards need more breathing room." "The FAQ chevron should rotate when open." Ask Claude to critique. "What would a senior designer fix in this draft?" Apply the top two suggestions. Add real content. Replace lorem-ipsum with the actual words. Quality jumps a tier. Final pass: mobile check ("show me how this responds at 375px"), accessibility check ("any contrast or aria issues?"), performance check ("can we drop any unused CSS?"). Section-by-section beats whole-page. Once you have a draft, edit the page section by section in follow-up turns. Claude maintains the design language across edits if you ask it to. Recipe Screenshot → coded UI Claude reads images. This is the most under-used capability for design work. What works Screenshots of websites you like. "Build me a page in this spirit, but for a hot springs spa." Hand-drawn sketches. Photograph a napkin sketch, drop it in. Claude infers structure. Figma exports. Export a frame as PNG, drop it in, get production HTML. Old-site screenshots. "Modernize this without losing the editorial feel." Steps Drop the image into a fresh chat. State the goal one line. "Build the layout from this screenshot in HTML/CSS, with these brand colors and fonts." Or: "Modernize this 2008 site for 2026." Decide what to keep. If the source has an emotional hook (a typeface, a layout move, a color), call it out: "Keep the centered serif headline. Lose everything else." Iterate as in the hero recipe. Pro move: drop two screenshots. "Layout from image 1, color palette from image 2." Claude blends them. Recipe Design system from a brand kit Generate tokens, components, and a sample page that all share one vocabulary. Useful when you have many pages to build and want them to feel like a family. Drop your brand inputs. Logo, primary palette (3-5 hexes), font choices, two reference photos that capture mood. If you don't have these, ask Claude to invent them from a one-paragraph description first. Ask for a tokens file. "Generate a CSS custom-properties file with our colors, type scale, spacing scale, radii, and shadows." Save the result as tokens.css . Ask for components. "Build a button, a card, an input, a nav, and a footer using these tokens. Single HTML file, embedded styles, side-by-side." Ask for one full page. "Build a sample 'About' page using these components and tokens." This page becomes the visual contract for everything else. Reuse on every new page. When you start a new page, paste the tokens file and the sample page in. Tell Claude: "match this vocabulary." Recipe Rebuild a tired site You have an old site. The bones are fine; the surface is dated. This is the highest-leverage use of Claude on the web today. Capture the source. Screenshot every page; save the HTML if you have it. Drop both in. Set archive policy. Move existing files to /archive-YYYY-MM-DD/ . Don't delete anything until the new version is live and verified. Ask Claude to identify the keepers — the few elements that are actually load-bearing for the brand or the SEO. Generate one new page using the recipes above. Use it as the visual contract. Migrate page by page. Each page: paste old content, paste new design contract, tell Claude to compose. Review. Push to a dev URL. Get a real human to look at it before flipping the live site. Claude is good but it's still you signing off. Always preserve the old before publishing the new. Move existing content to a dated archive folder, not the trash. Make it easy to roll back. 04 — The plugin The frontend-design plugin A Claude Code plugin from Anthropic that loads a richer "designer brain" the moment you invoke it — better defaults around typography, spacing, color theory, and the small details that tip a page from "AI-generated" to "indistinguishable from human work." What changes when you use it It rejects the AI tells on its own — no rainbow gradients, no emoji-as-icons, no purple-to-pink hero washes. It picks better fonts automatically, with appropriate weights and sizes for the medium. It sweats the small things — letter-spacing on headlines, optical alignment, weight contrast, generous margins. It uses real visual systems — Swiss grid, editorial layout, brutalist, magazine, terminal — instead of generic "card grid." Steps — install & use Install Claude Code first — see /newby or /newby-mac . Install the plugin via the Claude Code plugin marketplace, or by adding it to ~/.claude/skills/ . Run /frontend-design in any session. Brief Claude as you would normally; the plugin shapes the output. For brand-new sites: let it pick the visual system. "Design me a site for a women's basketball reference — frontend-design's call." It will choose intentional design moves that serve the content. When in doubt for any new design work, default to invoking /frontend-design . The output is consistently a tier higher than baseline Claude. 05 — Pairing Pairing with image generators Claude doesn't make raster images. It does, however, write excellent prompts for the tools that do — and orchestrate the whole pipeline. The pattern is: Claude is the art director, the image model is the photographer. The chain Claude writes the brief for the image — subject, lighting, lens, mood, palette aligned to your tokens. An image model renders it — Midjourney, DALL·E, Imagen, Flux, Stable Diffusion. Claude can call these via MCP servers or you paste the prompt. Claude reviews the result. Drop the image back into the chat. "Does this match the brief? What would you change?" Claude rewrites the prompt based on the critique. Loop until you have the asset. Claude integrates the asset into the page — sizing, treatment, positioning. SVG & diagrams — Claude direct For icons, hero shapes, charts, flow diagrams, technical illustrations — Claude writes SVG and Mermaid directly. Often faster and crisper than running an image model. Always ask first: "could this be an SVG?" 06 — Pairing Pairing with Google Stitch , Figma, and v0 Each of these tools is excellent at a specific seam. The trick is using them together — Claude as the brain, the others as specialized hands. Google Stitch Google's AI design tool — describe a UI in plain language, get a Figma-quality multi-screen design. Best at exploring a visual direction quickly. Pair: Stitch generates the look, Claude codes it. Export the Stitch screen, drop the PNG into Claude with "build this in HTML/Tailwind." Figma The industry-standard design surface. Pair: Figma is the canvas, Claude is the dev. Export a frame as PNG, drop it into Claude, get production code. Or use a Figma MCP server (Anthropic + community) so Claude reads your Figma file directly. Vercel v0 Generates polished React + Tailwind components from a prompt. Pair: v0 produces the component, Claude weaves it in — adapting it to your tokens and integrating with surrounding code. Best when you want a specific React/shadcn vocabulary. Cursor / VS Code Editors that already speak Claude. Pair: edit-and-preview loops live in the IDE, the dev server hot-reloads, Claude sees both. Closest thing to "design partner sitting next to you." The full chain — concrete example Stitch: "design a calm, editorial homepage for a hot springs spa, three-screen flow." Stitch gives you a polished mockup. Export each screen from Stitch as PNG. Claude.ai: drop the PNGs in, paste your tokens.css, and ask "build this in HTML using my tokens. Self-contained file." Claude Code: open the project locally, run the dev server, iterate on the result. Claude edits the file in place; the browser hot-reloads. Deploy. Claude pushes to your host of choice. Verify live. For deeper integration recipes — including MCP wiring for Figma, GitHub Actions for design CI, and n8n for automation — see /integrations . 07 Iteration patterns that work One change per round — earlier than you think The temptation is "tighten the hero, swap the green, fix the FAQ, and shrink the footer." Claude will do all four, but the result drifts. Three changes max per round; one when you're closing in on done. Anchor on one reference, not many If you keep saying "more like this site… no wait, more like that one… no, like this third one," Claude blurs them. Pick one anchor and stick with it for a session. Show the result, don't only describe Take a screenshot of the current state and drop it back in with your critique. "Here's what I'm seeing — the hero feels short. Make it taller and quieter." Beats describing in words alone. Ask "what's missing?" Rather than only "what's wrong?" — Claude is a better critic than its prompt usually invites. Ask it for what isn't there yet. Save snapshots Every couple of rounds, save the current HTML to disk. If a later round goes sideways you can return to a known-good state instead of arguing your way back. 08 Pitfalls to avoid The AI-tell aesthetic — purple-pink gradients, emoji icons, generic three-up cards, "Lorem ipsum" copy. If your output looks like every other AI-built site, name what you don't want and use the frontend-design plugin . Over-specifying. "Make the H1 48px, line-height 1.1, weight 700, letter-spacing -0.02em…" — fine for production, but for exploration it caps Claude at your vision instead of letting it surprise you. Brief loose first; specify late. Trusting the rendered preview blindly. Artifacts render in a sandbox. Real browsers vary. After you ship, open the page in the actual target environment. Skipping mobile. Claude designs desktop-first by default. Always ask for a mobile pass before you ship: "show me this at 375px and fix anything that breaks." Forgetting to verify live. Deploying a file isn't the same as the file being live. After you push, fetch the URL and confirm the change is visible. Caching, CDN, or sync gremlins can swallow updates. Claiming AI helped on public pages when discretion is the better call. For client work, treat your toolchain as a trade secret unless asked. Final habit: after any session, ask Claude one question — "if you were grading this design, what's the one thing you'd fix?" — and write the answer in a follow-ups note. The list builds your taste over months. --- ## Files API — Claude on WholeTech URL: https://claude.wholetech.com/files/ Files API — Claude on WholeTech home / products / files Persistent files Files API shipping Upload a document once; reference it by ID across many API calls. PDFs, images, CSVs, code archives. 01 — Why it exists Stop re-uploading the same 200-page contract . Without the Files API, every API call that needs a big document re-sends the full bytes. With it, you upload once, get a file_id , and reference that ID. Combine with prompt caching and the document loads at a tiny fraction of the cost on each follow-up call. 02 — The flow Three calls. POST /v1/files with the file. Get back a file_id . Reference it in messages as {"type":"document","source":{"type":"file","file_id":"…"}} . Combine with prompt caching — mark the document as cacheable so subsequent calls hit the cache. file = client.files.upload(file=open("contract.pdf","rb")) msg = client.messages.create( model="claude-sonnet-4-6", max_tokens=1024, messages=[{ "role":"user", "content":[ {"type":"document","source":{"type":"file","file_id":file.id}, "cache_control":{"type":"ephemeral"}}, {"type":"text","text":"Summarize the indemnity clauses."} ] }] ) 03 — What you can upload The accepted shapes. PDFs — Claude reads pages and figures. Images — JPG, PNG, GIF, WebP. Plain text & code — .txt, .md, source files. Structured data — CSV, JSON, XML. Archives — small zips of code, useful for "review this repo" shapes. 04 — Operational habits Don't make these mistakes. List your files. They don't auto-expire (in most plans). Build a janitor that deletes anything older than X days. Tag with metadata — origin, owner, retention. Future-you will thank you. Don't upload secrets. Strip API keys, tokens, internal hostnames before upload. Pair with caching. A 200-page PDF is expensive every call; cached, it's a tenth the price on the second. More on this site Related products . Every Anthropic surface has its own page on this guide. Claude Code agent in your terminal Claude API build on top Agent SDK build agents MCP tool protocol Skills slash commands Artifacts live previews Projects workspaces Memory persistent Tool Use function calling Computer Use screen control Batch API 50% cheaper Citations grounded Prompt Caching 90% off Extended Thinking deep reason Managed Agents cloud · preview Mythos forward-looking Claude Cowork agentic desktop Claude Design prototypes · slides --- ## Integrations — Claude on WholeTech URL: https://claude.wholetech.com/integrations/ Integrations — Claude on WholeTech home / integrations Section 04 Wire Claude into the rest of your toolkit. A connector and recipe book — the design tools (Stitch, Figma, v0), the editor plugins (Cursor, JetBrains), the workspace MCP servers (Drive, Gmail, Calendar, Slack, GitHub, YouTube), the automation hubs (GitHub Actions, n8n, Zapier), and self-hosted exposure via Cloudflare Tunnel. Contents How Claude fits with other tools Google Stitch Figma Vercel v0 Cursor & IDE plugins MCP — Workspace servers MCP — Developer servers GitHub Actions n8n & Zapier Scheduling & cron Cloudflare Tunnel — self-hosting Three end-to-end chains 01 — Mental model How Claude fits with everything else Claude is unusually strong at three jobs: orchestration (deciding what should happen next), translation (turning one format into another), and judgment (saying whether a result is good). Other tools are better at single specialized jobs. The most powerful setups put Claude in the middle and let it call out to specialists. Claude is the brain Decides, writes, judges, plans. The thing reading and reasoning about your work. Tools are the hands Drive reads files. Gmail sends mail. Stitch designs. v0 codes components. Each does one thing well. MCP is the wiring The protocol that lets Claude call those tools. Set it up once, reuse everywhere. 02 — Design Google Stitch Google Labs' AI design tool. Type a description ("calm editorial homepage for a hot springs spa, three-screen flow"), get a polished multi-screen UI you can drop straight into Figma. Strong at exploring direction; weak at production code on its own. The pairing Stitch generates the look. Claude codes it. Stitch is fastest at "what should this even look like?" Claude is fastest at "now build it production-quality." Together you collapse a week of design + dev into an afternoon. Steps Open Stitch at stitch.withgoogle.com and sign in with Google. Describe the UI in one paragraph — purpose, audience, mood, brand color. Generate. Iterate visually inside Stitch until you have a direction you like. Stitch is fast at exploring; lean into that. Export each screen as PNG (or push to Figma if you prefer a vector hand-off). Open Claude.ai , drop the PNGs in, paste your tokens (colors, fonts, spacing), and ask: "build this in HTML using my tokens. Self-contained, no frameworks." Or: "build this as React + Tailwind." Iterate with Claude — alignment, spacing, mobile, the small things Stitch doesn't sweat. Deploy. Push the result to your host of choice. Why this combo wins: Stitch picks bold, distinctive directions a baseline LLM wouldn't try. Claude turns those directions into clean, accessible, responsive code. Neither alone gives you both halves. 03 — Design Figma The industry-standard design canvas. Two ways to integrate: the simple one (export PNG, paste into Claude) and the full one (a Figma MCP server that lets Claude read your file directly). The simple way — PNG hand-off In Figma: select a frame, right-click → Copy/Paste as → Copy as PNG. In Claude.ai or Claude Code: paste. Claude reads the image. State the goal: "Build this in HTML/Tailwind. Use my tokens at ." Iterate as in any design recipe. The full way — Figma MCP An MCP server that gives Claude direct access to your Figma files. Claude can read frames, components, and styles, and produce code that respects them. Install a Figma MCP server. Anthropic's MCP registry and the community both publish them; pick one that matches your account type. Generate a Figma personal access token (Figma settings → account → access tokens). Add the server to Claude Code : claude mcp add figma and follow prompts; paste the token when asked. Restart Claude Code. The Figma tools appear. Reference frames by URL in chat: "Build the layout from in HTML." Claude reads it directly. 04 — Design Vercel v0 Generates polished React + Tailwind + shadcn/ui components from a prompt. Excellent for component-shaped work; produces code that fits modern React stacks out of the box. The pairing v0 produces the component, Claude weaves it in. v0 makes a self-contained piece. Claude adapts it to your tokens, your file structure, and the rest of the page. Steps Open v0.dev , sign in with Vercel. Describe the component — "A pricing table with three tiers, feature compare rows, recommended badge on tier 2." Iterate in v0 until the component feels right. Copy the code from v0. In Claude Code (in your repo): paste it and say "integrate this into . Match our existing tokens. Replace the inline shadcn imports with our local ones." Claude does the weaving. 05 — Editors Cursor , VS Code, JetBrains All three speak Claude. Cursor is Claude-native. VS Code and JetBrains add Claude through the official plugin or extensions like Claude Code's IDE companion. What you get in an IDE Edit-and-preview loops — Claude edits a file, the dev server hot-reloads, you see the result instantly. Repo-wide context — the editor and Claude share the same view of your code. Inline edits — highlight a block, ask for a change, accept the diff. Steps — VS Code with Claude Code Install Claude Code first — see /newby . Install the Claude Code extension from the VS Code marketplace. Open a project , open the Claude panel, sign in. Use it in two modes: the side panel for conversation, or inline diffs (highlight + Cmd-K equivalent) for surgical edits. Cursor specifics Cursor ships with Claude as a first-class option. Pick Claude in the model picker and it works the same way — chat panel + inline edits + repo context — with Cursor's own UX flourishes. 06 — Integrations MCP — Workspace servers Connect Claude to the tools you already use for work. Each server is a small program that runs locally (or on a remote host) and exposes a set of tools to any MCP client. Claude Code, Claude desktop, and any custom app can use them. Server What Claude can do Auth Drive Search files, read content, get metadata, copy, create, manage permissions Google OAuth Gmail Search threads, read messages, draft replies, label, manage drafts Google OAuth Calendar List events, create/update/delete events, suggest meeting times, RSVP Google OAuth Slack Read channels, post messages, search history, manage channels Slack OAuth GitHub Read repos, open PRs, create issues, comment, manage workflows GitHub PAT or App YouTube Search videos, fetch transcripts, channel stats, video details YouTube Data API key Filesystem Read/write files in a chosen directory tree Local only Postgres / SQLite Query databases, return rows, schema introspection Connection string Steps — add the Drive MCP server Open Claude Code , run claude mcp add drive (or follow the README of the server you picked). Authenticate. A browser tab opens for Google OAuth. Approve the scopes you actually need; deny the rest. Restart Claude Code. The Drive tools appear in the tool list. Use them in plain English. "Find the BBQ catering quote in my Drive from March 2026 and summarize the pricing." Privacy: MCP servers run on your machine (or your server) by default. Tool calls are visible in the conversation. You approve the scope at OAuth time. This is more private than typical SaaS integrations. 07 — Integrations MCP — Developer servers A grab-bag of servers that turn Claude Code into a more capable shop. Add only what you need; each one expands the surface (and risk) Claude can act on. Filesystem — scoped read/write outside the project directory. Brave Search — web search through the Brave API. Puppeteer / Playwright — browser automation. Claude drives a real Chrome. SQLite / Postgres / MySQL — direct database queries. Redis — read/write a cache. Sentry — fetch errors and issues. Linear / Jira — read tickets, file new ones, update status. Stripe — read customers, charges, subscriptions (read-only by default; never grant write keys to a chat tool). Building your own If you have an internal API, wrapping it as MCP gives you instant Claude support. The official SDKs (Python, TypeScript, Go) handle the protocol; you just describe your tools and implement them. Pick the SDK for your language. Start from the Anthropic MCP quickstart. Define your tools with names, descriptions, and JSON schemas — the same shape Tool Use uses. Implement each tool as a function in your code. Run the server. Add it to Claude Code with claude mcp add . Use it. Claude calls your tools when relevant. 08 — Automation GitHub Actions Run Claude as part of your CI/CD pipeline. Code review on every PR, security scans, automated documentation updates, scheduled cleanups. Common patterns PR review on open — Claude reviews the diff and posts findings as a PR comment. Security scan on commit — Claude scans the diff for obvious vulnerabilities (alongside, not replacing, dedicated tools like CodeQL). Doc sync — when an API file changes, Claude updates the corresponding doc. Scheduled cleanup — once a week, Claude scans the repo for dead feature flags and opens cleanup PRs. Steps — minimal PR-review workflow Add ANTHROPIC_API_KEY as a repo secret. Create .github/workflows/claude-review.yml . Trigger on pull_request ; check out the PR; install the Anthropic SDK; run a small script that reads the diff and posts comments. Scope the model: Sonnet for review (good judgment, decent cost). Use Haiku for high-volume linter-style checks. name: Claude Review on: [pull_request] jobs: review: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - run: pip install anthropic - run: python .github/scripts/review.py env: ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }} GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} 09 — Automation n8n & Zapier Workflow automation hubs. Both have Claude/Anthropic nodes built in. n8n is open source and self-hostable. Zapier is hosted-only but has the broadest catalog of integrations. When to reach for these You need to chain Claude with five SaaS tools (Airtable, Notion, Mailchimp, Stripe, Webflow) and writing the integration code yourself isn't worth it. The trigger is event-shaped — "new row in Airtable", "new email matching X", "form submission". The output is multi-target — write to a database AND post in Slack AND send an email. Steps — a Claude node in n8n Self-host n8n (Docker one-liner) or use n8n Cloud. Add your Anthropic API key in Credentials. Build the workflow: trigger node → data shaping → Claude (Anthropic) node with your prompt → output nodes. Use the JSON-shaped output mode on the Claude node so downstream nodes can parse fields cleanly. n8n vs writing it yourself: n8n is faster for "wire 5 SaaS tools together." A small Python script with the Anthropic SDK is faster for "do one custom thing with two APIs." Pick by trigger complexity, not language preference. 10 — Automation Scheduling & cron Three places to schedule recurring Claude work. Pick by where the state lives. Claude Code /schedule Built-in. Schedule a remote agent on a cron — "run this Monday at 9am" or "every two weeks open a flag-cleanup PR." Anthropic runs the worker. Local cron / Task Scheduler Run a Python or shell script that hits the API. Best when the data lives on your machine. Free. n8n / GitHub Actions If the trigger is in a SaaS tool (a new row, a webhook, a PR open), schedule there. State stays in the platform. Steps — your first /schedule In Claude Code, type /schedule . Describe the recurring task : "Every Monday at 9am, scan the repo for new TODOs added in the past week and post a summary in Slack." Pick a cadence — Claude proposes one; tweak if needed. Approve. Claude registers the routine. Manage with /schedule list , /schedule run , /schedule delete . 11 — Self-hosting Cloudflare Tunnel Expose a Claude-powered service from a machine in your house — your Mac mini, a Beelink, a wall-mounted PCG35 — to the public internet without opening a firewall port. Cloudflare handles TLS, the public DNS, and the front door. Why bother Self-host Claude-driven dashboards or APIs at claude.yourdomain.com . Keep the workload on hardware you own — no cloud bill, easy access to local files. Hide your home IP. Cloudflare proxies all traffic. Steps Install cloudflared on the host machine. Cloudflare's docs have one-liners for every OS. Log in: cloudflared tunnel login . Pick the Cloudflare zone (the domain you'll use). Create a tunnel: cloudflared tunnel create . It writes a credentials JSON to your config dir. Map a hostname: cloudflared tunnel route dns claude.yourdomain.com . Cloudflare writes the DNS for you. Run a config file that maps the public hostname to a local port (your dev server, your custom Claude app, an API). Start the tunnel. Optional: install as a service so it runs on boot. cloudflared service install on most platforms. Lock it down. Anything behind the tunnel is reachable from the public internet. Add Cloudflare Access (zero-trust auth) or basic auth to anything sensitive. Treat it like any production deployment. 12 — End-to-end Three end-to-end chains Concrete examples of stitching multiple tools together. Each is small enough to build in an afternoon. Chain A — Stitch → Claude → Cloudflare Pages Goal: a designed landing page, deployed to a real URL, in under an hour. Stitch: generate the visual direction; export PNGs. Claude.ai: turn the PNGs into clean HTML with your tokens. Claude Code: open the project, polish, run the dev server, verify mobile. Push to GitHub. Connect the repo to Cloudflare Pages. Cloudflare Pages auto-deploys. Hit the public URL to verify. Chain B — Drive MCP → Claude → Gmail MCP Goal: "summarize last week's project files and email the team a digest, every Friday at 4pm." Install Drive + Gmail MCP servers in Claude Code. Write the prompt: "Find every file in the 'Project X' folder modified this week. Summarize what changed. Draft an email to the team list with the digest." Test it once interactively — confirm the draft looks right. Schedule it with /schedule : every Friday 4pm. Approve auto-send only after a few cycles of human-reviewed drafts. Chain C — GitHub PR → Claude review → Slack ping Goal: every PR opens, Claude reviews it, posts the summary in #pull-requests. Add ANTHROPIC_API_KEY as a repo secret. Add Slack webhook URL as a secret too. Create a workflow on pull_request that runs a small Python script: grab the diff, send to Claude, post the response to Slack. Tune the prompt over a few PRs — what kinds of issues do you actually want flagged? Add a manual override comment like /no-review for cases you want to skip. All three chains share a pattern: specialist tools at the seams, Claude in the middle, scheduled or event-triggered, with a human-readable output. Once you build one, the next two are easy. --- ## Managed Agents — Claude on WholeTech URL: https://claude.wholetech.com/managed-agents/ Managed Agents — Claude on WholeTech home / products / managed-agents Cloud-hosted agents Managed Agents preview Anthropic-hosted agents that run on a cron, on a trigger, or on demand — without you running the infrastructure. 01 — What it is Agents you don't host . A Managed Agent is an Anthropic-hosted instance of an agent — a skill, a Claude Code routine, or an Agent SDK program — that runs on a cron, on a trigger, or on demand. You write the agent; Anthropic runs it. State, retries, observability, secrets are all handled. 02 — Why it matters The "always-on" tier. Recurring jobs (daily news fetch, weekly digest, hourly health check) without your own server. Webhook-triggered agents — GitHub PR opened, Linear ticket created, Slack message posted. Long-running flows that should survive your laptop closing. 03 — From inside Claude Code The fastest path. Write a Skill that does the work — see /skills . Run /schedule in Claude Code. Pick a cadence — cron expression or natural-language ("every weekday at 6am"). Confirm. The skill is uploaded as a Managed Agent and starts running on schedule. Manage with the schedule skill — list, update, delete. 04 — State of the art Where it is in May 2026. Anthropic ships routines (cron-triggered Managed Agents) today. Webhook-triggered and on-demand variants are rolling out. APIs and console tooling are evolving fast — expect this section to need refreshes. Forward-looking surface. The exact shape of the SDK, the dashboard, and the pricing all moved between January and May 2026. Confirm details against the current Anthropic docs before building anything load-bearing. 05 — Operational habits Treat it like prod. Log every run. The dashboard shows status; you'll still want your own log of what happened. Notify on failure. Email, Slack, whatever wakes you up if a daily job dies. Cap step counts. Cloud bills can run away too. Rotate secrets. Anthropic's secret store is the right place; resist the urge to bake API keys into prompts. More on this site Related products . Every Anthropic surface has its own page on this guide. Claude Code agent in your terminal Claude API build on top Agent SDK build agents MCP tool protocol Skills slash commands Artifacts live previews Projects workspaces Files API upload · cite Memory persistent Tool Use function calling Computer Use screen control Batch API 50% cheaper Citations grounded Prompt Caching 90% off Extended Thinking deep reason Mythos forward-looking Claude Cowork agentic desktop Claude Design prototypes · slides --- ## Model Context Protocol — Claude on WholeTech URL: https://claude.wholetech.com/mcp/ Model Context Protocol — Claude on WholeTech home / products / mcp The connector standard Model Context Protocol shipping An open protocol for connecting Claude to external systems — Drive, Gmail, Calendar, Slack, GitHub, your database, your in-house APIs. 01 — Why it exists One protocol, every connector. Before MCP, every Drive integration, every Gmail integration, every database integration was bespoke code in each AI client. After MCP, the same connector works in Claude Code, Claude Desktop, Cursor, ChatGPT, and any other compliant client. Anthropic, Google, OpenAI, and the major IDE makers all speak it. 02 — Add a server to Claude Code Plug something in. Pick a server. Official ones live at github.com/modelcontextprotocol/servers — Drive, Gmail, GitHub, Slack, Postgres, Filesystem, Brave Search, Puppeteer, and dozens more. Run claude mcp add and paste the install command from the server's README. Restart Claude Code. The new tools show up in /help . Use them in plain English: "search my Drive for the BBQ catering quote from last March" — Claude calls the Drive MCP server. 03 — Servers worth knowing The starter pack. Filesystem Sandboxed file access. Read/write a specific folder. Postgres / SQLite Read-only or read-write SQL access. Lets Claude answer questions about your data. GitHub Issues, PRs, repo search, Actions. Works hand-in-glove with Claude Code's git tools. Gmail / Drive / Calendar Search threads, draft replies, list events, suggest times. Slack Read channels, post messages, search history. Puppeteer / Playwright Drive a browser. Useful for scraping and visual QA. Brave Search Web search with low quotas. Good fallback when the built-in WebSearch is unavailable. YouTube Data Channel/video metadata, transcripts. Read-only by default. 04 — Build your own Wrap your stack in MCP. An MCP server is just a small program with a manifest describing the tools it offers. Python, Node, Go SDKs are official. If you have an internal API, wrapping it as MCP makes it instantly usable from any AI client your team uses. Pick the SDK. Python or Node are quickest. Define your tools — name, JSON schema for inputs, what they return. Same shape as Tool Use . Wire each tool to the underlying call (HTTP, DB, library). Run the server locally or as a managed process. Register in Claude Code (or any other client) with claude mcp add . 05 — Security Treat MCP servers like APIs. Authenticate. OAuth, API keys, or mTLS — not "no auth because it's local." Scope every tool to the minimum it needs (read-only Drive vs. read-write, single bucket vs. account). Audit-log all tool calls. Useful when something goes wrong; required in regulated environments. Don't expose servers on the public internet without a tunnel and auth. More on this site Related products . Every Anthropic surface has its own page on this guide. Claude Code agent in your terminal Claude API build on top Agent SDK build agents Skills slash commands Artifacts live previews Projects workspaces Files API upload · cite Memory persistent Tool Use function calling Computer Use screen control Batch API 50% cheaper Citations grounded Prompt Caching 90% off Extended Thinking deep reason Managed Agents cloud · preview Mythos forward-looking Claude Cowork agentic desktop Claude Design prototypes · slides --- ## Memory — Claude on WholeTech URL: https://claude.wholetech.com/memory/ Memory — Claude on WholeTech home / products / memory Persistent context Memory shipping Persistent, file-based context that lets Claude remember facts about you and your work across conversations. 01 — How it works Just files . Memory is a folder of human-readable Markdown notes under ~/.claude/projects//memory/ . An index file ( MEMORY.md ) is loaded into every conversation; individual memory files are pulled in when relevant. You can read, edit, and version-control everything by hand. 02 — Four kinds of memory Save the right things. User Role, goals, responsibilities, expertise. "Senior Go engineer, new to React." Feedback How to approach work — corrections AND validations. "Don't mock the database in tests; we got burned." Project Active state — who's doing what, why, by when. Decays fast; refresh often. Reference Pointers to external systems. "Pipeline bugs are tracked in Linear project INGEST." 03 — What NOT to save Memory ≠ documentation. Code patterns, conventions, file paths — derive from the project state. Git history, recent changes — git log is authoritative. Debug fixes — the fix is in the code; the commit message has context. Anything in CLAUDE.md. Ephemeral state — current task, in-progress notes. 04 — Hygiene Keep it from rotting. Verify before recommending. A memory says " old_function exists" — grep before recommending it. Files get renamed. Update when wrong. If a recalled memory conflicts with reality, fix the memory, don't act on it. Index discipline. MEMORY.md entries are one line each, under 200 chars. Detail goes in topic files. De-dupe. Before writing a new memory, check if an existing one can be updated. Treat memory as a living scrapbook. Read it like a colleague's note: useful, but old notes have expired details. 05 — Memory in apps you build Bring it to the SDK. The Agent SDK exposes the same memory primitives. Hand it a memory directory; it reads on start, writes throughout the run. Useful for long-running agents that revisit the same projects across sessions. More on this site Related products . Every Anthropic surface has its own page on this guide. Claude Code agent in your terminal Claude API build on top Agent SDK build agents MCP tool protocol Skills slash commands Artifacts live previews Projects workspaces Files API upload · cite Tool Use function calling Computer Use screen control Batch API 50% cheaper Citations grounded Prompt Caching 90% off Extended Thinking deep reason Managed Agents cloud · preview Mythos forward-looking Claude Cowork agentic desktop Claude Design prototypes · slides --- ## Mythos — Claude on WholeTech URL: https://claude.wholetech.com/mythos/ Mythos — Claude on WholeTech home / products / mythos Research preview · gated Claude Mythos preview A specialized Claude model for defensive cybersecurity research. Announced April 7, 2026 as part of Project Glasswing . Invitation-only — not generally available. Status: Research preview, gated. Available only to Project Glasswing partners (12 founding orgs) and 40+ critical-infrastructure organizations. Anthropic states no general public release is currently planned. Pricing: $25 input / $125 output per million tokens — research-grade, not consumer-grade. 01 — What it is A model trained for vulnerability research . Mythos is the first publicly named Claude model specialized for a single research domain: defensive cybersecurity. It identifies zero-day vulnerabilities in operating systems, web browsers, and critical software, and can autonomously discover and exploit security flaws with minimal human guidance. Anthropic positions it as a tool for the defensive side of the AI-era security arms race. The most-quoted finding from the launch announcement: Mythos uncovered a 27-year vulnerability in OpenBSD and a 16-year flaw in FFmpeg that automated testing had encountered five million times without detecting. The number is intended to dramatize the capability gap; the underlying point is that pre-Mythos automated testing had a ceiling, and this model breaks it. 02 — Benchmarks How it compares. Anthropic published four benchmarks at launch, each comparing Mythos to Claude Opus 4.6: CyberGym 83.1% Mythos vs. 66.6% Opus 4.6. Vulnerability reproduction. The headline number. SWE-bench Verified 93.9% Mythos vs. 80.8% Opus 4.6. General software-engineering tasks. SWE-bench Pro 77.8% Mythos vs. 53.4% Opus 4.6. Harder professional engineering benchmark. Terminal-Bench 2.0 82.0% Mythos vs. 65.4% Opus 4.6. Terminal-driven agentic tasks. Real-world finds Thousands of high-severity vulnerabilities across every major OS and browser; specific finds include OpenBSD (27 yrs old) and FFmpeg (16 yrs). Pricing $25 / $125 per million input/output tokens. Roughly 5× Opus 4.7’s rate — reflects the research-tier positioning. 03 — Project Glasswing The launch vehicle . Mythos didn’t ship as a product. It shipped as the engine of an industry initiative. Project Glasswing is a 12-org coalition launched alongside it — named for the glasswing butterfly, the “hidden vulnerabilities and transparency in defense” metaphor. The founders: Amazon Web Services · Anthropic · Apple · Broadcom · Cisco · CrowdStrike · Google · JPMorgan Chase · Linux Foundation · Microsoft · NVIDIA · Palo Alto Networks. Plus 40+ additional critical-infrastructure organizations with access. The stated goal: get Mythos-class capability into defenders’ hands before attackers reach parity. Anthropic also committed: $100M in model-usage credits for participating researchers, $2.5M to Alpha-Omega/OpenSSF (Linux Foundation), and $1.5M to the Apache Software Foundation. There’s a 90-day public-reporting cycle on findings and fixed vulnerabilities. 04 — What to watch for next Where this is going. GA timeline — Anthropic explicitly says no public release planned currently, but the framing (“Mythos-class”, “eventual broader deployment”) suggests the architecture will surface in future Opus / Sonnet models or as a paid research tier. The 90-day reports — First public Glasswing findings due ~July 2026. These will tell us how the capability is being used in the wild. Government coordination — Anthropic has flagged ongoing discussions with national-security regulators. Watch for export-control or licensing news. Defender / attacker delta — CrowdStrike CTO Elia Zaitsev: “The window between discovery and exploitation has collapsed — minutes with AI.” The race condition is the unwritten subtext of every Mythos announcement. Apache & Linux Foundation reports — The recipient orgs will be among the first to publish findings; their next quarterly security disclosures will be informative. 05 — Practical takeaways What this means for builders. If you’re not in Glasswing, you can’t use Mythos directly. Access is gated, invitation-only, and applications are not open. For defensive work that doesn’t need Mythos: Opus 4.7 with the Claude Code harness covers most security-research workflows at $5/$25 per million. Watch the SWE-bench delta. Mythos’s 93.9% on SWE-bench Verified vs. Opus 4.6’s 80.8% suggests the underlying training recipe will leak into next-generation general models. Pricing pressure will follow. Disclosure hygiene matters more, not less. If thousands of pre-existing vulnerabilities are about to be discovered and patched in a 90-day public cycle, your patching cadence is no longer a luxury. Long-running agentic primitives — the original speculation about Mythos as a “persistent collaborator” was wrong; that work is now visible under Managed Agents and Cowork , not Mythos. 06 — Sources Read it from Anthropic . anthropic.com/glasswing — primary launch announcement platform.claude.com/docs/en/release-notes — April 7, 2026 release-notes entry anthropic.com/news — ongoing announcements; the “Mythos preview” link in the footer points to the Glasswing page Last refreshed 2026-05-08 after the Mythos watcher (cron daily 06:15 UTC, dashboard at wholetech.com/admin/mythos-watcher/ ) detected the announcement. More on this site Related products . Every Anthropic surface has its own page on this guide. Claude Code agent in your terminal Claude API build on top Agent SDK build agents MCP tool protocol Skills slash commands Artifacts live previews Projects workspaces Files API upload · cite Memory persistent Tool Use function calling Computer Use screen control Batch API 50% cheaper Citations grounded Prompt Caching 90% off Extended Thinking deep reason Managed Agents cloud · preview Claude Cowork agentic desktop Claude Design prototypes · slides --- ## Hello, Claude. — Install Claude Code from scratch URL: https://claude.wholetech.com/newby/ Hello, Claude. — Install Claude Code from scratch Newby Guide · install Claude Code from scratch Hello, Claude . A clear, step-by-step tutorial for installing Claude Code on a Windows PC. Written for people who have never opened a terminal before. Six steps, about fifteen minutes, no prior experience required. ("Hello, World" is the first program every coder writes. This is the human version — same idea, with help.) Total time: ~15 minutes Cost: free to start Computer: any Windows PC Skill needed: can you click "Next"? What's Claude Code , and why install it? Claude Code is Claude that runs in a small terminal window on your computer. Same Claude as the chat at claude.ai — but with new abilities. The web chat can answer questions. Claude Code can also read and write files on your machine, run commands, work step-by-step on real tasks across many turns, and remember context . If you've ever wanted Claude to do something, not just describe how to do it, this is the version that does that. You don't need to be a programmer. People use Claude Code to organize folders, edit documents, clean up photo libraries, manage receipts, write blog posts that span multiple files, automate repeating chores. The terminal looks intimidating; the experience is just chat. Just want to chat? If reading and writing files on your computer isn't useful to you, the simpler path is to skip this and use claude.ai in your browser. Same Claude, no install. The six steps Each step is one thing to download, click, or paste. If something fails, the troubleshooting section below has the fix. In a hurry? There's now a one-liner. Anthropic now recommends a native installer — one line in PowerShell, no Node, no npm, ~30 seconds: irm https://claude.ai/install.ps1 | iex Open PowerShell (Win key → type "powershell" → Enter), paste, hit Enter, then type claude . Jump to the Quick Install section for a fuller walk-through. The six-step Node/npm path below still works and is the gentler walk-through for first-time terminal users. Install Node.js ~3 min Node.js is the engine that runs Claude Code. You install it once and never think about it again. Click the green button below. It opens nodejs.org in a new tab. The page shows two big download buttons side by side. Click the LEFT one — the one labeled LTS , with the words "Recommended For Most Users" underneath. (The right one is the newest version, which is fine for power users but isn't what we want here.) Run the file you just downloaded. Click Next through every screen and accept all defaults. Late in the installer, you may see a checkbox labeled " Automatically install the necessary tools… " — leave it unchecked . You don't need it. Click Next , Install , then Finish . Open nodejs.org → Install Git for Windows ~5 min Git for Windows comes bundled with a terminal program called Git Bash . That's the window where Claude Code will live. We're installing Git mostly to get Git Bash — you don't need to learn Git itself. Click the green button below. It opens git-scm.com in a new tab. The site shows a download for your system. Click it. Run the installer. Heads-up: this installer has roughly a dozen screens with technical-looking choices (default editor, branch name, line endings, terminal emulator, etc.). Don't change anything — keep clicking Next. Every default is correct for what we're doing. At the end, click Install , wait for the progress bar, then Finish . You can uncheck "View Release Notes" before clicking Finish. Open git-scm.com → Open Git Bash ~30 sec Time to meet the terminal. Don't worry — it's just a window where you paste things. Press the Win key on your keyboard. The Start menu opens. Type git bash . Click the Git Bash result. A small black-or-dark window opens with a blinking cursor. Leave this window open for the rest of the steps. Make the text bigger first. Right-click the title bar of the Git Bash window → Properties → Font . Pick a font size around 16 or 18. Click OK . Much easier on the eyes. Install Claude Code ~2 min ⚠ Quick check before pasting The npm command in this step comes bundled inside the Node.js installer from step 1 — there is no separate npm download, and you cannot skip step 1. If you did skip it, you'll see bash: npm: command not found . Verify in Git Bash: type npm --version and press Enter . If it prints a number (like 10.8.2 ), continue below. If it says "command not found" , go back and finish step 1, then close and reopen Git Bash — PATH won't refresh in an existing window. Copy the line below, paste it into your Git Bash window, press Enter . To paste in Git Bash, right-click anywhere inside the window — or use Shift + Insert . Plain Ctrl + V doesn't work in Git Bash. npm install -g @anthropic-ai/claude-code What you'll see next, in order: A pause of 5–30 seconds where nothing seems to happen. That's normal. npm is contacting the package server. A wave of yellow npm warn lines about deprecated packages. These warnings are normal. Nothing is broken. They scroll past quickly. Some lines about "added" and "audited" packages. The $ prompt comes back on a fresh line. That means the install finished. The result will look something like this: MINGW64:/c/Users/you $ npm install -g @anthropic-ai/claude-code npm warn deprecated @some-package@1.2.3: this version is deprecated npm warn deprecated other-thing@4.5.6: please upgrade ...several more lines like this... added 287 packages in 1m 23s 42 packages are looking for funding run `npm fund` for details $ █ If the prompt comes back without the word error in red anywhere, you're done with this step. If you DO see "error" in red, jump to the troubleshooting section below. Sign in ~3 min Type the word below into Git Bash and press Enter : claude On your first run, Claude Code shows a few setup screens before the chat opens. Roughly in this order: Theme picker. Pick the colors you want. Use ↑ and ↓ arrow keys to highlight a choice, then Enter . (Dark Mode is a safe default.) Sign-in method. Choose the option labeled "Claude account" or "Anthropic Console" . Do NOT pick "API key" — you don't have one and don't need one. Browser opens. A web page loads automatically. Sign in with Google, email, or whichever sign-in you prefer. The page will say "you can return to your terminal." Switch back to Git Bash. Click its icon in your taskbar. It was waiting for you. Now you'll see a welcome message and a prompt where you can type to Claude. How to navigate these setup screens: arrow keys ( ↑ ↓ ) move the highlight, Enter picks. Don't try to type the option name — it won't work. There's no mouse in the terminal. After all the setup, the screen settles into something like this: MINGW64:/c/Users/you ╭───────────────────────────────────╮ │ ✻ Welcome to Claude Code │ │ Type your message and press Enter │ ╰───────────────────────────────────╯ > █ You only do all of this once. From now on, just type claude in any Git Bash window and you're straight back in. Try your first prompt ~3 min Claude Code is now waiting for input. Type something normal — not a "prompt," just a sentence — and press Enter : What can you do that the chat at claude.ai can't? Claude will reply right in your terminal. You can keep typing follow-up messages. Now give it a real task that touches your computer: Make a folder called "claude-test" on my Desktop, and put a file in it called hello.txt that says "Hello, Claude." The most important thing to understand: the permission prompt Before Claude Code touches anything — creating a file, running a command, editing your work — it pauses and asks. The screen looks something like this: MINGW64:/c/Users/you ● I'll create a folder claude-test on your Desktop and write a file hello.txt inside it. ┌─────────────────────────────────────────────────┐ │ Allow this action? │ │ │ │ ❯ Yes │ │ Yes, and don't ask again for similar actions │ │ No, and tell Claude what to do differently │ └─────────────────────────────────────────────────┘ Three rules for these prompts: Use arrow keys ( ↑ ↓ ) to move the highlight up and down. Don't try typing "y" or "yes" — the prompt ignores typing. Press Enter to confirm whichever option is highlighted. Read what it says first. The text above the prompt tells you exactly what Claude is about to do. Read it. If it's not what you wanted, pick the third option ("No, and tell Claude what to do differently") and explain. Pick Yes the first few times so you can see what happens. Switch to your Desktop. The folder and file appear. That's the part the web chat at claude.ai can't do. The middle option ("Yes, and don't ask again…") is a time-saver, not a free pass. Use it when you've started a clearly bounded task (e.g., "rename 200 photos") and don't want 200 separate confirmations. It only applies to the current Claude Code session — the next time you start claude , all permissions reset. Quick install — three steps The path Anthropic now recommends. Native installer, no Node, no npm. Self-updates in the background. Works on any Windows 10 or 11. Open PowerShell ~10 sec PowerShell is built into every Windows 10/11 PC. Nothing to install. Press the Win key. Type powershell . Click the Windows PowerShell result. A blue-or-dark window opens with a PS C:\Users\you> prompt. Leave it open. Paste the install command ~30 sec Right-click anywhere in the PowerShell window to paste. Then press Enter . irm https://claude.ai/install.ps1 | iex You'll see a few lines about downloading and installing. When the PS C:\ prompt comes back, the install is done. Optional but recommended: install Git for Windows as well. Claude Code uses Git Bash for its shell tool when available; without it, it falls back to PowerShell, which is fine but slightly less full-featured. Alternative installers: if you have WinGet set up, run winget install Anthropic.ClaudeCode instead. Same result. Run claude ~2 min In the same PowerShell window, type: claude First run opens your browser to sign in (use the same Anthropic account you'd use at claude.ai). Approve, return to PowerShell, and the chat prompt appears. From now on, just type claude in any PowerShell or Git Bash window to start. Why two paths in this guide? The six-step Node/npm walkthrough above was the original install method and walks brand-new terminal users through every click. The three-step native installer here is what Anthropic now recommends — faster, fewer dependencies, self-updating. Both end up with the same working claude command. Pick the one that feels easier. What can you actually do with this? Anything that involves files, folders, or repetitive computer chores. A few starting ideas: 📁 Sort a messy folder "Look at my Downloads folder. Move all the PDFs into a folder called 'pdfs', all the images into 'images', and tell me what's left." 📝 Edit a document "Open my draft.txt, fix the grammar, tighten the language, and save it as draft-v2.txt." 📊 Clean up a spreadsheet "Open expenses.csv, group rows by category, add a totals row at the bottom, and save it back." 📧 Batch-rename photos "Rename all the IMG_xxxx.jpg files in this folder to 'vacation-001.jpg', 'vacation-002.jpg', and so on." 📚 Write across many files "Write a 5-chapter outline for my book idea. Put each chapter in its own .md file in a folder called 'book'." ⚙️ Automate a chore "Every time I save a file in my 'screenshots' folder, rename it from 'Screenshot 2026-04-28...' to today's date and move it into a dated subfolder." First-day commands worth knowing Inside Claude Code, anything that starts with a slash is a command for the program (not a message to Claude). The handful below cover most of what you'll need on day one: /help Show every built-in command. /clear Start a fresh conversation. Clears the current context so Claude isn't distracted by what you talked about earlier. /cost Show usage information for the current session. /login Sign in again, or switch accounts. /exit Close Claude Code. (Or just close the Git Bash window.) One terminal trick worth learning Before you type claude , you can move into a folder you want to work in. That folder becomes Claude's "working directory" — the place it'll create and edit files unless you tell it otherwise. Example: cd Desktop/my-book-project claude Now Claude operates inside that folder. To go back up one level, type cd .. . To go to your home folder, just type cd by itself. That's 90% of folder navigation. When something doesn't work "npm: command not found" or "node: command not found" Node.js installed but Git Bash didn't pick it up. Close Git Bash and open it again . New terminal windows see the new Node.js install; older ones don't. If that doesn't fix it, restart the computer and try once more. The npm install line shows a long red error Almost always a network or permission issue. Try these in order: Run Git Bash as Administrator (right-click Git Bash in the Start menu → Run as administrator ) and try the install line again. If you're on a corporate network or VPN, that's blocking the download. Try from a home network. If neither helps, copy the red text and search for it online. The error message itself usually tells you exactly what's wrong. The browser opened the sign-in page but Git Bash seems stuck That's normal. After you sign in on the web page, you have to switch back to the Git Bash window — it's been waiting for you. Look for it in your taskbar. Claude Code keeps asking permission for everything Good. That's the safety design. Each "yes/no" prompt is Claude telling you exactly what it's about to do before it does it. After you trust it for a particular task, you can pick "yes, and don't ask again for this kind of thing." One real caveat about Claude (the model, not the install): it can sound very confident even when it's wrong — especially about specific names, dates, statistics, and current events. For anything that matters (a medical decision, a legal filing, a number going into a tax return), treat its first answer as a smart starting point and verify with a primary source. A few real-world habits worth picking up Just talk. Don't write a "prompt." Beginners often think there's a magic phrasing. There isn't. Talk to Claude the way you'd talk to a smart friend who's missing context. "Hey, I'm trying to figure out X. Here's what I know, here's what I'm stuck on. What would you do?" works as well as anything fancier. Show, don't describe. If you have a file, point at it: "Read my-essay.txt and tell me what you think." If you have an example you want imitated, paste it in. Claude is much better with concrete examples than abstract descriptions. Course-correct freely. "That's close, but make it shorter." "Try again, but more formal." "Actually, the situation is different: ..." Claude isn't graded on its first answer — it expects to iterate. Use that. Start a fresh chat for unrelated tasks. Type /clear when you switch from "edit my essay" to "sort my Downloads folder." Old context can confuse new tasks. When you're ready for more You don't need any of these on day one. They're here for the moment you find yourself thinking "okay, I want to go further." Claude Desktop & mobile The chat-only version of Claude as a native app. Useful alongside Claude Code — one for chatting, one for getting things done. claude.ai/download Anthropic's official docs The full reference for Claude Code — every command, every setting, every advanced feature. Written for both new and experienced users. docs.anthropic.com The wall workstation build How the WholeTech network put Claude on a 98-inch TV in the living room. Full reproducible build plan. claude.wholetech.com/computers/ccmidmele/ The rest of the network WholeTech's other projects — web dev notes, sysadmin write-ups, ongoing builds. wholetech.com That's the whole tutorial. Install Node, install Git, paste one line, sign in, type a sentence. Welcome to Claude. Start with Node.js → --- ## Hello, Claude. — Install Claude Code on Linux & Unix URL: https://claude.wholetech.com/newby-linux/ Hello, Claude. — Install Claude Code on Linux & Unix Linux & Unix · Beginner to Builder Hello, Claude . A clear, step-by-step tutorial for installing Claude Code on Linux and Unix systems. Works on Ubuntu, Debian, Fedora, Arch, openSUSE, Alpine, WSL2, and the BSDs. About five minutes if Node is already there. If you've used a terminal before, this page is everything you need. Time: ~5–10 min Steps: 5 Prereqs: Node 18+, npm Cost: Free tier available What you're about to install Claude Code is Anthropic's terminal app. Once it's running, you can type plain English and Claude will read, write, and run code on your machine — refactor a project, organize files, query a database, ship a deploy. It's the same Claude as the web app, but with hands. Three things make this short: most Linux users already have a terminal they like, package managers handle the dependencies, and the install itself is a single npm command. The fastest install — one line Anthropic's recommended install. No Node required. Self-updates. Works on macOS, Linux, and WSL. curl -fsSL https://claude.ai/install.sh | bash Then run claude , sign in via the browser link it prints, and you're in. That's the whole install. Alternatives, in order of preference: Homebrew (Linuxbrew or macOS): brew install --cask claude-code Debian / Ubuntu (apt): see Anthropic's setup guide for the apt repo one-liner Fedora / RHEL (dnf): same setup guide for the dnf repo Alpine (apk): same setup guide for the apk repo If claude --version works after the install, you're done. The five-step Node/npm walk-through below is the original install path and still works — useful if you can't run the native installer for some reason. Alternative — the five-step npm path Install Node.js (version 18 or newer) ~2 min Claude Code needs Node 18+. Pick the row for your distro. If you already have node --version showing 18+, skip to step 2. Ubuntu / Debian / WSL apt curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash - sudo apt-get install -y nodejs Fedora / RHEL / CentOS dnf sudo dnf install -y nodejs npm Arch / Manjaro pacman sudo pacman -S nodejs npm openSUSE zypper sudo zypper install nodejs22 npm22 Alpine apk sudo apk add nodejs npm FreeBSD pkg sudo pkg install node npm Recommended for most users — nvm. If you'd rather manage Node versions per-project, install nvm : curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash # restart shell, then: nvm install 22 nvm use 22 Verify: node --version should print v18.x or higher (we recommend v22). Install Claude Code ~30 sec One command, global install via npm: sudo npm install -g @anthropic-ai/claude-code If you used nvm , drop the sudo : npm install -g @anthropic-ai/claude-code Verify: claude --version should print a version number. Permission errors with npm and sudo? The cleanest fix is nvm (see step 1). It installs Node into your home directory, so global npm packages don't need root. Sign in ~1 min Run: claude The first time, it opens your browser for sign-in. Use the same Anthropic account you'd use at claude.ai . Approve, return to your terminal — you'll see the Claude prompt. If you're on a headless server (no browser), Claude prints a URL you can open from another machine. Sign in there; the terminal session picks up the credentials automatically. Run your first prompt ~30 sec Try a small, safe one to confirm everything works: > tell me what files are in this directory and what each one is for Claude reads, summarizes, and waits for the next thing. Try a real one: > create a simple Python script that prints today's weather for Austin, TX Claude proposes the file, asks before writing it, runs it, shows the output. Learn the slash commands ~1 min Type /help to see them all. The handful worth knowing on day one: /help Lists every built-in command /init Generates a CLAUDE.md describing the current codebase /review Reviews the current branch's pending changes /clear Clears history, resets the context window /cost Shows what this session has spent /schedule Schedules a recurring agent on a cron /exit Quit If something goes wrong npm: command not found Node didn't install correctly, or your shell hasn't reloaded. Close and reopen the terminal, then re-run node --version . If still missing, re-run the install command for your distro. EACCES or permission errors during npm install -g You're hitting npm's classic global-install permission problem. Two fixes: Best: install nvm (step 1 callout) and let it manage Node in your home dir. Quick: reconfigure npm's global prefix: mkdir ~/.npm-global npm config set prefix '~/.npm-global' echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc source ~/.bashrc Then re-run the install without sudo . Browser doesn't open on a headless box Claude prints a sign-in URL. Copy it, open it on any machine with a browser, sign in. The terminal that printed the URL detects success and continues. WSL2 — works but feels weird WSL2 is fine. A few notes: file edits Claude makes are real Linux files (use /mnt/c/... if you want to touch the Windows side). Browser auth opens your Windows default browser; sign in there. Corporate proxy / firewall Set HTTPS_PROXY in your shell before running Claude. Most enterprise setups also need npm's proxy: npm config set proxy http://... and npm config set https-proxy http://... . What's next Read the products page for a tour of every Anthropic surface — API, Agent SDK, MCP, Skills, Memory, Computer Use. Read the design page to learn how Claude turns sketches and screenshots into shipped code. Read the integrations page to wire Claude into Drive, Gmail, Slack, GitHub, n8n, and the rest of your stack. Open a project directory you actually care about and type claude . Pick something small. Don't overthink the first task. The fastest learning curve is doing real work. Pick something annoying you've been putting off — renaming 200 files, sorting a messy folder, fixing a flaky shell script — and let Claude do it while you watch. The shape of when-to-use-it gets obvious in about an hour. --- ## Hello, Claude. — Install Claude Code on a Mac URL: https://claude.wholetech.com/newby-mac/ Hello, Claude. — Install Claude Code on a Mac Newby Guide for Mac · install Claude Code from scratch Hello, Claude . A clear, step-by-step tutorial for installing Claude Code on a Mac. Written for people who have never opened the Terminal app before. Five steps, about ten minutes, no prior experience required. ("Hello, World" is the first program every coder writes. This is the human version — same idea, with help.) Total time: ~10 minutes Cost: free to start Computer: any Mac (Intel or Apple Silicon) Skill needed: can you click a button? What's Claude Code , and why install it? Claude Code is Claude that runs in a small Terminal window on your Mac. Same Claude as the chat at claude.ai — but with new abilities. The web chat can answer questions. Claude Code can also read and write files on your machine, run commands, work step-by-step on real tasks across many turns, and remember context . If you've ever wanted Claude to do something, not just describe how to do it, this is the version that does that. You don't need to be a programmer. People use Claude Code to organize folders, edit documents, clean up photo libraries, manage receipts, write blog posts that span multiple files, automate repeating chores. The Terminal looks intimidating; the experience is just chat. Just want to chat? If reading and writing files on your Mac isn't useful to you, the simpler path is to skip this and use claude.ai in your browser. Same Claude, no install. On Windows instead? The Windows version of this guide is at claude.wholetech.com/newby/ . The five steps Each step is one thing to download, click, or paste. Mac is friendlier than Windows here — Terminal is already on your Mac, and Git is too. So this is shorter. In a hurry? There's now a one-liner. Anthropic now recommends a native installer — one line in Terminal, no Node, no npm: curl -fsSL https://claude.ai/install.sh | bash Or via Homebrew: brew install --cask claude-code . Jump to the Quick Install section for the walk-through. The five-step Node/npm path below still works and is the gentler walk-through for first-time Terminal users. Install Node.js ~3 min Node.js is the engine that runs Claude Code. You install it once and never think about it again. Click the green button below. It opens nodejs.org in a new tab. The page shows two big download buttons side by side. Click the LEFT one — the one labeled LTS , with the words "Recommended For Most Users" underneath. The page automatically detects whether your Mac is Intel or Apple Silicon and gives you the right installer. Open the downloaded file (it ends in .pkg ). It launches the macOS installer. Click Continue through every screen. When it asks where to install, accept the default. You may be asked for your Mac's password — that's just macOS confirming the install. Click Install Software , wait for the progress bar, then Close . Open nodejs.org → Open Terminal ~30 sec Time to meet the Terminal. Don't worry — it's just a window where you paste things. Press Cmd + Space on your keyboard. Spotlight Search opens at the top of your screen. Type terminal . Press Enter . A small dark window opens with a blinking cursor and a line that looks something like username@your-mac ~ % . Leave this window open for the rest of the steps. Make the text bigger first. With Terminal active, press Cmd + + a few times to enlarge the text. Or open Terminal → Settings from the menu bar and pick a larger font under the Profiles tab. Much easier on the eyes. Where is Terminal hiding? If you'd rather find it the long way: Finder → Applications → Utilities → Terminal . Drag it to your Dock if you'll use it often. Install Claude Code ~2 min Copy the line below, paste it into your Terminal window, press Enter . To paste in Terminal on a Mac, just use Cmd + V the way you would anywhere else. npm install -g @anthropic-ai/claude-code What you'll see next, in order: A pause of 5–30 seconds where nothing seems to happen. That's normal. npm is contacting the package server. A wave of yellow npm warn lines about deprecated packages. These warnings are normal. Nothing is broken. They scroll past quickly. Some lines about "added" and "audited" packages. The % prompt comes back on a fresh line. That means the install finished. The result will look something like this: you@your-mac — -zsh % npm install -g @anthropic-ai/claude-code npm warn deprecated @some-package@1.2.3: this version is deprecated npm warn deprecated other-thing@4.5.6: please upgrade ...several more lines like this... added 287 packages in 1m 23s 42 packages are looking for funding run `npm fund` for details % █ If the prompt comes back without the word error in red anywhere, you're done with this step. If you DO see "error" in red, jump to the troubleshooting section below. If you see "EACCES: permission denied": macOS sometimes objects to global npm installs. The fix is sudo npm install -g @anthropic-ai/claude-code — it'll prompt for your Mac password and install with admin privileges. (See troubleshooting below for cleaner long-term setups.) Sign in ~3 min Type the word below into Terminal and press Enter : claude On your first run, Claude Code shows a few setup screens before the chat opens. Roughly in this order: Theme picker. Pick the colors you want. Use ↑ and ↓ arrow keys to highlight a choice, then Enter . (Dark Mode is a safe default.) Sign-in method. Choose the option labeled "Claude account" or "Anthropic Console" . Do NOT pick "API key" — you don't have one and don't need one. Browser opens. A web page loads automatically. Sign in with Google, email, or whichever sign-in you prefer. The page will say "you can return to your terminal." Switch back to Terminal. Press Cmd + Tab to flip back, or click the Terminal icon in the Dock. It was waiting for you. Now you'll see a welcome message and a prompt where you can type to Claude. How to navigate these setup screens: arrow keys ( ↑ ↓ ) move the highlight, Enter picks. Don't try to type the option name — it won't work. There's no mouse in the Terminal. After all the setup, the screen settles into something like this: you@your-mac — claude ╭───────────────────────────────────╮ │ ✻ Welcome to Claude Code │ │ Type your message and press Enter │ ╰───────────────────────────────────╯ > █ You only do all of this once. From now on, just type claude in any Terminal window and you're straight back in. Try your first prompt ~3 min Claude Code is now waiting for input. Type something normal — not a "prompt," just a sentence — and press Enter : What can you do that the chat at claude.ai can't? Claude will reply right in your Terminal. You can keep typing follow-up messages. Now give it a real task that touches your Mac: Make a folder called "claude-test" on my Desktop, and put a file in it called hello.txt that says "Hello, Claude." The most important thing to understand: the permission prompt Before Claude Code touches anything — creating a file, running a command, editing your work — it pauses and asks. The screen looks something like this: you@your-mac — claude ● I'll create a folder claude-test on your Desktop and write a file hello.txt inside it. ┌─────────────────────────────────────────────────┐ │ Allow this action? │ │ │ │ ❯ Yes │ │ Yes, and don't ask again for similar actions │ │ No, and tell Claude what to do differently │ └─────────────────────────────────────────────────┘ Three rules for these prompts: Use arrow keys ( ↑ ↓ ) to move the highlight up and down. Don't try typing "y" or "yes" — the prompt ignores typing. Press Enter to confirm whichever option is highlighted. Read what it says first. The text above the prompt tells you exactly what Claude is about to do. Read it. If it's not what you wanted, pick the third option ("No, and tell Claude what to do differently") and explain. Pick Yes the first few times so you can see what happens. Switch to your Desktop. The folder and file appear. That's the part the web chat at claude.ai can't do. The middle option ("Yes, and don't ask again…") is a time-saver, not a free pass. Use it when you've started a clearly bounded task (e.g., "rename 200 photos") and don't want 200 separate confirmations. It only applies to the current Claude Code session — the next time you start claude , all permissions reset. Quick install — two steps The path Anthropic now recommends. Native installer, no Node, no npm. Self-updates in the background. Open Terminal and paste the install command ~30 sec Open Terminal ( Cmd + Space , type terminal , Enter ). Then paste: curl -fsSL https://claude.ai/install.sh | bash Hit Enter . You'll see a few download/install lines. When the % prompt comes back, the install is done. Prefer Homebrew? If you already have Homebrew , run brew install --cask claude-code instead. Same result. (Homebrew installs don't auto-update — run brew upgrade claude-code periodically.) Run claude ~2 min In the same Terminal window: claude First run opens your browser to sign in. Use the same Anthropic account you'd use at claude.ai. Approve, return to Terminal, and the chat prompt appears. From now on, just type claude in any Terminal window to start. Why two paths in this guide? The five-step Node/npm walkthrough above was the original install method and walks brand-new Terminal users through every click. The two-step native installer here is what Anthropic now recommends — faster, fewer dependencies, self-updating. Both end up with the same working claude command. Pick the one that feels easier. What can you actually do with this? Anything that involves files, folders, or repetitive computer chores. A few starting ideas: 📁 Sort a messy folder "Look at my Downloads folder. Move all the PDFs into a folder called 'pdfs', all the images into 'images', and tell me what's left." 📝 Edit a document "Open my draft.txt, fix the grammar, tighten the language, and save it as draft-v2.txt." 📊 Clean up a spreadsheet "Open expenses.csv, group rows by category, add a totals row at the bottom, and save it back." 📷 Sort your Photos "Look at the screenshots in my Desktop folder. Move ones from before 2025 into 'old-screenshots', and rename the rest by date." 📚 Write across many files "Write a 5-chapter outline for my book idea. Put each chapter in its own .md file in a folder called 'book'." ⚙️ Automate a chore "Every time I save a file in my 'screenshots' folder, rename it from 'Screenshot 2026-04-28...' to today's date and move it into a dated subfolder." First-day commands worth knowing Inside Claude Code, anything that starts with a slash is a command for the program (not a message to Claude). The handful below cover most of what you'll need on day one: /help Show every built-in command. /clear Start a fresh conversation. Clears the current context so Claude isn't distracted by what you talked about earlier. /cost Show usage information for the current session. /login Sign in again, or switch accounts. /exit Close Claude Code. (Or just press Cmd + Q to quit Terminal entirely.) One terminal trick worth learning Before you type claude , you can move into a folder you want to work in. That folder becomes Claude's "working directory" — the place it'll create and edit files unless you tell it otherwise. Example: cd Desktop/my-book-project claude Now Claude operates inside that folder. To go back up one level, type cd .. . To go to your home folder, just type cd by itself. That's 90% of folder navigation. Mac shortcut: in Finder, you can drag a folder into Terminal and Terminal will paste its full path. Combine with cd — type cd (with trailing space), then drag the folder. Press Enter . When something doesn't work "npm: command not found" or "node: command not found" Node.js installed but Terminal didn't pick it up. Quit Terminal completely ( Cmd + Q ) and open it again. New Terminal windows see the new Node.js install; older ones don't. If that doesn't fix it, restart the Mac and try once more. "EACCES: permission denied" during npm install macOS doesn't let regular users write to /usr/local on some setups. The quick fix: Quick fix: run sudo npm install -g @anthropic-ai/claude-code . It'll prompt for your Mac password and use admin privileges to write the files. Better long-term: install nvm (Node Version Manager), which puts Node in your home directory so global npm installs never need sudo again. One-line install on the nvm README. The npm install line shows a long red error Almost always a network issue. Try these in order: Check your internet. Refresh a webpage in Safari. Try the same line again. npm sometimes flakes. If you're on a corporate or school network with a firewall, the package server may be blocked. Switch to a personal hotspot for the install, then go back. The claude command works but won't sign in The browser window from step 4 closed before you finished. Go back to Terminal, type claude again, and try the sign-in flow once more. Where to go next Claude Desktop & mobile The chat-only version of Claude as a native app. Useful alongside Claude Code — one for chatting, one for getting things done. claude.ai/download Anthropic's official docs The full reference for Claude Code — every command, every setting, every advanced feature. Written for both new and experienced users. docs.anthropic.com The Windows version Same tutorial, but for Windows users (with Git Bash and the Windows installers). Useful if you have a second machine. claude.wholetech.com/newby/ The rest of the network WholeTech's other projects — web dev notes, sysadmin write-ups, ongoing builds. wholetech.com That's the whole tutorial. Install Node, open Terminal, paste one line, sign in, type a sentence. Welcome to Claude. Start with Node.js → --- ## Products & Surfaces — Claude on WholeTech URL: https://claude.wholetech.com/products/ Products & Surfaces — Claude on WholeTech home / products Section 02 Every Anthropic surface, on one page. Each section below is a self-contained answer to "what is this, why would I use it, and what are the steps?" — written so a beginner can follow and a builder can use it as a reference card. Every product also has its own dedicated deep page — links labelled " full page → ". Contents The models — Opus, Sonnet, Haiku Claude.ai (web & mobile) Claude Code · full page → Claude Cowork · full page → Claude Design · full page → Projects · full page → Artifacts · full page → API · full page → Agent SDK · full page → MCP — Model Context Protocol · full page → Skills · full page → Tool Use · full page → Computer Use · full page → Files API · full page → Memory · full page → Prompt Caching · full page → Extended Thinking · full page → Batch API · full page → Citations · full page → Vision & PDF input Managed Agents · full page → Mythos & the horizon · full page → 01 — Foundations The models shipping Everything below — the web app, the API, the agents — is powered by one of three models. They all do the same kinds of things. They differ on smarts, speed, and price. Pick a default, and override only when you need to. Model API ID Best for Vibes Opus 4.7 claude-opus-4-7 Hardest reasoning, agentic loops, design judgment, long autonomous runs The brain. Slowest, smartest, priciest. Sonnet 4.6 claude-sonnet-4-6 The everyday workhorse — coding, writing, research, most app workloads Balanced. Smart enough for almost anything. Haiku 4.5 claude-haiku-4-5-20251001 High-volume tasks: tagging, classification, summaries, fan-out, news pipelines Fast and cheap. Surprisingly capable. How to pick Default to Sonnet. For chat, code, and most building, Sonnet 4.6 is the right answer 80% of the time. Move up to Opus when you're stuck — a thorny refactor, a multi-step plan, design-quality judgment, or anything that needs to "really think." Move down to Haiku when you're going wide — thousands of items, repeated calls in a loop, or anything where the per-call price matters more than the per-call quality. Tip — pin the version. The dated IDs ( claude-haiku-4-5-20251001 ) are stable. The undated aliases ( claude-opus-4-7 ) follow the latest. For production code, pin the dated ID and upgrade on purpose. 02 — The web doorway Claude.ai — web & mobile shipping The chat app at claude.ai . No setup, no install — sign up, start typing. Mobile apps for iOS and Android share the same conversations. What it does best Plain conversation — research, writing, summarizing, brainstorming. Drag-and-drop documents, images, PDFs, even ZIPs of code. Live preview of generated UI, charts, and code via Artifacts . Group related work into Projects so context carries between conversations. Steps — start using Claude.ai Open claude.ai and sign up with email or Google. Free tier is generous; Pro ($20/mo) unlocks longer messages, more usage, and Projects. Type a question. The same way you'd ask a colleague. There is no special syntax. Drop in a file. Drag a PDF, image, or document into the chat. Claude reads it, you ask questions about it. Ask for an Artifact. Try "build me a one-page landing site for my coffee shop, brand color is forest green" — a live preview pane opens on the right. Save the conversation as a Project if you'll come back to it. Projects keep instructions and files persistent across chats. 03 — The terminal doorway Claude Code — agent on your machine shipping Anthropic's CLI tool. Same Claude as the web app, but it runs in your terminal and can act on your computer — read files, edit them, run commands, install dependencies, push commits, query databases. Available as a CLI, a desktop app, a web app at claude.ai/code , and as IDE plugins for VS Code and JetBrains. What it does best Multi-step coding work: "refactor this file, run the tests, fix what breaks." File and folder operations: "rename every photo in this directory to YYYY-MM-DD format." Self-running agents that loop until done — kick it off, walk away, come back to a finished task. Lives in the project directory it's working in, so it has the right context automatically. Steps — install in 5 minutes Pick the right walk-through. Windows users: /newby . Mac users: /newby-mac . Both are written for people who have never opened a terminal. Or the one-liner if you've done this before — Anthropic's native installer (recommended): macOS/Linux/WSL curl -fsSL https://claude.ai/install.sh | bash · Windows PowerShell irm https://claude.ai/install.ps1 | iex · Homebrew brew install --cask claude-code · WinGet winget install Anthropic.ClaudeCode . Run claude in any folder. It prompts you to log in via browser the first time. Type your task in plain English. "organize this messy downloads folder by file type" — Claude shows what it'll do, you approve, it runs. Where Claude Code runs CLI (terminal) The original. Runs anywhere a terminal does — macOS, Linux, Windows (PowerShell or Git Bash). Best for power use. Desktop app Mac and Windows native apps with a friendlier UI. Same engine. Web app — claude.ai/code No install. Cloud sandbox. Great for trying it out and for ChromeOS / iPad. IDE plugins VS Code, Cursor, JetBrains. Adds a panel that shares context with your editor. The slash-commands worth knowing Command What it does /help Lists every built-in command. /clear Clears conversation history (and resets the context window). /cost Shows what this session has spent. /init Generates a CLAUDE.md file documenting the current codebase. /review Reviews the current branch's pending changes. /loop m Runs a command on a recurring interval. /schedule Schedules a remote agent on a cron. /exit Quit. 04 — Workspaces Projects shipping A Project on claude.ai is a folder for related conversations. It keeps a system instruction (always sent), a small set of pinned files, and the chat history together so Claude doesn't start from zero every time. Steps — make your first Project Click "Projects" in the sidebar on claude.ai. (Pro/Team plans only.) Name the project after the recurring task — "Homework: AP Bio", "Bnbhot copywriting", "Family genealogy". Add a system instruction. One paragraph telling Claude its role: "You are an editor for the bnbhot.com short-term-rental blog. Match the existing voice — practical, no fluff." Pin a few reference files. Style guide, brand sheet, last 3 finished pieces. Claude consults them automatically. Start chats inside the project. Each chat inherits the instructions and pinned files. When to use a Project vs a one-off chat: if you'll come back to this task in a week, make it a Project. If you're answering one question, just chat. 05 — The sketchbook Artifacts — live previews shipping When Claude builds you a webpage, a chart, a React component, or a Mermaid diagram, the result lands in a side panel — rendered live and editable. This is the single most useful design feature in the web app. See /design for a deeper recipe walkthrough. What can be an Artifact Single-file HTML pages (with embedded CSS + JS) — full landing pages, dashboards, calculators. React components with Tailwind, lucide-react icons, recharts. SVG diagrams, Mermaid flowcharts, mini-games. Markdown documents you'll publish elsewhere. Steps — build a one-pager in five minutes Open a fresh chat at claude.ai. Describe what you want in one paragraph: who it's for, what they should do next, what mood (warm? sharp? editorial?), what brand colors. Drop a reference if you have one — a screenshot of a site you like, a logo, a photo. Claude reads images. Iterate. "Make the hero taller, push the CTA above the fold, swap the green for #d97757." The Artifact updates in place. Hit the copy button at the top of the artifact panel and paste the HTML wherever you publish. 06 — Build on top Claude API shipping Direct programmatic access to the models. SDKs for Python, TypeScript, Java, Go, Ruby, .NET. Also reachable through Amazon Bedrock and Google Vertex if you need cloud-native deployment. Steps — your first API call Get a key at console.anthropic.com . Add a small balance ($5 is plenty to learn). Save it as an env var so it never lands in code: export ANTHROPIC_API_KEY=sk-ant-... (Mac/Linux) or setx ANTHROPIC_API_KEY "sk-ant-..." (Windows). Install the SDK: pip install anthropic or npm install @anthropic-ai/sdk . Send a message: import anthropic client = anthropic.Anthropic() msg = client.messages.create( model= "claude-sonnet-4-6" , max_tokens= 1024 , messages=[{ "role" : "user" , "content" : "Hello, Claude." }] ) print (msg.content[ 0 ].text) Always turn on prompt caching if you're sending the same system prompt or reference docs more than once — see Prompt Caching . It cuts the cost of repeated context by ~90%. 07 — Build agents Agent SDK shipping A higher-level library on top of the API for building agents — programs that loop, use tools, and pursue a goal until done. The SDK handles the loop, tool dispatch, error retries, file I/O, sub-agents, and context window management. You write the goal and the tools. What you get out of the box An agent loop that runs until it decides it's done (or hits a step budget). Built-in tools — file read/write, bash, web fetch — that you opt in or out of. Sub-agents, so a planner can spawn workers. Persistent memory and conversation state. The same harness Claude Code itself is built on. When to use the SDK vs. plain API Plain API — single shot, structured I/O, classification, completion. You control the prompt, you parse the answer. Agent SDK — multi-step work where Claude needs to read files, run code, make decisions, and iterate. You hand it a goal. Steps — first agent Install: pip install claude-agent-sdk (or the npm equivalent). Write a goal as a plain-English instruction: "Read every .md file in ./docs, find broken links, write a report to ./report.md." Pick the tools the agent is allowed to use (file tools yes, bash maybe, web fetch maybe). Run it. It loops, calls tools, reports back when done. 08 — The connector standard MCP — Model Context Protocol shipping An open protocol Anthropic built so Claude can talk to external systems — Drive, Gmail, Calendar, Slack, GitHub, your database, your in-house APIs. Each system runs a small "MCP server" that advertises what it can do. Claude (in the desktop app, in Claude Code, in custom apps) connects to the server and uses those abilities like built-in tools. Why it matters Before MCP, every integration was bespoke. After MCP, the same connector works in any compliant client. Anthropic, Google, OpenAI, and the major IDE makers all speak it. Steps — add an MCP server to Claude Code Pick a server. The official ones live at github.com/modelcontextprotocol/servers — Drive, Gmail, GitHub, Slack, Postgres, Filesystem, Brave Search, Puppeteer, and dozens more. Run claude mcp add and paste the install command from the server's README. Restart Claude Code. The new tools show up in /help . Use them in plain English: "search my Drive for the BBQ catering quote from last March" — Claude calls the Drive MCP server. Build your own. An MCP server is just a small program with a manifest. Python, Node, Go SDKs are official. If you have an internal API, wrapping it as MCP makes it instantly usable from any AI client. 09 — Reusable workflows Skills shipping A Skill is a packaged workflow that Claude can invoke on demand — a slash command ( /security-review , /loop , /schedule ) plus the prompt and tools that run when you call it. Built into Claude Code; bundled by Anthropic, distributed by plugin authors, or written by you. Where Skills come from Built-in — /init , /review , /security-review , /help . Plugins — frontend-design , claude-api , fewer-permission-prompts . Install via the plugin marketplace. Yours — drop a SKILL.md into ~/.claude/skills// and it's available everywhere. Steps — write your first Skill Create the folder: ~/.claude/skills/my-skill/ Write SKILL.md with frontmatter — name, description, when to trigger — and the body of the prompt. Reference any helper scripts in the same folder. Type /my-skill in any Claude Code session — Claude loads and runs it. 10 — Function calling Tool Use shipping A primitive on the API. You give Claude a list of tools (a name, a description, a JSON schema for the inputs). Claude decides when to call them and returns the calls structurally. You execute them in your code and return the results. What it's for Letting Claude query a database, hit your API, fetch a webpage, send an email — anything code-shaped. Forcing structured output: define a tool with a strict JSON schema and Claude responds in that shape. The building block under everything else — Agent SDK, MCP, Computer Use, Claude Code all use Tool Use under the hood. Steps — sketch a tool Describe the tool in JSON schema — name, what it does, what parameters it takes. Pass it in tools=[...] on the message create call. If Claude returns a tool_use block, run the tool yourself and return a tool_result block in the next message. Loop until Claude returns plain text — that's the final answer. 11 — Eyes and hands Computer Use beta A capability where Claude looks at screenshots and emits mouse + keyboard actions to drive a computer. You run a loop: capture the screen, send it to Claude, execute the actions Claude returns, repeat. Useful for automating apps that have no API. Realistic use cases Filling browser forms across sites that block scraping. Driving legacy desktop software during a migration. QA — visiting a list of pages and reporting what's broken. Steps — try it safely Run it inside a VM or container. Anthropic publishes a Docker reference image. Don't point it at your daily-driver desktop. Pull the reference container from ghcr.io/anthropics/anthropic-quickstarts . Set ANTHROPIC_API_KEY and start the container; it serves a web UI you can chat with. Give a small task first — "open Firefox and search for cat pictures" — to get a feel for it before pointing it at anything important. Treat it like a junior intern with admin rights. Sandbox first, give it the smallest scope it needs, and watch the first few runs. 12 — Persistent files Files API shipping Upload a file once, reference it by ID across many API calls. PDFs, images, CSVs, code archives. Saves you from re-uploading the same 200-page contract every time. Steps POST /v1/files with the file. Get back a file_id . Reference it in messages as {"type": "document", "source": {"type": "file", "file_id": "..."}} . Combine with prompt caching for big documents you'll consult repeatedly. 13 — Persistent context Memory shipping A capability that lets Claude remember facts about you and your work across conversations — in claude.ai, in Claude Code, and in apps you build with the SDK. Memory is file-based: human-readable notes under ~/.claude/projects//memory/ . What gets remembered User memories — who you are, your role, your setup. Feedback memories — corrections you made ("don't mock the database in tests"). Project memories — short-lived facts about ongoing work and deadlines. References — pointers to external systems ("bugs are tracked in Linear project INGEST"). Steps — manage it Trust the auto-save. When you correct Claude or share something durable, it writes a memory file. Inspect them — they're plain Markdown in ~/.claude/projects//memory/ . Edit or remove a memory directly when it goes stale; the file IS the source of truth. Say "forget X" in a session and Claude finds and removes the relevant entry. 14 — Spend less Prompt Caching shipping Mark part of your prompt as cacheable; Anthropic stores it on their servers for ~5 minutes. The next call that includes the same prefix pays roughly 10% of the normal input price. Often the biggest single cost lever in any Claude app. What to cache System prompts longer than a couple of paragraphs. Reference documents you consult repeatedly (pricing sheets, contracts, brand guides). Tool definitions on long-running agents. The first turn of a conversation when you'll likely keep talking. Steps Add cache_control: {"type": "ephemeral"} to the content block you want cached. Make calls within ~5 minutes of each other to keep the cache warm. Watch the response — cache_creation_input_tokens on the first call, cache_read_input_tokens on subsequent ones. 15 — Deeper reasoning Extended Thinking shipping A mode where Claude takes extra time to reason through a problem before answering. You see a "thinking" block in the response (collapsed by default) followed by the final answer. Trades latency and cost for quality on hard problems. When it earns its keep Multi-step math, proofs, or careful tracebacks. Tricky refactors where you want Claude to plan before editing. Plan mode in Claude Code — turn this on and Claude drafts a plan before touching files. Steps API: add thinking: {"type": "enabled", "budget_tokens": 8000} to the message create call. Claude Code: use /think or enter Plan mode ( Shift+Tab twice) before the work. claude.ai: toggle "Extended thinking" in the model picker. 16 — Go wide, cheaply Batch API shipping Submit thousands of requests as a single batch; Anthropic processes them within 24 hours at 50% of the regular price. Built for throughput, not latency. Real uses Tagging or summarizing every article in an archive. Translating a back-catalog. Running an evaluation suite against a new model release. Steps Build a JSONL file with one request per line. POST it to /v1/messages/batches . Poll the batch ID until status is ended . Download the output JSONL — one response per line, in submission order. 17 — Grounded answers Citations shipping Pass documents along with your question and Claude returns answers anchored to specific spans of those documents. Each claim ships with a pointer back to the source. Removes most of the "did you make that up?" worry. Steps Pass each source as a content block with citations: {"enabled": true} . Ask the question in the next block. Read the response — text spans interleave with citation objects pointing back to the source. 18 — Eyes Vision & PDF input shipping All current Claude models read images and PDFs natively. Drop a screenshot, a chart, a mockup, a scanned letter — Claude treats it like any other content. What works well UI screenshots — "build me this in HTML" or "what's broken in this layout?" Charts and diagrams — extracting numbers, summarizing trends. Scanned forms and old documents — surprisingly good OCR plus understanding. Photographs — "what brand is this dishwasher?" "is this lightbulb dimmable?" 19 — Cloud agents Managed Agents early access A hosted runtime for agents — instead of running the loop on your laptop, you submit a goal and Anthropic's infrastructure runs it in a sandbox, with persistent state, scheduling, and a job dashboard. Think "GitHub Actions, but the worker is Claude." What it gets you Long-running agents that survive your laptop closing. Scheduled agents — kick off every Monday morning. Sandboxed environments per agent run. A dashboard with logs, costs, and outputs. Status & how to get in Available to selected partners and through certain Claude Code features (the /schedule command in particular). Watch anthropic.com/news for general availability. 20 — The horizon Mythos & what's coming forward-looking This section is intentionally honest: it's about products that are partially announced, rumored, or implied by Anthropic's research direction. Treat everything below as "watch for it" — not "shipping today." Mythos "Mythos" is a name we're tracking as a future Anthropic surface. As of writing it has not been formally launched; we will fill in this section the moment Anthropic publishes details. If you're reading this and Mythos has shipped, the source of truth is anthropic.com/news and docs.anthropic.com . Other directions worth watching Multi-agent orchestration — first-class primitives for one Claude managing a fleet of sub-agents, beyond what the Agent SDK offers today. Persistent agent identity — agents that maintain memory, credentials, and reputation across many tasks and over months. Real-time / voice — lower-latency interfaces for spoken interaction and live audio analysis. Native enterprise data plane — Claude reading from your warehouse, lake, and document stores without manual MCP wiring. Better browsing & computer use — Computer Use is in beta; expect dramatic improvements in reliability and speed over the next year. On-device / edge inference — for workloads that can't leave a device or must stay below a latency floor. How to keep up. Anthropic ships fast. The two reliable signals are anthropic.com/news for product, and docs.anthropic.com for capabilities. The /changes directory in any Claude Code install also shows what shipped recently. --- ## Projects — Claude on WholeTech URL: https://claude.wholetech.com/projects/ Projects — Claude on WholeTech home / products / projects Workspaces Projects shipping A folder for related conversations on claude.ai. System instructions, pinned files, and chat history travel together. 01 — What a Project is A persistent context bag. A Project on claude.ai bundles a system instruction (always sent), a small set of pinned files Claude consults automatically, and the chat history. Every chat inside the project starts with all of that loaded. You stop re-explaining yourself. 02 — Make your first Project Five minutes. Click "Projects" in the sidebar on claude.ai . Pro / Max / Team / Enterprise plans. Name the project after a recurring task — "Homework: AP Bio", "bnbhot copywriting", "Family genealogy". Add a system instruction. One paragraph telling Claude its role and constraints. Pin reference files. Style guide, brand sheet, last 3 finished pieces. Claude consults them automatically. Start chats inside the project. Each one inherits everything. 03 — Project vs one-off chat The decision rule. Use a Project when… You'll come back to this task in a week. The context (style, files, constraints) is worth saving. Multiple conversations will benefit. One-off chat when… You're answering one question. Context is throwaway. You'll never reference this conversation again. 04 — Project shapes that work Patterns from this network. Editorial — system prompt: "You are an editor for {site}. Match the existing voice — practical, no fluff." Pinned: 3 finished pieces, style guide, brand sheet. Research notebook — system: "We are researching {topic}." Pinned: 5 source PDFs. Each chat asks a question; Claude answers with citations. Customer support draft-bot — system: "Draft a reply that matches our tone." Pinned: tone guide, FAQs, last 10 reply examples. Tenant correspondence — system: "Compose tenant letters in a warm professional voice." Pinned: tenant roster, lease template, late-fee policy. 05 — Team plans Shared context across people. On Team and Enterprise plans, Projects can be shared. A team Project gets one system prompt and one pinned file set; everyone's chats inherit it. When the style guide updates, every teammate's next chat picks it up. For agentic work over the same shared files, see /cowork . More on this site Related products . Every Anthropic surface has its own page on this guide. Claude Code agent in your terminal Claude API build on top Agent SDK build agents MCP tool protocol Skills slash commands Artifacts live previews Files API upload · cite Memory persistent Tool Use function calling Computer Use screen control Batch API 50% cheaper Citations grounded Prompt Caching 90% off Extended Thinking deep reason Managed Agents cloud · preview Mythos forward-looking Claude Cowork agentic desktop Claude Design prototypes · slides --- ## Skills — Claude on WholeTech URL: https://claude.wholetech.com/skills/ Skills — Claude on WholeTech home / products / skills Reusable workflows Skills shipping Reusable, slash-callable workflows — the prompt, the tools, and the steps that run when you invoke them. 01 — What a Skill is A slash command with a brain . A Skill is a folder with a SKILL.md file. The frontmatter declares its name and when it should trigger. The body is the prompt Claude follows when invoked. Optional helper scripts live alongside. You call it with / . 02 — Where Skills come from Three sources. Built-in /init , /review , /security-review , /help . Ship with Claude Code. Plugins frontend-design , claude-api , fewer-permission-prompts , others. Install via the plugin marketplace. Yours Drop a SKILL.md into ~/.claude/skills// and it's available everywhere on your machine. 03 — Write your first Skill Five minutes. Create the folder: ~/.claude/skills/my-skill/ Write SKILL.md with frontmatter. Name, description, when to trigger. Reference any helper scripts in the same folder. Type /my-skill in any Claude Code session — Claude loads and runs it. --- name: my-skill description: One sentence describing what this skill does. trigger: When the user mentions X or asks for Y. --- You are doing X. Steps: 1. Read the file … 2. Run … 3. Report back with … 04 — Useful skill shapes Patterns that pay back. session-close — end-of-session checkpoint: deploy uncommitted work, run a security scan, mirror to backup, surface action items, update memory. review-diff — review the current branch's pending changes against a checklist (style, security, test coverage). news-fetch — pull RSS for a list of sources, dedupe, summarize, post to a static site. warranty-claim — given a vendor and product, draft the email, capture the case number, schedule the follow-up. onboard-tenant — given a new tenant, generate the welcome email, the lease PDF, and the move-in checklist. Tip: if you find yourself typing the same five-step prompt twice, it's a Skill. 05 — Plugins bundle Skills Distribute, don't copy. A plugin is a packaged bundle of Skills, MCP servers, and configuration. Install once; share across your team. Anthropic publishes a marketplace; you can publish to it (or to a private registry) when a Skill set is worth sharing. More on this site Related products . Every Anthropic surface has its own page on this guide. Claude Code agent in your terminal Claude API build on top Agent SDK build agents MCP tool protocol Artifacts live previews Projects workspaces Files API upload · cite Memory persistent Tool Use function calling Computer Use screen control Batch API 50% cheaper Citations grounded Prompt Caching 90% off Extended Thinking deep reason Managed Agents cloud · preview Mythos forward-looking Claude Cowork agentic desktop Claude Design prototypes · slides --- ## Extended Thinking — Claude on WholeTech URL: https://claude.wholetech.com/thinking/ Extended Thinking — Claude on WholeTech home / products / thinking Deep reasoning Extended Thinking shipping Give Claude an explicit thinking budget on hard problems. Better answers on reasoning, math, and code. 01 — What it is Slow Claude down on hard things. On hard problems — multi-step reasoning, tricky math, gnarly code — extended thinking gives Claude an explicit budget of thinking tokens before it produces the user-visible answer. The thinking trace is returned alongside the answer so you can inspect or hide it. Trades latency and tokens for quality. 02 — When it pays off The decision rule. Worth turning on Multi-step reasoning. Large refactors. Hard math. Ambiguous specs you want Claude to resolve carefully. Anything where a careless answer is worse than a slow one. Skip it Classification. Simple lookups. UI generation. Anything where Claude already nails the answer in a single pass. 03 — The shape Pass a budget. msg = client.messages.create( model="claude-opus-4-7", max_tokens=4096, thinking={"type":"enabled","budget_tokens":2000}, messages=[{"role":"user","content": HARD_QUESTION}], ) # msg.content has both `thinking` blocks and `text` blocks. # `thinking` is for inspection; show only `text` to end users. The model decides how much of the budget to actually use. A 2,000-token budget is not a guarantee of 2,000 thinking tokens — just an upper bound. 04 — UX Show or hide the trace. Hide it in production for end users — they want answers, not transcripts. Show it in developer-facing tools and "explain your reasoning" experiences. Stream it so users see something happening while the model thinks. Log it for evals and debugging. 05 — Pairs well with Combine. Tool Use — Claude can think before deciding which tool to call. Agent SDK — agents on hard goals benefit from extended thinking on the planning step. Prompt Caching — thinking does not invalidate cached prefixes; the system prompt and docs stay cached. More on this site Related products . Every Anthropic surface has its own page on this guide. Claude Code agent in your terminal Claude API build on top Agent SDK build agents MCP tool protocol Skills slash commands Artifacts live previews Projects workspaces Files API upload · cite Memory persistent Tool Use function calling Computer Use screen control Batch API 50% cheaper Citations grounded Prompt Caching 90% off Managed Agents cloud · preview Mythos forward-looking Claude Cowork agentic desktop Claude Design prototypes · slides --- ## Tool Use — Claude on WholeTech URL: https://claude.wholetech.com/tool-use/ Tool Use — Claude on WholeTech home / products / tool-use Function calling Tool Use shipping Function calling. Define tools in JSON schema; Claude decides when to call them; you execute and return. 01 — What it is The primitive under everything. You give Claude a list of tools (a name, a description, a JSON schema for the inputs). Claude decides when to call them and returns the calls structurally. You execute them in your code and return the results. Loop until Claude returns plain text. Agent SDK, MCP, Computer Use, Claude Code, your-own-agent — all built on this. 02 — What it's for Three jobs. Connect Claude to real systems Database queries, API calls, web fetches, email sends. Anything you can wrap in a function. Force structured output Define a tool with a strict JSON schema. Claude responds in that shape — no parsing prose. Build agents The loop is: model returns a tool call → you run it → return the result → model decides what's next. 03 — First tool Sketch one. Describe the tool in JSON schema — name, what it does, what parameters. Pass it in tools=[…] on the message create call. If Claude returns a tool_use block, run the tool and return a tool_result block in the next message. Loop until Claude returns plain text — that's the final answer. tools = [{ "name": "get_weather", "description": "Get the current weather for a city.", "input_schema": { "type": "object", "properties": {"city": {"type":"string"}}, "required": ["city"] } }] msg = client.messages.create( model="claude-sonnet-4-6", max_tokens=1024, tools=tools, messages=[{"role":"user","content":"What's the weather in Hot Springs?"}], ) 04 — The loop Until plain text comes back. Tool-using conversations alternate: user → assistant (tool_use) → user (tool_result) → assistant (tool_use or text). When the assistant returns text, you're done. If you forget to return tool_results, the model can't continue. 05 — Patterns Shapes you'll reach for. One tool, one shape — simplest. "Extract a person's name and email from this paragraph." Define extract_contact(name,email) ; force the model to call it. Catalog of read-only tools — search_docs , get_user , list_orders . Claude composes them. Read-write with confirmation — plan_change (read-only) returns a plan; apply_change requires a token from the plan. Stops accidental destruction. More on this site Related products . Every Anthropic surface has its own page on this guide. Claude Code agent in your terminal Claude API build on top Agent SDK build agents MCP tool protocol Skills slash commands Artifacts live previews Projects workspaces Files API upload · cite Memory persistent Computer Use screen control Batch API 50% cheaper Citations grounded Prompt Caching 90% off Extended Thinking deep reason Managed Agents cloud · preview Mythos forward-looking Claude Cowork agentic desktop Claude Design prototypes · slides --- ## MeLE PCG35 + TCL 98 — Wall Workstation Build Plan | WholeTech URL: https://claude.wholetech.com/computers/ccmidmele/ MeLE PCG35 + TCL 98 — Wall Workstation Build Plan | WholeTech Build Plan · Cedar Creek · ccmidmele MeLE PCG35 + TCL 98 — wall workstation A fanless mini-PC driving a 98-inch panel as a permanent Claude surface. Phase 1 stands up the local installation today; Phase 2 (the public tunnel at claude.wholetech.com ) is deferred until the network is ready to commit to a Cloudflare migration. Status: Phase 1 — building today Build day: 2026-04-28 Estimated time: ~60 min Site: Cedar Creek What's being built A single fanless mini-PC sits behind a 98-inch TCL panel and runs Claude as its primary user. The keyboard and trackpad live on the coffee table. The intent is a permanent Claude surface that's always on, always signed in, and always ready — not a laptop you have to wake up every time. Two access surfaces are planned. Today's build only delivers the first. Phase 1 local big-screen → wireless keyboard/trackpad · Claude Desktop · Claude Code in Git Bash · Edge kiosk fallback Phase 2 remote browser → claude.wholetech.com via Cloudflare Tunnel + Access SSO · deferred Splitting the build this way means Phase 1 is reversible, low-risk, and doesn't require any network or DNS decisions. Phase 2 introduces the Cloudflare tunnel surface and gets a separate build day once the network operator is ready. Hardware Component Spec / setting Mini-PC MeLE Quieter PCG35 — fanless, Intel N5105 / N100 class, 8 GB RAM, 128–256 GB eMMC. Confirm exact SKU in Settings → System → About . OS Windows 11 Home/Pro (whatever shipped). Keep it. Don't wipe to Linux today. Display TCL 98-inch 4K panel over HDMI. Set Windows display scaling to 200% so text reads from couch distance. Network Wired ethernet preferred. Wi-Fi acceptable with a DHCP reservation on the Cedar Creek router. Power Settings → Power → Sleep: Never while plugged in. The whole point is "always on." Input Logitech K400 (or equivalent wireless keyboard with integrated trackpad). Pair before starting. Hostname ccmidmele — Cedar Creek MeLE. Used as the directory name for this page and any future references. Phase 1 — today's build Building now Seven steps, ~60 minutes start to finish. Each one is independently verifiable; if a later step fails the earlier ones are still useful. Pre-flight ~10 min Boot the MeLE; sign in with a local account named claude . Run Windows Update once; reboot. Note the LAN IP from ipconfig — that's the address that goes in the router's DHCP reservation table. Renaming the PC to ccmidmele Press Win on the keyboard. The Start menu opens. Type settings and press Enter . The Settings window opens. In the left sidebar, click System (it's near the top — the icon looks like a small monitor). At the top of the System page you'll see a card with the current PC name (something like DESKTOP-AB12C3D ). Click the blue Rename link inside that card. (If you don't see Rename at the top, scroll all the way down to About , click it, then click Rename this PC on the right.) A small dialog opens. Type ccmidmele — lowercase, no spaces, no dashes. Click Next . Windows asks if you want to restart now or later. Click Restart now . The change isn't real until reboot. Verify after reboot: Press Win + R , type cmd , hit Enter . In the black window type hostname and press Enter . It should print ccmidmele . If it still shows the old name, the reboot didn't complete — try one more time. Why ccmidmele ? "cc" = Cedar Creek (location), "mid" = MeLE's Mid series, "mele" = the brand. Lowercase, no separators, matches the URL path on this site ( /computers/ccmidmele/ ). Future computers in the network use the same convention: . Install Claude Desktop ~10 min Browse to claude.ai/download — grab the Windows installer. Install, launch, sign in. Settings → Appearance → Dark mode , font size Large . Pin to taskbar AND register as a startup app: Win + R → shell:startup → drop a Claude shortcut. Install Claude Code (CLI) ~10 min You don’t have to install Node.js. Anthropic ships a standalone installer that bundles its own runtime. Either install that and skip the npm install line below, OR install Node.js LTS from nodejs.org first if you prefer the npm install path (defaults are fine). Install Git for Windows from git-scm.com . Git Bash comes with it. Open Git Bash and run: npm install -g @anthropic-ai/claude-code claude --version claude # first launch does the OAuth login Bump the Git Bash font size to ~20pt for the wall view: title-bar right-click → Properties → Font. Copy .claude to the MeLE on a USB stick ~5 min Three actions. No zipping, no scripts, no dialogs. On your existing PC. Plug in a USB stick. Open File Explorer ( Win + E ), click in the address bar at the top, type %USERPROFILE% , press Enter . Drag the .claude folder onto your USB stick in the left sidebar. Wait for it to finish, then unplug. On the MeLE. Plug the USB stick in. Open File Explorer, type %USERPROFILE% in the address bar, press Enter . Drag .claude from the USB stick into this folder. Verify. Open Git Bash, type claude , press Enter . Your skills and memory should be there. Can't see .claude in step 1? It's hidden because it starts with a dot. In File Explorer, click View at the top → Show → Hidden items . Now it'll show up. Edge kiosk fallback ~5 min Drop a shortcut into shell:startup with this target: "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --app=https://claude.ai --start-fullscreen Use this when Claude Desktop is acting up, or when a guest wants to use the wall in a clean session. Cloudflare Tunnel — claude.wholetech.com Phase 2 — deferred Cloudflare Tunnel + ttyd + Cloudflare Access (Google SSO) goes here when the network operator is ready to do the Cloudflare migration. Until then, the MeLE is local-network only. The original tunnel architecture is preserved in the network's planning notes; nothing about Phase 1 forecloses it. Auto-start services for the tunnel Phase 2 — deferred NSSM-wrapped ttyd and the cloudflared Windows service are part of Phase 2. Skipped today. The 98-inch experience ~5 min Claude Desktop maximized on the primary display. A second virtual desktop ( Win + Ctrl + D ) running Edge as --app=https://claude.ai for quick web-mode access. Wireless keyboard and trackpad on the coffee table. That's it. The wall is now a Claude surface. Verify ~5 min Reboot the MeLE. Confirm Claude Desktop and the Edge kiosk both auto-launch. Open Git Bash, type claude , hit Enter — the OAuth session should still be active. Open a small test prompt to confirm round-trip works on the big screen at the planned font size. Decisions baked into Phase 1 Keep Windows Don't wipe to Ubuntu. Claude Desktop runs natively, less yak-shaving, reversible if it disappoints. OAuth, not API key No ANTHROPIC_API_KEY file lives on the MeLE. Claude Desktop and Claude Code both authenticate via OAuth. Smaller blast radius. No tunnel today Cloudflare migration is a separate, considered decision. Phase 1 doesn't depend on it. Hostname as directory ccmidmele is the canonical handle for this device across DNS, docs, and backup paths. Future computers in the network get their own /computers// page. What this is not — explicit non-goals Not a public Claude API endpoint. There's no LiteLLM, no proxy, no key forwarding. Not exposed on the internet today. No port-forward, no DDNS, no tunnel. Not a kiosk lockout. The MeLE is a regular Windows machine; it just happens to auto-launch Claude. Not a replacement for the existing droplet workflow. The network's primary services keep running where they already run. Not yet integrated into the 6-leg backup map — that gets added once the device is on its DHCP reservation and reachable. If something breaks at the wall TV blank. The MeLE went to sleep. Settings → Power → Never sleep on AC. Claude Desktop won't sign in. It tries IPv6 first on some networks. Disable IPv6 on the active adapter as a last resort. Claude Code OAuth expired. Open Git Bash, type claude , follow the browser flow. No keys to rotate. Phase 2 will add new failure modes — cloudflared service, ttyd, Cloudflare Access. Those go in this section when Phase 2 ships. What ships when Phase 2 is greenlit Same URL, same content slug. Phase 2 work happens in three additions: The MeLE gets cloudflared installed as a Windows service, configured against a tunnel created for wholetech.com 's Cloudflare zone. ttyd exposes Claude Code as a browser-terminal on localhost:8080 , fronted by basic auth. Cloudflare Access wraps the public hostname with a Google-SSO gate scoped to specific email addresses. None of that is in motion today. This page will be updated when it is. --- ## Cloning & rebuilding sites with Claude — Claude on WholeTech URL: https://claude.wholetech.com/design/cloning/ Cloning & rebuilding sites with Claude — Claude on WholeTech home / design / cloning Design · Deep dive Cloning, repurposing, rebuilding . A detailed playbook on Claude looking at an existing website and turning it into something better — yours, faster, prettier, accessible, modern. Capture the source, study its structure, decide what to keep, redesign what's tired, rebuild it cleanly, ship it. Prompts you can run today. This page is the long version. /design has the short version. Contents When to clone vs start fresh Boundaries — yours vs theirs Step 1 — capture the source Step 2 — study the structure Step 3 — decide what to keep Step 4 — write a redesign brief Step 5 — prototype in Claude Design Step 6 — build the real thing Step 7 — improve, don't just port Accessibility & SEO sweep Step 8 — verify against the original Step 9 — ship & redirect Real examples on this network Reusable prompt library 01 — When to clone vs start fresh The decision rule . Cloning isn't always the right move. There's a clean rule for choosing. Clone & rebuild when… The information architecture is good, the design is dated. Or — you own the site and want to modernize without re-thinking what's on it. Or — you're rescuing a Wayback Machine archive of a site that's gone. Start fresh when… The structure itself is the problem. Or — the content is wrong for the audience you actually have. Or — the original was small enough that re-doing it from scratch is faster than studying it. Honest test: if you can't write down in two sentences what's good about the original, you don't actually want to clone it. You want a fresh start that happens to live at the same URL. 02 — Boundaries Yours, theirs, and fair . Three categories — and Claude won't help with the third. Your own site. Modernize away. This page is mostly about that case. A site you have permission to rebuild — a client, a friend, a public-domain or open-licensed source, a Wayback archive of a site you authored. Same playbook. Someone else's commercial site you don't have permission to copy. Don't. Claude won't help you lift their copy, brand, or distinctive visual identity. Inspiration is fine; copying isn't. Specifically OK: using a competitor's site as reference for layout patterns and information architecture while building your own design with your own brand and copy. Specifically not OK: lifting their text, photos, logo, or distinctive look-and-feel. The first is normal design work; the second is a takedown waiting to happen. 03 — Step 1 · Capture the source Get it in front of Claude . Claude needs to see the original. The capture method depends on the size and access. Single page, simple Take a full-page screenshot. Browser DevTools → Command Palette → "Capture full size screenshot." Drop it into claude.ai. Add the source HTML if you can see it: View Source → copy → paste, or save as .html and attach. Add notes on what you actually want: "Match the layout, modernize the typography, swap the green for cream." Whole site, alive Mirror it locally with wget or httrack first, then point Claude Code at the mirror. # Mac/Linux wget --recursive --no-clobber --page-requisites \ --html-extension --convert-links --restrict-file-names=windows \ --domains example.com --no-parent https://example.com/ # Windows (curl) mkdir mirror && cd mirror curl -L https://example.com/ -o index.html # …iterate per page, or use httrack on Windows Whole site, dead Pull from the Wayback Machine. web.archive.org has a snapshot for almost everything. # Pick a year, then mirror wayback_machine_downloader https://example.com --from 20180101 --to 20181231 # Or: visit https://web.archive.org/web/2018*/example.com and grab pages by hand This is how the firth.com restoration on this network worked — 222+ pages reconstructed from Wayback snapshots, then redesigned. Big site, copyrighted, complex Don't mirror. Capture only the pages you have rights to, plus public landing-page screenshots used purely for layout reference. 04 — Step 2 · Study the structure Let Claude do the diagnosis . Before redesigning anything, get an honest read on what's actually there. Claude is unusually good at this — it'll see structure you've stopped seeing. I'm going to share screenshots and HTML from {site} . Don't redesign it yet. First, give me an honest read on: 1. Information architecture — what sections exist, what hierarchy, what the user is being guided toward 2. Visual identity — palette, typography, density, mood 3. Distinctive moves — anything memorable, deliberate, or characteristic 4. Tired moves — anything dated, generic, or working against the message 5. Accessibility flags — visible contrast issues, link affordance, font sizes, alt text gaps 6. Performance hints — heavy fonts, oversized images, render-blocking patterns you can spot from the source Be specific. No platitudes. End with three questions only the owner can answer. Spend ten minutes reading the answer. The "three questions only the owner can answer" is the highest-leverage part — it surfaces decisions you didn't realize you were drifting on. 05 — Step 3 · Decide what to keep Three columns, one spreadsheet . Before any rebuild work, write a tiny "what to keep / change / cut" list. This is the single most useful artifact in a clone-and-rebuild project; it makes every later decision faster. Keep What's working. URL structure usually goes here so SEO doesn't break. Distinctive copy. Photo assets you own. Functional features. Change What's tired but the underlying intent is right. Hero layout. Typography. Color palette. Nav arrangement. Cut What no longer earns its place. Dead pages. Counter widgets. Auto-playing carousel. The "as seen in" badge from 2014. Given the audit above, propose a Keep / Change / Cut list. For each item, one short sentence on why. Cap the Cut list at the 10 highest-impact items so we ship. 06 — Step 4 · Write the redesign brief One paragraph, not a spec . A redesign brief is what you'd say to a freelancer over coffee. Audience, purpose, mood, constraints. Claude works from this kind of brief better than from a long detailed spec. Redesign brief for {site} : Audience: {who they are, in one phrase} . Single action I want a visitor to take: {X} . Mood: {three adjectives — e.g., editorial, calm, confident} . Brand color is {hex} . Typography: {Inter for body, Space Grotesk for headlines, JetBrains Mono for tags} — or "use what you think reads best." Constraints: {static site, no JS frameworks · responsive · loads under 2s on 3G · WCAG AA} . Keep / Change / Cut list attached above. Don't redesign yet. Confirm you've understood the brief and ask any clarifying question before starting. Asking Claude to confirm before drawing is the move. It catches misunderstandings while they're cheap to fix. 07 — Step 5 · Prototype in Claude Design Sketch the new shape . Claude Design is the right tool for prototype-grade exploration. Live HTML output, voice and slider edits, design-system aware. See /design for the product page. Open Claude Design. Pro / Max / Team / Enterprise plans, in research preview. Paste the brief and the Keep/Change/Cut list. Attach the source screenshots as references. Ask for three variants — same brief, three different moods. Editorial, dense, airy. Pick the one that feels right within the brief. Iterate with voice or text. "Tighten the type. Shrink the hero. Push the CTA above the fold." Three changes per round, max. Stop one round earlier than you want to. Most rounds make it better; after about round five, returns flatten. Export the handoff bundle. Claude Design packages the prototype for Claude Code with one instruction. 08 — Step 6 · Build the real thing Hand off to Claude Code . The prototype is HTML. The site is a project. Hand off to Claude Code running in your project directory. Open Claude Code in the destination project folder. Start with a copy of the existing site if you have one, or an empty folder. Drop in the handoff bundle from Claude Design. Claude Code reads the prototype HTML and the design tokens. Tell it the goal in one paragraph: "Convert this prototype into a static site at ./public/ . Match the existing URL structure (see ./old/sitemap.xml ). Preserve the content from ./old/.html for each page; redesign the wrapping. Keep the same head metadata." Watch one page get done. Eyeball it. Confirm the patterns. Approve. Let it loop through the rest. Walk away. Cap the step count; come back to a finished site. URL preservation matters. If old /about-us becomes new /about , you've thrown away SEO. Either keep URLs or write redirects. Don't silently rename. 09 — Step 7 · Improve, don't just port The upgrade moves. A clone is a fresh chance to fix everything that needed fixing. Claude can do most of these in a single pass. Pick the ones that matter for this site. Modernize the type Pair a confident display font with a clean body font. Set sizes from a scale, not by accident. Tighten the palette One brand color, one accent, two greys, one alarm color. Cut anything else. Compress the hero Most heroes are 1.5× too tall. Shrink it; let the user scroll into the real content. Add a clear CTA One primary action above the fold. Old sites often had three CTAs and zero of them won. Compress images Convert to WebP / AVIF, set width / height , add loading="lazy" . Tighten the IA If there are 12 nav items, the answer is fewer. Consolidate. Promote the two visitors actually click. Refresh the copy Read every page aloud. Cut a third of the words. Specifics beat adjectives. Add structured data JSON-LD for org, article, breadcrumb, FAQ. Free SEO win. Mobile-first If the design only works at 1440px, it doesn't work. Most traffic is phones. With the rebuilt site in ./public/ , run an upgrade pass: modernize typography to a 1.250 scale, compress the hero to 70vh max, add JSON-LD for organization & breadcrumbs, swap PNG/JPG hero images for WebP with explicit dimensions, and add loading="lazy" to every below-the-fold image. Show me the diff before applying. 10 — Accessibility & SEO sweep One pass, both at once . Both A11y and SEO live in the same neighborhood — semantic HTML, reading order, alt text, headings, link text. Knock them out together. Run an accessibility & SEO sweep on every page in ./public/ : • One

per page; nested headings in order • alt on every image; meaningful (not "image1.jpg") •