Learn Claude — Part 5: Artifacts — From Documents to Working Apps

Chat answers evaporate. Artifacts persist: documents, code, diagrams, and fully working apps that appear in a panel beside the conversation, get iterated like real work products, and can be downloaded or published. This is where Claude stops being a chatbot and becomes a workbench.

The mental model

The chat is the discussion; the Artifact is the deliverable. Claude creates one automatically for substantial standalone content, or on request: "put this in an artifact." What can live there:

• Documents — reports, guides, long-form drafts

• Code — scripts, components, entire single-file apps

• Interactive apps — real HTML/React that runs live in the panel

• Diagrams — flowcharts, architecture sketches, visualizations

• Tools & games — calculators, quizzes, trackers, prototypes

Iteration is the entire point

The workflow that makes Artifacts powerful:

You: Build a landing page for a freelance photographer. (working page appears) You: Dark theme, add a portfolio grid. (same page, updated) You: The contact button should open a mail link. (updated again)

Claude edits the existing Artifact rather than regenerating it, and you can flip back through versions to compare or recover. Two rules for smooth iteration:

1. One change per message. "Make it dark, add a grid, fix the font, and reorder sections" invites collateral damage. Sequential single changes stay precise.

2. Point at things by name. "In the pricing section, make the middle card highlighted" beats "make it look better."

Building without knowing how to code

Describe outcomes, not technology — Claude picks the stack:

• "A habit tracker where I check off daily habits and see a weekly streak."

• "An interactive quiz: 10 questions on JavaScript basics, explain each wrong answer."

• "A tip-splitting calculator that works well on a phone."

The result runs instantly in the panel. You test it by using it, and request changes in plain language. For many small internal tools, this is legitimately faster than searching for an existing app.

Two power-ups worth knowing:

• Design direction works. "Brutalist," "like a printed newspaper," "playful pastel," "match this screenshot" (attach one — vision from Part 4 applies here too).

• Artifacts can be AI-powered. You can ask for an app that itself talks to Claude — e.g., "build a flashcard app where Claude generates new cards about any topic I type." Apps that think, built by chatting.

Publishing and reuse

From the Artifact panel you can copy, download, or publish — publishing creates a shareable link where others can view and even use interactive artifacts. A quiz for your students, a calculator for your clients, a prototype for your team: shipped from a conversation.

For developers: the honest scope

Artifacts are ideal for prototypes, single-file tools, visualizations, and UI experiments. They are not a full dev environment — no databases, no server-side code, limited external libraries. The professional pattern: prototype the interaction in an Artifact, validate it, then move to a real codebase — with Claude Code (Part 7) doing the heavy lifting there. Prototype in minutes, build properly afterward.

A realistic workflow: the client-proposal machine

1. Chat: discuss the project scope (using Part 3's prompting).

2. "Create an artifact: a structured proposal document from everything above."

3. Iterate: tighten the timeline section, add a pricing table.

4. "Now create a second artifact: a one-page interactive summary I can publish and send as a link."

Deliverable and delivery mechanism, one conversation.

Exercise

Build something real for yourself this week — a unit converter you actually need, a study quiz, a reading tracker. Then request three iterations and publish it. The moment you send your own link to someone is the moment Artifacts click.

Next up

Part 6: the professional operating system — Projects, memory, and connectors that plug Claude into your actual tools.