Professionelle Prototypen in 3 Schritten für Anfänger! Schritt-für-Schritt-Anleitung mit Cursor+Claude3.7 (inkl. Vorlage)
Lernen Sie, wie Sie mit Cursor und Claude3.7 in nur 3 Schritten professionelle UI-Prototypen erstellen können. Die detaillierte Anleitung inklusive Vorlage eignet sich perfekt für Einsteiger, um KI-gestütztes Design schnell zu meistern und die Frontend-Entwicklungseffizienz zu steigern.
Professionelle Prototypen in 3 Schritten für Anfänger! Schritt-für-Schritt-Anleitung mit Cursor+Claude3.7 (inkl. Vorlage)
Autor: Liang Bo Eric
Original-Link: Original-Link
Als Full-Stack-Entwickler mit Hintergrund im Backend hatte ich früher Defizite im UI-Prototyping. Doch seit der Veröffentlichung von Claude 3.7 hat sich die Frontend-Entwicklungsfähigkeit und Ästhetik im Vergleich zu Claude 3.5 deutlich verbessert. Jetzt kann ich direkt mit Claude 3.7 und Cursor komplette UI-Designs generieren.
Falls Sie den Unterschied zwischen Claude 3.7 Sonnet und Claude 3.5 Sonnet in der Frontend-Programmierung verstehen möchten, können Sie direkt den GitHub-Quellcode und das Tutorial einsehen:
https://github.com/flyeric0212/claude-3.5-vs-3.7-code-comparison
Mit den richtigen Prompts lässt sich ein kompletter UX-Prototyp erstellen, wie unten gezeigt:
Der Prozess ist extrem einfach und in nur drei Schritten erledigt. Wer Cursor nutzt, kann direkt loslegen:
- Bereiten Sie die entsprechenden Prompts vor (können direkt aus diesem Beispiel übernommen und angepasst werden).
- Verwenden Sie den Ask-Modus (in Version 0.46 und älter Chat-Modus) mit dem Claude 3.7 Sonnet-Modell.
- Bei zu langem Code-Kontext müssen mehrere Generierungsschritte durchgeführt und der Code in einer HTML-Datei zusammengeführt werden.
Detaillierte Schritte:
Schritt 1: Prompts vorbereiten
"Sie sind ein Full-Stack-Entwickler mit Expertise in UI-Design und Produktplanung und 20 Jahren UX-Design-Erfahrung. Ihre Aufgabe ist es, einem Schüler bei der Entwicklung einer 'Pilates Fitness'-iOS-App zu helfen.
Ziel ist die Erstellung eines kompletten App-Prototyps für die weitere Entwicklung. Folgen Sie diesen Prinzipien:
- Simulieren Sie reale Nutzungsszenarien und Anforderungen einer Pilates-App.
- Planen Sie aus Produktmanager-Perspektive Funktionen, Seiten und Interaktionen.
- Erstellen Sie aus Designer-Perspektive ein vollständiges UI/UX-Design.
- Verwenden Sie TailwindCSS für das Styling und Unsplash für Bilder.
- Alle Seiten sollen in einer HTML-Datei dargestellt werden."
Schritt 2: Cursor + Claude 3.7 Sonnet im Ask-Modus verwenden
Bei direkter Nutzung des Edit-Modus kann es aufgrund des langen Code-Kontexts zu Unterbrechungen kommen. Daher besser den Ask-Modus verwenden.
Nach dem Wechsel in den Ask-Modus einfach weiterfragen.
Schritt 3: Nach Unterbrechungen mit "Weiter" fortfahren und HTML-Code zusammenführen
Nach einigen Unterbrechungen und mehreren "Weiter"-Prompts werden mehrere HTML-Codeblöcke generiert. Diese müssen nur noch in einer HTML-Datei zusammengeführt werden.
Der gesamte Prozess der Prototypenerstellung ist extrem einfach und das Ergebnis ästhetisch ansprechend.
Claude 3.7 ergänzt sogar fehlende Funktionsbeschreibungen in den Prompts eigenständig. Mit zusätzlichen Regeln in den Prompts lassen sich auch komplexere Projektanforderungen besser erfüllen.
Für Solo-Entwickler ist dies ein großer Vorteil, da es die Effizienz steigert und Wissenslücken zwischen verschiedenen Skills überbrückt.