Ari’s Space*   est. 2026
Skip to content
ari*s space[ a. ]
← Libraryworkflows / 2026-06-16

I directed a website live, the way I direct a film set

I reacted to a live render and called one change at a time while an agent built each move. The chosen dial values became a design system.

5 parts / Hover to explore. Click to read.

I reacted to a live render and called one change at a time while an agent built each move. The chosen dial values became a design system.

Live render
     | one concrete note
     v
Edit -> compile check
     |
Inspect the changed render
     |
Adjust named values
     |
Save the chosen look
Each visible change supplies context for the next note. Compilation checks the edit; the human still judges the look and preserves the chosen values.
Context Pack (for agents)
A System 7 desktop where a director's chair faces a live website window, with a loop of arrows reading note, build, render, react
Give a note, build the change, look at the render and respond. Keep going while each move is visible.

I've directed film sets for years. In the build behind this essay, I used that same way of working on a website: watch the frame, call what it needs and see the change before making the next call.

When I said I “never wrote a prompt”, I meant I hadn't written a complete design brief in advance. I was still giving instructions. They were short notes against something I could see.

Give the next note to the live page

On a set, I don't have to operate the camera to direct the frame. The crew makes the change. I watch what it does.

With the page open, the agent held the implementation work. I reacted to the render, called one change and waited for it to land. The result supplied the context for the next note.

Two panels. On the left a sealed memo is fired once into a dark void. On the right a person stands at a live monitor calling notes as the screen changes, with arrows looping between them
A live result gives the next instruction a shared reference. You can see whether the change helped.

A written brief is still useful. This loop adds something it can't provide on its own: a direct reaction to the thing after it exists and moves.

Let the look develop through visible changes

The page became a wall of twelve CRT monitors, each playing a showreel at a different second. Scanlines, flicker, teal light.

“Make the cursor knock the screens.” A sweep of the mouse then tore the signal, split the colour and sometimes dropped a screen into black static before it recovered.

“Dirtier.” A pink and teal spark appeared at the pointer. The headline acquired a custom glitch typeface.

CRT 01 · SIGNAL
SIGNAL ░░░░░░░░░░░░░░░░STATUS: LOCKED
Sweep or click the screen. You are not editing it, you are directing it.

Those details emerged during the work. They weren't all specified at the beginning. The agent built each change; I reviewed the frames and called the moves.

Keep five steps in the loop

  1. Get it running and look at it. A note like “warmer” needs a visible reference.
  2. Change one thing per round. Make it possible to connect your reaction to the change that caused it.
  3. Give the values names. Name and expose every tunable visual value as a dial so you can steer the feel without translating every note into code.
  4. Require compilation evidence. The agent checks that its edit compiles before reporting it finished. A successful compile still leaves the visual judgement to you.
  5. Save the chosen look. When the settings work together, keep the final dial values as the design system you can reuse.
DIALS · DESIGN TOKENS
GRAIN60
GLOW40
TEAR30
FLICKER70
LIVE PREVIEW
VTR 04 · LIVE
VTR 04 · LIVE
tokens.css
--grain: 0.60;
--glow: 10px;
--tear: 5px;
--flicker:0.70;
Turn the dials. The values you land on are the design system.

The named values make the result repeatable. You can return to a look, compare it with another or carry it into the next part of the site.

Use the loop where seeing changes the decision

The open-source art-direct skill contains the method.

Try it on one screen with a clear purpose. Get a first render, give one concrete note, and wait until you can inspect the result. Save the settings when the look works.

You don't have to predict every aesthetic decision in the opening brief. You do need a result you can see, a small enough change to judge and a way to keep what you chose.

Stop prompting, start defining outcomes. // A<3

[ comments ]

guests welcome. members show first in the list

no comments yet. start the thread_

1 / 7