Bild-Input (Vision)

Bilder an Claude Code übergeben: Einfügen, Drag-and-Drop oder Dateipfad angeben, damit das Modell Screenshots, Mockups, Architekturdiagramme und Charts lesen kann. Unterstützt von QCode.cc-Vision-Modellen – ein API-Key funktioniert über alle Endpunkte hinweg.

Aktualisiert 2026-10-01

Auf dieser Seite

Drei Möglichkeiten, ein Bild bereitzustellen
- Beispiel: Pfadreferenz
Typische Anwendungsfälle
Welche Modelle Bilder verarbeiten können
Praxistipps
Verwandte Dokumentationen

Claude Code liest nicht nur Code – es kann Bilder sehen. Geben Sie ihm einen Screenshot, ein Design-Mockup, einen Fehlerbildschirm oder ein Architekturdiagramm, und ein Vision-fähiges Modell liest buchstäblich, was im Bild zu sehen ist, und handelt anschließend gemeinsam mit Ihrer Eingabe-Aufforderung – aus einem Mockup eine UI machen, einen Bug anhand eines Fehler-Screenshots lokalisieren oder ein Architekturdiagramm bzw. ein Datendiagramm erklären.

Diese Seite handelt vom Bild-Input: Sie stellen das Bild bereit, das Modell versteht es. Das ist etwas anderes als „Bildgenerierung“.

⚠️ Verwechseln Sie das nicht mit Bildgenerierung Diese Seite handelt vom Übergeben von Bildern an das Modell, damit es diese versteht (Vision-Input). Wenn Sie möchten, dass die KI Bilder generiert / bearbeitet (Plakate, Illustrationen, UI-Mockups, Freistellung/Hintergrundtausch), ist das eine eigenständige Fähigkeit – nutzen Sie gpt-image-2. Siehe gpt-image-2 Bildgenerierung. Kurz gesagt: Bilder lesen = diese Seite; Bilder erstellen = image-2.

Drei Möglichkeiten, ein Bild bereitzustellen ¶

In einer Claude-Code-Sitzung gibt es drei Wege, ein Bild an das Modell zu übergeben:

Methode	Vorgehen	Geeignet für
Einfügen	Bild kopieren, dann `Ctrl+V` im Eingabefeld drücken	Bilder aus Screenshot-Tools, alles in der Zwischenablage
Drag-and-Drop	Bilddatei direkt ins Terminalfenster ziehen	Bilddateien, die Sie bereits im Dateimanager haben
Pfadreferenz	Dateipfad des Bildes in der Eingabe-Aufforderung angeben	Bilder, die sich bereits im Projekt befinden, Batch-/Skriptverarbeitung

Auf macOS landet ein Screenshot standardmäßig in der Zwischenablage, daher funktioniert Ctrl+V sofort; wurde der Screenshot als Datei gespeichert, sind Drag-and-Drop oder eine Pfadreferenz zuverlässiger. Einfügen und Drag-and-Drop werden je nach Terminal / Betriebssystem unterschiedlich unterstützt – wenn es nicht erkannt wird, greifen Sie auf die „Pfadreferenz“ zurück, das ist die zuverlässigste Option.

Beispiel: Pfadreferenz ¶

> Look at the mockup ./design/dashboard.png and implement it with React + Tailwind
> What's causing this error screenshot @screenshots/build-error.png, and how do I fix it?
> Explain the system architecture in docs/architecture.png — how do the components interact?

Eine Pfadreferenz ist reproduzierbar: In ein Skript oder eine Eingabe-Aufforderung-Vorlage eingebunden, zeigt sie jedes Mal auf exakt dasselbe Bild, ohne manuelles Einfügen.

Typische Anwendungsfälle ¶

1. Mockup / Screenshot → UI-Code ¶

Geben Sie Claude Code ein Mockup oder einen Screenshot einer bestehenden Seite, und lassen Sie sich lauffähigen Frontend-Code daraus erzeugen.

> Here's the mockup @mockups/pricing-page.png. Implement it with Next.js + Tailwind.
  Match the layout, spacing, and colors as closely as possible, with sensible component splits.

Das Modell liest Layout, Textinhalte und Farben aus dem Bild und generiert den passenden Komponenten-Code. Die Genauigkeit hängt davon ab, wie klar das Bild ist und welche Einschränkungen Ihre Eingabe-Aufforderung enthält (Framework, Style-System, Namenskonventionen usw.).

2. Fehler-Screenshot → Eingrenzung und Behebung ¶

Diese roten Fehlermeldungen in Ihrer IDE, der Browser-Konsole oder dem Terminal – machen Sie einfach einen Screenshot davon, anstatt einen langen Stack-Trace abzutippen.

> @screenshots/ts-error.png How do I fix this TypeScript error? The relevant code is in src/api/client.ts

Das Modell liest die Fehlermeldung und den Stack-Trace aus dem Screenshot und schlägt, kombiniert mit der von Ihnen angegebenen Code-Datei, eine Lösung vor.

3. Architekturdiagramm / Datendiagramm → Verstehen und Erklären ¶

Geben Sie ihm ein Architekturdiagramm, Sequenzdiagramm, Flussdiagramm, Monitoring-Dashboard oder Datendiagramm, und lassen Sie es erklären, Daten extrahieren oder daraus Code / Dokumentation erstellen.

> Explain the data-flow diagram @diagrams/data-flow.png and draft an API doc based on it
> Read this monitoring screenshot @screenshots/latency.png — what's the p95 latency range? Any abnormal spikes?

Welche Modelle Bilder verarbeiten können ¶

Vision ist eine Eigenschaft des Modells — nicht jedes Modell kann Bilder lesen. Vision-fähige Modelle, die über QCode.cc verfügbar sind:

Modell	Hinweise
`claude-opus-5`	Flaggschiff; starke Vision + Reasoning, erste Wahl für komplexe Mockups / Diagramme
`claude-sonnet-5`	Ausgewogene Wahl; hervorragendes Preis-Leistungs-Verhältnis für alltägliches Bildlesen / UI-Reproduktion
GPT (`gpt-6-sol`)	Vision-Modelle aus der OpenAI-Familie mit starkem multimodalem Verständnis

Leichtgewichtige Text- / reine Code-Modelle unterstützen möglicherweise keine Bild-Eingabe. Geben Sie einem Nicht-Vision-Modell ein Bild, wird es ignoriert oder es tritt ein Fehler auf — wählen Sie eines der oben genannten Modelle. 4.x-Vision-IDs wie claude-sonnet-4-6 und claude-opus-4-8 sind weiterhin erhältlich. Zum Modellwechsel siehe Modellauswahl.

Der Vorteil von QCode.cc: ein cr_ API-Key deckt jedes Protokoll und jedes Modell ab. Derselbe Key funktioniert sowohl mit Claude-Vision-Modellen als auch mit GPT-5.x — Wechsel bei Bedarf, ohne das Konto zu wechseln. Zu Endpunkten und Protokollpfaden siehe Endpunkte & API-Formate (Nutzer in China sollten asia.qcode.cc bevorzugen).

Praxistipps ¶

Bilder klar halten: Zu geringe Auflösung oder verschwommener Text bedeutet, dass das Modell nicht genau lesen kann. Verwenden Sie Originale für Mockups und Fehler-Screenshots; nicht zu stark komprimieren.
Nicht zu viele Bilder auf einmal einfügen: Mehr und größere Bilder verbrauchen mehr Tokens und erschweren die Konzentration auf das Wesentliche. Konzentrieren Sie sich jeweils auf ein oder zwei Schlüsselbilder.
Absicht im Text klar formulieren: Geben Sie neben dem Bild an, was es tun soll („in React nachbilden“, „Fehlerursache finden“, „Tabellendaten extrahieren“) — deutlich besser als ein Bild ohne Erläuterung.
Sensible Informationen zuerst unkenntlich machen: Maskieren Sie Keys, Tokens, interne Adressen, Benutzerdaten usw. im Screenshot, bevor Sie ihn senden.
Pfade für Stapelverarbeitungsszenarien verwenden: Um Bilder in Skripten / der Automatisierung zu verarbeiten, ist „Auf einen Dateipfad verweisen“ der am besten kontrollierbare Ansatz; kombiniert mit dem Headless-Modus unter Automatisierung & CI/CD können Sie Bilder stapelweise verarbeiten.