vision

name

vision

description

Transforms visual inputs (screenshots, UI mockups, architecture diagrams, whiteboard photos, PDFs) into code, documentation, or structured data using Gemini 2.5 Pro's multimodal capabilities. Activate when the user shares an image file and asks to "convert this mockup to code", "generate a component from this screenshot", "what does this diagram show", "extract this architecture", or "turn this whiteboard into code".

Gemini Bridge: Vision

Transform visual inputs into code, documentation, or structured data using Gemini 2.5 Pro's multimodal capabilities.

Supported Inputs

Format	Typical use case
PNG / JPG / WEBP	UI screenshots, mockups, whiteboard photos
GIF	Animated UI flows
PDF	Architecture documents, specifications, diagrams

Workflow

1. Confirm the image path

Verify the file exists and is readable:

ls -lh <image_path>

If the user has not provided a path, ask for it before proceeding.

2. Verify the bridge

gemini_status()

3. Analyse the image

gemini_analyze_image(
    image_path=<absolute_or_relative_path>,
    question=<task_description>
)

Craft the question to be as specific as possible. Examples:

• "Generate a React TypeScript component matching this UI mockup exactly. Include all visible states and props."
• "Convert this UML class diagram to a Python dataclass hierarchy."
• "Extract the algorithm described on this whiteboard and implement it in Python with type hints."
• "Identify all UI components visible in this screenshot and list their props and interactions."

4. Refine with Claude

Use Gemini's output as a scaffold. Claude then:

• Fills in implementation details Gemini left as stubs
• Adapts the output to the project's existing patterns and conventions
• Validates correctness and runs any available tests

Always attribute the initial analysis:

**Initial analysis by Gemini 2.5 Pro**
[Gemini's output]

**Refined implementation**
[Claude's refined version]

Common Use Cases

Input	Output
UI mockup	React / Vue component with props
Architecture diagram	PlantUML / Mermaid diagram source
Whiteboard algorithm	Implemented function with tests
Legacy screenshot	Migration planning document
PDF specification	Structured data model or IaC template