yuzhworkhard-wq/image-to-code

This repository is a skill for Codex, an AI coding tool, that handles turning a UI image or design export into working front-end code. The core idea is that you hand the skill a screenshot or exported design file, and it produces HTML and CSS that recreates the visual layout, along with high-resolution image assets cut out of the original design. The workflow is built around a measurement system using 750 pixels as a fixed reference width. This baseline is not the final page width but a consistent coordinate grid used for measuring, positioning, and checking quality. Once the code is built at this 750-pixel reference size, an outer wrapper scales the whole layout proportionally to fit the actual screen width, which is typically a phone screen in the 320 to 430 pixel range. The skill does not reflow individual elements, it scales the entire artboard as a unit. For each design layer, the skill generates a manifest file called layers.manifest.json that records the position, size, z-order, and asset path of every element. Text and simple shapes are implemented in code directly. Icons, illustrations, avatars, and complex decorative elements are cut out of the source image as separate transparent PNG files at two, three, or four times the display density so they stay sharp on high-resolution screens. The repository includes Python scripts for extracting PNG assets from a source image with background removal, auditing those assets for correct transparency and edge quality, and previewing bounding boxes before cutting. After code and quality checks are done, the skill can also produce an output intended for import into Figma, reconstructing the layout as editable Figma layers rather than a flat image. The README is written in both Chinese and English. The Python scripts depend on Pillow and NumPy. Installation means copying the directory into the Codex skills folder and installing those two dependencies.