skills.rest
SemineChenSemineChenCommunity·1 Agent Skills Included

yueban-image-to-code

Pixel-perfect UI screenshot to code with transparent PNG slicing

Converts UI screenshots and design images into pixel-accurate HTML/CSS code locked to a 750px canvas. Extracts icons, avatars, and illustrations as transparent PNG assets with verified bounding boxes and alpha channels. Eliminates guesswork, layout drift, and cropped assets through manifest-driven coordinates and automated image comparison audits.
102|17
↗
npx skills add SemineChen/yueban-image-to-code --all -g -y

All Skills in This Repository (1)

Pure Emerald Level Indicators
📦 In Repo
SemineChenSemineChen

yueban-image-to-code

Convert UI images into 750px pixel-accurate code and transparent PNG cut assets.

Community
Advanced

Frequently Asked Questions

FAQPage Schema
How to install yueban-image-to-code?▼

Run `npx skills add SemineChen/yueban-image-to-code --all -g -y` in your terminal to install this skill globally.

How to convert a UI screenshot into code?▼

Select your UI image and invoke the skill; it scales the design to a 750px canvas, records every layer in a manifest, and rebuilds the layout with exact coordinates, colors, and fonts.

How to export transparent PNG assets from a design?▼

The skill measures each element's bounding box, previews it for accuracy, then exports icons, avatars, and illustrations as transparent PNGs without trimming or edge clipping.

Does it work with Codex and other coding agents?▼

Yes. It follows the standard SKILL.md format and runs in Codex, Claude Code, Cursor, and other compatible coding environments.

How is the final page verified against the original design?▼

Built-in scripts audit PNG transparency and dimensions, then compare the rendered 750px screenshot against the source image to catch any offset, missing, or cropped elements.

Related Repositories in Software Engineering

View All in Software Engineering→
openclawopenclaw
388.4k

openclaw

Run a personal AI assistant across your devices and chat apps

Official📦 120 Skills
obraobra
280.0k

superpowers

Gives coding agents a disciplined workflow from idea to merged code

Community📦 15 Skills
facebookfacebook
248.4k

react

AI agent skills for building, testing, and porting React core

Official📦 14 Skills