# Lavorare con le immagini (/it/docs/verdent-for-vscode/common-workflows/images)

> 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 [#caricare-immagini-in-verdent]

Supponiamo che tu voglia condividere un'immagine con Verdent per analizzarla o usarla come riferimento.

<Tabs>
  <Tab title="Copia e incolla">
    Metodo rapido tramite gli appunti:

    1. Copia un'immagine negli appunti (screenshot, copia dal browser, ecc.)
    2. Fai clic nel campo di input di Verdent
    3. **Ctrl+V** (Windows/Linux) per incollare

    **Importante:** su macOS, usa **Ctrl+V** (non Cmd+V) per incollare le immagini.

    L'immagine compare nella conversazione.
  </Tab>

  <Tab title="Riferimento tramite percorso file">
    Fai riferimento alle immagini tramite percorso:

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

    Verdent legge l'immagine dal percorso specificato.

    <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>

    Formati comuni: PNG, JPG, JPEG, WebP, GIF
  </Tab>

  <Tab title="Immagini multiple">
    Lavora con più immagini:

    1. Incolla più immagini dagli appunti in sequenza
    2. Oppure fai riferimento a più percorsi:

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

    Tutte le immagini compaiono nella conversazione e possono essere richiamate collettivamente.
  </Tab>
</Tabs>

<Tip>
  **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
</Tip>

***

## Generare codice a partire da mockup di design [#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.

<Steps>
  <Step title="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.
  </Step>

  <Step title="Richiedi la generazione del codice">
    ```
    Generate React components to implement this dashboard design
    ```

    Verdent analizza la struttura visiva.
  </Step>

  <Step title="Verdent crea la struttura dei componenti">
    Verdent identifica gli elementi visivi e genera:

    ```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>
      );
    }
    ```

    I componenti corrispondono alla struttura del mockup.
  </Step>

  <Step title="Genera il CSS corrispondente">
    ```
    Generate Tailwind CSS classes to match the mockup styling
    ```

    Verdent aggiunge lo stile in base al design visivo:

    ```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="Rifinisci i dettagli">
    ```
    The spacing between stat cards should be larger, and add the blue accent color from the mockup
    ```

    Verdent apporta le modifiche per rispecchiare il design in modo più preciso.
  </Step>
</Steps>

<Tip>
  **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
</Tip>

***

## Fare debug degli errori con gli screenshot [#fare-debug-degli-errori-con-gli-screenshot]

Supponiamo che tu incontri un messaggio di errore e voglia aiuto per capirlo.

<Tabs>
  <Tab title="Errore della console del browser">
    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.
  </Tab>

  <Tab title="Errore del terminale">
    Incolla uno screenshot degli errori di compilazione nel terminale:

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

    Verdent 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).
    ```
  </Tab>

  <Tab title="Eccezione a runtime">
    Incolla uno screenshot dello stack trace dai log dell'applicazione:

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

    Verdent 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.
  </Tab>

  <Tab title="Errore di rete">
    Incolla uno screenshot della scheda Network dei DevTools del browser:

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

    Verdent analizza:

    * Il codice di stato HTTP
    * Le intestazioni di richiesta/risposta
    * Il payload della richiesta
    * Il corpo della risposta

    Diagnostica il problema di API.
  </Tab>
</Tabs>

<Tip>
  **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
</Tip>

***

## Domande frequenti [#domande-frequenti]

<Accordion title="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.
</Accordion>

<Accordion title="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."
</Accordion>

<Accordion title="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.
</Accordion>

<Accordion title="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.
</Accordion>

<Accordion title="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.
</Accordion>

***

## Vedi anche [#vedi-anche]

<CardGroup cols="2">
  <Card title="Scrivere nuovo codice" icon="code" href="/docs/verdent-for-vscode/task-based-guides/writing-code">
    Creare nuove funzionalità e componenti con Verdent
  </Card>

  <Card title="Comprendere il codice" icon="book-open" href="/docs/verdent-for-vscode/task-based-guides/understanding-code">
    Flussi di lavoro per la comprensione e l'esplorazione del codice
  </Card>
</CardGroup>