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 einen editierbaren, Mobile-First-App-Prototyp für [PROJECT] und [AUDIENCE]. Die Aufgabe lautet: Notizen zu Fotolocations.
Erforderliche Inhalte und Struktur
Speichere einen Ort mit Zugangshinweisen und Referenzfotos, erstelle einen Aufnahmeplan und dokumentiere das Datum, an dem die Informationen überprüft wurden.
Ansichten und Navigation
Erstelle drei miteinander verbundene Ansichten: Gespeicherte Orte; Location-Notiz; Shootingplan. Der ausgewählte Datensatz muss im Bildschirmtitel oder in der Zusammenfassung sichtbar bleiben. Unterstütze eine eindeutige Zurück-Aktion und erhalte unvollständige Eingaben beim Wechsel zwischen den Ansichten. Platziere die primäre Aktion nahe bei den relevanten Inhalten und berücksichtige mobile Sicherheitsbereiche, eine sichtbare Bildschirmtastatur und lange übersetzte Beschriftungen. Passe die Komposition bei Desktop-Breiten an, ohne einen Schritt zu entfernen oder die Aufgabe zu verändern.
Projektvorgaben
Verwende [APPROVED_CONTENT] für Namen, Datensätze, Beschriftungen, Mengen und Ziele. Frage nach fehlenden Daten, anstatt operative Angaben zu erfinden. Demonstrationsdatensätze dürfen die fiktive Marke Scout verwenden; kennzeichne sie als Beispieldaten. Erkläre, welche Aktionen lokale Interaktionen des Prototyps sind und welche Authentifizierung, dauerhafte Speicherung, Berechtigungen oder ein Backend erfordern würden. Verbinde keine externen Dienste und behaupte nicht, eine Transaktion sei abgeschlossen worden, sofern diese Integration nicht ausdrücklich implementiert und getestet wurde.
Designausrichtung
Befolge [BRAND_RULES]. Wenn keine Marke vorgegeben ist, verwende Anthrazit, Silber, gedecktes Bernstein und Landschaftsfotografie. Mache den Arbeitsablauf durch eigene Inhalte und Bedienelemente erkennbar, anstatt generische Dashboard-Karten zu wiederholen. Verwende ein einheitliches Abstandssystem und eine klare Texthierarchie. Sorge für einen sichtbaren Tastaturfokus, barrierefreie Namen, ausreichenden Kontrast und Statusbeschriftungen, die nicht nur auf Farbe beruhen. Beachte reduzierte Bewegung und halte animierte Übergänge optional.
Aufgabenspezifische Abnahmeprüfung
- Behandle private Location-Notizen vertraulich und stelle veraltete Zugangsinformationen nicht als aktuelle Zutrittsberechtigung dar.
Interaktionszustände
Implementiere den erfolgreichen Ablauf über drei Bildschirme mit lokalen Beispieldaten. Füge einen hilfreichen Leerzustand, eine Validierung vor Abschluss einer Aktion, einen Lade- oder Ausstehend-Status und einen behebbaren Fehlerzustand hinzu. Destruktive Änderungen erfordern eine Prüfung oder eine Möglichkeit zum Rückgängigmachen. Halte den Zustand eines Datensatzes in allen drei Ansichten konsistent. Verwirf teilweise ausgefüllte Eingaben nicht unbemerkt und ändere die Auswahl einer Person nach einem erneuten Versuch nicht.
Übergabe und Prüfung
Gib die bearbeitbaren App-Ansichten zurück und erläutere das Datenmodell, das Verhalten des lokalen Speichers sowie nicht implementierte Integrationen. Teste bei 320px und in einem breiteren Viewport, mit Tastaturnavigation und langen Inhalten. Prüfe das Ergebnis anhand der oben genannten aufgabenspezifischen Abnahmekriterien, bevor du Funktionen hinzufügst. Hebe das Demonstrationsverhalten klar von einem laufenden Produktivdienst ab.
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 Notizen zu Fotolocations. Ermittle vor der Umsetzung von oben nach unten die wichtigsten Bereiche, ihre relativen Breiten und Höhen, Ausrichtung, Abstände, typografische Hierarchie, Flächenfarben, Rahmen, Bilder und wiederkehrenden Komponenten. Bewahre diese Beziehungen, anstatt sie durch eine generische Vorlage zu ersetzen. Erforderlicher Aufgabeninhalt: Speichere eine Location mit Zugangshinweisen und Referenzfotos, stelle einen Shootingplan zusammen und erfasse das Datum, an dem die Informationen geprüft wurden. Nutze beim Übertragen des Bildes in editierbare Elemente die folgenden aufgabenspezifischen Layout-Vorgaben: Beginne mit „Gespeicherte Orte“ als Einstiegsansicht, gib der „Location-Notiz“ eine klare primäre Aktion und lasse den „Shootingplan“ erklären, was geschehen ist und was als Nächstes geschehen kann. Verwende Anthrazit, Silber, gedecktes Bernstein und Landschaftsfotografie als Ausgangsrichtung und passe sie an die vorgegebene Marke an. Halte die Identität des Datensatzes und den Navigationskontext auf allen drei Bildschirmen sichtbar. Gib mit dem Daumen gut erreichbaren Bedienelementen und gut lesbaren Beschriftungen Vorrang vor dekorativen Panels; halte den Arbeitsablauf auf breiteren Bildschirmen schlüssig, anstatt eine mobile Komposition über die gesamte Breite zu strecken.
Visuelle Ausrichtung aus den beispielhaften Projektanforderungen
Anthrazit, Silber, gedecktes Bernstein, Landschaftsfotografie.
Interaktionsspezifikation
Die Referenz ist ein statisches Konzept: Das nachfolgend beschriebene Verhalten ist eine zu implementierende Anforderung und kein Beleg dafür, dass das Bild bereits funktioniert. Kopiere den angepassten Prompt in dein Projekt und erstelle den verbundenen Ablauf: Speichere eine Location mit Zugangshinweisen und Referenzfotos, stelle einen Shootingplan zusammen und erfasse das Datum, an dem die Informationen geprüft wurden. Behandle private Location-Notizen vertraulich und stelle veraltete Zugangsinformationen nicht als aktuelle Zutrittsberechtigung dar. Lege für jedes sichtbare Bedienelement den Auslöser, den betroffenen Zustand und das Feedback fest; implementiere lokale Änderungen mit einem konsistenten Zustand über zusammengehörige Ansichten hinweg. Sorge dafür, dass Suche und Filter echte Ergebnisse liefern, Auswahlsteuerelemente einen eindeutigen aktiven Zustand haben und Speicheraktionen gegebenenfalls sichtbares Feedback für ausstehende, erfolgreiche und fehlgeschlagene Vorgänge anzeigen. Füge keine sachfremden Arbeitsabläufe hinzu. Verwende korrekte Links für die Navigation, Schaltflächen für Aktionen und barrierefreie Namen 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 schreibst du einen Design-Prompt für Notizen zu Fotolocations
Verwende diesen Design-Prompt für Notizen zu Fotolocations, um eine Location mit Zugangshinweisen und Referenzfotos zu speichern, einen Shootingplan zusammenzustellen und das Datum zu erfassen, an dem die Informationen geprüft wurden.
Die Referenz ist ein KI-generiertes Konzept. Die folgenden Anweisungen beschreiben, was erstellt und getestet werden soll; das Bild belegt kein funktionsfähiges Verhalten.
Quelle und Alter der Zugangshinweise bewahren
Eine App für Fotolocations hilft bei der Planung eines Shootings anhand von Informationen, die veralten können.
Private Notizen und datierte Zugangsbeobachtungen dürfen nicht wie eine öffentliche Zutrittsberechtigung wirken. Beginne mit „Gespeicherte Orte“ als Einstiegsansicht, gib der „Location-Notiz“ eine klare primäre Aktion und lasse den „Shootingplan“ erklären, was geschehen ist und was als Nächstes geschehen kann. Verwende Anthrazit, Silber, gedecktes Bernstein und Landschaftsfotografie als Ausgangsrichtung und passe sie an die vorgegebene Marke an. Halte die Identität des Datensatzes und den Navigationskontext auf allen drei Bildschirmen sichtbar. Gib mit dem Daumen gut erreichbaren Bedienelementen und gut lesbaren Beschriftungen Vorrang vor dekorativen Panels; halte den Arbeitsablauf auf breiteren Bildschirmen schlüssig, anstatt eine mobile Komposition über die gesamte Breite zu strecken.
Aus dem Prompt
Erstelle drei miteinander verbundene Ansichten: Gespeicherte Orte; Location-Notiz; Shootingplan.
An dein Projekt anpassen
Speichere [LOCATION] mit Referenzfotos, privaten Zugangshinweisen und einem Prüfdatum. Stelle einen Shootingplan zusammen und sorge dafür, dass Sichtbarkeit und Alter jeder Notiz erkennbar bleiben.
Inhalte für die Notizen zu Fotolocations vorbereiten
Ein Foto des Ortes leitet zu Notizen und einem Zugangshinweis über; unterscheide eine gespeicherte Beobachtung von der aktuellen Zutrittsberechtigung.
Stelle fiktive Location-Datensätze, Referenzfotos, private Zugangshinweise und Daten der letzten Prüfung bereit. Wähle die Felder aus, die in einen Shootingplan aufgenommen werden, und lege fest, welche Notizen beim Teilen eines Plans privat bleiben müssen.
Aus dem Prompt
Speichere einen Ort mit Zugangshinweisen und Referenzfotos, erstelle einen Aufnahmeplan und dokumentiere das Datum, an dem die Informationen überprüft wurden.
An dein Projekt anpassen
Verwende für [PROJECT] [APPROVED_CONTENT] als Quelle für diese Notizen zu Fotolocations. Dazu gehören freigegebene Datensätze und Feldbeschriftungen für „Gespeicherte Orte“, „Location-Notiz“ und „Shootingplan“, die Regeln für Aktionen und dauerhafte Speicherung sowie Markenmaterialien und Berechtigungsanforderungen. Ermittle fehlende Eingaben, bevor du sie durch Demonstrationsinhalte ersetzt.
Eine alte Location erneut verwenden
Der Shootingplan trennt die prognostizierten Bedingungen von den geplanten Aufnahmen; fordere Zeitstempel und eine Möglichkeit zur erneuten Prüfung veränderlicher Bedingungen.
Der Plan muss das Datum der letzten Prüfung und jede Unsicherheit bezüglich des Zugangs beibehalten. Das Speichern einer Location darf weder private Notizen veröffentlichen noch eine aktuelle Zutrittsberechtigung suggerieren. Teste zuerst diesen konkreten Grenzfall: Behandle private Location-Notizen vertraulich und stelle veraltete Zugangsinformationen nicht als aktuelle Zutrittsberechtigung dar. Führe anschließend den Hauptablauf mit einem langen Datensatztitel, ohne gespeicherte Datensätze und mit einer fehlgeschlagenen Aktion aus. Nutzende müssen ohne Rückgriff auf Farben erkennen können, was gespeichert ist, was aussteht und was rückgängig gemacht werden kann. Prüfe, ob eingegebene Daten bei der Rückkehr zum vorherigen Bildschirm erhalten bleiben und ob ein Screenreader Titel, Status und primäre Aktion in einer sinnvollen Reihenfolge erfasst.
Aus dem Prompt
Behandle private Ortsnotizen vertraulich und stelle veraltete Zugangsinformationen nicht als aktuelle Zutrittserlaubnis dar.
An dein Projekt anpassen
Prüfe die Notizen zu Fotolocations anhand dieser Anforderung: Behandle private Location-Notizen vertraulich und stelle veraltete Zugangsinformationen nicht als aktuelle Zutrittsberechtigung dar. Teste zuerst diesen konkreten Grenzfall: Behandle private Location-Notizen vertraulich und stelle veraltete Zugangsinformationen nicht als aktuelle Zutrittsberechtigung dar. Führe anschließend den Hauptablauf mit einem langen Datensatztitel, ohne gespeicherte Datensätze und mit einer fehlgeschlagenen Aktion aus. Nutzende müssen ohne Rückgriff auf Farben erkennen können, was gespeichert ist, was aussteht und was rückgängig gemacht werden kann. Prüfe, ob eingegebene Daten bei der Rückkehr zum vorherigen Bildschirm erhalten bleiben und ob ein Screenreader Titel, Status und primäre Aktion in einer sinnvollen Reihenfolge erfasst. Bewahre die freigegebenen Inhalte und überarbeite nur die Teile, die diese Prüfung nicht bestehen.
Ergebnis deiner Notizen zu Fotolocations prüfen
Das Beispiel ist ein KI-generiertes visuelles Konzept. Verbundene Dienste, Geräteberechtigungen und persistente Daten erfordern eine separate Implementierung und Prüfung.
- Behandle private Ortsnotizen vertraulich und stelle veraltete Zugangsinformationen nicht als aktuelle Zutrittserlaubnis dar.
Anschluss-Prompt
Verwende dies nach dem ersten Ergebnis. Dadurch wird die Überarbeitung auf den wichtigsten Teil dieser Aufgabe eingegrenzt.
Überarbeite nur den Übergang von der Ortsnotiz zum Aufnahmeplan. Behandle private Ortsnotizen vertraulich und stelle veraltete Zugangsinformationen nicht als aktuelle Zutrittserlaubnis dar. Zeige die relevanten ausstehenden, fehlgeschlagenen und abgeschlossenen Zustände mit eindeutigen Bezeichnungen. Bewahre die freigegebene Navigation, Typografie und die übrigen Ansichten. Gib die geänderten Ansichten zurück und beschreibe, wie eingegebene Daten einen erneuten Versuch überstehen.
