Verbs that make things
intermediate·9 min·Markdown for agents
What this lesson teaches
Use sound to decide which moments earn a sound and build one family, svg to create or animate vectors, film to plan or measure a launch video, and stage to build faux product UI for a landing page.
The last four verbs make new things: sounds, vectors, films and product demos. Each still starts with a decision, and each comes back in a shape you can check.
sound
Reach for it when you're wondering if your product should make a sound, or when the sounds it makes feel stock, late or annoying.
$ /design-engineering soundIts posture is decide, then build. If you only asked whether something should make a sound, you get one line and it stops.
For product UI, it classifies every proposed moment and rejects most of them. The test is the hundredth use, not the first: a click sound is charming once and maddening by lunch. The survivors become one family made of one material, generated (with ElevenLabs if you have a key, or an offline synthesiser if not), and wired so that sound is off by default, unlocks on your first tap or click, and lands its sharp start on the exact frame the animation makes contact.
What comes back: a (Moment, Sound, Material and contour, Length, Trigger, Why), then the files and the wiring.
For a video, the defaults flip: sound is the medium and silence is placed on purpose. It picks the film's sound register first.
svg
Reach for it when you need an icon, a logo mark or an illustration made or cleaned up, or when you want one to move.
The second word picks the job:
| Invocation | Does |
|---|---|
svg create | draws on a whole-number grid with named groups and currentColor, optimises it, returns the file and its size before → after |
svg animate | decides whether it should move, picks the engine for where the file lives, adds the reduced-motion path, returns the motion plan and the file |
svg sticker | an animated isometric sticker for an empty state or onboarding |
$ /design-engineering svg create icons/export.svgThe engine follows the file's home. Inline in the page: CSS or the Web Animations API. Used as an <img>: keyframes embedded in the file itself, because page CSS can't reach inside. A messy file with no viewBox or unnamed groups gets create first.
film
Reach for it to plan a launch video before anyone opens an editor, or to measure one that's rendered.
| Invocation | Posture | Does |
|---|---|---|
film plan | decide, then build | names the first, then the beats, the type, the product demo, the motion, the cuts and the sound |
film review launch.mp4 | judge | measures at the native frame rate, builds contact sheets, reads the loudness, recounts every cut by eye |
film formats | build | a loop, a logo sting, or a vertical cut |
$ /design-engineering film plan "60s launch for the export feature"With no second word, a video file means review and anything else means plan. A URL is never downloaded without your yes: it tells you the filename, source and size first.
stage
Reach for it when a landing page, feature card, docs page or bento grid needs a picture of your product: a still, or a short demo with a cursor.
$ /design-engineering stage demo "the export flow, cursor clicks Export"| Invocation | Returns |
|---|---|
stage still | a framed product shot, at its real size plus a 358px phone design |
stage demo | the still as its opening frame, a 3–5 beat story of 10–16 seconds, a poster frame, a pause control |
stage bento | a planned grid of feature tiles, checked at its widest and narrowest |
stage review | judge only: frames it films itself, ranked framing → hierarchy → motion → polish |
Every job starts the same way: your contract's colours, type and radii become the demo's look, and the plan is written before code (where it sits, the one thing that happens, the 3–7 real strings, what's left out). With Benji Taylor's Stageshow installed, the build goes to it. The demos in this course are built that way.
/design-engineering stage demo "AI answer with sources" for the hero beside our headline. Write the plan first. Real strings only where the story is. Film it at 720 and 390, step through every beat, and hand me REHEARSAL.md with what you didn't check.
The whole toolkit, one table
| Verb | Posture | Returns |
|---|---|---|
review | judge | verdict + Before / After / Why |
tells | judge | deletion list |
a11y | judge | table with a WCAG criterion per row |
polish | build | edits + up to five rows |
motion | decide, then judge or build | values in ms, curve, properties |
mobile | fix | wrong / changed / needs a phone |
tokens | build | token map + edits |
break | adversary, then judge | Broken / Ugly / Fragile, then stop |
ship | fix | verdict, lanes, device and human lists, build output |
sound | decide, then build | sound map + files |
svg | build | file + size, or a motion plan |
film | decide or judge | a plan, or measured rows |
stage | build (review judges) | component + contact sheets |
Quick check
You ask /design-engineering sound to add sounds to a to-do app. It proposes sounds for 'task added', 'task completed', 'button press' and 'list reorder'. Which is it most likely to keep?
In the skill
The nodes your agent reads when it does this work.
Connected lessons
What this lesson builds on and leads to, across every course.
