Ever tried a skeleton generator only to realize the UI doesn’t align once it’s loaded? Yeah, same here. It’s frustrating and not great for UI/UX. 😬
That’s why I built a simple tool to solve this:
🚀 The Problem: Generating skeletons that are a perfect 1:1 match with your UI layout is tough and tedious.
✨ The Solution: My tool uses a screenshot of your UI and leverages OpenCV’s contour API to detect shapes.
🖼️ You upload a screenshot.
🧠 It auto-generates the widths, heights, and positions of elements.
🖌️ Outputs Material-UI (MUI) skeletons, complete with preview functionality.
It’s still an early MVP, but it’s already saving me tons of time when generating skeletons.
🎯 Next Steps: Adding more frameworks and refining shape detection.
Would love feedback or ideas to make it even better! 🚀
Try it out here:
<a href="https://marius-adam.github.io/skeleton-generator/" target="_blank" rel="noopener nofollow">https://marius-adam.github.io/skeleton-generator/</a>

The official daily.dev web development community. Led by thought leaders and webdev experts. Join the Squad!

WebDev

A developer shares their experience building a skeleton generator that aligns perfectly with UI layouts by using screenshots and OpenCV's contour API. The tool auto-generates the dimensions and positions of UI elements and outputs Material-UI skeletons with a preview feature. It aims to save time and improve accuracy in creating skeleton layouts.

How I Built a Skeleton Generator from Screenshots 🦴

Interesting idea, it would be better if the user can use the marker and mark more area that the the site doesn’t capture

Looks like a great initial idea, I’ll keep any eye on it for future updates! Great work :)

now the try out demo won’t load, itself seems went into forever skeleton xD