Ein Skill, ein Prompt, ein Drohnenflug durch den Laden.

Für den Drohnenflug nutzt die Seite ein echtes Video, das KI generiert ist. Dafür nehme ich wie immer kie.ai: Konto erstellen, einmal Credits kaufen, fertig. Du musst nicht gleich viel aufladen, ein kleiner Betrag reicht für so ein Scroll-Video. Den API-Key legst du in eine .env-Datei im Projektordner und schickst ihn nie einfach in den Chat.

# Datei: .env, im Projektordner, kommt nie in einen Chat
KIE_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Bevor Opus etwas erzeugt, rechnet er die Kosten vor. Bei meiner Seite waren es „circa 3,20 Dollar“ in kie.ai.

Der Skill hat das ganze Wissen, wie man so eine Scroll-Website baut: wie die Szenen aneinanderhängen, wie das Video mit dem Scrollen läuft, wie es richtig eingebaut wird und wie die Seite auch am Handy schnell lädt. Im Prompt steht kein Wort von Handy oder Tablet, das übernimmt der Skill. Du legst ihn einmal in deinen Skills-Ordner, und Opus kann ihn ab dann immer benutzen.

• Danach eine neue Claude-Code-Session starten, dann ist /cinematic-scroll da.
• Lieber als Plugin mit Updates? /plugin marketplace add businesspunia-gif/cinematic-scroll und dann /plugin install cinematic-scroll@cinematic-scroll

git clone https://github.com/businesspunia-gif/cinematic-scroll.git
mkdir -p ~/.claude/skills/cinematic-scroll
cp -R cinematic-scroll/skills/cinematic-scroll/. ~/.claude/skills/cinematic-scroll/

Quelle: github.com/businesspunia-gif/cinematic-scroll

Genau diesen Prompt habe ich in Claude Code abgeschickt. Der Skill weiß, wie man baut, der Prompt sagt Opus, was er bauen soll. Die Szenen für den Drohnenflug habe ich vorher festgelegt, damit das Video so wird, wie ich es mir vorstelle: von der Straße durch die Tür, am heißen Handtuch mit Dampf vorbei bis zum Rasiermesser, und am Ende durchs Schaufenster wieder raus.

/cinematic-scroll

Ich will mit dir eine Website bauen

Für unseren Build heute will ich eine Website für einen Barbershop bauen. Das ist ein erfundener Barbershop, also denk dir das Logo, den Namen und alle Texte für die Website aus. Aber für den Drohnenflug hab ich schon ein paar Szenen, die ich nutzen will:

- Starte vor der Ladentür mit der drehenden Barber-Säule und drück dich durch die Tür in den Laden.
- Schwenk an den Lederstühlen vorbei, während ein Barber ein heißes Handtuch ausschlägt und Dampf aufsteigt.
- Gleite an der Spiegelwand entlang, vorbei an Rasiermesser, Pinsel und Schaumschale, und dreh am Ende der Reihe ab.
- Flieg über den Stuhl, auf dem gerade ein Bart mit dem Rasiermesser in Form gebracht wird.
- Flieg durchs Schaufenster raus, dreh dich um und steig hoch, bis man den ganzen Laden mit der Straße bei Nacht sieht.

Für alle Bilder und Videos heute nutz bitte kie.ai, der Key liegt in der .env. Für Bilder will ich GPT Image 2 (gpt-image-2-text-to-image und gpt-image-2-image-to-image) und für Videos Kling 3.0.

Kling 3.0 ist eines der günstigsten Modelle, mit denen du richtig gute Videos für die Seite bekommst.

Mein Barbershop ist erfunden, deshalb soll Opus sich Logo, Namen und Texte ausdenken. Für ein echtes Business arbeitet er mit dir zusammen: er fragt nach deinem Logo und nach Bildern und Videos, die du im Normalfall schon hast. Tausch also den Satz mit dem erfundenen Barbershop gegen dein Business und gib ihm dein Material mit.

• Logo, Name, Texte: statt „denk dir aus“ schreibst du, dass du sie mitgibst, und hängst sie an.
• Fotos vom echten Laden: such ein paar Bilder über Google Maps raus. Gibt es keine, fahr kurz vorbei und mach selbst ein paar Bilder von außen. Dann wird der Flug wirklich realistisch.
• Die Szenen: beschreib deinen eigenen Flug durch den Laden, Station für Station, mit den Details, die dein Geschäft ausmachen.
• Das Wichtigste am Ende: man muss direkt einen Termin buchen können. So werden aus Besuchern zahlende Kunden. Beim Restaurant passt eine Reservierung mit Personenzahl und Allergien.

/cinematic-scroll

Ich will mit dir eine Website bauen

Für unseren Build heute will ich eine Website für [dein Business] bauen. Logo, Name und Fotos vom Laden hänge ich an. Für den Drohnenflug hab ich schon ein paar Szenen, die ich nutzen will:

- [Szene 1: wo der Flug startet]
- [Szene 2]
- [Szene 3]
- [letzte Szene: wie der Flug endet]

Am Ende der Seite soll man direkt [einen Termin buchen / einen Tisch reservieren] können.

Für alle Bilder und Videos heute nutz bitte kie.ai, der Key liegt in der .env. Für Bilder will ich GPT Image 2 (gpt-image-2-text-to-image und gpt-image-2-image-to-image) und für Videos Kling 3.0.

Die eckigen Klammern sind deine Stellen. Der Rest bleibt wie im Video.