Cinematic UI

Choisit un réalisateur et un film spécifique, puis traduit sa grammaire visuelle en structure de site, tokens et mouvement.

par akseolabs-seo · akseolabs-seo/cinematic-ui

Testé · Fonctionne ★ 9.2/10

Cinematic UI — Choisit un réalisateur et un film spécifique, puis traduit sa grammaire visuelle en structure de site, tokens et mouvement.

Ce que fait

Un flux de travail de conception en quatre phases (décisions -> storyboard -> spécification compilée -> construction) qui nomme un vrai réalisateur/film pour ancrer la couleur, la typographie, la composition et le mouvement au lieu des valeurs par défaut génériques 'premium SaaS', avec une grande bibliothèque de référence de réalisateurs, d'archétypes de héros, de plans de caméra et de gradations de couleurs. Se déclenche sur des demandes explicites pour un site cinématographique, de style film, inspiré par un réalisateur ou un genre cinématographique (noir, science-fiction, thriller, etc.), y compris les demandes en chinois ; se désengage explicitement des demandes de conception web génériques.

Rapport de test

Étant donné le même brief (un héros SaaS de détection de fraude noir), une invite simple a produit le héros par défaut avec dégradé sombre et carte en verre que chaque demande de 'premium dark SaaS' produit ; en suivant la compétence, David Fincher/Se7en a été tiré directement de sa table de 200 réalisateurs et a transformé 'desaturated teal, deep shadows, scan lines' en un concept de héros de tableau de preuves réel avec des tokens hexadécimaux nommés et une liste explicite de valeurs par défaut interdites.

Testé le: 2026-07-14 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/akseolabs-seo/cinematic-ui
cd cinematic-ui
mkdir -p ~/.claude/skills
cp -r . ~/.claude/skills/cinematic-ui

Commandes et exemples de prompts

  • /cinematic-uiChoisit un réalisateur et un film spécifique, puis traduit sa grammaire visuelle en structure de site, tokens et mouvement.

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

  • Design a movie-poster-style landing page for my sci-fi startup
  • I want a film-noir aesthetic homepage for my detective app
  • Give my SaaS hero section a David Fincher, thriller kind of feel