Claude Artifacts: apps & diagrams
Have it write a small app that runs right there — and turn any text into a diagram.
Artifacts is Claude writing a real (React) app and running it inline in your browser — no backend, no deploy. Ask for flashcards and you get a working flashcard app made just for you. Karpathy's own favorite use, though, is quieter: diagram generation — turning a chapter or a codebase into a clear conceptual map.
He pastes the Adam Smith Wikipedia intro, asks for 20 flashcards, then: "use the artifacts feature to write a flashcards app to test these." Claude writes React components and the interface runs them live.
His higher-value habit is diagrams. Attach a chapter, ask for a "conceptual diagram," and Claude writes a Mermaid graph laying out the argument as a tree — great for visual thinkers trying to hold a chapter's structure in mind.
Ordinarily engineers ship an app and you adapt to it. With Artifacts, the model writes the app around you. These are local, backend-less apps — limited, but often exactly enough.
The load-bearing points
- Artifacts writes and runs a small app inline — bespoke, no backend.
- Great for one-off tools (flashcards, timers, tiny games).
- Karpathy's favorite use is diagram generation (Mermaid) to see an argument's structure.
- Works on chapters, papers, and codebases alike.
Make a tool for yourself
Paste some notes and ask Claude to build an Artifact that quizzes you on them. Use it.
Show the point
Notice you didn't download anyone's app — the model wrote one around your exact content.
Map an argument
Paste a dense chapter or a chunk of code and ask for a conceptual diagram. See if the spatial layout helps you remember it.
Show the point
This is his real workhorse use. Visual structure is a memory aid — especially for unfamiliar material.
Diagram generation (via Mermaid). As a visual thinker, laying an argument or codebase out as a tree helps him grasp and remember its structure quickly.