Cinematic UI 2.0 Director’s Cut: What It Is and What Changed

Cinematic UI 2.0, the Director’s Cut, stops asking an AI to design a website and asks it to direct one. It is an open-source agent skill for Claude Code, Codex and any agent that can read a Markdown file, and it is free under the MIT licence.

The idea behind 2.0

Version 1.x treated film as a reference: pick a director, borrow the mood, then run a long pipeline of image proofs, approval gates and contracts to keep the result on track. It worked, but it was heavy, and the sites tended to end up as a premium template wearing a film’s palette.

2.0 was rebuilt from an empty folder around a different idea: a site is a film whose playhead is the scrollbar. Sections are scenes. The viewport is the frame. A scroll is a cut or a camera move. The agent’s job becomes the director’s job: decide what the audience sees, in what order, from where, in what light, made of what, and why. Then prove it on rendered frames.

One rule carries it: borrow the film’s mechanics, never its costume. A director’s style is a set of decisions about where the camera stands, how long a shot holds and how a cut lands. Those become structure and motion. Film titles, characters and props never appear in the product’s UI.

What was new in 2.0

A real production, start to finish. Logline, cast the director, choose the medium, cast the lead, the asset call, screenplay, shot list, animatic, principal photography, screening, delivery. One working document, treatment.md. No phase gates, no approval files, no JSON contracts.
Directors as mechanisms, not moods. Forty-odd directors written as what they actually do, each translated into structure and motion, each with the lazy version called out. A casting session records why the other two candidates lost.
The medium is cast from the film. Photoreal 3D is one option among ink wash, pencil and watercolour, cel shading, pixel, halftone and risograph, CRT and neon, liquid, gradient light, painted 2.5D, pure typography and photography. Every look ships as tested code.
A shot list for every section. Beat, shot size, lens, camera move, blocking, light, cut, length, money frame and mobile cut for each scene, plus a skeleton so two sites cannot secretly be the same film.
It asks before it fakes. The asset call is one message listing what the film needs, with three routes for each: you supply it, it generates it (tool, count, cost), or the shot is redesigned.
Real footage, legally. find-footage.mjs searches open libraries and returns trimmed clips with a CREDITS.md.
A kit with no look of its own. reel.js for scenes and cuts, stage.js for 3D, looks.js for other media. Every effect starts at zero.
Screened or it did not happen. screening.mjs shoots every scene on three viewports and flags blank frames, dead holds, sliced text and overflow. Five frames are judged at full size.
Built for CJK as well as Latin. Vertical setting, hand-broken lines, mixed-script rules and typeface casting for Traditional and Simplified Chinese, Japanese and Korean.

What was removed

The image-proof-first pipeline, phase gates, approval JSON, run contracts, receipts and validators. The 2.3 MB design-DNA database, the directors-200 table, and the effect, font, colour and composition catalogues. Roughly two hundred files became thirty.

What 2.1 to 2.8 added

The skill has kept moving since the first Director’s Cut. The current version is 2.8.0.

2.1, the Award Reel. Calibrated against twenty-one Awwwards winners and fifteen CSS Design Awards winners. It adds the award pass to the treatment and type-fx.js, a type department of forty-four text performances.
2.2 and 2.3. Deck mode and a film mode with a motion-graphics school, later moved out into their own skills.
2.4 and 2.5. Films moved to the companion skill cinematic-cut and decks to cinematic-ppt, which share the kit and the filmography.
2.6, the grade is cast. A film’s colour now reaches the page: references/grades.md with fourteen sourced looks in two families, kit/grade.js, and grade-from-stills.mjs, which measures reference stills.
2.7, any film, researched. The look book stopped being a menu. Any film you name, or any look you describe, is researched live, with every claim tagged primary, secondary, wiki or inference. The film’s world and poster grammar reach the page too.
2.8, app mode. Dashboards, back offices and consoles are directed on a smaller budget, with the task as the playhead, a signature view instead of a KPI row, eight designed states and app-screening.mjs.

How it was tested, and what it cannot do

Fresh agents with no other context were given only the skill and a client brief. For 2.0 they produced a tea brand homepage, a twenty-second launch teaser, an independent bookshop’s subscription page built with no 3D at all, and a copy-heavy consultancy page. Their friction logs, an independent review by a second model and a survey of other skills were folded back in before release.

The limits are stated plainly in the README. It has not been verified on Safari, Firefox, real phones or screen readers, and smoothness cannot be judged headlessly. Procedural 3D struggles in close-up on familiar real objects. It raises the floor and widens the range, and it does not guarantee an award.

Try it

git clone https://github.com/akseolabs-seo/cinematic-ui ~/.claude/skills/cinematic-ui

For Codex, clone into ~/.codex/skills/cinematic-ui. Then ask for a site, or ask it to pitch three directions. The getting started guide covers the rest, and the demo productions show what fresh agents made with it.