Skip to content
mcp/skillhub

Agent Skill

Image To UI skill

image-to-uiuizze/uizzeskills/image-to-ui/SKILL.md

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.

65MIT

always on

43 tokname + description

once used

563 tokSKILL.md body

bundled files

11 KB

installs

60kskills.sh

Install the Image To UI skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/uizze/uizze --skill image-to-ui

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/uizze/uizze.git /tmp/uizze
mkdir -p ~/.claude/skills
cp -R /tmp/uizze/skills/image-to-ui ~/.claude/skills/image-to-ui

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description43 tok
When the agent uses itThe SKILL.md instructions563 tok
Only if opened1 bundled files (1 KB)varies

Until it is used, image-to-ui costs about 32× less than the median MCP server we measured (1,362 tokens on every turn). Installing all 12 skills from uizze/uizze would load 1,205 tokens of descriptions. Skills vs MCP study

Checks

Our checks found nothing to flag: it follows the Agent Skills specification's naming and size guidelines and doesn't pipe downloads into a shell.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Image to UI by Uizze
  • Inspect the reference
  • Implement what you see
  • Render, compare, correct

More skills from uizze/uizze

All skills in this repo
  1. uizze-uiuizze/uizze

    The official Uizze skill for building and improving UI/UX. Work with your project's code and assets, and use uizze.com for real app examples, design systems, licensed fonts, icons and interaction resources.

    134k49 tok idle · 972 in use
  2. anti-ui-slopuizze/uizze

    Stop coding agents from shipping generic UI. Use UIZZE's 800,000+ real web and iOS screens to build product-specific interfaces, define a design contract, cover required states, and run a hard finish gate. Use when designing, implementing, redesigning, critiquing, or pre-ship reviewing a web or iOS interface in Codex, Claude Code, Cursor, Copilot, or another coding agent. Trigger with "anti-ui-slop", "stop UI slop", "ground this UI in real screens", or "run the UI finish gate".

    65122 tok idle · 883 in use
  3. ui-designuizze/uizze

    Design, build, or improve web and mobile interfaces using real product examples from UIZZE’s 800,000+ web and iOS screens. Use for UI design, UX design, frontend or web design, mobile app UI, responsive layouts, design systems, redesigns, visual polish, interface critique, and requests like “make this UI better.”

    6574 tok idle · 644 in use
  4. ui-radaruizze/uizze

    Find and compare real UI examples from UIZZE’s 800,000+ web and iOS screens. Use for UI inspiration, UI research, design references, comparable apps, user flows, layouts, navigation, components, interaction states, and product patterns before designing or redesigning an interface.

    6563 tok idle · 959 in use