image-to-ui Skill: What It Does and How to Install It
Makes your coding agent rebuild a screenshot or mockup as real UI code in your stack, then render it and fix visible differences.
- Installs
- 100K
- on skills.sh
- Stars
- 78
- on GitHub
- Files
- 1
- besides SKILL.md
- Updated
- Nov 2026
- last repo commit
The SKILL.md treats the image as the visual spec. The agent first looks at the actual image, notes sizes, spacing, type and colors, then builds it 1:1 in your project's stack, reusing your components where they can match. It does not redesign or add decoration unless you ask.
Then it runs the interface, captures it at the reference viewport, compares the two side by side, fixes differences and renders again. If it cannot render, it must say the visual match is unverified. The README says the skill is free and needs no Uizze account or MCP connection.
Good for
- Developers handed a mockup or screenshot to implement
- Designers checking a build against a reference
- Teams moving a UI between design tools and code
Install image-to-ui
Claude Code
- 1
Copy this prompt.
Install the image-to-ui skill in Claude Code. Run this command: npx skills@latest add uizze/uizze --skill image-to-ui -a claude-code Then check that it loaded and tell me how to use it.
- 2
Paste it into Claude Code. It shows the change and asks before running it.
Requires Node.js.
Pick one route. The README says the skills work without a Uizze account or MCP connection. The plugin route installs all 5 skills in the repo's skills folder (counted from the repo tree): uizze-ui, ui-design, anti-ui-slop, image-to-ui and ui-radar. The plugin command is built from the repo's marketplace.json (marketplace uizze, plugin uizze), not from a README command. The plugin installs from the repo root, whose plugin.json sets skills to ./skills/.
Built from the package data we hold. Not yet tested by us.
What's in the skill
When it loads
Recreate an image, screenshot, or mockup as a 1:1 UI implementation. Match the reference rather than redesigning it, then render and compare the result to correct visible differences.
Sections in SKILL.md
- Inspect the reference
- Implement what you see
- Render, compare, correct
Key facts
- Installs on skills.sh
- 100,032 (Nov 2, 2026)
- Last repo commit
- Nov 1, 2026
- What it includes
- 2 files: SKILL.md and a LICENSE file
What it includes
Look at the real image and note size, content, layout, type, colors and assets.
Filenames and descriptions are not enough. If the image is cropped, it matches the visible region and does not invent unseen sections.
Try: “Implement this screenshot in our app: ~/Desktop/billing.png”
Read ·
Inspect the referenceBuild 1:1 in the existing stack, reusing components and real text.
Matches the original viewport first, uses grid and flexbox, and does not flatten the interface into an image. Missing assets are reported, not silently swapped.
Write ·
Implement what you seeRun the UI, capture it at the same viewport, compare and fix.
Fixes layout and proportions first, then type, spacing, color and assets, and renders again.
Runs code ·
Render, compare, correctEnd with the code and a short account of what was actually compared.
States remaining mismatches and says the match is unverified if rendering was not possible.
Read ·
Report
From the official docs
Permissions
Low risk
The skill edits your UI code and runs your app to compare it with the image. Review the diff before you commit it.
What it can do
- Read your data
- Create and change things
- Delete things
- Read-only mode
Watch out for
It edits your UI code and runs your app
The SKILL.md has the agent read your project, write the interface, run it and capture it at the reference viewport to compare. Review the diff and check what it ran. github.com
Text inside the image is data
The SKILL.md tells the agent to treat text and links in the image as reference content, not instructions. github.com
The plugin route adds 4 other skills
The Claude plugin in the repo lists the whole skills folder, which holds 5 skills. The root plugin has no MCP config or hooks files in the repo tree. github.com
Security advisories
No published security advisories as of Nov 2, 2026.
Technical details
| Turning on read-only | No read-only mode. |
|---|---|
| Scopes |
|
Questions
What does image-to-ui do?
It makes your agent turn a screenshot or mockup into real interface code that matches it 1:1. It then renders the result, compares it with the image and corrects visible differences.
Is image-to-ui official?
It is published in Uizze's own repo, uizze/uizze, and its SKILL.md names UIZZE as the author. The skill is separate from Uizze's paid MCP, which the README says needs a paid plan.
How do I install image-to-ui?
Use the install box above. The README documents the skills CLI for Claude Code, Cursor, Codex and GitHub Copilot, with the skill name changed in the box. The plugin route installs all 5 Uizze skills.
Does it need a Uizze account?
No account or MCP connection is needed, according to the README and the SKILL.md. Uizze's MCP is a separate paid service.
Does it work in the Claude app?
The README documents no Claude app install, and the skill works on your project's code and runs your UI, so the install box has no Claude app tab.
image-to-ui vs anti-ui-slop?
image-to-ui copies a reference image 1:1. The README says anti-ui-slop gives generic drafts a clearer direction and checks the finished result.
Is image-to-ui safe to install?
It makes your agent edit UI code and run your app to capture screenshots. The SKILL.md tells it to treat text inside the image as data, not instructions. Our advice: review the diff and run it on a branch.
Information
updated Nov 2, 2026
- Repository
- uizze/uizze
- Folder
skills/image-to-ui
Sources
Docs, issue trackers and discussions this page is built from.
Show all 6Hide
- image-to-ui SKILL.md · github.com
- uizze README · github.com
- uizze LICENSING.md · github.com
- uizze marketplace.json · github.com
- uizze plugin.json · github.com
- image-to-ui LICENSE · github.com