talent-factory/vision

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 |