---
title: Trabalhando com imagens
description: 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

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

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

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

<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

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