Cursor Praxisprojekt-15: Schnelle Entwicklung eines Social-Media-Bildertools mit Cursor - Von der Idee bis zur Veröffentlichung (Teil 3) — Fotowand-Layout und Bildzusammenführung

Projektbeschreibung

Dieser Teil konzentriert sich auf eine häufige Anforderung: die Generierung von Fotowänden (d.h. Bildzusammenführung).

Ziel: Beibehalten der "minimal funktionsfähigen" ersten Version, Priorisierung des vollständigen Workflows, gefolgt von schrittweisen Verbesserungen der Benutzererfahrung und Leistung. Implementierung der Layoutgenerierung und Bildzusammenführung mit verschiedenen Vorlagen für schnelle Bearbeitung.

Während des Prozesses wurden mehrere Tools und Modelle verwendet, wobei viele Herausforderungen auftraten, wie die automatische Layoutgenerierung, Präzisionskontrolle bei der Zuschneidung und Zusammenführung. Cursor hatte dabei Schwierigkeiten, was zu vielen Zeitverlusten führte.

Zeitaufwand: ca. 20 Stunden

Cursor-Nutzung: ca. 80 Mal

Ergebnisse

Die Website ist online verfügbar: pixtoolkits.com

pixtoolkits.com

Vorbereitung

  • Cursor

  • Optional: Gemini CLI

    • Installation: npm install -g @gemini-cli/gemini
    • Nutzung: gemini --help

  • Gesamtprozess

    • Cursor-Regeln festlegen → Projektregeln (project-rules) festlegen → Anforderungen mit LLM besprechen → Coderstellung mit Cursor → Debugging und Ausgabe → Iterative schnelle Entwicklung

Erfahrungen

  1. Bei unklaren Stilbeschreibungen: "Referenzseiten + Screenshots + Regelerstellung durch das Modell" nutzen, um Klarheit zu schaffen.
  2. Funktionsentwicklung nach dem Prinzip "minimal notwendig" und "agile Entwicklung" – erst funktionsfähig machen, dann Benutzererfahrung verbessern.
  3. Vibe-Programmierung: Zuerst den Workflow abschließen, dann UI und Interaktion verfeinern.
  4. Internationalisierung von Anfang an in die Anforderungen aufnehmen, um spätere große Änderungen zu vermeiden.
  5. Bei unklaren Beschreibungen von Bildern oder Stilen Zeichnungen verwenden, z.B. mit excalidraw.

Detaillierte Projektschritte

1) Gemini CLI für Teilalgorithmen und Beispiele

  • Mit Gemini CLI Teilalgorithmen für die Fotowand-Layoutgenerierung und Bildzusammenführung erstellen. Beispiele generieren und anpassen, um die automatische Layoutgenerierung und Bildzusammenführung als Demo zu realisieren.
  • Validierungsprozess: Prototyp (Einzeldatei, Rasterteilung) → Verfeinerung und Robustheit (feines Raster, Mindestblockgröße) → Absolute Positionierung und iterative Ergänzung → Interaktion hinzufügen (Drag & Drop Resizer) → Modularisierung und Funktionsabschluss (v9: Upload/Export/Manuelle Zuschneidung/Download des zusammengeführten Bildes) → Finale Algorithmus- und Stilanpassungen (final/ultimate, Fluid-Design, Stilvarianten).
GeminiCLI validiert Algorithmus und implementiert Kernfunktionen in einer einzelnen Seite
  • Ergebnis: Grundfunktionen sind implementiert, automatische Layoutgenerierung, Export, Bildupload und Zusammenführung möglich. Ergebnis

2) Integration der gemini-validierten Einzelseite in die bestehende Website. Erstellung eines Menüs für die Bildzusammenführung.

  • Die Fotowand-Seite in das Cursor-Projekt integrieren und als eigenständige Seite einbinden.

Seitenintegration

3) Anpassung der rechten Seitenleiste mit excalidraw für die Interaktion

  • Interaktives Design in excalidraw.com erstellen, um gewünschte Effekte einfach zu beschreiben. Interaktives Styling mit excalidraw und cursor

  • Cursor anweisen, das Layout entsprechend anzupassen. Cursor anweisen, das Layout entsprechend anzupassen

  • Ergebnis: Gute Gesamtwirkung.

4) Git-Commit als Meilensteinversion.

5) Kontinuierliche Optimierung und Detailanpassungen

  • Dieser Schritt ist zeitaufwendig und erfordert wiederholtes Debugging und Validierung, um das gewünschte Ergebnis zu erreichen.

6) Integration des linken Seitenbereichs für Materialien, gemeinsame Nutzung von Bildbearbeitung und -zusammenführung, lokale Speicherung

  • Der Materialbereich dient der temporären Speicherung und bietet keine dauerhafte Sicherheit. Einfache Speicherung und Wiederverwendung. Die Bildmaterial-Cache-Funktion ist eine Innovation dieses Projekts.

7) Hinzufügen von Startseite, Hilfeseite und Datenschutzseite zur Vorbereitung der Website-Veröffentlichung

  • Der Materialbereich dient der temporären Speicherung und bietet keine dauerhafte Sicherheit. Einfache Speicherung und Wiederverwendung. Die Bildmaterial-Cache-Funktion ist eine Innovation dieses Projekts.

Serie