Frontend-Bild-Art-Direction
Erstelle flache Website-Kompositionen, die ein Entwickler auf einen Blick lesen kann. Gib jeder Komposition eine klare Hierarchie, ein konsistentes Raster, sinnvolle Weißräume und eine unverwechselbare typografische oder fotografische Geste. Behandle das Bild als Referenz für die Implementierung. Verwende live HTML und CSS für Produktionstext, UI und exakte Maße, wenn eine Implementierung angefordert wird.
1. Wähle den Workflow
Lies die Anfrage und verfügbare Projektanleitungen, wie AGENTS.md, CLAUDE.md, das Style Guide, Design-Tokens und relevante visuelle Assets. Folge zuerst expliziten Benutzeranweisungen, dann genehmigten Referenzen innerhalb ihrer zugewiesenen Rollen, dann Projektstandards. Verwende Art Direction, um Lücken zu füllen.
| Anfrage | Workflow |
|---|---|
| Neue Seite, Hero oder Sektion | Design nach Briefing. Wähle eine kohärente visuelle Richtung. |
| Eine weitere Sektion derselben Website | Verwende das visuelle System wieder und erstelle eine Komposition, die zum neuen Inhalt passt. |
| Mobile aus genehmigtem Desktop | Komponiere den genehmigten Inhalt und die Komponenten für den neuen Viewport neu. |
| Entfernen, ersetzen, umfärben oder eine Sache reparieren | Bearbeite das genehmigte Bild direkt und definiere, was erhalten bleiben soll. |
Generiere direkt, wenn das Briefing ausreichend Richtung vorgibt. Wenn ein essentielles Bearbeitungsziel oder genehmigtes Asset nicht abgerufen werden kann, fordere diese spezifische Eingabe an.
2. Weise jeder Referenz eine Rolle zu
Nummeriere die Eingaben und identifiziere sie nach Dateiname oder visuellem Inhalt. Trage diese Rollen in den eigentlichen Bild-Prompt ein.
- Basis zum Bearbeiten — Das genehmigte Bild, das die Änderung erhält. Platziere es zuerst, wenn du eine API-Bearbeitung verwendest.
- Genehmigter Desktop — Quelle für Inhalt, Reihenfolge, Komponentenstile und die Identitäten von Bildern und Logos für eine responsive Version.
- Nur Stil — Übernehme benannte Eigenschaften wie Palette, Typografiebehandlung, Korn und Fotograding. Halte die Komposition und den Text der neuen Sektion unabhängig.
- Nur Maßstab und Abstand — Übernehme nur benannte Maße oder Beziehungen wie Seitenränder, Haarfeinlinien, Labelgröße oder Anzeigen-Zahlenskala.
- Exaktes Asset — Halte das gelieferte Foto, Produkt, den Raum oder das Logo erkennbar. Bewahre unterscheidende Details und gib den erlaubten Bildausschnitt oder das Grading an.
Für mehrteilige Seiten übertrage einen genehmigten visuellen Anker und eine kompakte Aufzeichnung von Palette, Typografie-Rollen, Abständen, Zwischenräumen, Regeln, CTA-Behandlung und Bildmaterial. Gib an, welche Sektionen in jedem Teil erscheinen und wo er beginnt und endet. Verwende durchgängig dasselbe visuelle System. Füge einen Header oder Footer nur dort ein, wo er hingehört.
3. Art-Direction und Prompting
Für originelle Konzepte wähle eine Haltung (Handwerk, Klarheit, Wärme, Theater oder kühner Ausdruck), ein Layout (versetzter Editorial-Split, geteilt, Vollfläche, diszipliniertes modulares Raster oder typografiegeführt) und einen Finish (sauber digital, subtiler Filmkorn, Halbton oder strukturiertes Papier). Wähle nur die Komponenten, die dem Inhalt dienen. Eine Speisekarte kann typografiegeführt mit Linien und großzügigen Freiräumen sein. Ein Hero kann einen einzigen entscheidenden Bildausschnitt verwenden. Halte Panelkanten rechteckig oder verwende einfache horizontale Trennlinien. Vermeide Rhombus-, Rauten- und schräge Parallelogramm-Panels, sofern nicht ausdrücklich gewünscht.
Verwende kurze beschriftete Blöcke für ein komplexes Briefing. Für eine einfache Anfrage verwende nur die relevanten Zeilen.
- Ergebnis — Benenne die Seite oder Sektion, Ziel-Viewport, Rahmung und Leinwand. Gib eine flache, randlose Site-Komposition an, es sei denn, ein Geräterahmen wird angefordert.
- Referenzen — Ordne die Eingaben ihren individuellen Rollen zu und gib an, welche Details jede steuert.
- Layout — Gib Lesereihenfolge, Seitenränder, Rasteranker, Sektionsgrenzen, Ausrichtung und den Brennpunkt an. Beschreibe eine signifikante Designentscheidung in sichtbaren Begriffen.
- Kopie — Zitiere exakten Text, gib die Platzierung an und rendere jeden String einmal, es sei denn, Wiederholung ist erforderlich. Bewahre gelieferte Überschriften, Preise, Namen, Daten und Platzhalter. Für ein offenes Konzept verwende kurze, fundierte Kopie und vermeide Behauptungen für eine reale Organisation.
- Visuelles System — Gib Typografie-Hierarchie, Zeilenumbrüche wo nötig, Farbrollen, Bildmaterial und Bildausschnitt, Finish und Komponentenstyling an. Verwende benannte Studio-Referenzen als Kurzform für sichtbare Eigenschaften.
- Einschränkungen — Nenne die wenigen Ausnahmen, die wichtig sind. Vermeide stockähnliche Bilder, unmotivierten Glow, repetitive Kartenraster und Fülltexte, es sei denn, das Briefing verlangt diese Behandlungen.
4. Für Mobile neu komponieren
Verwende die angeforderte CSS-Viewport-Breite oder standardmäßig etwa 390 CSS-Pixel. Behandle die gerenderten Pixelmaße als separate Leinwandeinstellung. Verwende wo angemessen eine einzelne Spalte, lasse den genehmigten Inhalt in der angegebenen Reihenfolge umfließen und bewahre Labels, exakte Assets, CTA-Stile, Regeln und Platzhalterkomponenten. Lasse Text umbrechen, erhöhe die Tippfläche und passe Bildausschnitte nur wie erlaubt an. Füge klebrige Elemente nur hinzu, wenn sie angefordert werden oder Teil des genehmigten Designs sind. Teile lange Kompositionen an logischen Sektionsgrenzen, bevor Text unlesbar wird.
5. Einen bestimmten Bereich bearbeiten
Hänge das genehmigte Bild als Bearbeitungsbasis an. Gib die Aktion an, identifiziere das Element durch Aussehen und Position und gib dann an, was erhalten bleiben soll. Konvertiere Prozentkoordinaten in einen einfachen Lokalisator, gemessen von der oberen linken Ecke, und verwende beide im Prompt. Bewahre die Leinwand, Kopie, Bildausschnitt, Geometrie, Palette und nahen Inhalt, es sei denn, die Änderung betrifft sie explizit.
Beispiel:
Bearbeite Bild 1 direkt. Entferne bei x=43,4%, y=29,6% von der oberen linken Ecke nur die lokale Füllung hinter dem Label und setze die angrenzende Sektionstextur in diesen Bereich fort. Bewahre die Beschriftung, die Haarfeinlinie, den Schriftmaßstab, die umgebenden Panels und die gesamte Leinwand. Halte den Sektionshintergrund undurchsichtig.
Unterscheide das Entfernen einer lokalen Füllung vom Erstellen eines Alpha-Ausschnitts. Verwende einen transparenten Hintergrund nur, wenn angefordert oder für das beabsichtigte Asset nötig. Wenn strenger Pixelerhalt erforderlich ist, verwende einen genehmigten Compositing-Workflow, wenn verfügbar, und überprüfe den unberührten Bereich am Original. Prompt-Anweisungen und generatives Markup allein können kein pixelidentisches Ergebnis garantieren.
6. Das verfügbare Bild-Backend verwenden
Bevorzuge das Host-Bildgenerierungs- und Bearbeitungswerkzeug, wenn vorhanden. Stelle Referenzbilder über seinen unterstützten Eingabemechanismus bereit und drücke nicht unterstützte Steuerelemente als Absicht im Prompt aus. Gib das tatsächliche Backend oder die Einstellungen nur bekannt, wenn sie bekannt sind. Wenn kein Bild-Backend verfügbar ist, stelle einen ausführungsbereiten Prompt bereit und identifiziere die erforderlichen Eingaben.
Wenn eine OpenAI Image API-Integration verfügbar ist, verwende diese Startpunkte:
| Verwendung | Modell | Qualität | Komplexität |
|---|---|---|---|
| Schnelles Originalkonzept | gpt-image-2.6-flare | mittel | mittel |
| Detailliertes Layout, kleiner exakter Text oder anspruchsvolle Referenzübereinstimmung | gpt-image-2.6-sunburst | hoch | mittel oder hoch |
| Gezielte Bearbeitung | gpt-image-2.6-sunburst | mittel oder hoch | niedrig |
Passe die Qualität für Detail und Lesbarkeit an. Passe die Komplexität für Planung und Komposition an. Verwende Generierungen für neue Kompositionen und Bearbeitungen für vorhandene Bildbasen. Lasse input_fidelity bei GPT Image 2.6-Bearbeitungen weg. Verwende für markierungskontrollierte Bearbeitungen eine transparente PNG-Überlagerung, die den Pixelmaßen der ersten Eingabe entspricht. Stelle Markierung oder Maske separat wie unterstützt bereit, niemals beide in derselben markierungskontrollierten Anfrage. Halte die Annotationen aus dem endgültigen Kunstwerk heraus.
Wähle unterstützte Größen nahe dem Zielverhältnis. Für benutzerdefinierte Größen der GPT Image 2.6 API verwende Maße, die durch 16 teilbar sind, und überprüfe die aktuellen Modellgrenzen. Beispiel-Leinwände umfassen 1536×960 für einen 16:10 Hero, 1536×1024 für eine 3:2 Sektion, 1088×1920 für einen hohen Seitenausschnitt und 1088×2352 für eine Telefon-Komposition. Bewahre das angeforderte Verhältnis und die Maße als Ziele, wenn der Host die Leinwandgröße verwaltet. Überprüfe die tatsächlichen Maße, bevor du einen genauen Export behauptest.
Verwende PNG für detaillierte Kompositionen und Alpha-Assets. Wenn das Backend sie unterstützt, fordere SVG- oder GIF-Generierung nur für ein Vektor-Asset oder eine Bewegungsstudie an, die der Benutzer wünscht. Überprüfe die Vektorausgabe und Schleifenkontinuität vor der Auslieferung.
API-Referenzen: Bildgenerierung · Bild-Prompting
7. Überprüfen und korrigieren
Überprüfe das tatsächliche Bild bei normaler Ansicht und zoome in kleine Beschriftungen oder den bearbeiteten Bereich. Vergleiche es mit dem Briefing und den genehmigten Eingaben:
- Überprüfe alle gesperrten Texte, Daten, Preise, Labels, Logos und erkennbaren Asset-Details.
- Überprüfe die angeforderte Sektionsanzahl und Lesereihenfolge, visuelle Hierarchie, Abstände, Ausrichtung, Typografie, Haarfeinlinien und Komponentenkontinuität. Prüfe, ob das Layout in den angeforderten Viewport passt.
- Überprüfe, ob die Referenzrollen getrennt geblieben sind. Markiere entlehnte Layouts, nicht zusammenhängende Texte, Asset-Substitutionen oder nicht angeforderte Panels.
- Bei Bearbeitungen vergleiche den geänderten Bereich und seine Umgebung mit der genehmigten Basis. Bei Ausschnitten überprüfe den Alpha-Kanal, wenn verfügbar.
Behandle jede Verletzung einer gesperrten Anforderung als fehlgeschlagene Prüfung. Führe maximal einen automatischen Korrekturdurchlauf pro Anfrage durch. Für eine Bearbeitung eines genehmigten Bildes wiederhole den Vorgang von der genehmigten Basis aus, wenn das Ergebnis abgewichen ist. Für eine neue Komposition mit einem lokalisierten Defekt bearbeite das Ergebnis. Generiere nur neu, wenn die Komposition selbst neu aufgebaut werden muss. Überprüfe nach der Korrektur erneut und lege alle verbleibenden materiellen Abweichungen oder nicht verfügbaren Überprüfungen offen. Gib das ausgewählte visuelle Ergebnis mit einer kurzen Notiz zurück, wenn es Kontext hinzufügt.