Design2Code

An open-source tool that converts a web design screenshot, sketch, wireframe, or Figma or XD export into clean, responsive HTML, CSS, and JavaScript, using GPT-4 vision.

Design tools

Visit website github.com

Design2Code converts a web design image, such as a sketch, wireframe, or an export from Figma or XD, into HTML, CSS, and JavaScript code. A user uploads a design image and the tool generates the corresponding markup and styling automatically, using GPT-4's vision capability to interpret the design.

It is built with Next.js and can be deployed as a hosted instance on Vercel with one click, and it is also offered as a custom GPT and as a hosted live demo for trying it without deploying anything.

It is released under the MIT license.

More in Design tools

See all 97

Wave
wave.subworkflow.ai
A browser-based tool for designing layered gradient wave backgrounds, with a colour wheel per layer, presets and shape or colour shuffling, exported as a looping MP4 or GIF.
- Design tools
SpikeUI
nimoxi.com
A visual, WYSIWYG UI designer that exports a design directly to HTML, CSS and JavaScript or to a native Windows application, sold as a one-time purchase with no subscription, and including a built-in AI assistant that can build components from a description.
- Desktop
- Design tools
Bastardica
bastardica.mitpit.com
A browser tool that mixes, stretches, and squishes two fonts together glyph by glyph, exporting the result as a downloadable TTF, OTF, or WOFF2 web font.
- Design tools

More in Design tools

Wave

SpikeUI

Bastardica

Cookies