KI-Entwicklung
Vibe Coding: von der Idee zum ersten Screen
Ein praktischer Workflow, um eine Idee über Ziel, Flow, Content, Zustände und Review in den ersten App-Screen zu verwandeln.
Der erste Screen sollte keine Sammlung dekorativer Komponenten sein. Er soll einer konkreten Person helfen zu verstehen, was sie tun kann, das Nötige beizutragen und im Hauptflow voranzukommen. KI kann ein Brief in einen Mockup oder eine erste Oberfläche verwandeln; die Produktführung bleibt menschlich.
Schritt-für-Schritt-Workflow
- Definieren Sie Nutzer, Problem, Hauptaufgabe, gewünschte Aktion und Erfolgssignal.
- Wählen Sie einen Screen und einen Flow, bevor Sie Komponenten verlangen.
- Listen Sie echten oder repräsentativen Content, Prioritäten, Marken- und Accessibility-Constraints.
- Spezifizieren Sie Lade-, Leer-, Fehler-, Erfolgs- und Permission-Zustände.
- Bitten Sie um klare Hierarchie, nicht nur um visuellen Style.
- Prüfen Sie Sprache, Kontrast, Fokus, Mobile, Navigation und Hauptaktion.
- Testen Sie den Screen mit Nutzern oder einem echten Walkthrough und passen Sie mit Evidenz an.
Prompt-Vorlage
Designe den ersten Screen für [Produkt]. Der Nutzer ist [Nutzer], will [Aufgabe] und das Erfolgsergebnis ist [Ergebnis]. Nimm prioritären Content, Hauptaktion, nötige Navigation, Leer-/Lade-/Fehler-/Erfolgszustände, Accessibility-Anforderungen und Markenconstraints auf. Erkläre die Hierarchie und füge keine Features außerhalb des definierten Flows hinzu.
Checkliste
- Ist klar, wer der Nutzer ist und was er tun kann?
- Ist die Hauptaktion sichtbar und hat Kontext?
- Gibt es leere, Lade- und Fehlerzustände?
- Wurden Mobile und grundlegende Accessibility geprüft?
Häufige Fehler
- Designen, bevor der Flow definiert ist
- Den Screen mit Nebenfeatures füllen
- Platzhaltertext nutzen, der echte Probleme verdeckt
- Fehlerzustände und leere Daten weglassen