---
title: Trabajar con imágenes
description: Subir y trabajar con imágenes en Verdent
---

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.

<Tabs>
  <Tab title="Copiar y pegar">
    Método rápido con el portapapeles:

    1. Copia una imagen al portapapeles (captura de pantalla, copiada desde el navegador, etc.)
    2. Selecciona el campo de entrada de Verdent
    3. 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.
  </Tab>

  <Tab title="Referencia por ruta de archivo">
    Referencia imágenes por su ruta:

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

    Verdent lee la imagen desde la ruta especificada.

    <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 comunes: PNG, JPG, JPEG, WebP, GIF
  </Tab>

  <Tab title="Varias imágenes">
    Trabaja con varias imágenes:

    1. Pega varias imágenes del portapapeles en secuencia
    2. 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.
  </Tab>
</Tabs>

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

***

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

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

  <Step title="Solicita la generación de código">
    ```
    Generate React components to implement this dashboard design
    ```

    Verdent analiza la estructura visual.
  </Step>

  <Step title="Verdent crea la estructura de componentes">
    Verdent identifica los elementos visuales y 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>
      );
    }
    ```

    Los componentes coinciden con la estructura de la maqueta.
  </Step>

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

    Verdent agrega estilos según el diseño 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="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.
  </Step>
</Steps>

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

***

## Depurar errores con capturas de pantalla

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

<Tabs>
  <Tab title="Error de la consola del navegador">
    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.
  </Tab>

  <Tab title="Error de terminal">
    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).
    ```
  </Tab>

  <Tab title="Excepción en tiempo de ejecución">
    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.
  </Tab>

  <Tab title="Error de red">
    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.
  </Tab>
</Tabs>

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

***

## Preguntas frecuentes

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

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

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

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

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

***

## Consulta también

<CardGroup cols={2}>
  <Card title="Escribir código nuevo" icon="code" href="/docs/verdent-for-vscode/task-based-guides/writing-code">
    Crear nuevas características y componentes con Verdent
  </Card>

  <Card title="Comprender el código" icon="book-open" href="/docs/verdent-for-vscode/task-based-guides/understanding-code">
    Flujos de trabajo de comprensión y exploración de código
  </Card>
</CardGroup>