Cinematic UI

Turn director and film research into premium website rhythm, space, light, and composition.

繁體中文 · 简体中文 · 日本語 · Español · Français · Deutsch · 한국어 · Português · Tiếng Việt

Why This Is Different

Most AI design skills are lookup tables.

They give the AI a database of 67 styles, 161 color palettes, 50 component patterns — and the AI picks from the menu. The result is technically clean, occasionally polished, and reliably forgettable. The AI is not thinking. It is shopping.

Cinematic UI is a thinking framework, not a materials library.

Instead of handing the AI a menu, this skill forces it to work the way a real film director does:

1. Research a specific director and a specific film — lighting logic, framing discipline, scene rhythm, material sense
2. Extract what makes that film's visual language work at a structural level
3. Develop an original visual thesis for the site: what kind of scene is this page? what composition is irreplaceable here?
4. Justify every layout decision against that film language
5. Only then formalize CSS, motion, and implementation

The difference in output is not a matter of degree. It is a different category of result.

A lookup table produces a site that looks like a site. A director's workflow produces a site that feels like it was made by someone who had a point of view.

The AI is not a shopkeeper picking items off shelves.
The AI is the director. The film is the brief. The website is the production.

What It Is

cinematic-layout is a cross-agent reasoning skill built around a single fixed mechanism:

1. Choose a director + specific film
2. If web access is available, research that director and film — cinematography, lighting, rhythm, material, scene control
3. Translate that film language into a web-executable narrative and layout system
4. Define one distinct scene and one irreplaceable composition per major page role
5. Only then formalize HTML / CSS / JS implementation

The film is not a spec sheet. The film is research input.
The computer-operable workflow starts when those observations are translated into decisions.md, storyboard.md, compiled-spec.md, and implementation.

Problems It Solves

Core Features

Workflow

Phase 2 internal order (non-negotiable):
Site-wide cinematic grammar → per-page scene thesis → per-page signature composition → shared system

Supported Platforms

Claude Code and OpenAI Codex are the two primary platforms. All others are fully supported.

Installation

Claude Code

Windows:

git clone https://github.com/akseolabs-seo/cinematic-ui "$env:USERPROFILE\.claude\skills\cinematic-layout"

macOS / Linux:

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

Then invoke with /cinematic-ui inside Claude Code.

Codex / ChatGPT

git clone https://github.com/akseolabs-seo/cinematic-ui $CODEX_HOME/skills/cinematic-ui

Cursor / Windsurf / GitHub Copilot

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

The .cursor/rules/, .windsurf/rules/, and .github/copilot-instructions.md files are already in place. No additional config needed — the rules activate as soon as the repo is present in your project.

Any other tool

Point the tool at this repo or copy the relevant entry file. See the platform table above.

Suggested Prompt Pattern

Use cinematic-layout to build a homepage.
Pick the director and film yourself.
If web access is available, research the director and film first.
Run the Demo Uniqueness Protocol.
Do not reuse shells from previous demos.
Optimize for a great single-page result before building a shared system.

References Library

All reference data lives in references/, organized by phase. Load only what the current phase needs — do not read the entire library at once.

Core Rule Files

Data Libraries (Phase 1–3)

Repository Structure

cinematic-layout/
├── SKILL.md                              ← main skill logic (primary entry for all agents)
├── skill.json                            ← universal skill manifest
├── directors-library.md                  ← legacy compatibility file
│
├── CLAUDE.md                             ← Claude Code
├── AGENTS.md                             ← cross-tool shared reference
├── CODEX.md                              ← Codex / ChatGPT
├── GEMINI.md                             ← Gemini / Antigravity
│
├── .cursor/
│   └── rules/
│       └── cinematic-ui.mdc          ← Cursor rules (auto-loaded)
│
├── .windsurf/
│   └── rules/
│       └── cinematic-ui.md           ← Windsurf rules (auto-loaded)
│
├── .github/
│   ├── copilot-instructions.md           ← GitHub Copilot (auto-loaded)
│   ├── PULL_REQUEST_TEMPLATE.md
│   └── ISSUE_TEMPLATE/
│
├── agents/
│   └── openai.yaml                       ← OpenAI skill metadata
│
├── docs/
│   └── banner.svg
│
├── CHANGELOG.md
├── CONTRIBUTING.md
├── CODE_OF_CONDUCT.md
├── SECURITY.md
├── LICENSE
│
└── references/
    ├── library-index.md
    ├── premium-calibration.md
    ├── anti-garbage.md
    ├── anti-convergence.md
    ├── implementation-guardrails.md
    ├── reference-protocol.md
    ├── output-templates.md
    └── data/                             ← 18 design data libraries (~600KB total)

Follow

For updates and more AI / design workflow content:

• Threads: @darkseoking

Contributing

Please read CONTRIBUTING.md before opening a PR.

License

MIT. See LICENSE.