Pipeline für Markenbilder: sieben filmreife Bilder, ein Designsystem

Das Problem mit den meisten Websites für Entwicklertools ist, dass sie genau so aussehen wie jede andere Website für Entwicklertools. Klare Typografie, monochrome Karten, eine einzige Akzentfarbe und null Atmosphäre. Wir wollten, dass sich AudioLab.tools wie eine Marke mit Tiefe anfühlt, und das ohne ein Fotoshooting in Auftrag zu geben.

Dies ist das Build-Log darüber, wie wir das mit Generierung über Higgsfield, der Bild-Pipeline von Astro und strikter Designdisziplin geschafft haben.

Das Briefing

Sieben Bilder:

1. Hero: atmosphärisches Band aus cyanfarbenem Licht, Metapher einer Audio-Wellenform.
2. MixLab: abstrakte Skulptur, Cyan, mit der Energie eines VU-Meters / Analyzers.
3. VoiceLab: abstrakte violette Bänder, organisch, Stimmresonanz.
4. HearLab: blassgrüne Spirale, ruhig, barrierefreiheitsbewusst.
5. SignalLab: bernsteinfarbene Datenskulptur, spektrogrammartig.
6. CueLab: kupfer-/rote Routing-Matrix.
7. SkillLab: rosa konzentrische Ringe, gestufte Progression.

Jedes Bild musste:

• Filmreif wirken, nicht wie ein Stockfoto.
• Dieselbe Sprache von Beleuchtung und Schärfentiefe nutzen wie die anderen.
• Die typischen Anzeichen einer KI-Generierung vermeiden (zusätzliche Finger, verstümmelter Text, generische Stockfoto-Komposition).
• Klar auf die Identitätsfarbe seines Labs verweisen.

Generierung: den Prompt richtig hinbekommen

Die Prompt-Vorlage, die durchgängig brauchbare Ergebnisse lieferte:

[Composition direction]: an abstract sculptural representation of
[concept] suspended in pitch-black void, [shape direction] of [colour],
intertwining like [domain metaphor]. Misty atmosphere with subtle
particle dust catching the light. Cinematic depth of field, Hasselblad
medium-format look, premium minimalist editorial aesthetic. Soft
volumetric glow. No text, no logos, no faces, no [obvious cliché].
Pure abstract light sculpture.

Drei Dinge sind in dieser Vorlage entscheidend:

1. Die Rahmung “pitch-black void”. Sie erlaubt dem Modell, sich voll auf hohen Kontrast einzulassen und unruhige Hintergründe zu ignorieren.
2. Der “Hasselblad medium-format look”. Er löst eine geringe Schärfentiefe und die filmische Kompression eines größeren Sensors aus.
3. Eine explizite Negativliste. “No text, no logos, no faces, no microphones” verhinderte, dass das Modell standardmäßig zu wörtlichen Objektdarstellungen griff.

Für jeden Cluster ersetzten wir die passende Farbe und Domänenmetapher:

• MixLab: Cyan / Blau, “audio waveform”
• VoiceLab: Violett / Lavendel, “vocal harmonics”
• HearLab: Blassgrün / Aquamarin, “inner ear curvature”
• SignalLab: Bernstein / Honiggold, “spectrogram frequency bins”
• CueLab: Kupfer / Rotorange, “routing matrix”
• SkillLab: Pink-Magenta / Rosé, “tiered progression rings”

Trefferquote: ~80 % bei der ersten Generierung, 100 % innerhalb von zwei Versuchen. Kosten: ~14 Credits für das gesamte Set.

Optimierung: von 9 MB PNG zu 50 KB WebP

Jede Rohausgabe war ein 2k-PNG (3168×1344 für die Hero, 2752×1536 für die Cluster). Dateigrößen:

Quelle	PNG	Nach WebP bei 2k	Bei 1280w	Bei 720w
hero	5.4 MB	56 KB	45 KB	32 KB
mixlab	9.5 MB	382 KB	75 KB	12 KB
voicelab	6.9 MB	73 KB	41 KB	4 KB
hearlab	6.4 MB	101 KB	56 KB	3 KB
signallab	5.2 MB	4 KB	7 KB	6 KB
cuelab	8.4 MB	275 KB	71 KB	14 KB
skilllab	5.5 MB	84 KB	32 KB	5 KB

Die integrierte <Image>-Komponente von Astro (angetrieben von sharp) erledigt das automatisch, sobald du das Asset importierst. Der gesamte Optimierungsschritt ist eine Deklaration pro Bild:

---
import { Image } from 'astro:assets';
import heroImg from '@/assets/brand/hero.png';
---

<Image
  src={heroImg}
  alt="A coiled ribbon of cyan light…"
  widths={[720, 1280, 1920, 2560]}
  sizes="100vw"
  loading="eager"
  fetchpriority="high"
/>

Das ergibt:

• Eine WebP-Variante in jeder der deklarierten Breiten.
• Ein korrektes srcset, damit der Browser die passende Größe wählt.
• sizes für die responsive Auswahl.
• Automatisch eingefügte width/height, um Layout-Verschiebungen zu vermeiden.

Wahrnehmbar verlieren wir nichts. Wir gewinnen eine durchschnittliche Reduktion der ausgelieferten Bytes um 95 %. Das ist der unspektakuläre Infrastrukturgewinn, der sich über jede Seite hinweg summiert.

Integration: wo sich jedes Bild seinen Platz verdient

Sechs Platzierungsmuster, bewusst konsequent gehalten:

1. Clusterkarten (Homepage + /labs): ein Bildstreifen im Format 16:8 oben auf jeder Karte; das Bild wird beim Hover größer. Etabliert die Identität pro Cluster sofort im Raster.
2. Hero der Clusterseite: das Bild füllt das Aside auf der rechten Seite, mit einem darübergelegten Metadaten-Raster am unteren Rand. Ersetzt das, was vorher ein schlichtes “Auf einen Blick”-Panel war.
3. Atmosphärischer Bereich auf der Homepage: das Hero-Bild full-bleed bei 60vh, mit einem Zitat-Overlay (“Audio is craft. AI is leverage.”). Fügt redaktionellen Rhythmus zwischen dem Clusterraster und den Prinzipien hinzu.
4. Seiten-Heros (about, Labs-Index, Roadmap, Press): das Hero-Bild mit 25 % Deckkraft und einer Verlaufsmaske von links nach rechts, die die Typografie verankert.
5. Hero-Video auf der Homepage: siehe das Build-Log der Hero-Bewegung.
6. Pressekit-Seite: als Systembeleg eingesetzt, nicht als Dekoration. Das Bild ist Teil der Brand Kit.

Was (kurz) schiefging

Eine kleine Stolperfalle, die eine Erwähnung wert ist: Beim Generieren mit einer quadratischen Referenz und der Anforderung einer 21:9-Ausgabe erzeugt das Modell gelegentlich ein Ergebnis, das eher aufgefüllt als neu komponiert aussieht. Lösung: ohne Referenzbild neu generieren und einfach auf den Prompt setzen.

Außerdem: Die Standard-Seitenverhältniszuordnung von Higgsfield behandelt 21:9 nicht immer so, wie man es erwarten würde. Wir mussten explizit überprüfen, ob die Ausgabeabmessungen dem entsprachen, was der Prompt verlangte.

Ergebnis

Die Site entwickelte sich in einem einzigen Arbeitsdurchgang von “polierter Entwickler-Landingpage” zu “das ist eine echte Marke”. Die visuelle Identität ist nun über jede Seite hinweg konsistent, jeder Cluster hat seine eigene farbcodierte Stimmung, und die Typografie sitzt auf Bildmaterial, das sich seinen Platz verdient, statt nur eine Lücke zu füllen.

Gesamtkosten: 14 Credits für die Generierung, ~10 Minuten Integrationsarbeit pro Bild, kein laufender Wartungsaufwand.

Verwandt

• Presse / Brand Kit
• Hero-Bewegungsloop: Produktionspipeline
• Sechs Demos in einer Plattform: Architektur