Cinematic UI 2.0中文

Docs / 01

Getting started with Cinematic UI

Install the Cinematic UI agent skill for Claude Code, Codex or any agent, run your first prompt, and learn the three cases where it stops to ask you.

Cinematic UI 2.0 (Director’s Cut) is an open-source agent skill that directs websites the way films are made. You cast a director and one of their films, decide what the picture is made of, give the lead an arc, and write a shot list for every section. The agent then builds the page with a scroll-driven camera and designed cuts, and screens what it actually rendered before it calls anything finished. It is plain Markdown, plain JavaScript and Node scripts, so there is nothing to build.

Install

Claude Code

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

Codex CLI

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

Any other agent. Point it at SKILL.md. The method, the references, the kit and the scripts are all files in the repository, so any agent that can read files and run Node can follow it.

For screening and rendering

The screening and render scripts run inside the project you are building. Install the browser driver there:

npm i -D playwright-core     # uses your installed Chrome or Edge
# ffmpeg is needed only for rendering video

playwright-core is what lets screening.mjs photograph every scene of your page. ffmpeg is only required if you want to record a site as an MP4 with render-film.mjs. You can build and screen sites without it.

Your first prompts

Invoke the skill by name and describe what you want:

/cinematic-ui a homepage for a pour-over coffee subscription, Awwwards level
/cinematic-ui shoot this SaaS landing page the way Ozu would
/cinematic-ui pitch me three directions for this brand

The first prompt gives the agent a brief and lets it direct. The second names a director, and the skill will use it; if the choice would hurt the product it says so once and offers the mechanism it would keep. The third asks for a pitch: three treatments, each with a different director, medium and logline, one paragraph and one signature shot apiece. Then it builds the one you choose.

By default the agent directs. It makes the decisions, builds, screens, and shows you the result together with its treatment (treatment.md, the single working document of the production).

When it stops to ask

It stops in exactly three cases:

  1. It cannot tell what the product is. If the product or page scope cannot be inferred, it asks once. Otherwise it decides and proceeds.
  2. It needs assets. This is the asset call: one message listing what the film needs, with its recommendation. You supply the material, it comes from a free licensed library, it is generated with your permission, or the shot is redesigned around a stand-in. It does not spend generation credits without a yes.
  3. Something would be published. Anything that would publish, deploy or overwrite outside the project waits for you.

Everything else it decides on its own. Next, read how it works for the core idea, or the production for the ten stages.