image-to-ui-skill

Convert screenshots, references, or descriptions into editable interactive frontend code with Codex.

335|27|Updated Apr 25, 2026
One-click install
npx skills add https://github.com/zhu-guli326/image2_UI --skill image-to-ui-skill-zhu-guli326
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: image-to-ui-skill
Source: https://github.com/zhu-guli326/image2_UI
Command: npx skills add https://github.com/zhu-guli326/image2_UI --skill image-to-ui-skill-zhu-guli326

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Turning a UI screenshot or product idea into working frontend code normally requires manual decomposition, asset creation, and repeated visual comparison. This Skill automates that pipeline by routing every request into one of three workflows (recreate, redesign, create), generating bitmap assets through configured image channels, and verifying rendered output against the source of truth. ## Core Features & Use Cases - Three workflow modes: Recreate faithfully rebuilds a screenshot against the original reference; Redesign and Create generate an Effect Image first, then implement and verify against it. - Durable runtime with resume: The image2-ui CLI runs, inspects, and resumes executions with persisted state, bounded verify/fix loops, and optional multi-agent DAG scheduling for review, accessibility, and QA. - Asset and icon discipline: Code owns text, controls, and icons from approved libraries, while the image2 wrapper generates photos, cutouts, and illustrations with provenance records and UI-glyph exclusion rules. - Use Case: Provide a mobile app screenshot and ask for a clickable recreation; the Skill decomposes the layout, implements real code-rendered controls, generates needed imagery, and runs image2-ui validate against the reference until findings are resolved. ## Quick Start Ask the assistant to recreate the attached UI screenshot as a clickable, editable frontend and verify it against the original reference.

Frequently Asked Questions about image-to-ui-skill

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

FAQPage Schema
How do I convert a UI screenshot to code with this Skill?

Use the recreate workflow by running image2-ui run with --mode recreate and --reference pointing to your screenshot. The original reference becomes the source of truth for decomposition, implementation, and visual verification, with no Effect Image generated by default.

What is the difference between recreate, redesign, and create modes?

Recreate faithfully replicates a provided reference. Redesign keeps a reference's visual language but generates a new Effect Image before implementation. Create builds a new UI from a text description, also through an Effect Image. Redesign must be selected explicitly.

Does the Skill require an image generation channel?

Redesign and Create require an image2 channel for the Effect Image and bitmap assets, via IMAGE2_COMMAND, a project image2 command, or the bundled imagegen CLI fallback. Recreate can proceed without one if no new bitmap assets are needed.

Can I resume an interrupted UI generation run?

Yes. The runtime persists state and event logs under .image2-ui/runs/<run-id>/, so image2-ui resume --latest continues interrupted work, and image2-ui inspect reports current status. Blocked runs exit with a distinct code.

When should I not use this Skill?

Do not use it for standalone image generation, design critique without implementation, or ordinary frontend work with no UI-design intent. It is scoped to producing openable, clickable, editable interfaces from references or descriptions.