# Bild-Input (Vision)

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](/docs/usage/image-2).
> 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](/docs/usage/model-selection).

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](/docs/getting-started/endpoints-and-api-paths) (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](/docs/advanced/headless) können Sie Bilder stapelweise verarbeiten.

---

## Verwandte Dokumentationen

- [gpt-image-2 Bildgenerierung](/docs/usage/image-2) — Bilder generieren / bearbeiten (das Gegenteil des hier beschriebenen „Bilder lesens“)
- [Modellauswahl](/docs/usage/model-selection) — Wählen Sie ein vision-fähiges Modell
- [Endpunkte & API-Formate](/docs/getting-started/endpoints-and-api-paths) — Endpunkte, Protokollpfade, Selbsttest-Methoden
- [Automatisierung & CI/CD](/docs/advanced/headless) — 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 →](https://qcode.cc/pricing)