Bild-zu-Struktur Interpreter (Vision-unterstützt)
Beschreiben Sie eine fotografierte Skizze und erhalten Sie eine strukturierte UI-Karte mit Hierarchie und Erläuterungen.
Prompt-Übersicht
Tipps für dich
Bei Unsicherheiten Optionen mit Vor- und Nachteilen vorschlagen. | Beschreibungen strukturell halten, damit jedes Design-Tool sie nutzen kann. | Validierung früh definieren, um das Formularverhalten zu steuern. | Eine entscheidende KPI früh festlegen, um Scope-Sprawl zu vermeiden.
Vom Operations-TeamNexusAi TechnologyProblem, das es löst
Fotos von Skizzen sind oft unübersichtlich. Dieses Tool liefert eine saubere, textbasierte Struktur, die jeder zur Erstellung von Mockups nutzen kann.
Hierarchie zuerst
Fokus auf Struktur, die jedes Tool nutzen kann.
Unklarheitsoptionen
Bietet Wahlmöglichkeiten mit Vor- und Nachteilen für schnelle Entscheidungen.
Validierungshinweise
Frühe Formularregeln reduzieren spätere Fehler.
KPI-Anker
Hält das Layout auf ein Ergebnis ausgerichtet.
KI-Prompt-Anweisungen
Agieren Sie als: Ein vision-basierter UI-Analyst, der eine fotografierte Skizze in eine präzise, textbasierte UI-Struktur umwandelt.
Warum diese Aufgabe wichtig ist: Die Übersetzung grober Fotos in eine Struktur beschleunigt die Abstimmung und verhindert Missverständnisse.
Wichtige Grenzen:
- Wenn ein genaues Bild nicht verarbeitet werden kann, verlassen Sie sich auf detaillierte Nutzerbeschreibungen.
- Vermeiden Sie ästhetische Bewertungen; konzentrieren Sie sich auf Struktur und Absicht.
- Weisen Sie auf Unklarheiten hin und schlagen Sie 2–3 Interpretationen vor.
Benutzereingaben:
- Fotobeschreibung der Skizze (Bereiche, Textbeschriftungen, Pfeile).
- Hauptziel und wichtigste KPI.
- Zielgerät und Einschränkungen.
Ziele:
1) Abschnitte und Hierarchie extrahieren.
2) Komponenten und interaktive Elemente identifizieren.
3) Wahrscheinliche Datenfelder und Zustände skizzieren.
Analyseablauf:
1) Skizze neutral zusammenfassen.
2) In Abschnitte mit Zweck unterteilen.
3) Komponenten mit Zustandsanforderungen auflisten.
4) Unklarheiten markieren und Optionen vorschlagen.
Erforderliches Ausgabeformat:
- Zusammenfassung
- Abschnittskarte
- Komponentenliste mit Zuständen
- Unklarheiten & Optionen
- Nächste Schritte
Qualitätskontrollen:
- Eine Hauptaktion pro Bildschirm.
- Alle interaktiven Elemente haben fokussierbare Zustände.
- Datenfelder enthalten grundlegende Validierungshinweise.
Abschließende Anweisung: Geben Sie die Karte mit nummerierten Abschnitten und prägnanten Stichpunkten aus, bereit für Wireframing.
Erwartetes Ergebnis
Zusammenfassung: Einzelne Onboarding-Seite mit E-Mail-Formular, Feature-Liste und CTA. Abschnittskarte: 1) Kopfzeile: Logo, Anmeldelink 2) Hero-Bereich: Wertversprechen, E-Mail-Eingabe, primärer CTA 3) Vorteile: 3-spaltige Features Komponenten: - EmailInput: Standard/Fokus/Fehler; Regex-Validierung - CTA-Button: Standard/Laden/Deaktiviert Unklarheiten: - Platzierung des Links zu den Bedingungen; Option A: unter dem Formular, Option B: Fußzeile.
Umsetzungsprozess
Beschreiben Sie die Skizze in ChatGPT
Fügen Sie den Prompt ein und geben Sie eine detaillierte Beschreibung Ihres Skizzenfotos an, einschließlich Bereiche und Text. Sie erhalten eine strukturierte UI-Karte mit nummerierten Abschnitten.
7 minUnklarheitsoptionen in Gemini
Fügen Sie die Karte in Gemini ein und bitten Sie um 2–3 plausible Interpretationen pro Unklarheit mit Vor- und Nachteilen. Sie erhalten eine kurze Entscheidungsübersicht.
6 minStruktur festlegen
Kehren Sie mit den finalen Entscheidungen zu ChatGPT zurück und fordern Sie eine saubere, genehmigte Struktur an, die bereit für das Wireframing ist.
5 min