Ein einheitlicher Markenauftritt beginnt mit einem kleinen, klaren Materialpaket. Diese Anleitung nutzt das offene Claude-Motion-Toolkit und die Remotion-Konventionen. Die Vorbereitung hilft auch bei HyperFrames, React-Imports und staticFile sind jedoch Remotion-Anweisungen und keine Befehle für den Editor dieser Website.
Ein nachvollziehbares Materialverzeichnis erstellen
Sammle das freigegebene Logo, vorhandene Varianten für helle und dunkle Hintergründe, genaue Schriftdateien, eine kurze Palette und veröffentlichbare Screenshots. Dokumentiere Dateiname, Zweck, Quelle und Nutzungserlaubnis neben dem Projekt. Ergänze aktuellen Produktnamen und freigegebene Handlungsaufforderung. Kennzeichne Platzhalter eindeutig. Lass den Agenten vor der Umsetzung tatsächlich gefundene Dateien auflisten. So vermeidest du überzeugende Entwürfe mit ausgetauschtem Logo oder erfundenen Produktoberflächen.
Stabile lokale Pfade verwenden
Lege gemeinsame Remotion-Materialien unter public ab, etwa public/assets/logo.png und public/assets/dashboard.png. Referenziere sie per staticFile relativ zu public. Nutze kurze Namen und einheitliche Groß- und Kleinschreibung: Unterschiede können auf einem anderen Rechner Fehler verursachen. Bevorzuge autorisierte lokale Dateien gegenüber ablaufenden Bildlinks. Schreibe keine Zugriffstokens in URLs und lade private Kundenansichten nicht allein für bequemes Rendering auf öffentliche Server.
Transparenz und Beschnitt vor der Animation prüfen
Öffne das Logo auf hellen und dunklen Hintergründen. Ein weißes Rechteck kann Bestandteil der Datei sein; transparente Ränder können das sichtbare Zeichen unerwartet klein wirken lassen. Bewahre Seitenverhältnis und freigegebenen Schutzraum. Entscheide bei Fotos, ob sie den Rahmen ausfüllen oder vollständig sichtbar bleiben sollen; Ausfüllen kann wichtige Details abschneiden. Fordere pro Material ein Standbild vor der Animation. Prüfe feine Linien in der vorgesehenen Handygröße statt nur vergrößert am Desktop.
Die echte Schrift laden und jede Schriftartengruppe testen
Remotion dokumentiert lokale Schriften über @remotion/fonts. Verwende die tatsächliche Familie und Stärke und warte vor Textmessung und Rendering auf das Laden. Prüfe die Nutzungserlaubnis und bewahre sie auf. Eine lateinische Schrift enthält möglicherweise keine chinesischen, japanischen oder koreanischen Zeichen. Lege passende Ersatzschriften fest und prüfe sie, statt identisches Aussehen vorauszusetzen. Teste längste Überschrift, Satzzeichen, Zahlen und Akzente. Ändert eine Übersetzung die Umbrüche, passe zuerst das Layout an, statt alles unlesbar klein zu machen.
Markenregeln genau formulieren und den Export prüfen
Nutze den Prompt unten, um die Markenanforderungen genau festzulegen. Prüfe anschließend die MP4 auf Ersatzschriften, angeschnittene Logos, Farbänderungen und fehlende Bilder. Bewahre Material, Verzeichnis, Schriftinformationen und Ergebnis zusammen auf. Bearbeitbare Downloads der Website ermöglichen lokale Weiterarbeit, setzen aber keinen allgemeinen Marken-Upload oder automatischen Markenimport voraus.
Nutze das gelieferte Logo unverändert. Verwende den freigegebenen cremefarbenen Hintergrund und anthrazitfarbenen Text; Grün nur für die zentrale Handlung. Lade die gelieferten Schriften. Erhalte Screenshot-Proportionen und Inhalte. Zeige vor der Animation ein Standbild mit Logo, längster Überschrift und Screenshot.Dein nächster Schritt
Liefere echte Dateien und klare Regeln und prüfe sie im exportierten Video. Ein korrektes Materialverzeichnis ist zuverlässiger als die Aufforderung, es solle einfach „nach Marke aussehen“.
Den Arbeitsbereich entdeckenQuellen und weiterführende Informationen
Die Verweise führen zur Originaldokumentation und zu den Urhebern. Die Verfügbarkeit kann sich ändern. Prüfe die Quelle vor einem Abo oder einer Installation.
- Importing assetsRemotion
- Using fontsRemotion
- Visual review loopwhaleyxbt
- Claude Motion Skills public CLIClaude Motion Skills