UI Vision MCP

AI-powered UI screenshot analysis for opencode

Quick Setup

curl -sSL http://btw.ui.vision.mcp.tache-lik.tn/setup | bash

Tools

?
vs_analyze
What's on this screen?
Breaks down a UI screenshot into its structure, components, colors, spacing, typography, and layout hierarchy. Tells you exactly what you're looking at.
image *
</>
vs_generate_code
Screenshot to code
Converts any UI screenshot into production-ready code. Pass the framework you want — React Native, Flutter, Swift, Kotlin, HTML/CSS, Vue, React, Svelte, Jetpack Compose, or anything else.
image * framework *
{}
vs_tokens
Extract design tokens
Extracts the complete design system from a screenshot — colors, fonts, sizes, spacing, border radius, shadows — all as structured JSON you can use directly in code.
image *
<>
vs_compare
Diff two designs
Compares two screenshots side by side and lists every difference — layout shifts, color changes, spacing adjustments, missing elements, and which version is better.
imageA * imageB *
a
vs_a11y
Accessibility audit
Reviews your UI for accessibility issues — color contrast, touch targets, text readability, visual hierarchy, missing labels, WCAG compliance, and how to fix each problem.
image *