Drop a screenshot. We downsample, pick quantized HEX swatches, scan horizontal luminance bands, and emit a header / main / footer scaffold with CSS variables. No vision model. No OCR. No button detection. Treat the output as a sketch, then write the real UI.
No image selected
Choose how aggressive the generated layout is — you can edit everything after copy.
Upload a screenshot to generate guidance.
<!-- Generate to see HTML -->
/* Generate to see CSS */
Use it to grab dimensions, a handful of quantized HEX swatches, a rough “how many horizontal bands” count, and a header/main/footer HTML+CSS scaffold with CSS variables.
Do not expect an AI coder, OCR, button detection, or pixel-perfect CSS. There is no model. Sampling is a downscaled canvas (long edge ~220px). Output is a sketch you rewrite against the real design system.
Draw the image to a canvas, quantize colors, split into horizontal luminance strips, pick a layout focus (mobile / neutral / desktop), emit analysis text plus semantic HTML and CSS.
Images are not persisted. Only the layout-focus preference may sit in localStorage (droidxp-stc-target).
A dashboard screenshot with a dark top bar and a light body often yields 2–3 suggested sections and a --stc-color-1 close to the bar.
The generated <header> will not contain your actual nav labels — we never read the pixels as text.
Image metadata viewer · App icon generator
No. Math on pixels. No server model.
No. Canvas in this tab.
No OCR. Type the copy yourself.
The browser rasterizes it for sampling. Prefer PNG for huge files.