# Image To Code

Implement a selected image, screenshot, mockup, generated concept, or design frame as a...

- Repository: https://github.com/XiaomiMiMo/MiMo-Code (13741 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add XiaomiMiMo/MiMo-Code --skill image-to-code -g -a claude-code -y`
Codex: `npx skills add XiaomiMiMo/MiMo-Code --skill image-to-code -g -a codex -y`
Cursor: `npx skills add XiaomiMiMo/MiMo-Code --skill image-to-code -g -a cursor -y`
Gemini CLI: `npx skills add XiaomiMiMo/MiMo-Code --skill image-to-code -g -a gemini-cli -y`

## Description

Implement a selected image, screenshot, mockup, generated concept, or design frame as a faithful, responsive, interactive frontend in the target codebase.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Image to Code

Translate a selected visual target into a high-quality frontend. Read `../index/SKILL.md`, `../../references/critical-overrides.md`, and the relevant saved context from `../user-context/SKILL.md` before building.

## Preconditions

- Require an unambiguous selected image, screenshot, mockup, generated result, or design frame. A written brief alone is not a visual target; route to ideation first when appropriate.
- Resolve which image is selected before editing. Ask when an ordinal or attachment is ambiguous.
- Use only the current task's relevant product context, tokens, components, assets, and references.

## Workflow

The rest: https://github.com/XiaomiMiMo/MiMo-Code/blob/HEAD/packages/cli/src/skill/builtin/.bundle/product-design/workflows/image-to-code/SKILL.md