Tutorials

Bilder direkt in Claude AI generieren: Die ultimative Schritt-für-Schritt-Anleitung

Melden

Claude AI von Anthropic ist vor allem für seine herausragenden Text- und Programmierfähigkeiten bekannt. Viele Nutzer wissen jedoch nicht, dass Claude über seine „Artifacts“-Funktion in der Lage ist, Grafiken und Illustrationen (insbesondere Vektorgrafiken im SVG-Format sowie interaktive Canvas-Designs) direkt im Chatfenster zu erstellen und anzuzeigen – ganz ohne externe Tools oder Erweiterungen.

In diesem Tutorial erfährst du Schritt für Schritt, wie du diese Funktion nutzt, um visuelle Inhalte direkt in Claude zu erzeugen.

Was du vorab wissen solltest

Claude nutzt keine Diffusionsmodelle wie Midjourney oder DALL-E (die fotorealistische Pixelbilder erzeugen), sondern generiert Grafiken codebasiert als skalierbare Vektorgrafiken (SVG) oder HTML5-Canvas. Dies eignet sich hervorragend für Icons, Logos, Illustrationen, Infografiken, flache Vektorkunst (Flat Design) und UI-Mockups.

Schritt 1: Artifacts aktivieren (Voraussetzung)

Damit Claude Grafiken direkt rendern kann, muss die Artifacts-Funktion aktiv sein:

  1. Öffne Claude AI und logge dich ein.
  2. Klicke unten links auf deinen Profilnamen und wähle Feature Preview (oder die Einstellungen).
  3. Stelle sicher, dass die Option Artifacts aktiviert ist (bei den meisten Konten ist dies standardmäßig der Fall).

Schritt 2: Den richtigen Grafiktyp für den Prompt wählen

Da Claude Grafiken über Code zeichnet, erzielst du die besten Ergebnisse mit folgenden Stilen:

  • Flat Design / Minimalistische Vektorkunst
  • Logos & App-Icons
  • Isometrische Illustrationen
  • Diagramme & Schaubilder
  • Pixel-Art (via SVG-Raster)

Schritt 3: Den Prompt präzise formulieren

Sag Claude explizit, dass die Grafik als eigenständiges SVG-Artifact ausgegeben werden soll. Ein starker Prompt enthält:

  • Den Grafiktyp (SVG / Vector)
  • Das Hauptmotiv
  • Farbpalette und Designstil
  • Details zur Komposition

📋 Beispiel-Prompt:

„Erstelle eine moderne, minimalistische Vektorgrafik im SVG-Format. Das Motiv soll ein Astronaut sein, der auf einer kleinen Mondsichel sitzt und in die Sterne schaut. Nutze eine Farbpalette aus Dunkelblau, Türkis, Neon-Lila und Weiß für die Sterne. Erstelle das Design als eigenständiges SVG-Artifact mit hoher Detailtiefe.“

Schritt 4: Die Grafik generieren und live betrachten

  1. Sende deinen Prompt ab.
  2. Auf der rechten Seite deines Bildschirms öffnet sich automatisch das Artifact-Fenster.
  3. Claude schreibt den Code im Hintergrund und zeigt dir im Tab „Preview“ direkt das fertige visuelle Bild an.

Schritt 5: Das Bild interaktiv anpassen (Iterieren)

Einer der größten Vorteile von Claude ist die präzise Nachbearbeitung. Du kannst das Bild durch einfache Folge-Prompts im selben Chat verändern:

  • Farben ändern: „Ändere den Hintergrund in ein tiefes Schwarz und mache den Anzug des Astronauten orange.“
  • Elemente hinzufügen: „Füge im Hintergrund eine detailreiche Erde und eine kleine Sternschnuppe hinzu.“
  • Stil anpassen: „Mache die Linien dicker, sodass es wie ein moderner Sticker aussieht.“

Claude aktualisiert das Bild im rechten Fenster in Echtzeit.

Schritt 6: Die Grafik exportieren und verwenden

Wenn du mit dem Ergebnis zufrieden bist, kannst du das Bild auf zwei Arten sichern:

  1. Als SVG-Datei speichern (Beste Qualität):

    • Klicke im Artifact-Fenster oben auf den Reiter „Code“.
    • Klicke auf das Kopieren-Symbol (Copy Code).
    • Öffne einen Texteditor (z. B. Notepad), füge den Code ein und speichere die Datei unter dem Namen grafik.svg.
    • Hinweis: SVG-Dateien lassen sich ohne Qualitätsverlust unendlich vergrößern und direkt im Browser oder in Programmen wie Illustrator und Figma öffnen.

  2. Als PNG/JPG umwandeln:

    • Öffne die gespeicherte .svg-Datei einfach im Webbrowser und mache einen Screenshot, oder ziehe sie in ein kostenloses Online-Konvertierungstool, um ein Standard-Pixelbild zu erhalten.

💡 Pro-Tipps für die besten Ergebnisse

  • Verwende Schattierungen und Farbverläufe: Bitte Claude explizit um SVG Gradients (Farbverläufe), um flachen Grafiken Tiefe und Modernität zu verleihen.
  • Interaktive Grafiken: Du kannst Claude auch bitten: „Erstelle eine interaktive Animation davon mittels HTML/Canvas“ – so kannst du Grafiken erzeugen, die sich bewegen oder auf Mausklicks reagieren.
0