# Trabalhando com imagens (/pt/docs/verdent-for-vscode/common-workflows/images)

> Como enviar e trabalhar com imagens no Verdent



O Verdent for VS Code inclui poderosos recursos multimodais, permitindo que você envie imagens e receba análises visuais, geração de código a partir de mockups, depuração com capturas de tela e muito mais. Este guia demonstra fluxos de trabalho práticos para aproveitar a compreensão de imagens no seu processo de desenvolvimento.

***

## Enviando imagens para o Verdent [#enviando-imagens-para-o-verdent]

Suponha que você queira compartilhar uma imagem com o Verdent para análise ou referência.

<Tabs>
  <Tab title="Copiar e colar">
    Método rápido pela área de transferência:

    1. Copie uma imagem para a área de transferência (captura de tela, copiada do navegador, etc.)
    2. Clique no campo de entrada do Verdent
    3. **Ctrl+V** (Windows/Linux) para colar

    **Importante:** No macOS, use **Ctrl+V** (não Cmd+V) para colar imagens.

    A imagem aparece na conversa.
  </Tab>

  <Tab title="Referência por caminho de arquivo">
    Referencie imagens por caminho:

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

    O Verdent lê a imagem do caminho especificado.

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

    Formatos comuns: PNG, JPG, JPEG, WebP, GIF
  </Tab>

  <Tab title="Múltiplas imagens">
    Trabalhe com várias imagens:

    1. Cole várias imagens da área de transferência em sequência
    2. Ou referencie vários caminhos:

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

    Todas as imagens aparecem na conversa e podem ser referenciadas coletivamente.
  </Tab>
</Tabs>

<Tip>
  **Dicas:**

  * Formatos suportados: PNG, JPG, JPEG, WebP, GIF, BMP
  * As imagens permanecem no contexto da conversa para discussões em múltiplos turnos
  * Você pode referenciar imagens enviadas em perguntas de acompanhamento
  * Imagens com qualidade nítida produzem melhores resultados de análise
</Tip>

***

## Gerando código a partir de mockups de design [#gerando-código-a-partir-de-mockups-de-design]

Suponha que você tenha um mockup de design e queira que o Verdent gere o código de implementação.

<Steps>
  <Step title="Envie o mockup de design">
    Copie a imagem do mockup (de uma exportação do Figma, ferramenta de design ou esboço feito à mão) ou referencie-a por caminho de arquivo.
  </Step>

  <Step title="Solicite a geração de código">
    ```
    Generate React components to implement this dashboard design
    ```

    O Verdent analisa a estrutura visual.
  </Step>

  <Step title="O Verdent cria a estrutura de componentes">
    O Verdent identifica os elementos visuais e gera:

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

    Os componentes correspondem à estrutura do mockup.
  </Step>

  <Step title="Gere o CSS correspondente">
    ```
    Generate Tailwind CSS classes to match the mockup styling
    ```

    O Verdent adiciona estilização com base no design visual:

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

    O Verdent ajusta para corresponder ao design com mais precisão.
  </Step>
</Steps>

<Tip>
  **Dicas:**

  * Mockups com resolução mais alta produzem código mais preciso
  * Especifique seu framework: React, Vue, Angular, HTML/CSS puro
  * Mencione a abordagem de estilização: Tailwind, CSS Modules, Styled Components
  * Forneça códigos de cores ou detalhes do design system para maior precisão
  * Esboços feitos à mão também funcionam para protótipos rápidos
</Tip>

***

## Depurando erros com capturas de tela [#depurando-erros-com-capturas-de-tela]

Suponha que você encontre uma mensagem de erro e queira ajuda para entendê-la.

<Tabs>
  <Tab title="Erro no console do navegador">
    Cole uma captura de tela do console do navegador mostrando o erro:

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

    O Verdent lê:

    * O texto da mensagem de erro
    * Informações do stack trace
    * Nomes de arquivos e números de linha
    * Avisos relacionados do console

    O Verdent fornece o diagnóstico:

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

    O Verdent sugere a correção.
  </Tab>

  <Tab title="Erro no terminal">
    Cole uma captura de tela de erros de compilação no terminal:

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

    O Verdent analisa:

    * Erros de tipo
    * Caminhos de arquivos
    * Códigos de erro
    * Contexto de compilação

    O Verdent explica:

    ```
    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="Exceção em tempo de execução">
    Cole uma captura de tela do stack trace dos logs do aplicativo:

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

    O Verdent examina:

    * Tipo de exceção
    * Stack trace
    * Nomes de métodos e números de linha
    * Mensagens de log contextuais

    Identifica a causa raiz e sugere correções.
  </Tab>

  <Tab title="Erro de rede">
    Cole uma captura de tela da aba Network do DevTools do navegador:

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

    O Verdent analisa:

    * O código de status HTTP
    * Cabeçalhos de requisição/resposta
    * Payload da requisição
    * Corpo da resposta

    Diagnostica o problema de API.
  </Tab>
</Tabs>

<Tip>
  **Dicas:**

  * Inclua as mensagens de erro completas (não corte detalhes importantes)
  * Mostre os stack traces por completo quando possível
  * Inclua o contexto ao redor (outras mensagens do console, requisições de rede)
  * Faça uma captura de tela do erro real, não apenas o descreva em texto
</Tip>

***

## Perguntas frequentes [#perguntas-frequentes]

<Accordion title="Quais limites de tamanho de arquivo de imagem se aplicam?">
  **Tamanho máximo de arquivo:** 5MB (comprimido automaticamente se exceder; erro se ainda for >5MB após a compressão)

  **Resolução máxima:** 2000×2000 pixels

  **Formatos suportados:** PNG, JPG, JPEG, GIF, BMP, WebP

  **Boa prática:** Use imagens com menos de 3MB e resoluções de até 2000×2000 para desempenho ideal e análise precisa.
</Accordion>

<Accordion title="O Verdent consegue analisar várias imagens em uma única conversa?">
  Sim. Você pode colar várias imagens em sequência ou referenciar vários caminhos de arquivo em um único prompt. O Verdent mantém o contexto de todas as imagens para comparação e análise. Exemplo: "Compare estes três mockups e identifique as diferenças."
</Accordion>

<Accordion title="O Verdent envia minhas imagens para servidores externos?">
  Imagens coladas pela área de transferência ou referenciadas por caminho de arquivo são processadas dentro da sua sessão de conversa. As imagens não são armazenadas permanentemente e são apagadas quando você inicia uma nova conversa. As referências por caminho de arquivo leem a imagem localmente, sem fazer upload.
</Accordion>

<Accordion title="O Verdent consegue gerar código pronto para produção a partir de mockups?">
  O Verdent gera código inicial funcional que implementa a estrutura visual, o layout e a estilização do seu mockup. Normalmente, você precisará refiná-lo adicionando lógica de negócio, integração de dados, recursos de acessibilidade, tratamento de erros e otimizações para produção.
</Accordion>

<Accordion title="E se o Verdent interpretar mal meu mockup de design?">
  Forneça feedback corretivo de forma iterativa. Diga "O cabeçalho deve ser azul, não cinza" ou "Esses cards devem ficar em uma grade de 3 colunas, não 4." O Verdent ajustará a implementação com base nas suas correções. Várias rodadas de refinamento são normais.
</Accordion>

***

## Veja também [#veja-também]

<CardGroup cols="2">
  <Card title="Escrevendo código novo" icon="code" href="/docs/verdent-for-vscode/task-based-guides/writing-code">
    Criando novos recursos e componentes com o Verdent
  </Card>

  <Card title="Entendendo código" icon="book-open" href="/docs/verdent-for-vscode/task-based-guides/understanding-code">
    Fluxos de trabalho de compreensão e exploração de código
  </Card>
</CardGroup>