Free skill for Claude Code & Codex
AI websites all look the same. Yours won't.
Your agent builds the site the way a director makes a film: cast a director, write a shot list for every section, check the rendered frames before handing it over.
git clone https://github.com/akseolabs-seo/cinematic-ui ~/.claude/skills/cinematic-uiShot list · this page
- 01The take: a façade in hard sunopening
- 02Cut. Pull back, turn the flatreveal
- 03The dream: the default pagedissolve
- 04You print a takeinteraction
- 05Day for night: drag the filtergrade
- 06The projection room: rushesclimax
- Director: Truffaut, Day for Night
- Medium: painted flats, SVG and DOM
- Lead: the take itself
- Grade: hard sun, then day for night
Not a theme. A film crew, inside your agent.
The wall you just saw is a painted flat. This site was itself directed with Cinematic UI: director, medium, lead, grade and shot list, each written down with a reason, then checked frame by frame against what rendered. Turn it over and there is its shot list.
A dream · black and white
You have seen this page before.
Ask an agent to "make it premium" and this is what tends to come back: a centred headline, two buttons, a glowing gradient, three equal cards. Nobody chose any of it. They are defaults.
Cinematic UI lists them as the lazy cut. If one shows up in the shot list, the scene gets reshot.
The method
One film, ten stages.
Each stage ends with something written or something rendered, all kept in one treatment.md that the build is checked against.
Read the production →- 01Developmentproduct truth, logline, audience arc
- 02Cast the directorthree candidates, one kept, 5–7 mechanisms
- 03Choose the mediumink, pencil, pixel, print, photography, or 3D
- 04Casting & the asset callthe lead and its arc; one message for the assets
- 05Screenplayevery visible word
- 06Storyboardform, skeleton, a shot list for every scene
- 07Animaticthe whole page, rough, in the chosen medium
- 08Principal photographycast, set, light, frame, cuts
- 09Screeningdailies, the projection room, notes, reshoots
- 10Deliverywhat was screened, what is a stand-in, what is still needed
Same brief, three takes
Same product. New director.
Both are real, live sites for the same product; only the director changed. Press 1, 2 or 3.
"An LLM gateway: one endpoint for every model." A fictional product.
The grade
Day for night.
Night scenes are often shot in daylight and turned to night by a filter. In Cinematic UI the grade is cast the same way: researched from the chosen film, measured from its frames, and committed in full. Fourteen sourced looks ship with the skill, and any film can be researched live.
Drag the filter, or use the arrow keys
The props table
Every tool on the table. None of them has a look.
The kit is equipment: every effect starts at zero and nothing is switched on by default. Two sites built on it should share no visible trait.
reel.jsthe playhead: scenes, pinned frames, designed cutstype-fx.jsforty-four type performances, every frame reproduciblegrade.jsthe grade for DOM sites: halation, grain, vignettelooks.jsmedia beyond photoreal: ink, sketch, pixel, halftoneplane.jsa camera that shoots a live interface like a setstage.jsthe sound stage, for films that really are solidapp.jsapp mode: router, states, shortcutsscreening.mjsdailies: contact sheets on three viewportsgrade-from-stills.mjsmeasures reference stills into a gradefind-footage.mjslegal photographs, footage and sound from open libraries
The projection room · rushes
Six sites. No two alike.
Every one made by an agent with this skill. Open any of them live, or read the treatment it wrote.
- Roll 01 / 06LockworkRobert Wise · The Andromeda Strain (1971)Live typeset readouts in a hairline monitor wall on flat lab-white grounds, with SVG/CSS gate doors; no images, no 3DWatch live ↗Treatment →
- Roll 02 / 06PurserBilly Wilder · The Apartment (1960)Monochrome CSS 3D: DOM cards in a forced-perspective grey office, embossed set type, one green; no canvas, no imagesWatch live ↗Treatment →
- Roll 03 / 06LullEdgar Wright · Baby Driver (2017)The product UI as the world: a simulated live console in DOM and inline SVG, physical keycaps and set type, on a night ground with monitor glow; no canvas, no imagesWatch live ↗Treatment →
- Roll 04 / 06Odd LotJean-Luc Godard · Pierrot le Fou (1965)Flat primary cards, set type and five inline-SVG client artefacts, each in its own palette and face; no canvas, no photographsWatch live ↗Treatment →
- Roll 05 / 06Lattice (Matrix cut)The Wachowskis · The Matrix (1999)A 2D canvas of glyph streams made of the product's own traffic, plus DOM type and CSS 3D bullet time; no WebGL, no photosWatch live ↗Treatment →
- Roll 06 / 06Lattice (Miyazaki cut)Hayao Miyazaki · Kiki's Delivery Service (1989)Six AI-generated gouache-style painted plates, drawn SVG wind, rain and route lines, and DOM; no WebGLWatch live ↗Treatment →
Every production on this site is a fictional brand. The output is real: made by agents using the skill.
Action.
Give your next site a director. One line to install, then tell your agent "/cinematic-ui a homepage for…" and it starts.
git clone https://github.com/akseolabs-seo/cinematic-ui ~/.claude/skills/cinematic-uiCodex CLI: git clone https://github.com/akseolabs-seo/cinematic-ui ~/.codex/skills/cinematic-ui
- Free, MIT licensed
- Plain Markdown and JS, nothing to build
- Asks before generating images or spending credits
Questions
Is it free?
Yes. Cinematic UI is open source under the MIT License.
Which agents does it work with?
Claude Code and Codex CLI by cloning it into their skills folder; any other agent by pointing it at SKILL.md. It is plain Markdown, JavaScript and Node scripts, with nothing to build.
Does it always use 3D?
No. Photoreal 3D is one medium among many. A film made of ink, type or photographs gets no canvas at all.
Will it generate images without asking?
No. It lists every asset the film needs and asks once: you supply it, a free licensed library, AI generation with tool, count and rough cost, or a redesigned shot.