Communitygithub.com

Kadr Bildgrafik

Gestaltet die Bildgrafik für einen vertikalen Einladungsfilm: Hooks, Untertitel, Lower Thirds, Callouts, Sticker, Zahlen und Endkarten in einem Schrift- und Farbsystem.

Was ist Kadr Bildgrafik?

Designsystem für Grafik in kurzen vertikalen Videos im Kadr-Stil. Es umfasst Hooks, Untertitel, Lower Thirds, Callouts, Sticker, Zahlen, Listen, Zitate, Übergänge und Endkarten, mit Farben, Schrift, Fonts, Assets und timeline-gesteuerten React-Komponenten. Der Einladungsfilm wird angezogen, bevor ein Frame gerendert wird.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/yehdan8-debug/kadr-design/tree/main

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Kadr-Design-Skill

Lies die readme.md-Datei in diesem Skill und erkunde die anderen verfügbaren Dateien. Wenn du visuelle Artefakte erstellst (Reels, Grafiküberlagerungen, Bewegtbilder, Mockups), kopiere die Assets heraus und erstelle statische HTML-Dateien, die der Benutzer ansehen kann. Wenn du an Produktionscode arbeitest, kopiere die Assets und befolge die Regeln hier. Wenn der Benutzer dieses Skill ohne weitere Anleitung aufruft, frage, welches Video er erstellt (Thema, Länge, Plattform, vorhandenes Filmmaterial), und entwirf dann die Grafiken dafür.

Ersteller: Emkarok (@emkarok) – Instagram Reels, TikTok, YouTube Shorts. Safe Zones standardmäßig platform="all". Ausgabe: A = vollständiges Reel-MP4 (Filmmaterial wird hier zusammengesetzt); B = nur Grafiken auf Magenta #FF00FF-Key für CapCut/Premiere/Final Cut (Export-Tweak auf Timeline-Seiten).

Kurzregeln

  • Leinwand 1080 × 1920. Positioniere Grafiken in Pixeln auf der Leinwand; halte Text außerhalb der sicheren Zonen (oben 160, unten 440, rechts 160).
  • Jede Grafik verwendet progress (0–1 Eintritt) und exit (0–1). Steuere sie über eine einzige Timeline-Uhr (siehe ui_kits/reel/).
  • Marke = Himmelsverlauf --accent-gradient (#61D4FE → #FFFFFF) mit dunkler Tinte auf Text; weiße Schrift mit --shadow-text-footage über Filmmaterial; Tintenplatten auf belebten Aufnahmen.
  • Plus Jakarta Sans 800 für Hooks/Untertitel; Martian Mono für Kicker/Handle.
  • Text tritt mit ASCII-Decode ein (AsciiText progress); der einzige Übergang ist GlyphTransition.
  • Immer nur eine Grafikeinblendung gleichzeitig auf dem Bildschirm. Keine Emojis in Grafiken.
  • Erklärer-Layout: SplitPresenter (+ CardWall oben) auf dem hellen Studio-Raster; Kopf-Pop-Out benötigt eine hintergrundentfernte Kopie des Clips.
  • Tech-Look: ScanSweep → TrackBox (Gesicht/Objekt) + HudReadout-Eckdaten; platziere Tracker innerhalb der Transformations-Ebene des Filmmaterials.
  • Vision-HUD: DepthScan, ObjectTags, Viewfinder, ContourMap (+ CompassStrip), TerminalLog, ThermalView. Leinwand-Varianten benötigen ein gleichursprüngliches Standbild der Aufnahme (src + fit); übergib zoom, um einem Punch-In zu folgen. Box-/Label-Koordinaten werden pro Aufnahme gemessen – bei neuem Filmmaterial neu messen.
  • Erklärer: FileDrop (Ziehen von Clips per Cursor in einen Ordner) – ca. 1,5 s pro Datei.
  • Filmmaterial muss Platz für Grafiken lassen: Siehe FOOTAGE in der readme.md und ShotGuide-Voreinstellungen (Talking-Head, Weitwinkel, Produkt, B-Roll, Endcard). Mittel- bis dunkles Filmmaterial unter Text, SDR, feste Belichtung, kein Himmelblau oder Weiß hinter Text.

Verwandte Skills