Websites, Tools, and Tiny Apps with Codex/Claude Code
The empowerment week. No coding experience expected — say it in the first minute.
60-second recap
The deal
AI for friction, humans for meaning. Raw output is never finished work. Verify before trusting. Disclose where it matters. Skepticism welcome when specific.
Standing recap.
Why now
Why artists and code, now
Not to become software engineers. Code does four things for you:
Prototype. Automate. Publish. Make interactive work.
"The barrier just collapsed. Today you walk through where it stood."
The shift
The bottleneck moved
It used to be: can you code?
Now it's: can you specify?
And specification is design thinking. Your home turf.
"You're closer to this than most programmers — you already know how to brief."
The week in one line
The spec is the skill. The build is increasingly free.
"Boring-sounding tools get used; impressive-sounding ones don't." Returns in the lab.
Why tiny
Where artists win
Single-file HTML: runs in any browser · can't touch anything else · fully inspectable
Most reliable zone for AI coding. Lowest risk. Yours.
"We stay in this category today on purpose."
Part 1, continued
Spec-first: the interview method
~0:20.
The method
Don't start with "build me an app"
Start with: make it interview you. One question at a time, max 6.
Your answers become the spec.
Same interview move as Week 6 (characters) — name the rhyme.
The spec
The load-bearing parts
User · problem (with honest frequency) · inputs ≤6 · outputs · UI in words
What it does NOT do — the feature-creep fence Acceptance checks — 3–5 testable sentences
Template: tiny-tool-spec-template.md. NOT-list and checks are where specs earn trust.
Career note
The professional sentence
"Wrote the spec, directed the build, verified the result."
Current, honest, hireable.
Returns in Week 13 as CV language.
Part 1, continued
The build loop
Client-revision thinking
~0:30.
The build
One prompt builds the file
Spec + "single self-contained HTML file, no frameworks, no build step, no network calls, mobile-friendly."
Save as .html. Open in browser. Working software.
Announce the TextEdit plain-text trap here, preemptively, kindly.
Revisions
Revise like a client, not a coder
Change request: the outcome — "the Copy button should visibly confirm."
Bug report: steps + symptoms — "when the mood field is empty, the output says 'undefined'."
"Same spirit as Blender's error loop. You report; it repairs."
Part 1, the trust layer
Inspection
~0:36.
No programming needed
Three questions
"Walk me through this file like I'm an artist: what are the three main parts, where does my data go when I type it, and does anything leave my computer?"
The week's most important slide. True tiny tool answer: "nothing leaves your machine."
And verify
Check the claim
Skim the file for fetch or http. Ten seconds.
Privacy became checkable the day software became readable conversation.
Do this live in the demo. It lands.
The rule
Boundaries
The scope fence
The moment a tool needs accounts · payments · other people's data — it's not a tiny tool.
App builders will build past the fence. The fence doesn't move.
Flat delivery. Lovable/Bolt/v0-class named in the handout with the same rule.
And beyond
The deeper route
Tiny tools are utility. Creative coding is art-making with code.
p5.js + The Coding Train, when today lights the fire.
For the students who feel something click — there's a whole medium waiting.
Break
Break — 10 minutes
Demo next: the room writes a spec; the spec becomes software.
Stage the interview prompt. Safety twin tested and ready.
Demo
The moodboard prompt generator, built live
~1:00. The room answers the interview; you arbitrate.
Demo · move 1
The interview
You're the client
The model asks. The room answers. I arbitrate the fights.
Six questions → a complete spec, on screen.
Fast, fun, loud. Read the assembled spec; point at the NOT-list.
Demo · move 2
The build
Spec → file → browser → working app
Shout me test inputs.
Demonstrate the save correctly (plain text!). Let them feel the minutes-not-months moment.
Demo · move 3
The change request
The room picks one feature
Pasted verbatim, client voice.
"Add a copy button" / "save the last 5" / "dark mode" — whatever the room wants.
Demo · move 4
The inspection
Three questions, then the proof
Scroll the file once — where's fetch? where's http? Nothing leaves the machine.
"You don't have to read it all. You have to know its shape and where your data goes."
Demo · move 5
The planned failure
The change request broke something. Good.
Bug report, client voice: "when I [steps], it [symptom] instead of [expected]."
Describe the bug, not the code.
If nothing broke, pick a request likely to break. The repair landing is the confidence moment.