Web-Assets und Launch-Vorbereitung

Web-Assets, Feinschliff und Launch

Eine kurze Routine für die Abschlussarbeiten an einer bereits bestehenden Website. Sie deckt die visuellen Schritte und die Deployment-Schritte des futuristic-web-design-Skills ab und ist so verpackt, dass sie auch eigenständig ausgeführt werden kann.

Wenn ../futuristic-web-design/ neben diesem Skill liegt, enthalten die Referenzdateien die Details: references/assets.md für Prompts und die ffmpeg-Befehle, references/ship.md für die Optimierungsdurchgänge, das Formular, das Deployment, die Domain und die vollständige Launch-Checkliste.

Führe nur den Teil aus, nach dem der Benutzer fragt. Jede Überschrift unten steht für sich allein.

Dateien für das Web vorbereiten

Generator- und Kameradaten sind viel zu schwer für die Auslieferung. Ein Besucher mit mobilen Daten wartet auf jedes Byte, während ein Laptop, der von seiner eigenen Festplatte liest, das Problem verbirgt.

Hole vor der Installation von Tools wie ffmpeg oder sharp die Zustimmung ein. Manche ffmpeg-Builds haben keinen WebP-Encoder; cwebp oder sharp erledigen die gleiche Aufgabe, falls eines bereits installiert ist.

Speichere Dateien mit beschreibenden Namen unter public/images/ in Next.js. Bei einer reinen HTML-Seite lege sie in einem images/-Ordner neben der Seite ab: Auf Vercel wird bei einer Seite ohne Framework nur der public/-Ordner ausgeliefert, wenn einer existiert, was die Seite selbst verstecken würde.

Datei	Ziel
Hero-Bild	WebP, max. 1920px breit, ca. 300 KB
Andere Bilder	WebP, max. ca. 1000px breit, ca. 150 KB
Hero-Video (hero.mp4)	H.264 MP4, max. 1080p, Audio entfernt, unter 4 MB
Poster (hero-poster.webp)	Das erste Bild des Videos

Schließe mit einer Tabelle der Größen vorher und nachher ab, damit die Einsparung gezeigt und nicht nur behauptet wird.

Prompts für Bilder und Videos schreiben

Diese eignen sich für Google Flow oder jeden anderen Generator. Wenn du direkt generieren kannst, hole vor der Ausgabe von Credits die Zustimmung ein. Wenn nicht, übergib die Prompts an den Benutzer und fahre mit klar markierten Platzhaltern fort.

• Zuerst die Shot-Liste. Lege die Assets und ihre Seitenverhältnisse fest, bevor generiert wird: etwa sieben für eine One-Page-Seite (Hero-Video, Hero-Still, drei Angebotsbilder, ein Story-Bild, ein Share-Bild).
• Das Bild-Briefing, sechs Teile in Reihenfolge: Motiv, Umgebung, Licht, Kamera (Höhe, Objektiv, Tiefenschärfe), Stimmung und Farbpalette, Format (16:9 Hero, 4:5 Produkt). Bitte um leere Etiketten, denn Generatoren verunstalten Buchstaben, und echte Texte gehören ins HTML.
• Die Stil-Linie. Übernimm die Sätze zu Licht, Kamera und Stimmung-und-Palette aus dem ersten genehmigten Bild und verwende sie wortwörtlich in jedem späteren Prompt. Das sorgt dafür, dass die Bilder wie aus einem einzigen Shooting wirken.
• Hero-Video. Animiere das genehmigte Still, beschreibe eine kleine Bewegung, und stelle klar, dass alles andere eingefroren bleibt mit einer festen Kamera.
• Explosionszeichnungs-Clip. Ausgangs-Still: das zusammengebaute Produkt, klein und zentriert, mit leerem Raum, wo die Teile hinkommen. Schluss-Still: aufgebaut aus dem Ausgangs-Still, niemals von Grund auf, mit den Teilen entlang einer geraden Achse angeordnet sowie gleichem Blickwinkel, Licht und Hintergrund. Der Clip läuft vom ersten Still zum zweiten mit einer festen Kamera.

Halte echte Personen und Markenlogos aus den generierten Assets heraus und zeige die echten Produkte eines echten Unternehmens.

Handy-Check, Feinschliff und Geschwindigkeit

• Handy-Check bei 390px. Lesbarer Text, nichts an den Rand gedrückt, Tippziele von etwa 44px, kein horizontales Scrollen, ein funktionierendes Menü. Behebe die Fehler als Liste, dann scrolle erneut. Ein verkleinerter Desktop-Browser simuliert ein Telefon nur ungefähr, also bitte um Überprüfung auf einem echten Gerät und erwähne, wenn dies nicht geschehen ist.
• Feinschliff-Durchgang. Einheitliche Abstände zwischen Abschnitten, gleiche Größen für Überschriften gleicher Hierarchie, Hover- und Fokus-Styles auf jedem interaktiven Element, keine übriggebliebenen Vorschau-Routen.
• Geschwindigkeit. Erstelle ein Profil unter einem mobilen Preset und nenne die drei größten Verbesserungen, beginnend mit der größten. Wenn eine Verbesserung bedeutet, etwas zu entfernen, das der Benutzer schätzt, weise darauf hin und bitte um Entscheidung.

Liste auf, was du findest, bevor du etwas änderst, das der Benutzer nicht gebeten hat zu ändern.

Schlüssel

• .env.local enthält die Schlüssel und ist in .gitignore eingetragen.
• Der Site-Code verwendet nur öffentliche Schlüssel. Geheime oder Service-Schlüssel gelangen niemals in den Client-Code.
• Durchsuche den Code und die Git-Historie nach Geheimnissen und berichte, was geprüft wurde.
• Ein Geheimnis, das jemals im Seiten-Code ausgeliefert oder in Git committet wurde, ist kompromittiert – selbst wenn das Repository nie gepusht wurde: Besucher konnten die Seite lesen, und die Historie reist mit jeder Kopie und jedem zukünftigen Push. Es aus der Datei zu entfernen, macht das nicht ungeschehen. Sage dem Benutzer, er solle es im Dashboard des Anbieters rotieren lassen, egal wie der Wert aussieht.

Suche und Teilen

• Titel von maximal 60 Zeichen und Beschreibung von maximal 155 Zeichen, die angeben, was verkauft wird und wo. Der Markenname allein sagt einem Fremden nichts.
• Share-Bild in 1200x630 unter public/images/share.webp, als Open-Graph- und Twitter-Bild gesetzt.
• Favicon, Sitemap und robots-Datei.
• Setze die Produktionsdomain als Basis-URL, damit das Share-Bild und die Sitemap aufgelöst werden. Frage danach, falls unbekannt.

Deployment

Führe das Deployment nur aus, wenn der Benutzer darum bittet.

• Verbinde das Repository mit Vercel. Jeder Push auf den Hauptzweig deployt dann die Produktion neu.
• Trage die Werte aus .env.local in den Projekteinstellungen des Hosts ein. Ein Formular, das lokal funktioniert und in der Produktion bricht, liegt fast immer an fehlenden Umgebungsvariablen.
• Bei einem fehlgeschlagenen Build lies das Log und behebe die Ursache.
• Überprüfe auf der Produktions-URL von einem Telefon mit mobilen Daten aus: Lade die Seite, sende das Formular ab und suche nach dem gespeicherten Eintrag.
• Füge den Link in eine Messaging-App ein, um die Vorschaukarte zu überprüfen.

Berichte ehrlich: was überprüft wurde, was nicht überprüft werden konnte (ein physisches Telefon, die Produktionsdomain) und was für den Benutzer noch zu tun bleibt.