Arbeiten mit Bildern
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
Angenommen, Sie möchten ein Bild mit Verdent zur Analyse oder als Referenz teilen.
Schnelle Methode über die Zwischenablage:
- Kopieren Sie ein Bild in Ihre Zwischenablage (Screenshot, aus dem Browser kopiert usw.)
- Klicken Sie in das Eingabefeld von Verdent
- 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.
Bilder per Pfad referenzieren:
Analyze this screenshot: /path/to/screenshot.pngVerdent liest das Bild aus dem angegebenen Pfad.
/home/user/screenshots/error.png
/Users/john/Desktop/mockups/design.png./screenshots/error.png
./mockups/design.png../images/diagram.png
../../assets/logo.pngGängige Formate: PNG, JPG, JPEG, WebP, GIF
Mit mehreren Bildern arbeiten:
- Fügen Sie mehrere Bilder nacheinander aus der Zwischenablage ein
- Oder referenzieren Sie mehrere Pfade:
Compare these three mockups: design-v1.png, design-v2.png, design-v3.pngAlle Bilder erscheinen in der Konversation und können gemeinsam referenziert werden.
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
Code aus Design-Mockups generieren
Angenommen, Sie haben ein Design-Mockup und möchten, dass Verdent den Implementierungscode generiert.
Design-Mockup hochladen
Kopieren Sie das Mockup-Bild (aus einem Figma-Export, Design-Tool oder einer handgezeichneten Skizze) oder referenzieren Sie es per Dateipfad.
Codegenerierung anfordern
Generate React components to implement this dashboard designVerdent analysiert die visuelle Struktur.
Verdent erstellt die Komponentenstruktur
Verdent identifiziert visuelle Elemente und generiert:
// 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.
Entsprechendes CSS generieren
Generate Tailwind CSS classes to match the mockup stylingVerdent fügt basierend auf dem visuellen Design das Styling hinzu:
<div className="grid grid-cols-3 gap-6 p-6">
<StatCard className="bg-white rounded-lg shadow-md p-4" ... />
</div>Details verfeinern
The spacing between stat cards should be larger, and add the blue accent color from the mockupVerdent passt das Ergebnis an, um dem Design genauer zu entsprechen.
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
Fehler mit Screenshots debuggen
Angenommen, Sie stoßen auf eine Fehlermeldung und möchten Hilfe beim Verständnis erhalten.
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.
Fügen Sie einen Screenshot von Terminal-Kompilierungsfehlern ein:
My TypeScript build is failing with these errorsVerdent 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).Fügen Sie einen Screenshot des Stack-Trace aus den Anwendungsprotokollen ein:
The application crashed with this exceptionVerdent untersucht:
- Ausnahmetyp
- Stack-Trace
- Methodennamen und Zeilennummern
- Kontextbezogene Protokollmeldungen
Identifiziert die Ursache und schlägt Lösungen vor.
Fügen Sie einen Screenshot des Network-Tabs der Browser-DevTools ein:
This API request is failing, here's the network tabVerdent analysiert:
- HTTP-Statuscode
- Anfrage-/Antwort-Header
- Anfrage-Payload
- Antworttext
Diagnostiziert das API-Problem.
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
Häufig gestellte Fragen
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.
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."
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.
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.
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.