Design-Prompt verwenden
Projektanforderungen hinzufügen
Füge unten deinen Kontext hinzu. Er wird beim Kopieren oder Herunterladen in den Design-Prompt aufgenommen.
Erstelle für [PROJECT] und [AUDIENCE] eine responsive HTML-Website mit dem vorhandenen Projekt-Stack. Die Aufgabe lautet: Design-Stadtführer.
Erforderliche Inhalte und Struktur
Ordne ausgewählte Orte nach Stadtteil, Designdisziplin und Besuchsinformationen und verwende eine redaktionelle Kartenlegende.
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 für das Projekt ausgewählte Designsystem. Falls kein System vorgegeben ist, beginne mit dieser Ausrichtung: Papierweiß, tiefes Marineblau und dezente hellblaue Flächen; präzises Raster und großzügige Typografie. Halte die Rollen von Schrift, Abständen und Farben konsistent. Priorisiere die Aufgabe gegenüber dekorativen Elementen und vermeide eine generische Sammlung unzusammenhängender Karten.
Inhaltsvorbereitung
Erstelle eine kuratierte Liste von Orten mit Stadtteil, Adresse, Designdisziplin, Besuchshinweisen und Quelldatum. Entscheide, ob die Karte geografisch oder als redaktioneller Index angelegt ist.
Layout und Verhalten
Gruppiere nahe beieinanderliegende oder thematisch verwandte Orte und ordne die praktischen Angaben jeweils direkt dem zugehörigen Eintrag zu. Nutze eine Kartenlegende, die die Gruppierung erklärt, statt dich allein auf Farben zu verlassen.
Aufgabenspezifische Abnahmeprüfung
- Verwende bereitgestellte Adressen und Datumsangaben, statt einen aktuellen Öffnungsstatus zu erfinden.
- Prüfe lange Adressen und einen Ort mit unklaren Öffnungszeiten.
- Kennzeichne einen Ort nicht anhand einer alten Quelle als derzeit geöffnet; ermögliche Besuchern, die aktuellen Besuchsbedingungen selbst zu überprüfen.
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 den Design-Stadtführer. 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. Erforderlicher Aufgabeninhalt: Ordne ausgewählte Orte nach Stadtteil, Designdisziplin und Besuchsinformationen und verwende eine redaktionelle Kartenlegende. Nutze bei der Übertragung des Bildes in bearbeitbare Elemente die folgende aufgabenspezifische Layoutanleitung: Gruppiere nahe beieinanderliegende oder thematisch verwandte Orte und ordne die praktischen Angaben jeweils direkt dem zugehörigen Eintrag zu. Nutze eine Kartenlegende, die die Gruppierung erklärt, statt dich allein auf Farben zu verlassen.
Visuelle Ausrichtung aus den beispielhaften Projektanforderungen
Papierweiß, tiefes Marineblau und dezente hellblaue Flächen; präzises Raster und großzügige Typografie.
Interaktionsspezifikation
Die Referenz ist ein statisches Konzept: Das nachfolgend beschriebene Verhalten ist eine umzusetzende Anforderung und kein Beleg dafür, dass das Bild bereits funktioniert. Kopiere den angepassten Prompt in dein Arbeitsprojekt. Beginne mit der Kernaufgabe: Ordne ausgewählte Orte nach Stadtteil, Designdisziplin und Besuchsinformationen und verwende eine redaktionelle Kartenlegende. Verwende bereitgestellte Adressen und Datumsangaben, statt einen aktuellen Öffnungsstatus zu erfinden. Lege für jedes sichtbare Steuerelement Auslöser, betroffenen Zustand und Rückmeldung fest; implementiere lokale Änderungen mit einem konsistenten Zustand in allen zugehörigen Ansichten. 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 anzeigen. Füge keine sachfremden Arbeitsabläufe hinzu. Verwende korrekte Links zur Navigation, Schaltflächen für Aktionen und barrierefreie Bezeichnungen für Symbolsteuerelemente. Suggeriere nicht, 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 schreibst du einen Design-Prompt für einen Design-Stadtführer
Nutze diesen Design-Prompt für einen Stadt-Design-Guide, um ausgewählte Orte nach Stadtteil, Fachbereich und Besuchsinformationen mit einer redaktionellen Kartenlegende zu strukturieren.
Die Referenz ist ein KI-generiertes Konzept. Die folgenden Anweisungen beschreiben, was erstellt und getestet werden soll; das Bild belegt kein funktionsfähiges Verhalten.
Redaktionelle Auswahl von Besuchsinformationen trennen
Ein Design-Stadtführer kann einen Ort empfehlen, ohne dessen aktuellen Öffnungsstatus zu kennen.
Stadtteil, Fachbereich und Besuchsdetails müssen ihr Quelldatum beibehalten, damit der Guide kein tagesaktuelles Vor-Ort-Wissen vortäuscht. Gruppiere nahegelegene oder thematisch verwandte Orte und halte praktische Details direkt am Eintrag. Verwende eine Kartenlegende, die die Gruppierung erklärt, anstatt dich allein auf Farben zu verlassen.
Aus dem Prompt
Gruppiere nahegelegene oder thematisch verwandte Orte und platziere praktische Details direkt beim jeweiligen Eintrag.
An dein Projekt anpassen
Gruppiere [SELECTED_PLACES] nach Stadtteil und Fachbereich. Zeige die angegebenen Adressen, eine Kartenlegende und [LAST_CHECKED_DATE] an, ergänzt durch einen Quelllink für veränderliche Besuchsinformationen.
Inhalte für den Design-Stadtführer vorbereiten
Die Karte wird durch nummerierte Stadtteile und eine Kategorielegende ergänzt. Stelle echte Koordinaten und Kategoriezuordnungen bereit, bevor du Kartenmarkierungen mit Orten verknüpfst.
Erstelle eine kuratierte Liste von Orten mit Stadtteil, Adresse, Designdisziplin, Besuchshinweisen und Quelldatum. Entscheide, ob die Karte geografisch oder als redaktioneller Index angelegt ist.
Aus dem Prompt
Ordne ausgewählte Orte nach Stadtteil, Designdisziplin und Besuchsinformationen und verwende eine redaktionelle Kartenlegende.
An dein Projekt anpassen
Nutze für [PROJECT] [APPROVED_CONTENT] als Quelle für diesen Stadt-Design-Guide. Erstelle eine kuratierte Liste von Orten mit Stadtteil, Adresse, Design-Fachbereich, Besuchshinweisen und Quelldatum. Entscheide, ob die Karte geografisch oder als redaktioneller Index aufgebaut ist. Bestimme fehlende Eingaben, bevor du sie durch Demo-Inhalte ersetzt.
Einen Besuch anhand eines Eintrags planen
Die unteren Karten kombinieren ein Foto, einen Fachbereich, eine Adresse und Datumsangaben. Prüfe, ob Filterung und Kartenauswahl auf dieselben Ortsdatensätze verweisen, und sorge dafür, dass die Besuchsinformationen gut lesbar bleiben.
Prüfe, ob Lesende den Standort erkennen und aktuelle Öffnungszeiten verifizieren können. Verwandle eine ältere redaktionelle Beschreibung nicht in die Behauptung, ein Ort sei heute geöffnet. Überprüfe lange Adressen und Orte mit unklaren Öffnungszeiten. Kennzeichne einen Ort anhand alter Quellen nicht als aktuell geöffnet; überlasse die Prüfung der aktuellen Besuchsbedingungen den Besuchenden.
Aus dem Prompt
Verwende bereitgestellte Adressen und Datumsangaben, statt einen aktuellen Öffnungsstatus zu erfinden.
An dein Projekt anpassen
Prüfe den Stadt-Design-Guide anhand dieser Anforderung: Verwende bereitgestellte Adressen und Daten, anstatt den aktuellen Öffnungsstatus zu erfinden. Überprüfe lange Adressen und Orte mit unklaren Öffnungszeiten. Kennzeichne einen Ort anhand alter Quellen nicht als aktuell geöffnet; überlasse die Prüfung der aktuellen Besuchsbedingungen den Besuchenden. Behalte freigegebene Inhalte bei und überarbeite nur die Abschnitte, die diese Prüfung nicht bestehen.
Ergebnis deines Design-Stadtführers 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 Adressen und einen Ort mit unklaren Öffnungszeiten. Kennzeichne einen Ort nicht anhand einer alten Quelle als derzeit geöffnet; ermögliche Besuchern, die aktuellen Besuchsbedingungen selbst zu überprüfen.
Anschluss-Prompt
Verwende dies nach dem ersten Ergebnis. Dadurch wird die Überarbeitung auf den wichtigsten Teil dieser Aufgabe eingegrenzt.
Optimiere den aktuellen Design-Stadtführer. Prüfe lange Adressen und einen Ort mit unklaren Öffnungszeiten. Kennzeichne einen Ort nicht anhand einer alten Quelle als derzeit geöffnet; ermögliche Besuchern, die aktuellen Besuchsbedingungen selbst zu überprüfen. Bewahre die freigegebenen Inhalte und die visuelle Ausrichtung; ändere nur die Teile, die zur Behebung dieser Probleme erforderlich sind.
