Working with Images

Verdent for VS Code includes powerful multimodal capabilities, allowing you to upload images and receive visual analysis, code generation from mockups, debugging with screenshots, and more. This guide demonstrates practical workflows for leveraging image understanding in your development process.

Uploading Images to Verdent

Suppose you want to share an image with Verdent for analysis or reference.

Quick clipboard method:

Copy an image to your clipboard (screenshot, copied from browser, etc.)
Click in the Verdent input field
Ctrl+V (Windows/Linux) to paste

Important: On macOS, use Ctrl+V (not Cmd+V) to paste images.

The image appears in the conversation.

Reference images by path:

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

Verdent reads the image from the specified path.

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

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

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

Common formats: PNG, JPG, JPEG, WebP, GIF

Work with multiple images:

Paste multiple images from clipboard in sequence
Or reference multiple paths:

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

All images appear in the conversation and can be referenced collectively.

Tips:

Supported formats: PNG, JPG, JPEG, WebP, GIF, BMP
Images remain in conversation context for multi-turn discussions
You can reference uploaded images in follow-up questions
Clear image quality produces better analysis results

Generating Code from Design Mockups

Suppose you have a design mockup and want Verdent to generate the implementation code.

Upload the design mockup

Copy the mockup image (from Figma export, design tool, or hand-drawn sketch) or reference it by file path.

Request code generation

Generate React components to implement this dashboard design

Verdent analyzes the visual structure.

Verdent creates component structure

Verdent identifies visual elements and generates:

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

Components match the mockup structure.

Generate corresponding CSS

Generate Tailwind CSS classes to match the mockup styling

Verdent adds styling based on the visual design:

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

Refine details

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

Verdent adjusts to match the design more precisely.

Tips:

Higher resolution mockups produce more accurate code
Specify your framework: React, Vue, Angular, vanilla HTML/CSS
Mention styling approach: Tailwind, CSS Modules, Styled Components
Provide color codes or design system details for precision
Hand-drawn sketches work too for quick prototypes

Debugging Errors with Screenshots

Suppose you encounter an error message and want help understanding it.

Paste a screenshot of the browser console showing the error:

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

Verdent reads:

Error message text
Stack trace information
File names and line numbers
Related console warnings

Verdent provides diagnosis:

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 suggests the fix.

Paste a screenshot of terminal compilation errors:

My TypeScript build is failing with these errors

Verdent analyzes:

Type errors
File paths
Error codes
Compilation context

Verdent explains:

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

Paste a screenshot of the stack trace from application logs:

The application crashed with this exception

Verdent examines:

Exception type
Stack trace
Method names and line numbers
Contextual log messages

Identifies the root cause and suggests fixes.

Paste a screenshot of the Browser DevTools Network tab:

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

Verdent analyzes:

HTTP status code
Request/response headers
Request payload
Response body

Diagnoses the API issue.

Tips:

Include full error messages (don't crop important details)
Show stack traces completely when possible
Include surrounding context (other console messages, network requests)
Screenshot the actual error, not just describe it in text

Frequently Asked Questions

What image file size limits apply?

Maximum file size: 5MB (automatically compressed if exceeded; error if still >5MB after compression)

Maximum resolution: 2000×2000 pixels

Supported formats: PNG, JPG, JPEG, GIF, BMP, WebP

Best practice: Use images under 3MB with resolutions up to 2000×2000 for optimal performance and accurate analysis.

Can Verdent analyze multiple images in a single conversation?

Yes. You can paste multiple images sequentially or reference multiple file paths in one prompt. Verdent maintains context across all images for comparison and analysis. Example: "Compare these three mockups and identify the differences."

Does Verdent upload my images to external servers?

Images pasted via clipboard or referenced by file path are processed within your conversation session. Images are not permanently stored and are cleared when you start a new conversation. File path references read the image locally without uploading.

Can Verdent generate production-ready code from mockups?

Verdent generates functional starter code that implements the visual structure, layout, and styling from your mockup. You'll typically need to refine by adding business logic, data integration, accessibility features, error handling, and production optimizations.

What if Verdent misinterprets my design mockup?

Provide corrective feedback iteratively. Say "The header should be blue, not gray" or "Those cards should be in a 3-column grid, not 4-column." Verdent will adjust the implementation based on your corrections. Multiple refinement rounds are normal.

Working with Images

Uploading Images to Verdent

Generating Code from Design Mockups

Upload the design mockup

Request code generation

Verdent creates component structure

Generate corresponding CSS

Refine details

Debugging Errors with Screenshots

Frequently Asked Questions

See Also

Writing New Code

Understanding Code

On this page