Skip to main content
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.
  • Copy and Paste
  • File Path Reference
  • Multiple Images
Quick clipboard method:
  1. Copy an image to your clipboard (screenshot, copied from browser, etc.)
  2. Click in the Verdent input field
  3. Ctrl+V (Windows/Linux) to paste
Important: On macOS, use Ctrl+V (not Cmd+V) to paste images.The image appears in the conversation.
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.
1

Upload the design mockup

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

Request code generation

Generate React components to implement this dashboard design
Verdent analyzes the visual structure.
3

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

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

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.
  • Browser Console Error
  • Terminal Error
  • Runtime Exception
  • Network Error
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.
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

Maximum file size: 5MB (automatically compressed if exceeded; error if still >5MB after compression)Maximum resolution: 2000×2000 pixelsSupported formats: PNG, JPG, JPEG, GIF, BMP, WebPBest practice: Use images under 3MB with resolutions up to 2000×2000 for optimal performance and accurate analysis.
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.”
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.
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.
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.

​
See Also

Writing New Code

Creating new features and components with Verdent

Understanding Code

Code comprehension and exploration workflows