# Arbeiten mit Bildern (/de/docs/verdent-for-vscode/common-workflows/images)

> Hochladen und Arbeiten mit Bildern in Verdent



Verdent for VS Code verfügt über leistungsstarke multimodale Fähigkeiten, mit denen Sie Bilder hochladen und visuelle Analysen, Codegenerierung aus Mockups, Debugging mit Screenshots und mehr erhalten können. Dieser Leitfaden zeigt praktische Workflows zur Nutzung des Bildverständnisses in Ihrem Entwicklungsprozess.

***

## Bilder in Verdent hochladen [#bilder-in-verdent-hochladen]

Angenommen, Sie möchten ein Bild mit Verdent zur Analyse oder als Referenz teilen.

<Tabs>
  <Tab title="Kopieren und Einfügen">
    Schnelle Methode über die Zwischenablage:

    1. Kopieren Sie ein Bild in Ihre Zwischenablage (Screenshot, aus dem Browser kopiert usw.)
    2. Klicken Sie in das Eingabefeld von Verdent
    3. **Strg+V** (Windows/Linux) zum Einfügen

    **Wichtig:** Verwenden Sie unter macOS **Strg+V** (nicht Cmd+V), um Bilder einzufügen.

    Das Bild erscheint in der Konversation.
  </Tab>

  <Tab title="Referenz per Dateipfad">
    Bilder per Pfad referenzieren:

    ```
    Analyze this screenshot: /path/to/screenshot.png
    ```

    Verdent liest das Bild aus dem angegebenen Pfad.

    <CodeGroup>
      ```bash "Absolute Path"
      /home/user/screenshots/error.png
      /Users/john/Desktop/mockups/design.png
      ```

      ```bash "Relative Path (Project Root)"
      ./screenshots/error.png
      ./mockups/design.png
      ```

      ```bash "Relative Path (Current Directory)"
      ../images/diagram.png
      ../../assets/logo.png
      ```
    </CodeGroup>

    Gängige Formate: PNG, JPG, JPEG, WebP, GIF
  </Tab>

  <Tab title="Mehrere Bilder">
    Mit mehreren Bildern arbeiten:

    1. Fügen Sie mehrere Bilder nacheinander aus der Zwischenablage ein
    2. Oder referenzieren Sie mehrere Pfade:

    ```
    Compare these three mockups: design-v1.png, design-v2.png, design-v3.png
    ```

    Alle Bilder erscheinen in der Konversation und können gemeinsam referenziert werden.
  </Tab>
</Tabs>

<Tip>
  **Tipps:**

  * Unterstützte Formate: PNG, JPG, JPEG, WebP, GIF, BMP
  * Bilder bleiben im Konversationskontext für mehrstufige Diskussionen erhalten
  * Sie können hochgeladene Bilder in Folgefragen referenzieren
  * Eine klare Bildqualität liefert bessere Analyseergebnisse
</Tip>

***

## Code aus Design-Mockups generieren [#code-aus-design-mockups-generieren]

Angenommen, Sie haben ein Design-Mockup und möchten, dass Verdent den Implementierungscode generiert.

<Steps>
  <Step title="Design-Mockup hochladen">
    Kopieren Sie das Mockup-Bild (aus einem Figma-Export, Design-Tool oder einer handgezeichneten Skizze) oder referenzieren Sie es per Dateipfad.
  </Step>

  <Step title="Codegenerierung anfordern">
    ```
    Generate React components to implement this dashboard design
    ```

    Verdent analysiert die visuelle Struktur.
  </Step>

  <Step title="Verdent erstellt die Komponentenstruktur">
    Verdent identifiziert visuelle Elemente und generiert:

    ```tsx
    // DashboardLayout.tsx
    import React from 'react';
    import { StatCard } from './StatCard';
    import { RecentActivity } from './RecentActivity';
    import { UserChart } from './UserChart';

    export function DashboardLayout() {
      return (
        <div className="dashboard-container">
          <div className="stats-grid">
            <StatCard title="Total Users" value="1,234" trend="+12%" />
            <StatCard title="Revenue" value="$45.6K" trend="+8%" />
            <StatCard title="Active Sessions" value="89" trend="-3%" />
          </div>
          <div className="charts-section">
            <UserChart />
          </div>
          <div className="activity-section">
            <RecentActivity />
          </div>
        </div>
      );
    }
    ```

    Die Komponenten entsprechen der Mockup-Struktur.
  </Step>

  <Step title="Entsprechendes CSS generieren">
    ```
    Generate Tailwind CSS classes to match the mockup styling
    ```

    Verdent fügt basierend auf dem visuellen Design das Styling hinzu:

    ```tsx
    <div className="grid grid-cols-3 gap-6 p-6">
      <StatCard className="bg-white rounded-lg shadow-md p-4" ... />
    </div>
    ```
  </Step>

  <Step title="Details verfeinern">
    ```
    The spacing between stat cards should be larger, and add the blue accent color from the mockup
    ```

    Verdent passt das Ergebnis an, um dem Design genauer zu entsprechen.
  </Step>
</Steps>

<Tip>
  **Tipps:**

  * Mockups mit höherer Auflösung führen zu präziserem Code
  * Geben Sie Ihr Framework an: React, Vue, Angular, reines HTML/CSS
  * Nennen Sie den Styling-Ansatz: Tailwind, CSS Modules, Styled Components
  * Geben Sie Farbcodes oder Details zum Designsystem für mehr Präzision an
  * Handgezeichnete Skizzen funktionieren ebenfalls für schnelle Prototypen
</Tip>

***

## Fehler mit Screenshots debuggen [#fehler-mit-screenshots-debuggen]

Angenommen, Sie stoßen auf eine Fehlermeldung und möchten Hilfe beim Verständnis erhalten.

<Tabs>
  <Tab title="Browser-Konsolenfehler">
    Fügen Sie einen Screenshot der Browser-Konsole mit dem angezeigten Fehler ein:

    ```
    Here's the error I'm getting in the console. What's causing it?
    ```

    Verdent liest:

    * Fehlermeldungstext
    * Stack-Trace-Informationen
    * Dateinamen und Zeilennummern
    * Zugehörige Konsolenwarnungen

    Verdent liefert eine Diagnose:

    ```
    This is a "Cannot read property 'map' of undefined" error. The 'users' array is undefined when the component first renders. Add a conditional check or default empty array.
    ```

    Verdent schlägt die Lösung vor.
  </Tab>

  <Tab title="Terminal-Fehler">
    Fügen Sie einen Screenshot von Terminal-Kompilierungsfehlern ein:

    ```
    My TypeScript build is failing with these errors
    ```

    Verdent analysiert:

    * Typfehler
    * Dateipfade
    * Fehlercodes
    * Kompilierungskontext

    Verdent erklärt:

    ```
    You have a type mismatch in UserProfile.tsx line 42. The 'age' property expects a number but you're passing a string. Cast it with Number(age).
    ```
  </Tab>

  <Tab title="Laufzeitausnahme">
    Fügen Sie einen Screenshot des Stack-Trace aus den Anwendungsprotokollen ein:

    ```
    The application crashed with this exception
    ```

    Verdent untersucht:

    * Ausnahmetyp
    * Stack-Trace
    * Methodennamen und Zeilennummern
    * Kontextbezogene Protokollmeldungen

    Identifiziert die Ursache und schlägt Lösungen vor.
  </Tab>

  <Tab title="Netzwerkfehler">
    Fügen Sie einen Screenshot des Network-Tabs der Browser-DevTools ein:

    ```
    This API request is failing, here's the network tab
    ```

    Verdent analysiert:

    * HTTP-Statuscode
    * Anfrage-/Antwort-Header
    * Anfrage-Payload
    * Antworttext

    Diagnostiziert das API-Problem.
  </Tab>
</Tabs>

<Tip>
  **Tipps:**

  * Fügen Sie vollständige Fehlermeldungen ein (schneiden Sie wichtige Details nicht ab)
  * Zeigen Sie Stack-Traces möglichst vollständig
  * Fügen Sie den umgebenden Kontext ein (andere Konsolenmeldungen, Netzwerkanfragen)
  * Machen Sie einen Screenshot des tatsächlichen Fehlers, statt ihn nur in Textform zu beschreiben
</Tip>

***

## Häufig gestellte Fragen [#häufig-gestellte-fragen]

<Accordion title="Welche Größenbeschränkungen gelten für Bilddateien?">
  **Maximale Dateigröße:** 5 MB (wird bei Überschreitung automatisch komprimiert; Fehler, falls nach der Komprimierung weiterhin >5 MB)

  **Maximale Auflösung:** 2000 × 2000 Pixel

  **Unterstützte Formate:** PNG, JPG, JPEG, GIF, BMP, WebP

  **Empfehlung:** Verwenden Sie Bilder unter 3 MB mit Auflösungen bis zu 2000 × 2000 für optimale Leistung und präzise Analyse.
</Accordion>

<Accordion title="Kann Verdent mehrere Bilder in einer einzigen Konversation analysieren?">
  Ja. Sie können mehrere Bilder nacheinander einfügen oder mehrere Dateipfade in einem Prompt referenzieren. Verdent behält den Kontext über alle Bilder hinweg für Vergleiche und Analysen bei. Beispiel: „Vergleiche diese drei Mockups und zeige die Unterschiede auf."
</Accordion>

<Accordion title="Lädt Verdent meine Bilder auf externe Server hoch?">
  Über die Zwischenablage eingefügte oder per Dateipfad referenzierte Bilder werden innerhalb Ihrer Konversationssitzung verarbeitet. Bilder werden nicht dauerhaft gespeichert und beim Start einer neuen Konversation gelöscht. Dateipfad-Referenzen lesen das Bild lokal, ohne es hochzuladen.
</Accordion>

<Accordion title="Kann Verdent produktionsreifen Code aus Mockups generieren?">
  Verdent generiert funktionalen Startercode, der die visuelle Struktur, das Layout und das Styling Ihres Mockups umsetzt. In der Regel müssen Sie den Code noch verfeinern, indem Sie Geschäftslogik, Datenintegration, Barrierefreiheitsfunktionen, Fehlerbehandlung und Produktionsoptimierungen ergänzen.
</Accordion>

<Accordion title="Was tun, wenn Verdent mein Design-Mockup falsch interpretiert?">
  Geben Sie iterativ korrigierendes Feedback. Sagen Sie zum Beispiel „Die Kopfzeile sollte blau sein, nicht grau" oder „Diese Karten sollten in einem 3-Spalten-Raster angeordnet sein, nicht in 4 Spalten." Verdent passt die Implementierung anhand Ihrer Korrekturen an. Mehrere Verfeinerungsrunden sind normal.
</Accordion>

***

## Siehe auch [#siehe-auch]

<CardGroup cols="2">
  <Card title="Neuen Code schreiben" icon="code" href="/docs/verdent-for-vscode/task-based-guides/writing-code">
    Neue Funktionen und Komponenten mit Verdent erstellen
  </Card>

  <Card title="Code verstehen" icon="book-open" href="/docs/verdent-for-vscode/task-based-guides/understanding-code">
    Workflows zum Codeverständnis und zur Codeerkundung
  </Card>
</CardGroup>