New side project: generating a wireframe from any website

These lasts weeks, I’ve been working a new project I wanted to share. I’m building a browser extension that generates a wireframe from any web page.

It started with a personal need: I wanted a quick sketch of a web app I was using. I needed something between the basic wireframe with only the layout, and something close to a screenshot with content and colors. Since it’s about extracting it from existing web pages, I was convinced a tool existed to do the job. But I couldn’t find it.

The closest I found was Wirify, a very nice tool generating simple black and white wireframes. But I was looking for more polished wireframes that also keep the colors and the general designs of the pages.

So I decided to build it.

Concretely, this page:

Hunter homepage screnshot

Becomes:

Hunter homepage wireframe

The parsing of simple web pages like Hunter’s homepage is precise, but I get also quite promising results on more complex pages.

Amazon website wireframe Amazon homepage (amazon.com)

To be honest, I have a rather vague idea of the use cases for now. I’m following an intuition and am also very excited about the technical challenge. I’ll continue to talk to people working in design, product and marketing teams to adapt the product depending on the needs.

The core of the tool is almost ready, but everything else remains (interface, landing page, name, etc.). I hope to launch it on Betalist and Product Hunt very soon!

I share what I learn on Facebook