Trabajar con imágenes

Verdent for VS Code incluye potentes capacidades multimodales que te permiten subir imágenes y recibir análisis visual, generación de código a partir de maquetas, depuración con capturas de pantalla y mucho más. Esta guía muestra flujos de trabajo prácticos para aprovechar la comprensión de imágenes en tu proceso de desarrollo.

Subir imágenes a Verdent

Supón que quieres compartir una imagen con Verdent para análisis o referencia.

Método rápido con el portapapeles:

Copia una imagen al portapapeles (captura de pantalla, copiada desde el navegador, etc.)
Selecciona el campo de entrada de Verdent
Presiona Ctrl+V (Windows/Linux) para pegar

Importante: En macOS, usa Ctrl+V (no Cmd+V) para pegar imágenes.

La imagen aparece en la conversación.

Referencia imágenes por su ruta:

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

Verdent lee la imagen desde la ruta especificada.

/home/user/screenshots/error.png
/Users/john/Desktop/mockups/design.png

./screenshots/error.png
./mockups/design.png

../images/diagram.png
../../assets/logo.png

Formatos comunes: PNG, JPG, JPEG, WebP, GIF

Trabaja con varias imágenes:

Pega varias imágenes del portapapeles en secuencia
O referencia varias rutas:

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

Todas las imágenes aparecen en la conversación y pueden referenciarse de forma conjunta.

Consejos:

Formatos compatibles: PNG, JPG, JPEG, WebP, GIF, BMP
Las imágenes permanecen en el contexto de la conversación para discusiones de varios turnos
Puedes referenciar imágenes subidas en preguntas posteriores
Una calidad de imagen clara produce mejores resultados de análisis

Generar código a partir de maquetas de diseño

Supón que tienes una maqueta de diseño y quieres que Verdent genere el código de implementación.

Sube la maqueta de diseño

Copia la imagen de la maqueta (desde una exportación de Figma, una herramienta de diseño o un boceto hecho a mano) o referénciala por la ruta del archivo.

Solicita la generación de código

Generate React components to implement this dashboard design

Verdent analiza la estructura visual.

Verdent crea la estructura de componentes

Verdent identifica los elementos visuales y 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>
  );
}

Los componentes coinciden con la estructura de la maqueta.

Genera el CSS correspondiente

Generate Tailwind CSS classes to match the mockup styling

Verdent agrega estilos según el diseño visual:

<div className="grid grid-cols-3 gap-6 p-6">
  <StatCard className="bg-white rounded-lg shadow-md p-4" ... />
</div>

Refina los detalles

The spacing between stat cards should be larger, and add the blue accent color from the mockup

Verdent ajusta el resultado para que coincida con el diseño de forma más precisa.

Consejos:

Las maquetas de mayor resolución producen código más preciso
Especifica tu framework: React, Vue, Angular, HTML/CSS puro
Menciona el enfoque de estilos: Tailwind, CSS Modules, Styled Components
Proporciona códigos de color o detalles del sistema de diseño para mayor precisión
Los bocetos hechos a mano también funcionan para prototipos rápidos

Depurar errores con capturas de pantalla

Supón que encuentras un mensaje de error y quieres ayuda para entenderlo.

Pega una captura de pantalla de la consola del navegador que muestre el error:

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

Verdent lee:

El texto del mensaje de error
La información del stack trace
Los nombres de archivo y los números de línea
Las advertencias de consola relacionadas

Verdent ofrece un 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.

Verdent sugiere la solución.

Pega una captura de pantalla de los errores de compilación de la terminal:

My TypeScript build is failing with these errors

Verdent analiza:

Errores de tipo
Rutas de archivo
Códigos de error
El contexto de compilación

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

Pega una captura de pantalla del stack trace de los registros de la aplicación:

The application crashed with this exception

Verdent examina:

El tipo de excepción
El stack trace
Los nombres de métodos y los números de línea
Los mensajes de registro contextuales

Identifica la causa raíz y sugiere soluciones.

Pega una captura de pantalla de la pestaña Network de las DevTools del navegador:

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

Verdent analiza:

El código de estado HTTP
Los encabezados de la solicitud y la respuesta
El payload de la solicitud
El cuerpo de la respuesta

Diagnostica el problema de API.

Consejos:

Incluye los mensajes de error completos (no recortes detalles importantes)
Muestra los stack traces completos cuando sea posible
Incluye el contexto circundante (otros mensajes de consola, solicitudes de red)
Captura el error real, no solo lo describas en texto

Preguntas frecuentes

¿Qué límites de tamaño de archivo de imagen se aplican?

Tamaño máximo de archivo: 5MB (se comprime automáticamente si se supera; se produce un error si sigue siendo mayor a 5MB después de la compresión)

Resolución máxima: 2000×2000 píxeles

Formatos compatibles: PNG, JPG, JPEG, GIF, BMP, WebP

Buena práctica: Usa imágenes menores a 3MB con resoluciones de hasta 2000×2000 para obtener un rendimiento óptimo y un análisis preciso.

¿Puede Verdent analizar varias imágenes en una sola conversación?

Sí. Puedes pegar varias imágenes de forma secuencial o referenciar varias rutas de archivo en un mismo prompt. Verdent mantiene el contexto entre todas las imágenes para comparar y analizar. Ejemplo: "Compara estas tres maquetas e identifica las diferencias".

¿Verdent sube mis imágenes a servidores externos?

Las imágenes pegadas desde el portapapeles o referenciadas por ruta de archivo se procesan dentro de tu sesión de conversación. Las imágenes no se almacenan de forma permanente y se eliminan cuando inicias una nueva conversación. Las referencias por ruta de archivo leen la imagen localmente sin subirla.

¿Puede Verdent generar código listo para producción a partir de maquetas?

Verdent genera código inicial funcional que implementa la estructura visual, el diseño y los estilos de tu maqueta. Por lo general, deberás refinarlo agregando lógica de negocio, integración de datos, características de accesibilidad, manejo de errores y optimizaciones para producción.

¿Qué pasa si Verdent interpreta mal mi maqueta de diseño?

Proporciona comentarios correctivos de forma iterativa. Di "El encabezado debería ser azul, no gris" o "Esas tarjetas deberían estar en una cuadrícula de 3 columnas, no de 4". Verdent ajustará la implementación según tus correcciones. Es normal realizar varias rondas de refinamiento.

Trabajar con imágenes

Subir imágenes a Verdent

Generar código a partir de maquetas de diseño

Sube la maqueta de diseño

Solicita la generación de código

Verdent crea la estructura de componentes

Genera el CSS correspondiente

Refina los detalles

Depurar errores con capturas de pantalla

Preguntas frecuentes

Consulta también

Escribir código nuevo

Comprender el código

On this page