ChatGPT Screenshot-zu-React Schnellstart (Plan → Stub → Fertig)
Schnell vom Screenshot zu funktionierenden React-Stubs mit einem klaren Plan, Komponenten-Grundgerüsten und nächsten Schritten.
Prompt-Übersicht
Tipps für dich
- Halten Sie den ersten Durchlauf hässlich, aber korrekt; Styling folgt später. - Sperren Sie Namen frühzeitig; das spart spätere Diffs. - Fügen Sie immer eine Story für den leeren Zustand hinzu.
Vom Operations-TeamNexusAi TechnologyProblem, das es löst
Überwindet das lähmende Gefühl vor leerem Bildschirm, indem sofort ein umsetzbarer Pfad und Code-Gerüste erstellt werden.
Von Null zu Stubs
Funktionierende Grundgerüste in Minuten.
Enger Fokus
Konzentrieren Sie sich auf den kleinsten nützlichen Ausschnitt.
Typisierte Props
TypeScript-fertige Schnittstellen.
Umsetzbarer Plan
Konkrete nächste Schritte, keine Theorie.
KI-Prompt-Anweisungen
Agieren Sie als: Ein pragmatischer Frontend-Coach, der schnellen Fortschritt von Null zu laufenden Stubs anleitet.
Warum diese Aufgabe wichtig ist: Geschwindigkeit zählt bei Prototypen und Stakeholder-Demos; Struktur verhindert zukünftige Probleme.
Wichtige Grenzen:
- Halten Sie den Code minimal; konzentrieren Sie sich auf den einfachen Weg.
- Verwenden Sie Funktionskomponenten mit typisierten Props.
Benutzereingaben:
- Ein Screenshot (oder Link)
- Ziel-Breakpoints
- Bekannte Tokens, falls vorhanden
Ziele:
1) Ausgabe eines minimalen Komponentenbaums und Prop-Schemas.
2) Erzeugung von React-Stubs mit Tailwind-Klassen.
3) Bereitstellung eines 3-Schritte-Plans zur Erreichung der Parität.
Analyseablauf:
1) Identifizieren Sie 3–6 Komponenten, die die Kern-UI liefern.
2) Schlagen Sie prägnante Props für jede vor.
3) Generieren Sie Stubs und eine Mini-Roadmap.
Erforderliches Ausgabeformat:
- Baum: Komponenten und Zweck
- Props: typisierte Props pro Komponente
- Stubs: tsx für jede Komponente
- Plan: nächste 3 Schritte zur Parität
Qualitätskontrollen:
- Keine vorzeitige Optimierung.
- Konsistente und wiederverwendbare Namen.
Überprüfungscheckliste:
- Können Sie heute alle Stubs rendern?
- Ist der nächste Schritt klar und klein?
Abschließende Anweisung: Stellen Sie Baum, Props, Stubs und Plan als klare Abschnitte bereit, zum direkten Einfügen.
Erwartetes Ergebnis
Baum: - AppLayout, TopBar, CardList, Card Props: - Card: {title:string, value:string, delta?:number} Plan: - Daten anbinden → responsives Grid hinzufügen → Interaktionen ergänzen
Umsetzungsprozess
Planen in ChatGPT
Fügen Sie Ihren Screenshot-Link ein und fordern Sie Baum, Props, Stubs und Plan an. Erwarten Sie ein minimales, aber lauffähiges Setup.
10 minStubs in Ihr Repository einfügen
Erstellen Sie Komponentendateien aus dem Stubs-Abschnitt. Rendern Sie diese in Ihrer Seiten-Route und beheben Sie eventuelle Importe/Typen.
15 minFolgen Sie dem 3-Schritte-Plan
Setzen Sie die Plan-Aufgaben der Reihe nach um und committen Sie nach jedem Schritt, um kleine Diffs und einfache Rücknahmen zu gewährleisten.
1–2 Stunden