seminechen/yueban-image-to-code

This repository is a skill for Codex, the OpenAI command-line coding tool, that converts mobile UI screenshots or design images into working HTML, CSS, and JavaScript code. The README is written in Chinese. The stated goal is pixel-accurate reproduction of the original image at a fixed canvas width of 750 pixels, which is a standard width used for mobile UI design in Chinese app development. The workflow starts by reading the source image and calculating a scale factor so that everything fits the 750-pixel-wide canvas. It then creates a manifest file that records the position, size, type, and layer order of every element found in the image. Using that manifest, it exports individual pieces of the image, such as avatars, icons, and illustrations, as separate transparent PNG files. Finally, it generates code that places each element at the exact position from the manifest. Several rules are enforced throughout. The original image is treated as the only visual reference, and the tool is not permitted to substitute similar icons, stock illustrations, or AI-generated placeholders. Text must remain editable rather than being baked into images. Simple shapes like buttons, cards, and dividers are implemented as CSS rather than exported as images. Auto-trimming and smart cropping of exported assets are explicitly disabled. Four Python scripts are included to support the workflow: one previews the bounding boxes on the source image before any cutting happens, one exports individual PNG assets by exact coordinates, one audits the exported PNGs to verify transparency and sizing, and one compares the final rendered screenshot against the original 750px reference image to detect drift. Installation involves placing the directory into Codex's skills folder and then invoking the skill by name from within a Codex session.