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.

Brauchen Sie einen API-Key? Registrieren →·Endpunkte & Base-URLs →

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:

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:

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.

Bildformate, Größen und Token-Verbrauch¶

Stand 2026-10-15 laut der offiziellen Anthropic-Dokumentation zur Bildeingabe (auch bei Nutzung von Claude über QCode ein brauchbarer Anhaltspunkt):

In der Praxis: Machen Sie Screenshots nicht größer als nötig. Eine Vollbildaufnahme in 4K wird verkleinert, die zusätzlichen Pixel erhöhen nur die Übertragungsgröße, nicht die Schärfe. Ein Zuschnitt auf den wirklich relevanten Bereich ist genauer und spart gegenüber dem Vollbild Tokens.

Bilder in Claude Code anhängen¶

Laut der Claude-Code-Dokumentation können Sie ein Bild ins Fenster ziehen oder kopieren und mit Ctrl+V einfügen (unter Windows und WSL Alt+V, in iTerm2 Cmd+V). Im Eingabefeld erscheint eine Markierung wie [Image #1], auf die Sie im Prompt per Nummer verweisen können.

Häufige Fehler und Fehlersuche¶

FAQ¶

Müssen Screenshots PNG sein?¶

Nein. JPEG, PNG, GIF und WebP werden unterstützt. Für textlastige Oberflächen-Screenshots empfiehlt sich PNG, damit verlustbehaftete Kompression die Schrift nicht verwischt.

Werden Bilder zusätzlich berechnet?¶

Bilder zählen als Eingabe-Tokens und werden zusammen mit dem Text pro Token abgerechnet; die Preise je Modell stehen unter qcode.cc/models. Je größer das Bild, desto mehr visuelle Tokens – schneiden Sie also vor dem Senden zu.

Kann das Modell erkennen, wer auf einem Bild zu sehen ist?¶

Nein. Laut Anthropic-Dokumentation kann Claude nicht dazu verwendet werden, Personen auf Bildern zu benennen, und lehnt das ab. Szenen beschreiben, Text lesen und Diagramme erklären funktioniert.

Wie viele Bilder kann ich auf einmal senden?¶

Die Anthropic-Dokumentation nennt für die API 100 Bilder pro Anfrage bei Modellen mit 200K-Token-Kontext und 600 bei allen anderen, doch über 20 Bildern wird die Abmessungsgrenze strenger, und das Größenlimit der Anfrage kann zuerst erreicht sein. Im Alltag konzentrieren Sie sich besser auf ein bis zwei Schlüsselbilder.

Verwandte Dokumentationen¶

• gpt-image-2 Bildgenerierung — Bilder generieren / bearbeiten (das Gegenteil des hier beschriebenen „Bilder lesens“)
• Modellauswahl — Wählen Sie ein vision-fähiges Modell
• Endpunkte & API-Formate — Endpunkte, Protokollpfade, Selbsttest-Methoden
• Automatisierung & CI/CD — Bilder in Skripten stapelweise übergeben

Mit einem einzigen QCode.cc API-Key nutzen Sie Claude-Vision-Modelle und die multimodale Leistung von GPT-5.x, mit Kontingent, das über alle Endpunkte hinweg geteilt wird. Tarife & Preise ansehen →

Enterprise →