Part of Next Frontier Builders
Phase 4 · Kid Life & Learning

Interactive Learning Artifacts

4 screens · build, iterate, deploy

Tap, learn, repeat.

The last lesson built a written lesson on any topic. This lesson builds the same kind of content as an interactive HTML artifact — a clickable page your kid actually wants to tap through. Parts of a cell where each part responds when she taps it. Multiplication facts she can drill until she's fast. State capitals she can quiz herself on. The water cycle as an animation.

Same underlying ask pattern as the text lesson. Different output. Better for kids who'd rather do than read.

The reusable constraints — keep this snippet handy.

Every artifact you ask for should include these constraints so the output works on your kid's device. Copy these once; paste them into any interactive-artifact ask:

Kid Artifact Constraints (reusable snippet)
Build it as a single self-contained HTML file. Use plain CSS only — no external libraries, no CDN imports, no Tailwind. Mobile-friendly: works on a phone or tablet without zooming, with tap targets at least 44 pixels tall. Kid-readable language at [her] grade level. No login or backend required — it should work just by opening the file in a browser.

Without these constraints, Cowork tends to reach for external libraries, fancy frameworks, or developer-style code that won't run cleanly on a kid's tablet. With them, the output works the first time on the device she'll actually use.

Build the first one — parts of a cell.

Open your kid's Project (or the right subfolder in your shared Kid Life Project). Paste in the constraints snippet from the last screen, then describe what you want:

Sample — interactive parts-of-a-cell artifact
Build me an interactive learning artifact for Mia on the parts of a cell. She's in 4th grade and her class is starting the unit next week. [Paste the Kid Artifact Constraints snippet from the last screen here.] The artifact should: show a simple cell diagram with the main parts labeled (cell membrane, nucleus, cytoplasm, mitochondria, ribosomes, vacuole), let her tap each part to see a kid-friendly explanation of what it does, and include big buttons at the bottom so she can tap any part by name too. Use warm colors that look friendly, not clinical. Save the artifact in this Project so I can come back to it.

Cowork builds the artifact. Open it on your laptop, click around, see if it works. The first version is usually close but not perfect — proceed to the next screen for the iteration moves.

This works for almost any topic.

The parts-of-a-cell example is just one example. The same pattern works for: the water cycle (tap each stage to see what's happening), multiplication facts (tap to drill), state capitals (quiz mode), the food groups, parts of speech, the planets, bones in the body, fractions, Spanish vocabulary, the periodic table at her level. Whatever your kid is studying or about to study — you describe it, Cowork builds it.

Iterate until it's right.

The first artifact is almost never the final. Cowork is guessing about what your kid will respond to. Telling Cowork to fix what's off is faster than starting over.

Iteration moves that come up often

  • "The colors look clinical. Make it warmer and more kid-friendly."
  • "The words are too hard. Rewrite the explanations at a 4th-grade level — shorter sentences, simpler words."
  • "The buttons are too small for tablet thumbs. Make them bigger."
  • "Add a 5-question quiz at the end she can take after exploring."
  • "Change this from a generic cell to a plant cell — add the cell wall and chloroplasts."
  • "Add a 'read aloud' button on each part that reads the explanation."
  • "Make the cell diagram bigger and the explanations smaller. She's going to spend most of her time on the diagram."

Iterate until the artifact is one your kid will actually want to use. Usually two or three passes does it.

Show it to your kid before you call it done.

The real test isn't whether you like the artifact — it's whether your kid does. Pull her over to the laptop and let her tap through it for a minute. Watch what she does and doesn't engage with. Then go back to Cowork with the specific fixes: "She kept trying to drag the labels — make them tappable instead. And she said the explanations are boring — make them more fun, maybe with a one-line joke or fact per part."

Get it to the kid's device.

The artifact lives in Cowork on your computer. To get it onto your kid's tablet or phone where she'll actually use it, three paths — pick the one that fits this artifact.

Path 1 — On your screen.

Pull up the artifact on your laptop and let her use it there. Best for when you want to be in the room while she learns, or when she's young and shouldn't be on her own device.

Path 2 — Send the file to her iPhone or iPad.

Tell Cowork to save the artifact as an HTML file in the Kid Project folder. AirDrop it (or text it) to her device. Have her open it in Documents by Readdle — a free file-manager app from the App Store. Inside Documents by Readdle, the artifact is fully interactive — works the same as on your laptop.

Why specifically that app: iOS strips JavaScript from local HTML files when you open them in Messages, Files, or Mail previews. Documents by Readdle is one of the file-manager apps that runs HTML properly. Free, well-established, many kids' devices already have it because it's also useful for school PDFs.

Path 3 — Deploy to Netlify for a permanent URL.

Best for when your kid will use the artifact more than once, or when you want her to have ongoing access to a library of learning tools. Tell Cowork to deploy to your Netlify site, and your kid bookmarks one URL on her device. Each new artifact deploys to the same site with a different page — she always knows where her learning tools live.

If you set up Netlify back in the dashboard lesson (Build Your Family Dashboard), the deploy is one prompt:

Deploy the artifact to Netlify
Deploy this interactive artifact to my Netlify site so [kid] can use it on her tablet. Give it a clean URL like /parts-of-a-cell so it's easy to bookmark.

If you haven't set up Netlify yet and want to: tell Cowork "help me set up Netlify for hosting my kid's learning artifacts" and it walks you through the free signup and connector setup once.

Optional: dashboard block per kid.

If you'd like the dashboard to show what each kid is currently studying:

Add a Kid Learning block to the dashboard
Add a "Kid Learning" block to my Family Dashboard. For each of my kids, show the most recent interactive artifact from their Project folder with a link to open it. Update automatically as I build new artifacts. Save the updated dashboard.

Next: Worksheet Generation.

Interactive artifacts are great on a screen. Sometimes paper is the right answer — a worksheet your kid can actually fill in with a pencil. Next lesson covers that.

Continue to Worksheet Generation →