Cursor Praxisprojekt-12 - AI-generierte Grafiken sehen hässlich aus? Weil Sie schon beim ersten Schritt falsch liegen! SVG-Wissenskarten mit Cursor erstellen

Projektbeschreibung

Cursor Praxisprojekt-12 - AI-generierte Grafiken sehen hässlich aus? Weil Sie schon beim ersten Schritt falsch liegen! SVG-Wissenskarten mit Cursor erstellen

Zeitaufwand: ca. 1,5 Stunden

Cursor-Nutzung: etwa 2 Mal

Oft sind die Ergebnisse von direkt mit AI-Tools generierten Grafiken enttäuschend. Dieses Projekt erforscht die Erstellung von Wissenskarten mit Cursor. Durch spezifische Prompts (Regeldateien) werden eingegebene Inhalte analysiert, zusammengefasst und in professionelle, ansprechende und einheitliche SVG-Wissenskarten umgewandelt.

Noch wichtiger ist – diese Methode ist nicht nur auf Grafiken beschränkt. Fast alle Inhalte (Artikel, Konzepte, Präsentationen, Marketingseiten) können mit demselben Ansatz schnell erstellt werden.

Daher zeige ich heute nicht nur, wie diese Grafiken erstellt werden, sondern vermittle auch die grundlegende Methodik, sodass Sie ähnliche Ansätze für alle Arten von Grafiken anwenden können.

Ergebnispräsentation

Es wurde eine HTML-Datei mit vier eingebetteten SVG-Wissenskarten erstellt, die die Kernschritte der AI-Grafikmethodik darstellen. Die Karten haben einen technischen, professionellen visuellen Stil mit Titeln, Kernpunkten, visuellen Elementen und prägnanten Aussagen.

Ergebnispräsentation 1 Ergebnispräsentation 2

Vorbereitung

  • Cursor
    • Version: 1.2.4
    • Cursor Rules: Cursor Rules
    • Agent: claude-4-sonnet
  • Gemini CLI-Integration

Probleme und Lösungen

  1. AI-generierte SVG-Icons können Positionierungsprobleme haben, z.B. Überschneidungen mit Text oder falsche Platzierung
    • Manuelle Anpassung des SVG-Codes ist erforderlich, um Positionen zu korrigieren
    • Ein kleines Tool zur Anpassung von Blockelementen (nur Position und Größe) könnte hilfreich sein

Erfahrungen

  1. Beispiele sind die beste Eingabe: Statt vage "schön" zu beschreiben, geben Sie der AI ein klares, hochwertiges Beispiel zur "Reverse-Analyse". Das ist der Schlüssel zu konsistent hochwertigen Ergebnissen.
  2. Inhalt zuerst, Optik später: Gute visuelle Darstellung erfordert klare Inhaltsstruktur. Lassen Sie die AI zuerst die Logik des Inhalts analysieren, bevor Sie visualisieren – dann wird die Grafik automatisch ansprechend.
  3. AI-Teams nutzen: Kombinieren Sie die Stärken verschiedener AIs. Claude für Textanalyse und Strukturierung, Gemini/Dalle für visuelle Generierung – das steigert Effizienz und Qualität.
  4. Prompt-Vorlagen sind wiederverwendbare Assets: Strukturieren Sie erfolgreiche Prompts als Vorlagen, um sie immer wieder zu nutzen. Das erhöht die Effizienz und Konsistenz der Inhaltserstellung erheblich.
  5. Cursor-Projektanwendung: Mit Cursor-Projekten können Sie Regeln festlegen, Eingaben und Ausgaben definieren und müssen nicht jedes Mal nach Prompts suchen. Gleichzeitig lassen sich Grafiken leicht anpassen.

Detaillierte Projektsschritte

Schritt 1: Finden Sie ein gutes Beispiel und lassen Sie die AI es "reverse-engineern"

  1. Beispiel finden: Suchen Sie eine Wissenskarte, deren visueller Stil Ihnen besonders gefällt.

  2. Cursor (Claude) befragen: Senden Sie das Bild an Cursor und verwenden Sie einen Prompt wie diesen, um eine wiederverwendbare Prompt-Vorlage zu erhalten.

    Sie sind ein professioneller UI-Designer. Ich möchte, dass die AI mir ähnliche Wissenskarten generiert. Ich sende einen Inhalt, und die AI soll ihn in diesen Stil umwandeln. Bitte analysieren Sie diesen Stil und erstellen Sie eine generische Prompt-Vorlage im Markdown-Format für mich.

Beispielanalyse
  1. Prompt-Vorlage erhalten: Die AI liefert eine detaillierte Markdown-Prompt-Vorlage mit Designrichtlinien, Inhaltsstruktur, visuellen Elementen, Ausgabeformat etc. Diese wird die Grundlage für alle weiteren Karten.
# AI-Wissenskarten-Prompt

Generieren Sie Wissenskarten nach folgenden Vorgaben:

## Designrichtlinien

-**Stil**: Technisch, professionell, modern und minimalistisch
-**Farbpalette**: Dunkler Hintergrund (#1a1a1a) + Türkis (#00d4aa) + Weißer Text
-**Kartengröße**: 16:9 Querformat, für Präsentationen geeignet

## Anforderungen pro Karte
### Titeldesign

- Haupttitel: Chinesisch, fett, links oben
- Untertitel: Englisch in Großbuchstaben, kleinere Schrift unter dem Haupttitel
- Titelfarbe: Weiß oder Türkis

### Inhaltsstruktur
- Kernaussagen: 1-3 Schlüsselinformationen als Aufzählung
- Daten: Falls vorhanden, als einfache Diagramme (Liniendiagramme, Balkendiagramme etc.)
- Ergänzungen: Kurze Erklärungen oder prägnante Zusammenfassungen

### Visuelle Elemente
- Hintergrund: Punktmuster, geometrische Linien oder Raster
- Diagramme: Minimalistische Darstellungen
- Hervorhebungen: Türkis für wichtige Informationen
- Weißraum: Ausreichend Platz für klare Hierarchie

### Textrichtlinien
- Haupttext: Weiß, gut lesbar
- Hervorgehobener Text: Türkis
- Schriftgrößen: Titel > Hervorhebungen > Haupttext > Anmerkungen
- Chinesisch/Englisch: Einheitliches visuelles Erscheinungsbild

## Inhaltsverarbeitung
1.**Analyse**: Zuerst den Inhalt analysieren und Kernthemen identifizieren
2.**Bestätigung**: Benutzer fragen, wie viele Karten gewünscht sind (Empfehlung: 3-8)
3.**Themenaufteilung**: Inhalt in entsprechende Kernthemen gliedern
4.**Punkte extrahieren**: Pro Thema 2-3 Kernpunkte identifizieren
5.**Visuelle Gestaltung**: Passende visuelle Elemente pro Thema entwerfen

## Ausgabeformat Pro Karte:
-**Titel** (Chinesisch/Englisch)
-**Kernpunkte** (2-3 Aufzählungspunkte)
-**Visuelle Elemente** (Diagrammtyp, Dekoration etc.)
-**Hervorgehobener Text** (Schlüsselwörter in Türkis)
-**Zusammenfassung** (falls zutreffend)

## Anwendung
1. Benutzer liefert Inhalt
2. AI analysiert Inhalt und fragt: "Ich schlage X Karten vor. Wie viele möchten Sie?"
3. Nach Bestätigung generiert die AI die Karten gemäß den Richtlinien
  1. Cursor-Projektregeln festlegen: Diese Vorlage in .cursor/rules/project-rules.mdc speichern.
Projektregeln festlegen

Schritt 2: Verwenden Sie den Vorlagen-Schnellausgabe strukturierter Inhalte

  1. Neues Dialogfenster öffnen: Um Kontextstörungen zu vermeiden, öffnen Sie ein neues Dialogfenster.
  2. Inhalt bereitstellen: Fügen Sie den zu visualisierenden ursprünglichen Artikel oder Inhalt hinzu und geben Sie konkrete Bildanforderungen an.
Verwenden Sie die Projektregeln, um @XXXXX.md (konkreter Artikel, auch Link, Bild usw.) zu zusammenzufassen. Generieren Sie dann Wissenskarten. Generieren Sie vier entsprechende SVG-Bilder und integrieren Sie sie in eine HTML-Datei. Geben Sie die englische und chinesische Version in die output-Ordner aus.
  1. AI-Strukturierung: AI analysiert und extrahiert den Inhalt gemäß den Vorlagenanforderungen und erstellt eine strukturierte Übersicht aus mehreren Karten. Jede Karte enthält einen chinesischen/englischen Titel, wichtige Punkte, visuelle Elemente und hervorgehobene Schlüsselwörter.
Projektregeln festlegen

Schritt 3: Lassen Sie die AI automatisch visuelle Ausgaben (SVG) generieren

  1. AI-Ergebnis: Basierend auf der strukturierten Inhaltserstellung aus Schritt 2 generiert Cursor automatisch visuelle Code.
Projektregeln festlegen
  1. Generieren und anpassen: AI generiert SVG-Code und die endgültige HTML-Datei. Sie können den Code direkt in Cursor ansehen und anpassen, um die Details zu optimieren, bis Sie zufrieden sind.
Projektregeln festlegen
  1. Endgültige Ausgabe: Das Ergebnis ist eine HTML-Datei und vier entsprechende SVG-Bilder, die den ursprünglichen Inhalt in hochwertige visuelle Wissenskarten umwandeln.

Bonus-Experiment: Verwenden Sie GeminiCLI, um direkt aus Regeln zu generieren

  • GeminiCLI ist ein Befehlszeilen-Tool für Gemini, das auch Regeln und Inhalte lesen kann, um Bilder zu generieren.
  • Die Ergebnisse sind etwas anders – einfacher, aber günstiger und verbrauchen keine Credits.
Projektregeln festlegen Projektregeln festlegen