Screenshot-Layout-Analysator (Bild → DOM-Plan → Komponentenübersicht)
Konvertieren Sie jeden UI-Screenshot schnell in eine strukturierte Komponentenübersicht mit Abschnitten, Hierarchie und einem ersten DOM-Plan, bereit für die Codierung.
Prompt-Übersicht
Tipps für dich
- Halten Sie Namen über Sprints hinweg stabil, um unnötige Änderungen zu vermeiden. - Erfassen Sie wiederkehrende UI-Elemente frühzeitig als Variant-Prop. - Bestätigen Sie interaktive Elemente (Hover, Fokus, Klick) mit dem Designteam. - Beginnen Sie Storybook-Stubs nur mit den für den Screenshot notwendigen Props.
Vom Operations-TeamNexusAi TechnologyProblem, das es löst
Beschleunigt die schwierigste Anfangsphase: die visuelle Darstellung in eine kohärente Komponentenstruktur und Layoutplanung ohne Rätselraten zu übersetzen.
Hierarchie-Analyse
Wandelt visuelle Elemente in einen Komponentenbaum und Bereiche um.
Props-/State-Planung
Definiert klare Eingaben und Ereignisflächen.
Responsive Layout-Hinweise
Schlägt Grid-/Flex-Muster je nach Breakpoint vor.
Risikoübersicht
Markiert unklare Interaktionen zur frühzeitigen Bestätigung.
KI-Prompt-Anweisungen
Agieren Sie als: Ein erfahrener Frontend-Entwickler und UI-Systemarchitekt.
Warum diese Aufgabe wichtig ist: Der Start mit einem Screenshot führt oft zu ad-hoc Komponenten, inkonsistenten Benennungen und Nacharbeit. Eine klare Übersicht reduziert Unklarheiten und beschleunigt die Codierung.
Wichtige Rahmenbedingungen:
- Gehen Sie von React + Tailwind oder CSS Modules aus.
- Bevorzugen Sie semantische HTML-Tags und ARIA-Rollen, wo nötig.
- Erfinden Sie keine Produktfeatures, die über das im Screenshot Dargestellte hinausgehen.
Benutzereingaben:
- Screenshot-Link oder Beschreibung
- Markenrichtlinien (falls vorhanden): Abstandsmaßstab, Schriftfamilien, Primär-/Sekundärfarben
- Ziel-Breakpoints (z. B. sm, md, lg, xl)
Ziele:
1) Identifizieren Sie Layoutbereiche (Header, Navigation, Hauptbereich, Seitenleisten, Footer, Dialoge).
2) Schlagen Sie einen Komponentenbaum mit Namen, Zweck und Wiederverwendungspotenzial vor.
3) Skizzieren Sie Props/State, Datenabhängigkeiten und Ereignisflächen.
4) Empfehlen Sie Tailwind Utility-Gruppen oder CSS-Klassen für das Kernlayout.
Analyseablauf:
1) Analysieren Sie die visuelle Hierarchie: Grid- vs. Flex-Muster, Abstandsrhythmus, Typografie-Rollen.
2) Entwerfen Sie Komponentenbegrenzungen basierend auf Wiederholungen und Interaktions-Hotspots.
3) Definieren Sie Props für Variabilität (Text, Icons, Bilder, Größen, Varianten).
4) Beachten Sie Barrierefreiheitsanforderungen (Landmarks, Labels, Fokusreihenfolge).
Erforderliches Ausgabeformat:
- ComponentTree: Aufzählungsliste der Komponenten mit Verschachtelung
- ComponentSpecs: Für jede Komponente: Zweck, Props, State, ARIA/Rollen
- LayoutPlan: Grid/Flex-Strategie mit Abstands-, Padding- und Breakpoint-Hinweisen
- Risiken: Annahmen und Bereiche, die eine Bestätigung durch Stakeholder benötigen
Qualitätskontrollen:
- Namen sind konsistent und beschreibend (PascalCase für Komponenten).
- Vermeiden Sie tief verschachtelte Komponenten, wenn ein Slot-/Child-Pattern ausreicht.
Überprüfungs-Checkliste:
- Kann jede Komponente unabhängig in Storybook gerendert werden?
- Sind die Props minimal, aber vollständig für die Wiederverwendung?
Abschließende Anweisung: Erstellen Sie ComponentTree, ComponentSpecs, LayoutPlan und Risiken als separate, klar gekennzeichnete Abschnitte, bereit zur Übergabe an einen Entwickler.
Erwartetes Ergebnis
ComponentTree: - AppLayout - TopBar - SideNav - ContentArea - StatsCard (x3) - DataTable LayoutPlan: - Außen: grid-cols-[auto,1fr] mit gap-6 bei lg; SideNav unter md ausblenden. ComponentSpecs: - StatsCard Props: title, value, delta, icon, variant. Risks: - Aktionen in Tabellenzeilen unklar (Icons vs. Text).
Umsetzungsprozess
Erstellen Sie die Komponentenübersicht in ChatGPT
Öffnen Sie ChatGPT und fügen Sie Ihren Screenshot-Link sowie eventuelle Markenabstands- und Typografie-Richtlinien ein. Fordern Sie ComponentTree, ComponentSpecs, LayoutPlan und Risiken an. Sie erhalten eine strukturierte Hierarchie und einen ersten DOM-Plan, den Sie in ein Planungsdokument übernehmen können.
10 minErstellen Sie Storybook-Stubs
Erzeugen Sie in Ihrem Editor (z. B. VS Code) leere React-Komponenten basierend auf dem ComponentTree und fügen Sie grundlegende Storybook-Stories mit Props aus den ComponentSpecs hinzu. So verwandeln Sie den Plan in laufende Platzhalter, in die Sie Code einfügen können.
20 minBestätigen Sie Annahmen mit dem Team
Teilen Sie den Abschnitt Risiken und den Storybook-Link mit Ihrem PM/Designer. Erfassen Sie Entscheidungen (z. B. Variantennamen, Breakpoints) direkt in den Komponenten-Props, um die Schnittstelle vor der Codierung festzulegen.
15 min