Lavorare con le immagini
Caricare e lavorare con le immagini in Verdent
Verdent for VS Code include potenti funzionalità multimodali che ti permettono di caricare immagini e ottenere analisi visive, generazione di codice a partire da mockup, debug tramite screenshot e molto altro. Questa guida illustra flussi di lavoro pratici per sfruttare la comprensione delle immagini nel tuo processo di sviluppo.
Caricare immagini in Verdent
Supponiamo che tu voglia condividere un'immagine con Verdent per analizzarla o usarla come riferimento.
Metodo rapido tramite gli appunti:
- Copia un'immagine negli appunti (screenshot, copia dal browser, ecc.)
- Fai clic nel campo di input di Verdent
- Ctrl+V (Windows/Linux) per incollare
Importante: su macOS, usa Ctrl+V (non Cmd+V) per incollare le immagini.
L'immagine compare nella conversazione.
Fai riferimento alle immagini tramite percorso:
Analyze this screenshot: /path/to/screenshot.pngVerdent legge l'immagine dal percorso specificato.
/home/user/screenshots/error.png
/Users/john/Desktop/mockups/design.png./screenshots/error.png
./mockups/design.png../images/diagram.png
../../assets/logo.pngFormati comuni: PNG, JPG, JPEG, WebP, GIF
Lavora con più immagini:
- Incolla più immagini dagli appunti in sequenza
- Oppure fai riferimento a più percorsi:
Compare these three mockups: design-v1.png, design-v2.png, design-v3.pngTutte le immagini compaiono nella conversazione e possono essere richiamate collettivamente.
Suggerimenti:
- Formati supportati: PNG, JPG, JPEG, WebP, GIF, BMP
- Le immagini restano nel contesto della conversazione per discussioni su più turni
- Puoi fare riferimento alle immagini caricate nelle domande successive
- Una qualità dell'immagine nitida produce risultati di analisi migliori
Generare codice a partire da mockup di design
Supponiamo che tu abbia un mockup di design e voglia che Verdent generi il codice di implementazione.
Carica il mockup di design
Copia l'immagine del mockup (da un'esportazione Figma, uno strumento di design o uno schizzo disegnato a mano) oppure fai riferimento a essa tramite percorso file.
Richiedi la generazione del codice
Generate React components to implement this dashboard designVerdent analizza la struttura visiva.
Verdent crea la struttura dei componenti
Verdent identifica gli elementi visivi e genera:
// 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>
);
}I componenti corrispondono alla struttura del mockup.
Genera il CSS corrispondente
Generate Tailwind CSS classes to match the mockup stylingVerdent aggiunge lo stile in base al design visivo:
<div className="grid grid-cols-3 gap-6 p-6">
<StatCard className="bg-white rounded-lg shadow-md p-4" ... />
</div>Rifinisci i dettagli
The spacing between stat cards should be larger, and add the blue accent color from the mockupVerdent apporta le modifiche per rispecchiare il design in modo più preciso.
Suggerimenti:
- Mockup a risoluzione più elevata producono codice più accurato
- Specifica il tuo framework: React, Vue, Angular, HTML/CSS puro
- Indica l'approccio allo stile: Tailwind, CSS Modules, Styled Components
- Fornisci codici colore o dettagli del design system per maggiore precisione
- Anche gli schizzi disegnati a mano vanno bene per prototipi rapidi
Fare debug degli errori con gli screenshot
Supponiamo che tu incontri un messaggio di errore e voglia aiuto per capirlo.
Incolla uno screenshot della console del browser che mostra l'errore:
Here's the error I'm getting in the console. What's causing it?Verdent legge:
- Il testo del messaggio di errore
- Le informazioni dello stack trace
- I nomi dei file e i numeri di riga
- Gli avvisi correlati nella console
Verdent fornisce una diagnosi:
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 suggerisce la correzione.
Incolla uno screenshot degli errori di compilazione nel terminale:
My TypeScript build is failing with these errorsVerdent analizza:
- Errori di tipo
- Percorsi dei file
- Codici di errore
- Contesto della compilazione
Verdent spiega:
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).Incolla uno screenshot dello stack trace dai log dell'applicazione:
The application crashed with this exceptionVerdent esamina:
- Il tipo di eccezione
- Lo stack trace
- I nomi dei metodi e i numeri di riga
- I messaggi di log contestuali
Identifica la causa principale e suggerisce le correzioni.
Incolla uno screenshot della scheda Network dei DevTools del browser:
This API request is failing, here's the network tabVerdent analizza:
- Il codice di stato HTTP
- Le intestazioni di richiesta/risposta
- Il payload della richiesta
- Il corpo della risposta
Diagnostica il problema di API.
Suggerimenti:
- Includi i messaggi di errore completi (non tagliare dettagli importanti)
- Mostra gli stack trace per intero quando possibile
- Includi il contesto circostante (altri messaggi della console, richieste di rete)
- Cattura lo screenshot dell'errore reale, non limitarti a descriverlo a parole
Domande frequenti
Quali limiti di dimensione dei file immagine si applicano?
Dimensione massima del file: 5MB (compresso automaticamente se superata; errore se ancora >5MB dopo la compressione)
Risoluzione massima: 2000×2000 pixel
Formati supportati: PNG, JPG, JPEG, GIF, BMP, WebP
Buona pratica: usa immagini sotto i 3MB con risoluzioni fino a 2000×2000 per prestazioni ottimali e analisi accurate.
Verdent può analizzare più immagini in una singola conversazione?
Sì. Puoi incollare più immagini in sequenza oppure fare riferimento a più percorsi di file in un unico prompt. Verdent mantiene il contesto tra tutte le immagini per confrontarle e analizzarle. Esempio: "Confronta questi tre mockup e individua le differenze."
Verdent carica le mie immagini su server esterni?
Le immagini incollate dagli appunti o richiamate tramite percorso file vengono elaborate all'interno della sessione della conversazione. Le immagini non vengono memorizzate in modo permanente e vengono cancellate quando avvii una nuova conversazione. I riferimenti tramite percorso file leggono l'immagine in locale senza caricarla.
Verdent può generare codice pronto per la produzione a partire dai mockup?
Verdent genera codice iniziale funzionante che implementa la struttura visiva, il layout e lo stile del tuo mockup. In genere dovrai rifinirlo aggiungendo logica di business, integrazione dei dati, funzionalità di accessibilità, gestione degli errori e ottimizzazioni per la produzione.
Cosa succede se Verdent interpreta male il mio mockup di design?
Fornisci feedback correttivi in modo iterativo. Ad esempio: "L'intestazione dovrebbe essere blu, non grigia" oppure "Quelle card dovrebbero essere disposte in una griglia a 3 colonne, non a 4." Verdent adatterà l'implementazione in base alle tue correzioni. Più cicli di rifinitura sono del tutto normali.