Design-Prompt verwenden
Projektanforderungen hinzufügen
Füge unten deinen Kontext hinzu. Er wird beim Kopieren oder Herunterladen in den Design-Prompt aufgenommen.
Erstelle mit dem vorhandenen Projekt-Stack eine responsive HTML-Website für [PROJECT] und [AUDIENCE]. Die Aufgabe lautet: Homepage eines redaktionellen Magazins.
Erforderliche Inhalte und Struktur
Erstelle eine Aufmachergeschichte, thematische Rubriken, Autorenzeilen und ein ausgewogenes Artikelraster.
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. Wenn kein System vorgegeben ist, beginne mit dieser Ausrichtung: kräftige schwarze Typografie, warmgelbe Flächen und prägnante geometrische Kompositionen; kontrollierter Kontrast. Halte Typografie, Abstände und Farbrollen konsistent. Priorisiere die Aufgabe gegenüber dekorativen Elementen und vermeide eine generische Sammlung unzusammenhängender Karten.
Inhaltsvorbereitung
Wähle eine Aufmachergeschichte und stelle Artikeltitel, Autoren, Themen, Daten, Bilder und Zusammenfassungen zusammen. Entscheide, welche Mehrfachplatzierungen beabsichtigte Cross-Promotion darstellen und welche doppelte Einträge wären.
Layout und Verhalten
Erstelle einen starken Leitartikel, gefolgt von thematischen Gruppen mit einheitlichen Autorenzeilen und gut lesbaren Zusammenfassungen. Variiere die Bildgröße, um Prioritäten hervorzuheben und zugleich eine klare Lesereihenfolge der Artikel zu bewahren.
Aufgabenspezifische Abnahmeprüfung
- Stelle denselben Artikel nicht mehrfach als verschiedene, voneinander unabhängige Beiträge dar.
- Prüfe lange Überschriften und Beiträge ohne Bilder.
- Leser sollten mehrere Platzierungen desselben Artikels nicht für unterschiedliche Beiträge halten, und die Reihenfolge auf Mobilgeräten sollte die redaktionelle Priorität bewahren.
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.
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 angehängte Datei reference.webp als visuelle Referenz für die Homepage des redaktionellen Magazins. Bestimme vor der Umsetzung die wichtigsten Bereiche von oben nach unten, ihre relativen Breiten und Höhen, Ausrichtung, Abstände, typografische Hierarchie, Flächenfarben, Rahmen, Bildsprache und wiederkehrenden Komponenten. Bewahre diese Beziehungen, statt sie durch eine generische Vorlage zu ersetzen. Erforderlicher Aufgabeninhalt: Erstelle einen Leitartikel, thematische Abschnitte, Autorenzeilen und ein ausgewogenes Artikelraster. Nutze bei der Übertragung des Bildes in bearbeitbare Elemente die folgenden aufgabenspezifischen Layoutvorgaben: Erstelle einen starken Leitartikel, gefolgt von thematischen Gruppen mit einheitlichen Autorenzeilen und gut lesbaren Zusammenfassungen. Variiere die Bildgröße, um Prioritäten hervorzuheben und zugleich eine klare Lesereihenfolge der Artikel zu bewahren.
Visuelle Ausrichtung aus den beispielhaften Projektanforderungen
Kräftige schwarze Typografie, warmgelbe Flächen und prägnante geometrische Kompositionen; kontrollierter Kontrast.
Interaktionsspezifikation
Die Referenz ist ein statisches Konzept: Das unten beschriebene Verhalten ist eine umzusetzende Anforderung und kein Beleg dafür, dass die Abbildung bereits funktioniert. Kopiere den angepassten Prompt in dein Arbeitsprojekt. Beginne mit der Kernaufgabe: Erstelle einen Leitartikel, thematische Abschnitte, Autorenzeilen und ein ausgewogenes Artikelraster. Stelle denselben Artikel nicht mehrfach als verschiedene, voneinander unabhängige Beiträge dar. Lege für jedes sichtbare Bedienelement seinen Auslöser, den betroffenen Zustand und die Rückmeldung fest; implementiere lokale Änderungen mit konsistentem Status in zusammengehörigen Ansichten. Sorge dafür, dass Suche und Filter echte Ergebnisse liefern, Auswahlsteuerelemente einen eindeutigen aktiven Zustand haben und Speicheraktionen gegebenenfalls sichtbare Rückmeldungen für ausstehende, erfolgreiche oder fehlgeschlagene Vorgänge anzeigen. Füge keine sachfremden Abläufe hinzu. Verwende korrekte Links für die Navigation, Schaltflächen für Aktionen und barrierefreie Bezeichnungen für Symbolsteuerelemente. Erwecke nicht den Eindruck, dass ein Backend-Vorgang erfolgreich war, wenn sich nur eine lokale Demo geändert hat.
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 verfasst du einen Design-Prompt für die Homepage eines redaktionellen Magazins
Nutze diesen Design-Prompt für die Homepage eines redaktionellen Magazins, um einen Leitartikel, thematische Abschnitte, Autorenzeilen und ein ausgewogenes Artikelraster zu erstellen.
Die Referenz ist ein KI-generiertes Konzept. Die folgenden Anweisungen beschreiben, was erstellt und getestet werden soll; das Bild belegt kein funktionsfähiges Verhalten.
Hebe den Leitartikel redaktionell klar hervor
Die Homepage eines Magazins sollte vermitteln, was aktuell Aufmerksamkeit verdient.
Gleich große Artikelkarten schwächen die Hierarchie zwischen dem Leitartikel und den ergänzenden Beiträgen ab. Erstelle einen starken Leitartikel, gefolgt von thematischen Gruppen mit einheitlichen Autorenzeilen und gut lesbaren Zusammenfassungen. Variiere die Bildgröße, um Prioritäten hervorzuheben und zugleich eine klare Lesereihenfolge der Artikel zu bewahren.
Aus dem Prompt
Erstelle einen starken Leitartikel, gefolgt von thematischen Gruppen mit einheitlichen Autorenzeilen und gut lesbaren Zusammenfassungen.
An dein Projekt anpassen
Wähle [LEAD_STORY] bewusst aus und gruppiere anschließend [SECONDARY_STORIES] nach Themen. Halte Autorenzeilen und Artikelziele sichtbar und bewahre eine sinnvolle Lesereihenfolge, wenn das Raster einspaltig wird.
Inhalte für die Homepage des redaktionellen Magazins vorbereiten
Der Aufmacher platziert Titel, Zusammenfassung und Autorenzeile neben einem dominanten Bild. Bereite diese als einen einzigen Artikeldatensatz vor, damit der Hero-Bereich auf den richtigen Beitrag verweist.
Wähle eine Aufmachergeschichte und stelle Artikeltitel, Autoren, Themen, Daten, Bilder und Zusammenfassungen zusammen. Entscheide, welche Mehrfachplatzierungen beabsichtigte Cross-Promotion darstellen und welche doppelte Einträge wären.
Aus dem Prompt
Erstelle eine Aufmachergeschichte, thematische Rubriken, Autorenzeilen und ein ausgewogenes Artikelraster.
An dein Projekt anpassen
Verwende für [PROJECT] [APPROVED_CONTENT] als Quelle für diese Homepage eines redaktionellen Magazins. Wähle einen Leitartikel aus und stelle Artikeltitel, Autoren, Themen, Daten, Bilder und Zusammenfassungen zusammen. Entscheide, welche Mehrfachplatzierungen beabsichtigte Cross-Promotion darstellen und welche doppelte Datensätze wären. Ermittle fehlende Angaben, bevor du sie durch Demonstrationsinhalte ersetzt.
Lange Überschriften und fehlende Bilder testen
Das untere Raster wiederholt Kategorien, Überschriften, Zusammenfassungen und Autoreninformationen. Prüfe Lesereihenfolge, Bildseitenverhältnisse und den Umbruch langer Überschriften, bevor du weitere Karten hinzufügst.
Der Leitartikel sollte auch bei einem langen Titel oder fehlenden Vorschaubild erkennbar bleiben. Verlasse dich nicht ausschließlich auf die Bildgröße, um Priorität zu vermitteln. Prüfe lange Überschriften und Beiträge ohne Bilder. Leser sollten mehrere Platzierungen desselben Artikels nicht für unterschiedliche Beiträge halten, und die Reihenfolge auf Mobilgeräten sollte die redaktionelle Priorität bewahren.
Aus dem Prompt
Vermeide es, denselben Artikel als mehrere voneinander unabhängige Geschichten zu duplizieren.
An dein Projekt anpassen
Prüfe die Homepage des redaktionellen Magazins anhand dieser Anforderung: Stelle denselben Artikel nicht mehrfach als verschiedene, voneinander unabhängige Beiträge dar. Prüfe lange Überschriften und Beiträge ohne Bilder. Leser sollten mehrere Platzierungen desselben Artikels nicht für unterschiedliche Beiträge halten, und die Reihenfolge auf Mobilgeräten sollte die redaktionelle Priorität bewahren. Behalte die freigegebenen Inhalte bei und überarbeite nur die Teile, die diese Prüfung nicht bestehen.
Ergebnis deiner Homepage für das redaktionelle Magazin prüfen
Generierte Texte, Routen und visuelle Strukturen müssen überprüft werden. Verbinde keine echten Formulare, Zahlungen oder externen Dienste, ohne diese Abläufe zu implementieren und zu testen.
- Prüfe lange Überschriften und Beiträge ohne Bilder. Leser sollten mehrere Platzierungen desselben Artikels nicht für unterschiedliche Beiträge halten, und die Reihenfolge auf Mobilgeräten sollte die redaktionelle Priorität bewahren.
Anschluss-Prompt
Verwende dies nach dem ersten Ergebnis. Dadurch wird die Überarbeitung auf den wichtigsten Teil dieser Aufgabe eingegrenzt.
Verfeinere die aktuelle Homepage des redaktionellen Magazins. Prüfe lange Überschriften und Beiträge ohne Bilder. Leser sollten mehrere Platzierungen desselben Artikels nicht für unterschiedliche Beiträge halten, und die Reihenfolge auf Mobilgeräten sollte die redaktionelle Priorität bewahren. Behalte die freigegebenen Inhalte und die visuelle Ausrichtung bei; ändere nur die Teile, die zur Behebung dieser Probleme erforderlich sind.
