skills.rest
yuzhworkhard-wqyuzhworkhard-wqCommunity·1 Agent Skills Included

image-to-code

Pixel-perfect UI screenshots to responsive code and PNG assets

Converts UI screenshots, design mockups, and Figma exports into pixel-accurate responsive HTML/CSS code. Extracts icons and illustrations as high-density transparent PNGs at 2x, 3x, or 4x resolution without cropping or white backgrounds. Eliminates manual measuring, blurry assets, and broken mobile layouts through a locked 750px baseline with automated QA audits. Optionally exports editable Figma layers with real text nodes, shapes, and image fills.
303|37
↗
npx skills add yuzhworkhard-wq/image-to-code --all -g -y

All Skills in This Repository (1)

Pure Emerald Level Indicators
📦 In Repo
yuzhworkhard-wqyuzhworkhard-wq

image-to-code

Convert UI images and screenshots into responsive HTML/CSS code and transparent PNG assets.

Community
Advanced

Frequently Asked Questions

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

Run `npx skills add yuzhworkhard-wq/image-to-code --all -g -y` in your terminal to install the skill globally. Then install the Python helper dependencies with `python3 -m pip install -r requirements.txt`.

How to convert a UI screenshot into code?▼

Select your UI image and ask your agent to use the image-to-code skill. It measures every element on a 750px baseline, builds a layer manifest, and generates responsive code that scales cleanly to mobile widths.

Does it export transparent PNG assets?▼

Yes. Icons, avatars, and illustrations are sliced from the source image as independent transparent PNGs at 2x, 3x, or 4x density, with automated audits to catch white backgrounds or cropped edges.

Can the output be imported into Figma?▼

Yes. After code and QA are complete, it generates an editable Figma layer spec or local importer with real text nodes, native shapes, and image fills instead of a flat screenshot.

Which coding agents work with image-to-code?▼

It follows the universal SKILL.md standard, so it runs in Codex, Claude Code, Cursor, and other compatible agents using plain-English requests.

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