Cinematic UI 2.0 — Director's Cut
An agent skill that directs websites and apps the way films are made.
AI-built sites tend to look alike because nobody chose anything. Cinematic UI makes your agent cast a director,
decide what the picture is made of, write a shot list for every section, shoot it, and check the rendered frames
before handing it over.
Website · Live demos · Docs · English · 繁體中文
git clone https://github.com/akseolabs-seo/cinematic-ui ~/.claude/skills/cinematic-ui
Then tell your agent: /cinematic-ui a homepage for a pour-over coffee subscription
Launch film
Watch the launch film · 1:30, MP4, with sound, on-screen text in Traditional Chinese
Live demos
Ten live sites at cinematicskill.com, each made by an agent with this
skill. Every brand is fictional; the output is real. Click a frame to open the site. Each one also has its
treatment: the director, medium, lead and grade it chose, and why. The site lists the English productions in the
gallery and the Traditional Chinese ones in the
zh-TW gallery.
The idea
A site is a film whose playhead is the scrollbar. A section is a scene, the viewport is the frame, a scroll is a
cut or a camera move, and the visitor is the audience, the editor and, once, a participant.
One rule carries the whole skill: borrow the film's mechanics, never its costume. A director's style is a set
of decisions: where the camera stands, how long a shot holds, what the light hides, how a cut lands, what the
picture is made of. Those become structure, motion, medium and material. Film titles, characters and props stay
out of the product's UI.
What it does differently
| Most "make it premium" prompts | Cinematic UI |
|---|
| Pick a style, apply it to a layout | Pick a director by the product's dramatic problem, extract 5–7 observable mechanisms |
| Default to one look (usually glossy 3D or glass) | Cast the medium from the film: ink, pencil, cel, pixel, print, neon, type, photography, or 3D |
| Design a hero, then fill sections | A shot list for every scene: beat, shot size, lens, move, blocking, light, cut, length |
| Invent placeholder imagery | The asset call: ask once. You supply it, a free licensed library, it generates, or the shot changes |
| Animate things as they enter the viewport | One scrubbed timeline; every cut between scenes is a decision |
| "Looks good" | Screening: contact sheets on three viewports, five frames judged at full size, named corrections |
| Every site ends up related | A filmography and a skeleton check, so the next production differs from the last three |
The production
| # | Stage | What comes out |
|---|
| 1 | Development | Logline and audience arc |
| 2 | Cast the director | Three candidates, one kept, mechanisms extracted |
| 3 | Choose the medium | What the picture is made of, and why |
| 4 | Casting and the asset call | The lead and its arc; one message asking for what the film needs |
| 5 | Screenplay | Every visible word |
| 6 | Storyboard | Form, skeleton, a shot list for every scene, the audience's part |
| 7 | Animatic | The whole page, rough, in the chosen medium |
| 8 | Principal photography | Cast, set, light, frame, cuts |
| 9 | Screening | Contact sheets, the projection room, notes, reshoots |
| 10 | Delivery | An honest report: what was screened, what is a stand-in, what is still needed |
What's in 2.0
App mode. Dashboards, back offices, admin panels and consoles get their own rules. The playhead is the task,
and cinema gets about a tenth of the frame: a signature view only this product could have, in place of the usual
KPI row. Every route is screened in eight states with app-screening.mjs, across viewports and themes.
Any film, researched live. There is no fixed film list. Name a film, or describe a look ("90s Hong Kong late
night, lonely, humid"), and references/film-research.md works from sourced interviews and reference frames, with
every claim tagged by source quality.
The grade. A film's colour reaches the page. references/grades.md has fourteen sourced looks,
grade-from-stills.mjs measures reference stills into a grade, kit/grade.js applies it to DOM sites, and
screening.mjs --grade flags frames that drift off it.
The film's world. references/art-direction.md turns production design into cards, buttons, dividers, forms
and footer. The poster's composition grammar shapes the first frame, the OG image and the title cards.
The media. Photoreal 3D is one option, not the default. Each of these ships as tested code in kit/looks.js:
Ink wash · pencil and watercolour · pixel · halftone and CMY print · CRT and neon · cel shading with outlines ·
liquid · gradient light · illustrations and photographs as layered 2.5D planes · hand-drawn line boil for DOM and
SVG, plus a studio-lit HDR 3D stage for films that really are solid and glossy, and a no-canvas path for films
made of type.
Type performances. kit/type-fx.js holds forty-four text performances. Scroll can scrub them, a clock can
render them frame-exact, and the real text stays in the DOM.
Real footage, legally. find-footage.mjs searches open libraries (Openverse, Wikimedia Commons, Internet
Archive, NASA, and Pixabay or Unsplash with a free key) with the shot as the query, and returns trimmed clips with
poster frames and a CREDITS.md.
Install
Claude Code
This is the beginning of the README. Read the rest at the original. Read the full README ↗
