XuToWei

XuToWei / Image-To-UI

Public

Image-to-UI Codex skill: convert game UI screenshots and sliced sprites into ui_structure.json.

19
1
80% credibility
Found May 28, 2026 at 19 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
Python
AI Summary

ImageToUI is a tool that transforms a visual UI design image into a structured blueprint file. You provide a design mockup and a folder of sliced graphics, and the tool generates a detailed JSON file describing the position, size, and layout of every element. It includes visual comparison tools so you can verify the results match your original design, and validation tools to catch any issues before you use the blueprint in your project.

How It Works

1
🎨 You have a design mockup

You've created a beautiful UI design in your favorite design tool and want to turn it into actual interface code.

2
🖼️ You prepare your sliced assets

You export the individual graphics from your design tool and organize them in a folder, ready to be used as building blocks.

3
✨ Your design becomes structured data

The tool reads your design image and sliced graphics, then automatically generates a detailed blueprint that describes where every element goes.

4
🔍 You review the results

You see a side-by-side view showing your original design next to the reconstructed version, so you can verify everything looks right.

5
Need to make adjustments?
📍
Check individual elements

Focus on one specific part of your design to see exactly how it lines up.

🗺️
See the big picture

View all elements labeled with numbers so you can quickly spot any major issues.

6
✅ Everything validates

The tool checks your blueprint for any missing pieces, broken references, or layout problems before you proceed.

🎉 Your UI blueprint is ready

You now have a clean, structured JSON file that describes your entire interface, ready to be used in your game or app.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 19 to 19 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is Image-To-UI?

Image-To-UI is a Codex skill that takes a game UI screenshot and a folder of sliced sprites, then generates a structured JSON file describing the layout. Think of it as reverse-engineering a design image into machine-readable coordinates and hierarchy. The Python pipeline handles asset inventory, validates the output structure, renders side-by-side comparisons for verification, and can even scale the JSON between different canvas resolutions. It supports nine-slice scaling, Unity sprite borders, and various alignment modes (row/column layouts with spacing options).

Why is it gaining traction?

The hook here is automation for game UI pipelines. Manually converting design mockups into code is tedious, and this tool promises to cut that work down to a Codex prompt. The visual comparison output lets you spot-check accuracy instantly, which is rare in this space. It also handles the messy details: duplicate asset detection, Unity meta file parsing, and coordinate grid overlays for manual inspection.

Who should use this?

Game developers working in Unity or similar engines who deal with frequent UI iterations. If you receive design mockups regularly and spend hours translating them into layout code, this could save significant time. It's also useful for tooling developers building automated UI pipelines. That said, the tool assumes you already use Codex or a compatible agent framework.

Verdict

At 19 stars with minimal documentation, this is early-stage and experimental. The credibility score of 0.8% reflects that reality. Worth watching if you work in game UI, but do not adopt for production without thorough testing. The concept is solid; the maturity is not there yet.

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.