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 für [PROJECT] und [AUDIENCE] eine responsive HTML-Website. Die Aufgabe lautet: Portfolio eines Kreativstudios.
Erforderliche Inhalte und Struktur
Präsentiere drei Projekte mit Disziplin, Rolle, Jahr und Links zu den Fallstudien; verwende ausdrucksstarke Typografie und ein asymmetrisches Bildraster.
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: warmes Elfenbein, anthrazitfarbene Typografie und ein einzelner zurückhaltender, säuregrüner Akzent; großzügige Abstände und ein asymmetrisches Raster. Verwende typografische Stile, Abstände und Farbrollen konsistent. Stelle die Aufgabe über dekorative Elemente und vermeide eine generische Sammlung zusammenhangloser Karten.
Projektinhalt
Gib für jedes der drei Projekte den Titel, eine einzeilige Projektbeschreibung, Disziplin, Jahr, Studiorolle, Credits der Mitwirkenden, das Leitbild und das Ziel der Fallstudie an. Beginne mit dem stärksten Projekt; nutze die beiden anderen, um die Bandbreite zu zeigen. Schließe mit dem bereitgestellten Kontaktweg ab. Erfinde keine Fallstudien-Narrative für fehlende Zieladressen.
Layout und Verhalten
Nutze Asymmetrie durch Bildgröße und Platzierung, mit einheitlich ausgerichteten Bildunterschriften. Platziere Projektnamen und Mitwirkendenangaben außerhalb der Bilder. Bewahre die vorgegebenen Bildproportionen, sofern kein Beschnitt genehmigt wurde. Ordne auf Mobilgeräten Einleitung, Hauptprojekt, ergänzende Projekte und Kontakt in dieser Reihenfolge untereinander an.
Aufgabenspezifische Abnahmeprüfung
- Prüfe einen langen Titel, ein Bild im Hochformat und mehrere Mitwirkende.
- Stelle sicher, dass jedes Projektziel per Tastatur erreichbar ist und alle Mitwirkendenangaben ohne Hover sichtbar bleiben.
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 das Kreativstudio-Portfolio. Ermittle vor der Umsetzung die Hauptbereiche 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. Erforderliche Aufgabeninhalte: Präsentiere drei Projekte mit Disziplin, Rolle, Jahr und Links zu den Case Studies; verwende ausdrucksstarke Typografie und ein asymmetrisches Bildraster. Nutze beim Übertragen des Bildes in bearbeitbare Elemente die folgenden aufgabenspezifischen Layoutvorgaben: Gib einem Projekt die Hauptposition und nutze die beiden anderen, um die Bandbreite zu zeigen. Die Asymmetrie soll durch Bildgröße und Platzierung entstehen, während Bildunterschriften einheitlich ausgerichtet sind und dieselbe Schriftgröße verwenden. Platziere Projektname, Disziplin und Mitwirkendenangaben außerhalb des Bildes, damit sie sowohl bei heller als auch bei dunkler Fotografie lesbar bleiben. Kehre auf schmalen Bildschirmen zu einer bewusst vertikalen Abfolge zurück: Einleitung, Hauptprojekt, ergänzende Projekte, dann Kontakt. Bewahre die ursprünglichen Bildproportionen, sofern kein Beschnitt genehmigt wurde.
Visuelle Ausrichtung aus den beispielhaften Projektanforderungen
Warme elfenbeinfarbene Fläche, übergroße anthrazitfarbene Schweizer Sans-Serif-Typografie, kleine säuregrüne Akzente, großzügiger Negativraum, asymmetrisches Projektraster mit architektonischen, skulpturalen Fotografien und einer zurückhaltenden kobaltblauen Fläche. Exakter Hero-Text „Good ideas. Carefully made.“ Navigation „Work“, „About“, „Contact“. Projektbeschriftungen „Objects / 2026“, „Spaces / 2026“, „Identity / 2026“. Elegante, professionelle redaktionelle Art-Direction.
Interaktionsspezifikation
Die Referenz ist ein statisches Konzept: Das unten beschriebene Verhalten ist eine umzusetzende Anforderung und kein Beleg dafür, dass das Bild bereits funktioniert. Kopiere den angepassten Prompt in das Projekt, in dem du das Portfolio erstellen möchtest. Fordere zuerst die Startseite an; die Case-Study-Seiten sollen ihre jeweils bereitgestellten Inhalte verwenden, statt erfundene Projekterzählungen. Stelle sicher, dass jedes Projektziel per Tastatur erreichbar ist und alle Mitwirkendenangaben ohne Hover sichtbar bleiben. Lege für jedes sichtbare Steuerelement Auslöser, betroffenen Zustand und Rückmeldung fest; setze lokale Änderungen mit einem konsistenten Zustand über zusammengehörige Ansichten hinweg um. Sorge dafür, dass Suche und Filter echte Ergebnisse liefern, Auswahlsteuerelemente einen eindeutigen aktiven Zustand besitzen und Speicheraktionen gegebenenfalls sichtbare Rückmeldungen für ausstehende, erfolgreiche oder fehlgeschlagene Vorgänge geben. Füge keine unzusammenhängenden 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, ein Backend-Vorgang sei erfolgreich gewesen, 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 schreibst du einen Design-Prompt für ein Kreativstudio-Portfolio
Nutze diesen Design-Prompt für ein Kreativstudio-Portfolio, um drei Projekte mit Disziplin, Rolle, Jahr und Links zu den Case Studies zu präsentieren; verwende ausdrucksstarke Typografie und ein asymmetrisches Bildraster.
Detailausschnitte aus demselben KI-generierten Konzept; dies sind keine Screenshots einer funktionsfähigen Website.
Beschreibe die Hierarchie vor dem Stil
„Good ideas. Carefully made.“ nimmt den größten Teil der linken Seite der Einleitung ein. Die Studiobeschreibung steht in einem deutlich kleineren Block rechts; „Work“, „About“ und „Contact“ bleiben oben. Der elfenbeinfarbene Hintergrund und die anthrazitfarbene Schrift unterstützen diese Hierarchie, während der kleine grüne Akzent einen Blickfang schafft.
„Redaktionell“ allein lässt die Komposition offen für Interpretationen. Benenne das dominante Element, die Position des ergänzenden Textes und die Details, die dezent bleiben sollen. Lege deine tatsächliche Überschrift separat fest: Die Wörter des Beispiels sind fiktiv, und eine längere Überschrift benötigt andere Zeilenumbrüche. Gib einem Projekt die Hauptposition und nutze die beiden anderen, um die Bandbreite zu zeigen. Die Asymmetrie soll durch Bildgröße und Platzierung entstehen, während Bildunterschriften einheitlich ausgerichtet sind und dieselbe Schriftgröße verwenden. Platziere Projektname, Disziplin und Mitwirkendenangaben außerhalb des Bildes, damit sie sowohl bei heller als auch bei dunkler Fotografie lesbar bleiben. Kehre auf schmalen Bildschirmen zu einer bewusst vertikalen Abfolge zurück: Einleitung, Hauptprojekt, ergänzende Projekte, dann Kontakt. Bewahre die ursprünglichen Bildproportionen, sofern kein Beschnitt genehmigt wurde.
Aus dem Prompt
Warme elfenbeinfarbene Fläche, übergroße anthrazitfarbene Schweizer Sans-Serif-Typografie, kleine säuregrüne Akzente, großzügiger Negativraum
An dein Projekt anpassen
Verwende [STUDIO_NAME] und [APPROVED_HEADLINE]. Mache die Überschrift zum dominanten Element auf der linken Seite; platziere rechts eine kurze Studioeinleitung. Halte „Work“, „About“ und „Contact“ darüber kompakt. Verwende warmes Elfenbein und Anthrazit mit einem einzigen zurückhaltenden Akzent aus [BRAND_RULES]. Lass die Überschrift natürlich umbrechen, statt sie passend zu verkleinern.
Mache das Projektraster zu einer verbindlichen Inhaltsvorgabe
Die drei Bilder erzeugen durch ihre Motive und Farben Kontrast: ein helles skulpturales Objekt, ein sonnendurchfluteter Innenraum und eine kobaltblaue Markenfläche. Ihre Bildunterschriften sind unter den Bildern an einer gemeinsamen Grundlinie ausgerichtet. Die sichtbare Reihe besteht annähernd aus drei gleich breiten Spalten; ein deutlich vergrößertes Leitprojekt ist nicht zu sehen, obwohl der Prompt eine asymmetrische Hierarchie verlangt.
Dieser Satz legt fest, was das Ergebnis enthalten muss, statt darauf zu hoffen, dass eine überzeugend wirkende Galerie alles umfasst. Das kleine Konzeptbild zeigt nicht eindeutig jede erforderliche Rolle oder alle Mitwirkendenangaben. Behalte diese Felder in der Umsetzung bei und prüfe sie anhand deiner echten Projektdatensätze. Kläre außerdem den Unterschied zwischen der Referenz und den schriftlichen Projektanforderungen: Wähle für eine stärkere visuelle Übereinstimmung eine Reihe aus drei gleich breiten Spalten oder vergrößere bewusst ein Projekt.
Aus dem Prompt
Gib für jedes der drei Projekte Titel, einzeilige Aufgabenbeschreibung, Disziplin, Jahr, Rolle des Studios, Mitwirkendenangaben, Hauptbild und Case-Study-Ziel an.
An dein Projekt anpassen
Verwende exakt diese drei freigegebenen Projektdatensätze: [PROJECT_RECORDS]. Präsentiere ihre Hauptbilder auf Desktop-Breite in drei gleich breiten Spalten, passend zur Referenz. Halte Titel, Disziplin, Jahr, Rolle des Studios und Mitwirkendenangaben als bearbeitbaren Text unter jedem Bild. Weise jedem Projekt seine vorgegebene Case-Study-URL zu. Bewahre die Proportionen jedes Bildes; erfinde keine fehlenden Mitwirkendenangaben oder Ziele.
Beschreibe das Verhalten, das das Bild nicht zeigen kann
Die Beschriftung „View case study“ deutet auf eine Navigation hin, doch ein statisches Bild kann weder zeigen, wohin sie führt, noch ob der Tastaturfokus sichtbar ist oder was auf einem Smartphone geschieht. Dafür sind schriftliche Anforderungen erforderlich. Füge nicht allein deshalb eine Suche, Filter oder Speicherfunktionen hinzu, weil ein allgemeiner Prompt sie erwähnt; sie gehören nicht zur sichtbaren Aufgabe dieses Portfolios.
Beschreibe Auslöser und Ergebnis: Ein Klick auf den Projekttitel oder den zugehörigen Case-Study-Link öffnet dasselbe freigegebene Ziel. Lege anschließend die Lesereihenfolge für schmale Bildschirme fest. Verlange nicht vom Modell, aus diesem Desktop-Bild ein mobiles Layout abzuleiten, und verstecke wesentliche Projektinformationen nicht hinter Hover. Betrachte die Seite aus Sicht eines potenziellen Kunden: Ist die Spezialisierung des Studios erkennbar, lässt sich feststellen, wer die Arbeit ausgeführt hat, und kann eine Case Study ohne Hover geöffnet werden? Teste einen langen Projekttitel, ein Bild im Hochformat und ein Projekt mit mehreren Mitwirkenden. Navigiere anschließend per Tastatur und auf einem schmalen Bildschirm. Wenn das erste Ergebnis wie eine generische Agenturseite wirkt, überarbeite die Projekthierarchie und Bildunterschriften, bevor du Effekte oder weitere Bereiche hinzufügst.
Aus dem Prompt
Sorge dafür, dass jedes Projektziel per Tastatur erreichbar ist, und zeige alle Credits ohne Hover an.
An dein Projekt anpassen
Lass jeden Projekttitel und jeden Link „View case study“ auf dieselbe freigegebene URL verweisen. Sorge für einen sichtbaren Tastaturfokus und halte Mitwirkendenangaben jederzeit sichtbar. Ordne auf schmalen Bildschirmen die Einleitung, die drei Projekte und den Kontakt in dieser Reihenfolge untereinander an. Erlaube den Umbruch langer Namen. Fehlt eine Case-Study-URL, zeige die Projektinformationen ohne funktionslosen Link an und melde die fehlende Eingabe.
Stelle die Projektanforderungen zusammen und überarbeite dann jeweils nur eine Entscheidung
Beginne mit der Aufgabe und der Zielgruppe, ergänze die tatsächlichen Projektdaten, beschreibe die visuelle Hierarchie und lege anschließend Navigation und Mobilverhalten fest. Füge das Referenzbild zusammen mit dem Text bei. Die drei obigen Abschnitte „Mach es zu deinem Projekt“ ersetzen die entsprechenden Teile des vollständigen Prompts; sie sind keine zusätzlichen Anweisungen, die du unbesehen anhängen sollst. Ersetze insbesondere die Anweisung zum asymmetrischen Raster, wenn du dich für die Interpretation mit gleich breiten Spalten entscheidest.
- Vergleiche das erste Ergebnis mit der Referenz: Die Betonung der Überschrift, die Bildreihenfolge, die Ausrichtung der Bildunterschriften und die Hintergrundfarbe sollten bewusst gewählt sein.
- Ersetze die Beispielinhalte durch deinen längsten tatsächlichen Projekttitel und vollständige Credits. Prüfe, dass auf einem schmalen Bildschirm nichts verschwindet oder sich überlappt.
- Öffne jedes Projektziel und navigiere mit der Tastatur. Ein ähnlich aussehender Screenshot beweist nicht, dass diese Interaktionen funktionieren.
Anschluss-Prompt
Verwende dies nach dem ersten Ergebnis. Dadurch wird die Überarbeitung auf den wichtigsten Teil dieser Aufgabe eingegrenzt.
Verfeinere ausschließlich das Arbeitsraster des Portfolios. Gib dem Leitprojekt eindeutig die erste Position und zeige anschließend die beiden ergänzenden Projekte. Zeige Titel, Disziplin, Jahr und Mitwirkenden-Credits jedes Projekts ohne Hover an. Bewahre die Bildproportionen und mache jeden Link zur Fallstudie per Tastatur zugänglich. Verwende auf Mobilgeräten dieselbe Lesereihenfolge in einer Spalte. Lass die freigegebene Kopfzeile, Typografie und Kontaktsektion unverändert.
