Build a cozy web toy with Claude in one night

What you are actually using

An artifact is a window Claude opens beside your chat that runs real, live code instead of showing you a wall of text. You describe a thing, the thing appears next to the conversation, you click it, and then you say what to change. Anthropic's help centre lists single-page HTML sites, SVG images and interactive components as standard artifact types, and confirms artifacts are supported on Free, Pro, Max, Team and Enterprise plans (what are artifacts). You do not need a paid plan for tonight.

The whole thing, start to finish

1. 🧠 Pick a feeling, not a feature. This is the part people get wrong. Do not start with "an app that tracks X". Start with "rainy Sunday afternoon" or "the last twenty minutes of a bonfire" or "a jar of fireflies on a porch". A feeling gives Claude colours, motion and sound to work from. A feature gives it a spreadsheet.
2. 💡 Open a fresh chat and paste the big prompt. Use the vibe prompt below. Fresh chat matters, because a conversation full of your work emails will drag the aesthetic back towards corporate blue.
3. 👩‍💻 Let it build, then actually play with it. The artifact panel opens on the right and the toy runs live. Click everything. Drag things. The bugs and the delights both show up in the first two minutes of playing, never in the code.
4. 🌱 Change one thing at a time, in plain English. "Make the rain heavier." "The window frame is too orange, warm it down." "Add a cat silhouette on the sill that blinks occasionally." One request per message gets you a clean result. Five requests at once gets you a rewrite that loses the bits you liked.
5. 🔊 Add sound last. Sound is the single biggest cosiness upgrade and the easiest thing to overdo, so add it once the visuals feel right. The sound prompt is further down.
6. 💌 Publish it and send it to one person. Hit Publish, copy the link, send it to a friend. Something changes when a made-up thing in your head becomes a URL someone else can open.

The prompt that built my rainy window

This is the actual shape I use. It is long on purpose: the specificity is what stops you getting a grey box with a button on it.

Build me a cozy little web toy as a single self-contained artifact. It is a window seat on a rainy evening, seen from inside a warm room: a wooden window frame, rain running down the glass, soft lamplight from off screen, and a dark blue-grey world outside.

Make it feel handmade rather than corporate. Muted palette, soft edges, gentle grain, nothing neon and no hard drop shadows. The rain should be animated continuously and never loop in an obviously repeating way. Clicking anywhere on the glass cycles the weather between rain, heavy rain, snow and clear night with stars, and the transition between them should fade over about two seconds rather than snapping.

Draw everything in code with CSS, SVG or canvas so it is fully self-contained, do not link to any external images or fonts. Keep it to one file, make it fill the window and work on a phone screen too. Build it, then tell me in three short lines which parts I can ask you to change.

The follow-up lines that make it yours

Send these one at a time, in the same chat, after the toy exists. Each one is a real message you can paste as-is.

Make it snow instead of rain, and change the mood to match: the light outside should go softer and paler, the snow should drift sideways slightly rather than falling straight down, and it should settle on the bottom edge of the window frame and slowly build up over a couple of minutes.

Keep everything else exactly as it is, including the click-to-cycle behaviour and the lamp glow. Only change what I asked for.

Add ambient sound that matches the current weather: soft rain, heavier rain, muffled quiet for snow, and faint wind for the clear night.

Generate the audio in code using the Web Audio API rather than linking to any external sound file, so the toy stays self-contained. It must start muted with a small speaker icon in a corner that I click to turn sound on, because audio that plays by itself is horrible. Fade the volume between weather states instead of cutting, and keep the whole thing quiet enough to leave running in the background while I work.

Add one small living detail to the scene: a cat silhouette curled on the windowsill that breathes slowly, blinks now and then, and occasionally stretches.

It should be drawn in code, sit in the lower left of the frame, and never demand attention. The timing needs to be irregular rather than on a fixed loop, because anything perfectly regular stops feeling alive. Do not add any other elements or change the weather behaviour.

Six more toys worth a night

Swap any of these into the big prompt in place of the rainy window. Same structure, same rules about drawing everything in code.

Four rules that stop it looking like default AI

1. 🎨 Name the palette, do not say "cozy". "Cozy" is a word every model has seen a million times and averages into beige. Say "warm lamplight amber, deep blue-grey outside, aged paper cream for the frame" and you get an actual mood.
2. 🕰️ Ask for irregular timing. Perfect loops read as machinery. Blinks, gusts, flickers and drifts should all be described as "irregular" or "occasionally", and the toy immediately feels alive instead of animated.
3. ✂️ Say what to leave alone. Every change request should end with "keep everything else exactly as it is". Without that line, models tend to helpfully rewrite the parts you already loved.
4. 🧊 Ban the defaults out loud. Add "no neon, no purple-to-blue gradients, no glassmorphism, no hard shadows, no emoji as graphics" to your first prompt. Naming the clichés is the fastest way past them.

Publish it and get a link

1. 📤 Hit Publish on the artifact. Open the artifact and click Publish, then copy the public link. Anyone can open and interact with a published artifact without signing up for anything (publish and share artifacts).
2. 🌐 Embed it if you have a site. The same panel has a Get embed code option, so the toy can live on your own page rather than only as a link.
3. ⚠️ Know the one-way door. You can unpublish at any time to revoke the link, but per the same help article you cannot publish that exact artifact again afterwards. Unpublish only when you actually mean it.
4. 💌 Send it to one person tonight. Not a launch, not a post. One friend, one link, one "I made this". That is the whole point of the exercise.

The four things that go wrong

Why a pointless build is worth your evening

Everything most of us build with AI is optimised for something: a funnel, a dashboard, an hour saved. That is useful and it is also why building can start to feel like admin. A toy has no metric attached, so the only question left is whether you like it, and that turns out to be the fastest way to learn how describing, testing and iterating actually feel. The skill you walk away with is the same one you would use on a real product. You just picked up while enjoying yourself.

Sources

• What are artifacts and how do I use them, plan availability and artifact types
• Publish and share artifacts, the Publish button, embed code and the unpublish caveat
• Anthropic on building with artifacts, background on what artifacts are for
• MDN, the Web Audio API, the browser feature generating your toy's sound in code