Sketch2Code
Sketch2Code is an open-source project from Microsoft AI Lab (2018) that turns hand-drawn webpage wireframes into HTML code using object detection. It recognizes labels, text fields, paragraphs, images, and buttons, and is free to use and self-deploy.
Human verified · · Submit a correction
Good for developers who want to turn paper sketches into an HTML skeleton early in ideation, and for teaching demos; not suitable for production-grade code, complex layouts, or modern framework output.
Verified facts
What is Sketch2Code
Sketch2Code is an open-source project from Microsoft AI Lab (2018) that turns hand-drawn webpage wireframes into HTML code using object detection. It recognizes labels, text fields, paragraphs, images, and buttons, and is free to use and self-deploy.
Key features of Sketch2Code
- Front-end developers sketching on paper and generating an initial HTML skeleton
- Product managers turning sketches into demoable prototypes without design software
- Teachers demonstrating the vision-to-code AI pipeline in class
- AI researchers studying sketch understanding and code generation from its open source
Good for
- Open source and free, with self-deployment and retraining possible
- An intuitive end-to-end hand-drawn-to-HTML pipeline, great for teaching
- Published by Microsoft AI Lab with a model trained on millions of images
Watch out
- An experimental 2018 project with a limited set of supported elements
- Generates only basic HTML skeletons, with no modern framework coverage
- Recognition accuracy depends heavily on sketch quality
How to use Sketch2Code
- Draw a webpage wireframe on paper with text, buttons, and image placeholders
- Open the Sketch2Code online service or deploy the open-source version yourself
- Upload a photo of the sketch and wait for element detection and layout inference
- Review the generated HTML page and check recognition accuracy
- Download the source and refine styling and logic in your editor
Who Sketch2Code is for
Difficulty: Intermediate
- Front-end developers sketching on paper and generating an initial HTML skeleton
- Product managers turning sketches into demoable prototypes without design software
- Teachers demonstrating the vision-to-code AI pipeline in class
- AI researchers studying sketch understanding and code generation from its open source
FAQ
Is Sketch2Code a paid tool?
No. It is an open-source project from Microsoft AI Lab; the code is public, free to use, and can be self-deployed and modified.
Which sketch elements can it recognize?
It supports basic web visual elements including labels, text fields, text paragraphs, images, and buttons.
How does Sketch2Code relate to GPT-4's sketch-to-webpage demo?
GPT-4's official demo included a similar sketch-to-webpage segment, suggesting Microsoft likely iterated on the technology in collaboration with OpenAI.
Sources and verification
Sources: sketch2code.azurewebsites.net (opens in a new tab)
Verified: · Submit a correction →
Alternatives to Sketch2Code
All in this category
Amp
Built for developers on larger teams needing cross-codebase refactoring, test generation and documentation; overkill for users wanting simple autocomplete or cost-sensitive solo devs.
Ghostwriter
Best for people already building on Replit or learning to code in the browser; not suitable for developers whose workflow lives in local editors or other IDEs and who need AI help outside the Replit ecosystem.
Codex
Best for professional developers and engineering teams that want to delegate development, refactoring, and ops work to an AI agent; not for non-programmers or users who only need simple code completion.
JamGPT
Best for development teams and engineers drowning in bug reports who want to cut diagnosis and fix time; not for non-technical users who just want plain-language explanations of errors.