Build Digital Artwork with Claude Code

Hey y’all, Sam Solomon here. We’re back with this series on how to learn to work with coding agents—second installment. Today we’re going to look at building digital artwork.

If you’re already comfortable with command-line interfaces and how to navigate a terminal, you don’t need to go back to the first episode. If that’s all new and this is a beginner series, that’s fine—go back and watch episode 1 first, because it has some foundational stuff that’ll be important here.

Quick recap: we looked at terminal options (the built-in Mac Terminal works, but Ghostty and Warp are nicer; Warp is my favorite for the text box, just be careful with telemetry on a work computer). You either signed up for Claude or ChatGPT—for ChatGPT you’ll be using Codex; for Claude, Claude Code. We installed Homebrew, Node and a CLI.

Let me open Warp. We’re in our home directory. I’ll cd developer—that’s where I keep all my projects. Then ls to see what’s there.

I’m going to make a new folder for this project: mkdir particle-smiley, then cd particle-smiley. ls confirms it’s empty.

A quick aside before we get going. I use a tool called Mac Whisper—an on-device voice-to-text tool. I downloaded a local model (Parakeet) through Mac Whisper, and I can drag any audio or video file in and it transcribes locally using the chip in the Mac. Any M-series Mac (basically anything from the last five years) handles this fine. Don’t pay for a monthly subscription—I think I paid $10 for Mac Whisper, and there’s a free version. There’s also an open-source alternative called Hex.

The main thing as it applies to this is the voice-to-text command on the keyboard. I have it mapped to my Fn key. Click and hold, the blue lines at the top mean it’s recording. Let go and the transcription gets typed into whatever input has my cursor. I’ll try to use it more in this series—for tutorials it’s a little more engaging than watching me type.

Let me type claude to open the CLI—the little crab alien guy comes up. What I want to build is a particle smiley face: HTML canvas with a bunch of tiny dots in the shape of a smiley, the dots run away from the cursor when I move it across them, and on click they explode outward and then snap back into place.

Let’s see if Claude can build it in one shot:

I’d like to build an HTML5 canvas particle simulator in the shape of a smiley face. Spawn a bunch of tiny particles in the shape of a smiley face. Make sure the smiley face is filled so that its eyes and mouth are the cutouts. When I move my cursor into the smiley face, the particles should bounce away from the cursor and snap back into place when the cursor leaves. When I click, I’d like the particles to explode toward the edge of the screen in a randomized way, hit the edge, bounce off and a second later come back and reform the smiley. I’d like this to work in both dark and light color modes. Single file project. No libraries.

That’s a lot to throw at Claude in one shot. If it doesn’t quite get it, that’s fine—we’ll use it as a learning experience. The point is to start playing with making things.

While Claude is working—one of the things I appreciate about Claude is the “thinking” words you see. That’s actually one thing I prefer about Codex and OpenCode CLIs.

OpenCode is probably my favorite, but you can only use it with Anthropic API keys, not the Claude Pro or Max plans, which is fine—I think those plans are largely good value.

On value: for a long time Claude Code was just a significantly better deal—you could work much longer before hitting the five-hour limits. That’s shifted back toward OpenAI with GPT-5, which is a really good coding model and lets you do more with the same number of tokens.

Every now and then you’ll see a modal—that’s Claude asking permission to create, edit or view something. For this session, I’ll just tell it not to ask me about file creation.

It’s done. Let’s open index.html in the browser. There’s the smiley face. The particles run away from the cursor. The eyes and mouth are cutouts. Let’s click—boom, they explode and snap back together. Dark mode? Yep. Cool—it even explodes away from the click point.

We one-shotted it. I can still go make edits—say, in light mode I want black particles instead of white. Tell Claude that, wait a beat… done. Now we use black particles in light mode. We’ve got our first piece of artwork.

Quick note about context windows. You’ll hear a lot about context in this series—it’s one of the things you keep in mind when working with agents at this point in time.

If I exit Claude (Ctrl+C twice) and then run claude again from the same folder, it’s not going to remember any of the work we just did. It only sees the files in the folder. So it won’t know I asked for the dark-mode tweak after building the smiley.

If you do want to continue, in Warp you can copy the previous command or hit Resume—that picks up the prior conversation. Just keep in mind: a fresh claude invocation is a fresh brain, no memory of what came before.

cd .. to go up a level, then mkdir flow-field, then cd flow-field, then ls to confirm empty. Then claude again to start a new agent in this folder.

Now we’ll look at how to plan things. Planning is important because even when I’m building something, I often don’t know every detail upfront. Even when I do, the planning step is good—it can surface options I hadn’t considered, suggest different approaches or warn me about things that won’t work.

In Claude Code, hit Shift+Tab once for “accept edits on,” and Shift+Tab again to enter plan mode. In plan mode the agent doesn’t write any code—the only thing it can do is create a markdown file. We’re going to build an interactive flow field, but instead of describing it in detail, I want the agent to make recommendations.

What I asked: an interactive flow field with Perlin noise, visually interesting, responds to mouse movement and clicks. But I don’t really know what I want—can it help with options that might be visually interesting?

Sometimes you’ll get a multi-select or single-select modal of follow-up questions. Sometimes there’s a free-text option to give it specifics. Often after you answer those, it’ll have more questions, and then put together a plan.

For this one: glowing particles for the look. Hover repels particles. Click drops a vortex. For the tech stack, I’d normally pick vanilla HTML+WebGL to keep this single-file, but the Three.js option (hundreds of thousands of particles) was tempting. I just went with the recommendation.

It comes back with a plan—a markdown file describing what it’s about to build. Single interactive flow field from scratch. Visually striking glowing particles in a black aesthetic. Hover and click behaviors. Specifics about the visual approach.

I’m going to just tell it to go. If this were a real project I cared about, I’d carefully review the plan to make sure there aren’t misunderstandings, because the agent is going to do largely what’s in the plan. What’s in your head and what’s in the plan need to match.

When you approve the plan, you get options. Auto-accept edits is what I usually use—it asks for less. Manual approve means it’ll ask before each file change. UltraPlan opens the browser for more planning UI.

There’s a stronger mode: --dangerously-skip-permissions. That’s what I use for most of my projects—it just lets Claude do what it wants. The only thing that’s bitten me with that is on larger projects, sometimes the agent convinces itself it’s a good idea to drop a database. That’s the worst thing that can happen.

The mitigation is a CLAUDE.md file (or agents.md for other CLIs)—basically a system-prompt-style instruction file the agent reads. Mine includes things like “do not drop any databases under any circumstances; if you think you need to, communicate with me first.” For this small project there’s no database, so dangerously-accept-permissions is fine.

Open the file. We’ve got a rendered field, particles kind of run away from the cursor. Let me make it full-screen. Click—vortex. Looks like the vortex is temporary, but I can click a lot. Cool.

The point of this episode was to see how you can start building things. We built the smiley in one shot, but you don’t always know exactly what you want to make—that’s when plan mode is useful.

Make a little of your own artwork. If you have something in mind, try it. One thing we didn’t do: paste a screenshot or image into the Claude CLI as a reference. Go make two or three little pieces and try out what you’ve learned. Thanks.