Trabalhando com imagens
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.
Método rápido pela área de transferência:
- Copie uma imagem para a área de transferência (captura de tela, copiada do navegador, etc.)
- Clique no campo de entrada do Verdent
- Ctrl+V (Windows/Linux) para colar
Importante: No macOS, use Ctrl+V (não Cmd+V) para colar imagens.
A imagem aparece na conversa.
Referencie imagens por caminho:
Analyze this screenshot: /path/to/screenshot.pngO Verdent lê a imagem do caminho especificado.
/home/user/screenshots/error.png
/Users/john/Desktop/mockups/design.png./screenshots/error.png
./mockups/design.png../images/diagram.png
../../assets/logo.pngFormatos comuns: PNG, JPG, JPEG, WebP, GIF
Trabalhe com várias imagens:
- Cole várias imagens da área de transferência em sequência
- Ou referencie vários caminhos:
Compare these three mockups: design-v1.png, design-v2.png, design-v3.pngTodas as imagens aparecem na conversa e podem ser referenciadas coletivamente.
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
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.
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.
Solicite a geração de código
Generate React components to implement this dashboard designO Verdent analisa a estrutura visual.
O Verdent cria a estrutura de componentes
O Verdent identifica os elementos visuais e gera:
// 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.
Gere o CSS correspondente
Generate Tailwind CSS classes to match the mockup stylingO Verdent adiciona estilização com base no design visual:
<div className="grid grid-cols-3 gap-6 p-6">
<StatCard className="bg-white rounded-lg shadow-md p-4" ... />
</div>Refine os detalhes
The spacing between stat cards should be larger, and add the blue accent color from the mockupO Verdent ajusta para corresponder ao design com mais precisão.
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
Depurando erros com capturas de tela
Suponha que você encontre uma mensagem de erro e queira ajuda para entendê-la.
Cole uma captura de tela de erros de compilação no terminal:
My TypeScript build is failing with these errorsO 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).Cole uma captura de tela do stack trace dos logs do aplicativo:
The application crashed with this exceptionO 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.
Cole uma captura de tela da aba Network do DevTools do navegador:
This API request is failing, here's the network tabO 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.
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
Perguntas frequentes
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.
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."
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.
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.
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.