Yueban Image to Code skill
yueban-image-to-code
A Codex skill that rebuilds a mobile UI screenshot as code on a 750px artboard and cuts transparent PNGs.
- 128 ★ on the repository
- Last commit
Minimal access
Why this level
- The skill runs local Python scripts over your images and writes files into the project.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/yueban-image-to-codeDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill runs local Python scripts over your images and writes files into the project.
This is third-party code. Review the repository files before installing.
What it does
Yueban Image to Code reproduces a chosen UI image or design screenshot as HTML, CSS and JS on a 750px artboard. The scale is `750 / source width`, and layout and spacing are not improved: the source image is the only authority. The agent keeps a `layers.manifest.json` file with boxes, types and layer order, previews the cut regions, exports transparent PNGs for avatars, icons and illustrations, keeps text editable and builds simple shapes in CSS. Four Python scripts check the result: `preview_bboxes.py`, `extract_png_asset.py`, `audit_png_assets.py` and `compare_images.py`.
Who it is for. Front-end developers and layout engineers handed a PNG mock of a mobile screen who need an exact port with cut assets.
Good fit when
- A mobile page mock exists only as an image, with no Figma source.
- Icons and illustrations are cut with a transparent background instead of picked from a library.
- Finished markup is compared with the mock by overlaying the original.
- On-screen text must stay live rather than rasterised.
Not a fit when
- You need responsive markup, while the skill pins a 750px artboard and forbids re-layout.
- The mock should be improved, but the skill rules forbid changing spacing and swapping assets for similar ones.
- The source lives in Figma, where a Figma MCP is a better fit.
Example request
Use `$yueban-image-to-code` to turn the selected UI screenshot into code and export transparent PNGs for the icons.Limitations
The skill runs in Codex as `$yueban-image-to-code`, with settings in `agents/openai.yaml`. The artboard is always 750px, and the approach targets mobile screens. Cut regions are confirmed from a box preview before export, and auto-trim is banned. Python is needed for the check scripts. The skill invents nothing: if an asset is absent from the source image it is not replaced by a library icon or a generated picture. The repository states no licence, and the README is in Chinese.
How to disable. Delete the `~/.codex/skills/yueban-image-to-code` folder. Pages and PNGs already created in projects remain.
FAQ
Where does the skill go?
Put the folder in `~/.codex/skills/yueban-image-to-code`, then call `$yueban-image-to-code`.
What does a layer manifest entry hold?
An identifier, a type (`bitmap` or `text`), boxes in source and scaled coordinates, `z_index` and the asset path.
How do I check cut PNGs?
`audit_png_assets.py` with `--require-transparent-bg` checks transparency, edge contact and sizes.
How do I compare the result with the mock?
Run `compare_images.py reference-750.png render-750.png --json` and review the overlay.
What does the skill do with text?
Keeps it as an editable layer rather than part of a raster image. Simple shapes are built in CSS.
Discussion
No questions or reviews yet.
Related
SkillsA skill and CLI that turn a screenshot or a written idea into an editable interface, with code and separate image assets.
design-to-code: a website from a design image
design-to-code
A skill that turns a screenshot, mockup, Figma frame or live page into a responsive site and checks it against the design
A skill that designs UI and landing page mockups and rebuilds screenshots as HTML, a React project or a WeChat mini program
imagegen-skills teaches an agent to make design images: website comps, app screens, brand boards and a site from them
A design engine skill for local agents: mockups, prototypes, landing pages, dashboards and slides as self-contained HTML right in your editor
A Codex skill: three distinct visual concepts, screenshot review and cutting excess, so interfaces look less templated.
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Yueban Image to Code (this card) | no | 128 | ||
| Figma To Code MCP: from Figma layout to code | no | API key | 7 | gives the agent a Figma design through MCP; Yueban works from a raster image and cuts assets |
| Image to Editable PPT | no | 3,339 | rebuilds slides from images into editable PowerPoint; Yueban builds mobile UI code |
README in short
The README sets principles: the source is untouchable, one scale for all elements, assets come only from the current image. It lists eight workflow steps and acceptance criteria.