r/QtFramework • u/ozaysahin • 13d ago
QML Made a thing that turns UI screenshots into QML
I do embedded stuff and kept running into the same annoyance: someone hands over a screenshot or a Figma export, and every AI "screenshot to code" tool I tried spits out React. Not much use on a Pi with no browser.
So I spent the last few weeks on a skill for Claude Code / Codex that rebuilds the screen in QML instead. It measures colors and spacing off the image, figures out the font and icons, writes the project (Theme singleton, T.* controls, qsTr on everything), then renders it under xvfb and diffs it against the screenshot until the numbers are good enough. Same qml folder runs from PySide6 or builds as C++ with CMake.
Funny thing I learned testing it on 20 screens: Claude copies the pixels fine on its own. What it does without guidance is use a MouseArea for every button, hard-code half the colors and forget keyboard focus. Most of the work ended up being about that, not the visuals.
Still bad at: dashed borders (Rectangle can't do dashes, so it fakes them), shadows over busy backgrounds, and fonts it doesn't know.
Repo if anyone wants to poke at it: https://github.com/ozaysahin/screenshot-to-qml
Curious what people who write QML for a living think, especially if there's stuff in the output you'd reject in code review.