design-ruler

Use when you have a design image (an AI-generated concept render, a screenshot, or a mockup) and want to reproduce it as clean, hand-editable code with real assets, and you need the overall plan before picking a tool. The entry point that orients the whole image-to-code restore mode and routes you to the right sub-skill for each stage. Triggers include "还原设计图", "把设计图变成代码", restore a design image to HTML, image2 concept to editable webpage, design-to-code with real icons and photos.

Use after design-restore has produced editable HTML for a design image, when you need to fill its placeholder image slots with real assets — fetch icons as ready-made SVGs from Iconify (by recognizing what each icon is) and crop real photos/backgrounds out of the design image. Does NOT redraw or trace anything.

Use when restoring/reconstructing a design image (concept art, screenshot, mockup, Figma export) into a clean, modular, HAND-EDITABLE HTML page. Produces Open-Design-editable HTML and verifies visual fidelity against the target image with the design-ruler CLI, iterating until the render matches.