← all repositories
mostafasadeghi97/design2code

Screenshot goes in, spaghetti HTML comes out

A GPT-4 Vision wrapper that turns design mockups into code, with all the tradeoffs you'd expect from asking an LLM to write CSS.

673 stars TypeScript Coding Assistants
design2code
Velocity · 7d
+0.7
★ / day
Trend
steady
star history

What it does Upload a screenshot, wireframe, or Figma export and get back HTML/CSS/JS. The project is a Next.js app that pipes your image to OpenAI’s vision model and returns generated code. There’s a hosted version at design2code.dev and a custom GPT if you prefer staying in ChatGPT.

The interesting bit The “ultimate” label in the README oversells it — this is fundamentally a thin wrapper around GPT-4 Vision with a web UI. The actual smarts are OpenAI’s; the value is in the plumbing (image upload, prompt engineering, code display). For hobby plan Vercel users, there’s a hard 10-second timeout on the API route that you’ll need to patch manually.

Key highlights

  • Supports sketches, wireframes, Figma, XD, and plain screenshots
  • One-click Vercel deploy for self-hosting
  • Also available as a custom GPT (no code required)
  • MIT licensed
  • 673 stars, TypeScript/Next.js stack

Caveats

  • The README is vague on accuracy, supported frameworks, or how it handles responsive breakpoints
  • No mention of pricing for OpenAI API calls, which could get expensive for iterative designs
  • The “clean and responsive” claim is aspirational; no benchmarks or comparison data provided

Verdict Worth a spin if you’re already paying for GPT-4 and want a faster loop than copy-pasting screenshots into ChatGPT. Skip it if you need production-grade design-to-code with predictable output — this is prototyping glue, not a compiler.

heatdrop uses Google Analytics to see which pages get read — nothing else. Your call. How we handle data.