The Workflow Designer is running: a build tour
What the in-house Workflow Designer looks like now that it is shipped: the kanban console, the compose step, the human gate, and what runs after you approve.
The first version of the in-house Workflow Designer is running. This is what it actually looks like -- the console, the compose step, the human gate, and what the render pipeline does after you click Approve. The video above was filmed by the system it is documenting.
The console
The Studio Director lives at /studio/director -- an admin-only kanban board with four columns: Draft, Approved, Rendered, Published. Each card is a video project: a title, a YouTube description, script beats, a shot list, and chapter markers. The composer generates all of this from a content URL. You review the draft, approve it or discard it, and the render queue does the rest. The gate is the whole point: an agent can compose as many drafts as it wants, but nothing gets filmed until a human reads the script and clicks Approve.
The compose step
When you hit Compose, the director calls a Claude-backed API route (POST /api/studio/director/draft) with a list of source items -- blog posts, research essays, vision pitches, whatever the feed surfaces as publishable. Claude drafts a project skeleton: a kind (short | explainer | recap), a hook line, script beats with speakers and durations, a shot list mapping each beat to a route and a set of browser actions (clicks, scrolls, focus spotlights), chapter markers, and YouTube metadata. The draft lands in the kanban at the left. Nothing has been filmed. Nothing has left the machine. The draft is just a plan.
The human gate
Every draft sits in the Draft column until a human reads it and clicks Approve. That is not a formality -- it is the load-bearing decision the whole system is designed around. The original n8n post explains why: a general-purpose orchestrator will not enforce a gate an agent cannot self-approve. This one does, by construction. The approve route is admin-only, requires an active session, and advances the row from draft to approved. No workaround. The agent cannot trigger it via cron, webhook, or any other path. It waits.
What runs after you approve
The render pipeline is a standalone Node script (scripts/studio/director-render.mjs). It pulls the oldest approved project from Supabase, calls projectToReel() to get the cutReel() config, and hands that config to the recorder (scripts/studio/lib/reel.mjs). The recorder opens a headless Chromium instance against the running site, navigates to each shot route, performs the scripted actions, and captures intervals or screencasts via Playwright. ffmpeg stitches the segments, adds the branded intro and outro bumpers, burns in captions, lays a music bed, and optionally generates an ElevenLabs voiceover from the script beats. The final render is a VP9 webm and H.264 mp4, plus a poster frame. A separate add.mjs step publishes them to the /studio gallery and optionally uploads to YouTube. The whole pipeline -- from Approve click to published reel -- runs unattended.
This video, recursively
The cover video above was made by the same pipeline it is describing. The reel script (scripts/studio/reel-workflow-designer.mjs) films the Studio Director console in action, narrates the compose-approve-render flow, and publishes the result to /public/covers/ for this post to embed. The composer wrote the shot list. The recorder ran the browser. A human (one) read the script and clicked Approve. That is the whole loop, eating its own tail.
What is next
The Studio Director is one surface over one substrate -- it composes video projects from site content. The RFC at docs/design/workflow-studio.md describes the broader Workflow Designer: a visual node-graph editor at /platform/workflows where any multi-step agent process can be wired up, inspected, and gated. Node types: operator, LLM, HTTP request, human-gate, branch, sub-workflow. Triggers: cron, event, manual, webhook. The director is Phase 0 -- a single specialized harness that validates the human-gate primitive before the general surface ships. Phase 1 is the visual editor.
Get the next one
An occasional note when something genuinely new ships here — essays, free tools, projects. No schedule, no filler, easy out.
Need something like this built?
I design and ship AI tools, full-stack apps, and data pipelines — end to end, to production. Tell me the problem in a sentence; I'll give you an honest read on fit within a day.
Work with me →