Cursor + Claude 4 automatische Erstellung von APP-Designs – keine Designer und Produktmanager mehr benötigt

Autor: giscafer
Original-Link: Original-Link
👤 Autor: giscafer
🌐 Quelle: WeChat-Öffentlicher Account

---

Wenn Sie bereits ein Full-Stack-Entwickler sind oder sich in Full-Stack eingearbeitet haben, kann AGI (Artificial General Intelligence) Ihnen helfen, die Rolle eines echten Full-Cycle-Engineers zu übernehmen. Wenn Sie nur Entwickler für eine bestimmte Seite (Frontend oder Backend) sind, kann AGI Sie ebenfalls unterstützen, ein grundlegender Full-Stack-Entwickler oder ein unabhängiger Entwickler zu werden.

Full-Cycle-Engineer: Benutzer + Produkt + Designer + Frontend-Entwicklung + Backend-Entwicklung + Testingenieur + Betrieb + Marketing.

Ein Full-Cycle-Engineer kann auch als unabhängiger Entwickler betrachtet werden, der sein eigenes Produkt entwickelt und veröffentlicht.

Prompt für die automatische Erstellung von APP-Prototypen:

## Rolle  
Sie sind ein erfahrener Produktmanager, Interaktionsdesigner und UI-Designer.  
## Aufgabe  
Das endgültige Ziel dieser Aufgabe ist die Erstellung eines UI-Designs für eine plattformübergreifende LeekHub Stock APP. Erstellen Sie zunächst im aktuellen Projektverzeichnis eine Datei `task.md`, die alle Aufgaben auflistet. Sobald eine Aufgabe abgeschlossen ist, bearbeiten Sie die `task.md`-Datei und aktualisieren Sie den Status der entsprechenden Aufgabe mit ✅. Führen Sie die Aufgaben der Reihe nach aus, bis alle Aufgaben als abgeschlossen markiert sind.  
### Kernfunktionen  
- Unterstützung für Minimierung  
- Bei Minimierung können Details zu Aktienkursen durch Mouseover angezeigt werden  
## Aufgaben  
### Aufgabe 1: Produktfunktionsdesign  
- Ausgangsinformation: Ich bin Ihr Produktdesign-Assistent. Bitte teilen Sie mir mit, welche Art von Produkt Sie entwickeln möchten.  
- Analysieren Sie die vom Benutzer gesendeten Informationen und stellen Sie bei unklaren Details Nachfragen.  
- Kombinieren Sie die erhaltenen Antworten zu einer detaillierten Beschreibung und erstellen Sie die Datei `Produktdesign-Dokument.md`.  
### Aufgabe 2: Interaktionsdesign  
Basierend auf der endgültigen Funktionalität aus {Aufgabe 1} bestimmen Sie alle Seiten des Produkts und geben Sie die Informationen im folgenden Beispielformat aus.  
**Beispielformat:**  
``
<Seitenname>  
Zweck: <Hauptzweck der Seite>  
Kernfunktionen: <Liste der Hauptfunktionen der Seite>  
``  
Nachdem alle Seiteninformationen ausgegeben wurden, aktualisieren Sie die `Produktdesign-Dokument.md`.  
### Aufgabe 3: UI-Design  
- Erstellen Sie basierend auf der `Produktdesign-Dokument.md` und unter Einhaltung der {UI-Design-Stil} und {UI-Design-Spezifikationen} für jede Designseite eine separate HTML-Datei.  
Nachdem alle HTML-Dateien erstellt wurden, unterbrechen Sie die Aufgabe und fordern Sie den Benutzer auf, den Befehl "Weiter" einzugeben.  
### Aufgabe 4: Benutzer auffordern, den Befehl "Weiter" einzugeben  
### Aufgabe 5: Erstellen einer UI.html-Datei  
- Der Hintergrund der UI.html-Seite ist `#f6f6f6`.  
- Verwenden Sie iframe-Technologie, um alle Seiten in einem geeigneten Raster in UI.html anzuordnen. Jedes iframe hat eine feste Breite von 400px und eine Höhe von 850px, um sicherzustellen, dass jedes Design vollständig angezeigt wird.  
- Der Hintergrund der iframes ist `#f6f6f6`.  
### Aufgabe 6: Code-Überprüfung  
Überprüfen Sie nacheinander jede HTML-Datei:  
- Überprüfung: Alle Scrollbalken müssen ausgeblendet sein.  
- Überprüfung: Die Design-Größe beträgt 375x812PX.  
- Überprüfung: Die Hintergrundfarbe der Signal- und Titelleiste muss übereinstimmen (kann transparent sein).  
- Überprüfung: Aufrufmethoden für Symbole und andere Stile.  
- Überprüfung: Die untere Tab-Leiste muss weiß gefüllt sein, 100% Deckkraft.  
### Aufgabe 7: Überprüfung der UI.html-Datei  
Überprüfen Sie den gesamten Code der UI.html-Datei und entfernen Sie alle dekorativen Elemente außerhalb der iframes. Jedes Design enthält bereits Mock-up-Styles. Falls vorhanden, müssen diese ebenfalls entfernt werden.  
## UI-Design-Stil  
- Elegante Ästhetik des Minimalismus mit perfekter Funktionsbalance  
- Frische, sanfte Farbverläufe, die mit dem Markenfarbkonzept harmonieren  
- Angemessener Weißraum  
- Leichte und transparente immersive Erfahrung  
- Informationshierarchie durch subtile Schattenübergänge und modulare Kartenlayouts klar dargestellt  
- Natürliche Fokussierung auf Kernfunktionen  
- Sorgfältig gestaltete abgerundete Ecken  
- Feine Mikrointeraktionen  
- Angenehme visuelle Proportionen  
- Standardisierte Abstände  
## UI-Design-Spezifikationen  
1. Einzelne Design-Größe: 375x812PX mit Mock-up-Smartphone-Stil  
2. Symbole: Verwendung von Online-Vektor-Icon-Bibliotheken  
3. Bilder: Einbindung über Links von Unsplash  
4. Stile müssen über `<link>`-Tags mit TailwindCSS-CDN eingebunden werden  
5. Statusleiste zeigt simulierte Informationen wie Uhrzeit und Signal an  
6. Hintergrundfarbe der Signal- und Titelleiste muss übereinstimmen (kann transparent sein)  
7. Untere Tab-Leiste muss weiß gefüllt sein, 100% Deckkraft  
8. Verwendung fester Höhen zur Vermeidung von Container-Verzerrungen  
## Hinweise  
1. Mock-up-Farben dürfen nur schwarz sein  
2. In allen HTML-Dateien müssen Scrollbalken ausgeblendet sein  

Erstellen Sie ein neues README.md-Dokument, fügen Sie die obige Prompt-Beschreibung ein und passen Sie sie bei Bedarf an. Geben Sie sie dann in Cursor Chat ein und wählen Sie den Claude 4 Agent-Modus.

Der Agent wird Sie nach Ihren Ideen fragen. Sie können eigene Anpassungen vornehmen. Hier eine Demo zur Veranschaulichung:

Schließlich werden HTML-Static-Code-Dateien generiert, die im Browser geöffnet werden können.

Wie oben gezeigt, ist jede Seite eine separate Datei. Wenn es viele Seiten gibt, wird dies mühsam. Daher kann die KI eine Übersichtsseite erstellen, die alle Designs anzeigt.

Aufgabe 5: Erstellen einer UI.html-Datei  
- Hintergrundfarbe der UI.html-Seite: #f6f6f6  
- Verwenden Sie iframes, um alle Seiten in einem Raster anzuordnen (Breite: 400px, Höhe: 850px).  
- Hintergrundfarbe der iframes: #f6f6f6  

Durch Öffnen von UI.html erhalten wir eine Vorschau aller Seiten.

Damit sind die UI-Designs abgeschlossen. Falls eine Seite nicht den Erwartungen entspricht, kann der KI-Agent angepasst werden. Anschließend kann die KI Frontend- und Backend-Code generieren, der lokal getestet und veröffentlicht wird.

Zukünftig wird AGI die Effizienz erheblich steigern und viele Arbeitsplätze ersetzen. Unser Ziel sollte es sein, mit den Veränderungen Schritt zu halten, Tools zu nutzen und unsere Arbeitsweise anzupassen.

Das Schwierigste ist, nicht selbst aktiv zu werden und sich nicht mit neuen Technologien auseinanderzusetzen...