Inspiration
Most AI-generated websites are technically correct but visually generic. They repeat the same centered containers, feature cards, glowing gradients, decorative particles, and disconnected animations regardless of the product.
The problem is not that AI cannot write CSS or animation code. The problem is that it often begins implementation before deciding:
- what the audience should feel
- what visible evidence creates that feeling
- what the central creative idea is
- how each section advances one continuous visual story
- which interactions reveal real product information
- how the experience should adapt across desktop, mobile, and reduced motion
Cinematic Web Director was created to give Codex a structured creative-direction system before it starts building.
What it does
Cinematic Web Director is a private-beta Codex Skill that converts a product brief into an implementation-ready cinematic web direction.
It produces:
- normalized product, audience, and business truth
- ten distinct creative territories
- adversarially reviewed primary and fallback concepts
- domain-specific Taste Direction translated into observable visual evidence
- a causal Big Idea rather than a collection of unrelated effects
- a canonical three-anchor Hero sequence: start → middle → end
- at most two provider-neutral transition prompts that reuse the exact middle anchor
- Experience Mode and Ambition Level resolution
- measurable Visual Rhythm constraints
- interaction and page-composition selection
- desktop, mobile, reduced-motion, and lower-cost routes
- implementation guidance covering accessibility, performance, cleanup, and provenance
The system rejects unsupported claims, generic decorative effects, disconnected montage, meaningless motion, and interactions that reveal no information.
How we built it
The project was built as an offline, deterministic Skill runtime around Codex and GPT-5.6.
Codex was used throughout the project to:
- inspect and reorganize the architecture
- design JSON contracts and deterministic validation stages
- implement the Taste Direction Engine
- create domain profiles for food, hospitality, aviation, automotive, technology, architecture, industrial products, and fashion
- define the three-anchor Hero contract
- build the interaction-pattern selector
- build the landing-page composition engine
- implement Experience Mode, Ambition Level, and Visual Rhythm controls
- create bilingual English and Thai documentation
- run repository audits, repair CI failures, and prepare pull requests
GPT-5.6 was especially valuable for reasoning across creative direction, product truth, visual evidence, interaction design, accessibility, and implementation constraints as one connected system rather than isolated prompts.
The deterministic runtime is written primarily in Python. JSON Schema is used for portable contracts, PyYAML for Skill metadata and configuration, and GitHub Actions runs validation across Windows and Ubuntu with secret scanning through Gitleaks.
Core workflow
The active workflow is:
- Source brief
- Brief truth
- Constraint-aware reference retrieval
- Ten creative territories
- Seven causal candidates
- Adversarial review
- Primary and fallback selection
- Taste Direction
- Three Hero anchors
- Two chained transition prompts
- Experience and ambition resolution
- Interaction selection
- Visual Rhythm planning
- Landing-page composition
- Responsive and reduced-motion routes
- Final validated direction bundle
The Skill does not silently call an image provider, video provider, or deployment service. Media generation and website implementation remain explicit downstream actions.
The three-anchor model
Many AI video workflows create unrelated clips and attempt to hide continuity problems with montage.
Cinematic Web Director instead uses exactly three unique Hero anchors:
- Start — the unresolved initial state
- Middle — the transformation mechanism
- End — the resolved product state
Transition 01 moves from Start to Middle.
Transition 02 begins from the exact same Middle asset and moves to End.
This creates a bounded causal sequence and makes continuity easier to inspect before spending media-generation credits.
Taste Direction
Broad adjectives such as “premium,” “delicious,” or “luxurious” are not enough.
The Taste Direction Engine translates feelings into visible evidence.
For example:
- “delicious” becomes crust, rendered fat, moisture, heat, sauce viscosity, ingredient separation, and appetite lighting
- “luxury hospitality” becomes material hierarchy, controlled light, service cues, acoustic calm, and spatial breathing room
- “quiet automotive power” becomes believable geometry, controlled reflections, tire contact, restrained movement, and driver authority
This keeps creative direction connected to the actual product rather than interchangeable visual trends.
Experience Mode and Visual Rhythm
The same product may require very different websites.
The Skill resolves an Experience Mode such as:
- conversion product page
- focused campaign
- experimental cinematic
- editorial story
- product launch
- interactive portfolio
- luxury experience
- technical product explainer
It separately resolves an Ambition Level:
- restrained
- premium
- cinematic
- award-entry
The resulting Visual Rhythm contract controls measurable composition properties such as:
- minimum full-bleed sections
- maximum card-driven sections
- spatial-layout diversity
- signature-interaction range
- recovery sections after high-motion chapters
- typography scale changes
- transition diversity
- final campaign payoff
A cinematic page is therefore not defined merely by being long or animated.
Challenges we ran into
The largest challenge was the gap between structural correctness and visual quality.
Early outputs passed technical validation but still looked like ordinary AI-generated landing pages. Agents repeatedly fell back to:
- card grids
- tabbed panels
- narrow centered containers
- developer-console styling
- shallow hover effects
- disconnected sections
- technically present but visually weak full-bleed media
Generated food imagery also demonstrated that prompt compliance does not guarantee desirability. A burger could satisfy continuity and geometry rules while still looking unappetizing.
This led to an important design decision: automated checks may validate contracts and structure, but they must never claim that artistic quality has been proven.
Owner visual approval remains a separate gate.
Accomplishments that we are proud of
- Built an installable Codex Skill rather than a single hard-coded website
- Created a deterministic creative-direction pipeline with portable schemas
- Developed eight domain-specific Taste Profiles
- Standardized a three-anchor, two-transition Hero model
- Added eight Hero interaction families and ten page-composition families
- Added Experience Mode, Ambition Level, and enforceable Visual Rhythm
- Preserved desktop, mobile, reduced-motion, and lower-cost routes
- Added Windows and Ubuntu CI validation
- Added secret scanning and repository provenance controls
- Maintained an explicit distinction between technical validation and artistic approval
- Produced English and Thai documentation
The current feature branch passes 214 deterministic repository tests while Level 3 independent creative acceptance remains honestly marked as not proven.
What we learned
The most important lesson was that “make it cinematic” is not an actionable instruction.
AI performs better when creative direction specifies:
- the product truth
- the intended feeling
- the observable evidence
- the causal transformation
- the visual scale sequence
- the interaction’s informational purpose
- the mobile substitution
- the reduced-motion route
- the owner-approval boundary
We also learned that adding more effects does not solve generic design. A small number of interactions connected by one continuous visual idea is more valuable than a page full of unrelated animation.
What's next
The next phase focuses on practical execution knowledge:
- official GSAP motion guidance
- runtime-stack selection
- advanced scroll and transition recipes
- Three.js and lightweight shader decision rules
- reusable implementation seeds
- free-asset provenance
- stronger anti-generic implementation guidance
- screenshot-based owner review gates
The goal is not to automatically claim award-winning design.
The goal is to give Codex a stronger creative and technical foundation for producing product-specific cinematic experiences that can be reviewed, repaired, and implemented deliberately.