Skip to content
Get packs

Image to Code

Turn a selected design image or mockup into a faithful, responsive frontend and verify it visually

Source Download skill
Repository
XiaomiMiMo/MiMo-Code
Stars
13,743
Licence
MIT
Files
2 files

What it does

When installed, the agent treats a chosen screenshot, mockup, or design frame as the target and builds a working web interface that closely matches it, including layout, spacing, colours, typography, and responsive behaviour. It works within an existing codebase's framework and conventions, runs the app, captures a rendered view, and compares it against the design, fixing mismatches before reporting back. It is meant to make the agent check its work visually rather than assume a build succeeded.

Great for

  • Designers who have a mockup or screenshot and want a quick, close frontend prototype
  • Front-end developers converting a design frame into components in an existing project
  • Teams that want a documented visual QA pass (design-qa.md) recorded alongside the code

Skip it if

  • Requests with only a written brief and no image: the skill requires a selected visual target, so it will not work from text alone
  • Projects needing real backend systems or live data: the skill says to avoid inventing backend systems, so output is front-end only
  • Publishing or deploying: the skill only publishes when the user asks and an authorised deployment tool is available, so it is not an automatic deploy tool

Try asking

  • “Build a responsive landing page from this mockup image I attached, matching my existing React app”
  • “Turn this phone app screenshot into a runnable HTML/CSS/JS prototype and check it at 390x844”
  • “Implement the selected design frame as a page, then run a visual comparison and tell me what still differs”
Step-by-step guide: how to use Image to CodeInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    image-to-code.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip image-to-code.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip image-to-code.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Attach one clearly selected image and name the target viewport (desktop or phone) to avoid ambiguity
  • Point the agent at an existing repository so it reuses your framework, tokens and components
  • Review design-qa.md and the rendered result yourself, since the skill's own verification is only as good as its captures

What's inside

  • agents/openai.yaml
  • SKILL.md

Redistributed unmodified from XiaomiMiMo/MiMo-Code under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.