Design-Prompt verwenden
Projektanforderungen hinzufügen
Füge unten deinen Kontext hinzu. Er wird beim Kopieren oder Herunterladen in den Design-Prompt aufgenommen.
Erstelle eine bearbeitbare HTML/CSS-Komposition mit auswählbarem Text und einem Druck-Stylesheet; behandle jede Bitmap-Illustration als separates lokales Asset für [PROJECT] und [AUDIENCE]. Die Aufgabe lautet: Cover für einen redaktionellen Artikel.
Erforderliche Inhalte und Struktur
Übertrage den zentralen Konflikt des Artikels in ein eigenständiges, zurückhaltendes Motiv mit Platz für den Titel.
Verwende [APPROVED_CONTENT] als Quelle für Namen, Daten, Zahlen, Aussagen und Ziele. Führe fehlende Angaben auf, bevor du etwas ersetzt. Falls eine Demonstration erforderlich ist, kennzeichne deren Inhalte als fiktiv. Erfinde keine Kundenstimmen, Rankings, Partnerlogos oder Produktfunktionen.
Designausrichtung
Verwende [BRAND_RULES] und das bereits im Projekt ausgewählte Designsystem. Falls kein System vorgegeben ist, beginne mit dieser Richtung: Creme, Anthrazit und Olivgrün; asymmetrische redaktionelle Hierarchie mit großzügigem Negativraum. Verwende Typografie, Abstände und Farbrollen konsistent. Stelle die Aufgabe über dekorative Elemente und vermeide eine generische Sammlung zusammenhangloser Karten.
Inhaltsvorbereitung
Lies die zentrale Argumentation des Artikels und ermittle seinen Hauptkonflikt. Gib die exakte Überschrift, den vorgesehenen Bildausschnitt sowie alle Marken- oder Publikationsvorgaben an.
Layout und Verhalten
Wähle eine visuelle Metapher, die das Argument unterstützt. Lasse bewusst Raum für den Titel, statt jedes Schlüsselwort zu einer Illustration zu collagieren.
Aufgabenspezifische Abnahmeprüfung
- Vermeide eine wörtliche Collage aller Schlüsselwörter und achte darauf, dass die Metapher relevant bleibt.
- Betrachte das Cover ohne den Artikel und prüfe, ob es das richtige Thema vermittelt.
- Teste die Platzierung der Überschrift und die Skalierung der Miniaturansicht; dekorative Komplexität darf die redaktionelle Idee nicht überlagern.
Implementierung und Prüfung
Halte Texte bearbeitbar. Verwende eine semantische Struktur, aussagekräftig beschriftete Steuerelemente, einen sichtbaren Tastaturfokus und geeignete Leer- und Fehlerzustände. Prüfe schmale und breite Layouts. Berücksichtige Einstellungen für reduzierte Bewegung. Behalte das vorhandene Projekt-Framework und seine Abhängigkeiten bei; ersetze den Stack nicht stillschweigend. Gib die bearbeitbaren Dateien zurück und erläutere unvollständiges Verhalten oder nicht unterstützte Eingaben. Prüfe diese konkrete Aufgabe, bevor du zusätzliche Funktionen vorschlägst.
Belasse den exakten Text und erforderliche Nennungen als Live-Text. Frage nach den vorgesehenen Abmessungen, wenn sie fehlen. Erfinde keinen funktionsfähigen QR-Code, Barcode, keine Signatur und kein offizielles Siegel.
Referenzanhang und Rekonstruktionsziel
Füge reference.webp aus dem Download-Paket dieses Prompts zusammen mit diesem Prompt in OpenDesign ein. Erstelle ein bearbeitbares Ergebnis mit ähnlicher Komposition und Hierarchie; binde nicht das gesamte Referenzbild als fertige Benutzeroberfläche ein. Bewahre freigegebene Projektinhalte und Markenregeln, wenn sie fiktiven Beispielbeschriftungen widersprechen. Falls das Bild fehlt oder unleserlich ist, frage danach, anstatt visuelle Übereinstimmung zu behaupten.
Komposition und Inhalt der Referenz
Verwende die beigefügte Datei reference.webp als visuelle Referenz für das Cover eines redaktionellen Artikels. Ermittle vor der Umsetzung die Hauptbereiche von oben nach unten sowie ihre relativen Breiten und Höhen, Ausrichtung, Abstände, typografische Hierarchie, Flächenfarben, Rahmen, Bildsprache und wiederkehrenden Komponenten. Bewahre diese Beziehungen, anstatt sie durch eine generische Vorlage zu ersetzen. Erforderlicher Aufgabeninhalt: Übertrage den zentralen Konflikt des Artikels in eine eigenständige, zurückhaltende visuelle Darstellung mit Raum für den Titel. Nutze bei der Übertragung des Bildes in bearbeitbare Elemente die folgenden aufgabenspezifischen Layoutvorgaben: Wähle eine visuelle Metapher, die das Argument unterstützt. Lasse bewusst Raum für den Titel, statt jedes Schlüsselwort zu einer Illustration zu collagieren.
Visuelle Ausrichtung aus den beispielhaften Projektanforderungen
Creme, Anthrazit und Olivgrün; asymmetrische redaktionelle Hierarchie mit großzügigem Negativraum.
Ausgabe und Bearbeitbarkeit
Erstelle die fertige Grafik als bearbeitbare Text-, Form- und Bildebenen neu. Die Referenz zeigt eine Komposition, keine Editoroberfläche; füge keine Navigation, Formulare oder Dashboard-Widgets hinzu, die darin nicht vorhanden sind. Wähle eine visuelle Metapher, die das Argument unterstützt. Lasse bewusst Raum für den Titel, statt jedes Schlüsselwort zu einer Illustration zu collagieren. Bestätige die vorgesehenen Abmessungen und bewahre die Texthierarchie bei der Anpassung der Gestaltung. Vermeide eine wörtliche Collage aller Schlüsselwörter und achte darauf, dass die Metapher relevant bleibt.
Visueller Vergleich und Übergabe
- Vergleiche das Ergebnis bei übereinstimmenden Proportionen mit dem angehängten Bild. Prüfe vor der Ausarbeitung dekorativer Details die Platzierung der Hauptbereiche, relative Bildgrößen, Zeilenumbrüche, Abstände, typografische Hierarchie, Kontrast, aktive Zustände und Inhaltsdichte.
- Teste anschließend das schmale Layout, ohne Desktoptexte in winzige Beschriftungen zu zwängen.
- Halte Logos, Fotos und Symbole als separate Assets und alle aussagekräftigen Beschriftungen bearbeitbar. Führe nicht verfügbare Schriftarten und Assets sowie beabsichtigte Abweichungen auf. Gib die funktionsfähigen Dateien zusammen mit einer knappen Beschreibung des implementierten Verhaltens und der noch ausstehenden Integrationen zurück; versprich nicht allein auf Grundlage des Prompts ein pixelgenaues Ergebnis.
Design-Prompt + Bild herunterladen
Enthält den vollständigen Design-Prompt und das Referenzbild in voller Größe. Füge beides in OpenDesign hinzu, um das Layout zu steuern.
So schreibst du einen Design-Prompt für ein redaktionelles Artikelcover
Ein hilfreicher Design-Prompt für das Cover eines redaktionellen Artikels erläutert das Argument, die Komposition und die Lesereihenfolge – nicht nur eine Stimmung. Dieses Beispiel kombiniert eine übergroße Serifenschrift-Überschrift mit einer kreisförmigen Stadtlandschaft und einem dunklen, felsigen Vordergrund. Die folgende Anleitung überführt diese sichtbaren Entscheidungen in Anweisungen, die du an deinen eigenen Artikel anpassen kannst.
Die drei folgenden Detailansichten sind Ausschnitte derselben KI-generierten Referenz. Sie erläutern Komposition und Typografie; es sind keine Screenshots einer funktionierenden Benutzeroberfläche.
Eine visuelle Metapher rund um den Artikel entwickeln
Die Stadt wird nicht als konventionelle Skyline-Fotografie dargestellt. Sie befindet sich in einem großen blassen Kreis, abgemildert durch Bergkämme und Dunst. Auf dem Felsen rechts erscheint eine kleine sitzende Figur näher am Betrachter. Zusammen mit der fiktiven Überschrift „A Quieter Progress“ entsteht so eine mögliche Spannung zwischen städtischem Wachstum und einer langsameren, reflektierteren Perspektive. Diese Lesart ist eine Interpretation der Komposition; für einen tatsächlichen Artikel kann eine andere Metapher erforderlich sein.
Beginne deinen Design-Prompt für das Artikelcover mit der zentralen Frage des Artikels und nenne dann die wenigen visuellen Elemente, die sie ausdrücken. „Gestalte es nachdenklich und redaktionell“ lässt Motiv, Maßstab und Beziehung offen. Die Referenz ist konkreter: eine entfernte Stadt, eine kleine Person, ein großer Felsen und ein einzelner kreisförmiger Rahmen. Ihre Größenverhältnisse sind ebenso wichtig wie ihre Identität. Füge nicht einfach Uhren, Diagramme, Blätter oder andere Symbole hinzu, nur weil sie im Artikel vorkommen. Jedes zusätzliche Objekt konkurriert mit der zentralen Idee. Wenn dein Artikel eine andere Spannung behandelt, ersetze die Metapher, bevor du diese Komposition beibehältst.
Aus dem Prompt
Wähle eine visuelle Metapher, die das Argument unterstützt.
An dein Projekt anpassen
Der Artikel untersucht [CENTRAL_QUESTION]. Drücke den Konflikt zwischen [IDEA_A] und [IDEA_B] durch eine einzige Szene aus: [DISTANT_SUBJECT] in einem großen kreisförmigen Feld, mit [FOREGROUND_SUBJECT] im Vordergrund unten rechts. Halte das Detail im menschlichen Maßstab klein und den Hintergrund ruhig. Reserviere die linke Seite für die freigegebene Überschrift. Vermeide zusätzliche symbolische Objekte, sofern sie nicht zur Erklärung des Arguments erforderlich sind.
Hierarchie und Zeilenumbrüche der Überschrift festlegen
Der Titel nimmt den größten Teil der linken Hälfte ein. „A“ steht in einer eigenen Zeile, „Quieter“ ist olivfarben und „Progress“ kehrt zu Anthrazit zurück. Die kontrastreichen Serifenschriftformen tragen die Komposition; die kurze Frage darunter steht in Großbuchstaben, mit weiter Laufweite und in deutlich kleinerer Größe. Diese Hierarchie schafft eine klare erste und zweite Leseebene. Sie ist keine Vorlage, um jeden Titel in drei Zeilen zu zwingen: Eine längere freigegebene Überschrift benötigt andere Umbrüche und möglicherweise mehr horizontalen Raum.
Gib dem Modell die exakte Überschrift, den unterstützenden Satz und den Publikationsnamen separat vor. Beschreibe anschließend ihre Rollen und relativen Größen. Die Aufforderung zu „beautiful typography“ sagt dem Modell nicht, welcher Text dominieren muss. Lege bearbeitbaren Text, eine große Serifenschrift-Überschrift, eine kompakte unterstützende Zeile in serifenloser Schrift und eine einzige zurückhaltende Akzentfarbe fest. Prüfe die tatsächlichen Wörter in der vorgesehenen Covergröße: Dünne Serifenstriche können in einer kleinen Miniaturansicht verschwinden und lange Wörter mit dem Bild kollidieren. Überarbeite die Zeilenumbrüche oder den Titelbereich, bevor du den gesamten Text gleichmäßig verkleinerst. Der fiktive Text in diesem Bild dient als Kompositionsreferenz und ist kein freigegebener Text für deine Publikation.
Aus dem Prompt
Übertrage den zentralen Konflikt des Artikels in ein eigenständiges, zurückhaltendes Motiv mit Platz für den Titel.
An dein Projekt anpassen
Verwende die exakte Überschrift [APPROVED_HEADLINE] als bearbeitbaren Text im linken Bereich. Setze sie in einer kontrastreichen Serifenschrift mit engem, aber gut lesbarem Zeilenabstand. Wähle die Zeilenumbrüche nach der Bedeutung der Wörter; trenne kein Wort. Hebe nur [KEY_PHRASE] in der Akzentfarbe hervor. Platziere [SUPPORTING_LINE] darunter in einer kleineren serifenlosen Schrift mit weiter Laufweite. Halte den Publikationsnamen visuell nachrangig und lasse einen deutlichen Abstand zwischen Titel und kreisförmiger Illustration.
Farbe, Ebenen und finalen Bildausschnitt beschreiben
Die warme cremefarbene Fläche ist der größte Farbbereich. Oliv erscheint im hervorgehobenen Titelwort und in der geschwungenen Form unter dem Bild; Anthrazit verankert Überschrift und Felsen. Der Felsen im Vordergrund überlappt die kreisförmige Landschaft, statt innerhalb des Kreises zu bleiben. Diese Überlappung verbindet den geometrischen Rahmen mit dem unteren Rand des Covers. Kleine Publikationsangaben stehen nahe an den Rändern, konkurrieren jedoch nicht mit der Überschrift oder der Hauptszene.
Farbnamen sind nur ein Ausgangspunkt. Weise jeder Farbe eine Funktion zu und beschreibe die Ebenenreihenfolge: cremefarbene Leinwand, olivfarbene unterstützende Form, helle kreisförmige Landschaft, dunkler Felsen im Vordergrund und anschließend bearbeitbare Typografie. Das ist besser reproduzierbar als die Anforderung eines vagen minimalistischen Stils. Lege außerdem vor der Generierung die Ausgabeabmessungen und den Sicherheitsbereich fest. Die Referenz verwendet eine Leinwand im Querformat 3:2. Ein quadratischer Social-Media-Ausschnitt oder ein Hochformat-Cover erfordert eine neu komponierte Anordnung, nicht einen mittigen Zuschnitt, der den Titel abschneidet. In der Miniaturansicht sollten die Hauptsilhouette und der Titel lesbar bleiben, selbst wenn die kleinen Randbeschriftungen verschwinden.
Aus dem Prompt
Creme, Anthrazit und Olivgrün; asymmetrische redaktionelle Hierarchie mit großzügigem Negativraum.
An dein Projekt anpassen
Erstelle ein redaktionelles Cover mit [WIDTH] × [HEIGHT]. Verwende warmes Creme für die Leinwand, Anthrazit für die Haupttypografie und den Vordergrund sowie gedämpftes Oliv für ein einzelnes hervorgehobenes Wort und eine unterstützende Kurve. Platziere die kreisförmige Landschaft hinter dem Vordergrundbild, sodass der Felsen ihren Rand überlappt. Halte alle freigegebenen Texte innerhalb von [SAFE_MARGIN]. Komponiere Titel und Bild für eine quadratische oder hochformatige Version als separate Ebenen neu; beschneide nicht das fertige Cover im Querformat und reduziere den Text nicht auf eine Bildebene.
Ergebnis deines redaktionellen Artikelcovers prüfen
Vergleiche das Ergebnis im gleichen Seitenverhältnis mit der Referenz und prüfe es anschließend in der Größe, in der Leser es tatsächlich sehen werden. Prüfe die Bedeutung des Artikels, bevor du Oberflächendetails verfeinerst. Das Bild ist ein visuelles Konzept; bearbeitbarer Text, endgültige Abmessungen und Asset-Berechtigungen müssen in den gelieferten Dateien noch geprüft werden.
- Bedeutung: Blende die Überschrift aus. Vermittelt die verbleibende Szene weiterhin den zentralen Konflikt des Artikels oder deutet sie eine Aussage an, die der Artikel nicht trifft?
- Hierarchie: Betrachte eine kleine Miniaturansicht. Kannst du den Haupttitel und die Silhouette sofort erkennen? Entferne konkurrierende Details, bevor du alles vergrößerst.
- Komposition: Prüfe, ob der Titel einen eigenen Bereich hat, der Kreis erkennbar bleibt und die Überlappung im Vordergrund beabsichtigt wirkt. Vergleiche das gesamte Cover, nicht isolierte dekorative Details.
- Text und Bereitstellung: Überprüfe den exakten Titel, die Zeichensetzung und die Publikationsangabe. Bestätige bearbeitbare Typografie, separate Bildebenen, die angeforderten Abmessungen und alle alternativen Zuschnitte.
Anschluss-Prompt
Verwende dies nach dem ersten Ergebnis. Dadurch wird die Überarbeitung auf den wichtigsten Teil dieser Aufgabe eingegrenzt.
Verfeinere das aktuelle Cover für den redaktionellen Artikel. Betrachte das Cover ohne den Artikel und prüfe, ob es das richtige Thema vermittelt. Teste die Platzierung der Überschrift und die Skalierung der Miniaturansicht; dekorative Komplexität darf die redaktionelle Idee nicht überlagern. Bewahre die freigegebenen Inhalte und die visuelle Ausrichtung; ändere nur die Elemente, die zur Behebung dieser Probleme nötig sind.
