skills.rest
Mjlike123
Mjlike123COMMUNITY
Explore all skills by this author →
GitHub

yueban-image-to-code

Convert UI screenshots into 750px pixel-faithful code with transparent PNG asset extraction.

Updated Aug 13, 2026
Search Tags:#pixel-perfect#image-to-code#design handoff#transparent background#ui restoration#png slicing#750px
One-click install
npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill yueban-image-to-code-mjlike123
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: yueban-image-to-code
Source: https://github.com/Mjlike123/ui-prototype-workbench/tree/main/.agents/skills/yueban-image-to-code
Command: npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill yueban-image-to-code-mjlike123

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Pillow, numpy, and includes scripts (resource) and references (resource) components.

What problem does it solve? Rebuilding a UI screenshot or design export as code often drifts from the original: layouts get auto-reflowed, icons get swapped for lookalike libraries, and sliced assets come out cropped or with opaque backgrounds. This Skill enforces a strict 1:1 pixel-level restoration workflow on a fixed 750px canvas so the rendered page matches the source image exactly. ## Core Features & Use Cases - 750px Proportional Normalization: Scales the entire source image to an exact 750px-wide artboard with one global scale factor applied to coordinates, sizes, radii, shadows, and typography. - Manifest-Driven Slicing: Builds a layers.manifest.json recording every layer's source bbox, scaled bbox, type, and z-index, then exports independent transparent PNG assets from the source image without auto-trimming. - Layered Acceptance Checks: Validates vector, text, and bitmap/icon layers separately, with scripts for bbox preview, PNG edge/transparency auditing, and full-page image diffing against the reference. - Use Case: Given a mobile app screenshot, produce HTML/CSS that reproduces it pixel-for-pixel at 750px width, with every icon, avatar, and illustration exported as an individual transparent PNG cut from the original image. ## Quick Start Use $yueban-image-to-code to convert the currently selected UI image into code and export precise transparent PNG slice assets.

Frequently Asked Questions about yueban-image-to-code

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a UI screenshot into pixel-accurate HTML/CSS code?▼

Normalize the source image to a 750px-wide artboard using one global scale factor, record every layer in a layers.manifest.json with measured bounding boxes, then implement code using those exact coordinates. Verify by screenshotting the result and overlaying it against the normalized reference image.

How to export transparent PNG slices from a design screenshot?▼

Measure each element's full bounding box on the source image, preview the boxes with preview_bboxes.py, then export with extract_png_asset.py using exact bbox coordinates. The script never auto-trims, and optional floodfill background removal preserves the fixed canvas size.

Why do my sliced PNG icons look cropped or have white backgrounds?▼

Cropping happens when the bbox only covers the visible subject instead of the full element frame including shadows and padding. White backgrounds occur when background removal is skipped; run audit_png_assets.py with --require-transparent-bg to detect edge-touching pixels and missing alpha channels.

Can I use icon libraries instead of extracting assets from the source image?▼

No, substituting similar icon libraries, AI-generated images, or CSS redraws for original bitmaps is treated as a failure. Every icon, avatar, and illustration must be extracted as an independent transparent PNG from the current source image to guarantee visual fidelity.

What Python dependencies are needed for the slicing scripts?▼

The scripts require Pillow for image loading, cropping, and drawing, plus numpy for pixel-level alpha and difference analysis in the audit and comparison tools. Both are standard packages installable via pip.

Related Skills

Explore More Design & Creative Skills→
AIDotNetAIDotNet
634

product-design-ideate

Generate three image-based UI design concept variations from a confirmed design brief.

Official
Advanced
SemineChenSemineChen
102

yueban-image-to-code

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

Community
Advanced
devingobledevingoble

verify-email-snapshots

Snapshot test MJML email templates against approved HTML baselines.

Community
Intermediate
Dragoon0xDragoon0x
4

sync

Export code-defined design tokens to a Tokens Studio-compatible figma.tokens.json file.

Community
Intermediate