AI can now recreate a website's code from just a screenshot

There can be no doubt that AI is changing web design, but we continue to be stunned by how fast it's happening. The latest jaw-dropping AI web design implementation to catch our attention is a tool designed to generate functional HTML and CSS from a screenshot. Yep, a screenshot.

In our own guide to AI web design tools, we've picked out several useful tools that can speed up the process of creating a website, from recommending optimisations to generating a whole website from a text prompt. Screenshot-to-Code approaches things from a different direction, converting an image to HTML/Tailwind CSS. And it's blowing people's minds.

See more

Shared on GitHub, Screenshot-to-Code uses GPT-4 Vision to generate the code and DALL-E 3 to generate similar-looking images. You can also paste in a URL to clone a live website. The resulting website won't be immediately usable since the AI can only create a first draft front end; it's not going to build the back-end database and APIs. It will also have made-up images initially.

Siqi Chen, the founder and CEO of Runway, shared a video of the tool in action on X, triggering quite some debate. Several people report that the tool remains a long way from being commercially ready, sometimes 'hallucinating' design elements. However, the potential that it demonstrates is provoking a mix of awe and fear.

Screenshot from GitHub of screenshot-to-code AI web design clone tool

An example shared on GitHub attempts to clone the design of the New York Times website (Image credit: Screenshot from GitHub)

The fear is mainly around two issues that often come up with advances in AI: jobs and fraud. Some are predicting that such tools could mean little future for front-end engineer jobs in few years. Meanwhile, others are concerned about the potential to easily copy the look of any website. One person has already dubbed it a 'Phishing Scam Creator Tool' on X.

Asked why not just take the HTML from the source webpage, one person pointed out that view source is often bloated with non native UI libraries and dependencies appended to the page and is difficult to parse if all you need is a template UI.

"We are going to see explosion of coding from all people who never code before," the AI entrepreneur Min Choi predicted, while others highlight use cases in converting notion templates in websites, converting web components and templates.

For more on AI developments, see our piece on how AI is changing web design. For AI image generation, see our pick of the best AI art generators.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Joseph Foley

Joe is a regular freelance journalist and editor at Creative Bloq. He writes news and features, updates buying guides and keeps track of the best equipment for creatives, from monitors to accessories and office supplies. A writer and translator, he also works as a project manager at London and Buenos Aires-based design, production and branding agency Hermana Creatives, where he manages a team of designers, photographers and video editors who specialise in producing photography, video content, graphic design and collaterals for the hospitality sector. He enjoys photography, particularly nature photography, wellness and he dances Argentine tango.