design2code: a Next.js app that turns design screenshots into HTML, CSS and JS

The gap design2code fills between a mockup and a first commit

Handing a designer's screenshot to a front-end developer is a slow loop. Someone opens the image, guesses at spacing, writes markup, and then re-checks it against the picture. design2code compresses that loop into one upload. The README describes the input as sketches, wireframes, Figma or XD exports, and any other web design format that can be flattened into an image. The output is described as clean and responsive HTML, CSS and JavaScript.

The audience is narrow and specific. It suits a developer who already has a screenshot and wants a starting point rather than a finished page. It also suits someone evaluating vision-to-code as a category, because the repository is small enough to read end to end. It is not a Figma plugin. The README lists Figma among the formats it accepts, but what the app receives is an image, so any layer names, component structure or design tokens in the original file are gone before the model sees anything. That distinction matters more than the marketing sentence suggests.

How the Next.js app, the OpenAI client and CodeMirror fit together

The repository layout makes the data flow fairly clear. There is a src/ directory, a public/ directory, and configuration files for Next.js, Tailwind, PostCSS, ESLint and TypeScript. The README points at app/api/code/route.ts as the place where the server-side request lives, which tells you the architecture is a Next.js route handler rather than a separate backend.

On the client side, package.json lists react-dropzone for accepting the uploaded image and CodeMirror packages for displaying the generated code: @codemirror/lang-html, @codemirror/view, @codemirror/state and thememirror for the editor theme. The UI layer is Radix primitives plus Tailwind, with lucide-react for icons and react-hot-toast for notifications. @tanstack/react-query handles the request state around the API call.

On the server side, the openai package and the ai package are both present. The image goes up to the route handler, the handler calls an OpenAI vision-capable model, and the returned text is streamed or returned to the client for display in the editor. zod is in the dependency list, which suggests request or response validation somewhere in that path, though the README does not document a schema. The whole app is a thin wrapper around a model call, and that is the honest description of it: the interesting engineering is in the prompt and the editor, not in a novel inference pipeline.

Installing design2code locally and generating your first component

The README does not give a step-by-step local install. It gives a one-click Vercel deploy button and points at the hosted demo, so the fastest path is the hosted app. For a local run, the repository is a standard Next.js project with a pnpm lockfile, and package.json defines the four scripts you would expect.

Install dependencies and start the dev server:

pnpm install
pnpm dev

Next.js serves on port 3000 by default. The README does not list a custom port, so unless you override it, open http://localhost:3000.

Before any generation will work you need an OpenAI credential, because the API route calls OpenAI. The README does not name the environment variable, but the openai package and the route handler in app/api/code/route.ts are the two places to look for the exact key name your build expects. Set it in a local env file rather than committing it.

Once the app is running, the flow is an upload and a wait. Drop a PNG or JPG of a page design into the dropzone, submit, and the generated markup appears in the CodeMirror panel where you can copy it. Expect the first render to need manual adjustment: the model is producing a plausible page, not a pixel-accurate one, and the README makes no accuracy claim you can rely on.

The 10-second function ceiling and other places design2code breaks

The most concrete limitation is documented in the README itself. If you deploy on the Vercel hobby plan, you are told to update the maxDuration in app/api/code/route.ts to 10 seconds. That is a hard ceiling on how long the model call may take. A large screenshot, a slow model response, or a retry inside the handler will exceed it, and the request fails rather than degrading. On a paid Vercel plan the ceiling is higher, but the constraint is structural: the generation happens inside a serverless function whose lifetime you do not control.

A second limitation is the input format. Everything is flattened to an image. A Figma file's constraints, auto-layout rules and reusable components do not survive that flattening, so the generated HTML cannot mirror the source structure. You get a reconstruction from pixels.

Third, there is no offline path. The openai dependency is not optional, and the README does not describe a local model option. If your designs cannot leave your network, this project as written is the wrong tool, regardless of how good the output is.

Fourth, the repository has no published releases. The README's contribution section invites pull requests, and the last push to main was on 2026-07-01. There is no changelog to read before upgrading, which raises the cost of tracking the project over time.

design2code versus screenshot-to-code and other vision-to-code tools

The closest point of comparison is the screenshot-to-code family of tools, which take the same input (an image of a UI) and produce front-end code. The practical difference is scope and stack. design2code is a Next.js application with a single route handler doing the model call, a Radix and Tailwind interface, and CodeMirror for the output. That makes it easy to read and easy to fork if you already work in Next.js.

Tools built around a Python backend and a separate front-end server give you a different trade-off: more moving parts, but also a place to swap models or add post-processing without touching the UI code. If your plan is to experiment with prompts and model choices, a project with a dedicated generation service is easier to iterate on than a route handler that also serves the page.

There is also the category of design-tool plugins that read a Figma document directly. Those preserve structure and naming, which design2code cannot, because it only ever sees a rendered image. If your source of truth is a Figma file rather than a screenshot, a plugin that reads the file is a better fit and design2code is the wrong layer of the stack.

Maintenance, upgrade cost and what the MIT licence lets you do

The last push to the main branch was on 2026-07-01, and the repository is not archived. There are no retrieved releases, so versioning is effectively the branch itself. Upgrading means pulling main and reading the diff, because there is no changelog and no tagged version to pin against.

The dependency list is the real upgrade surface. Next.js is pinned at 16.1.5, React at 18, the openai package at ^4.19.1, and the ai package at ^5.0.52. Those two AI packages sit on different major versions, which is worth checking before you bump either one, since the route handler in app/api/code/route.ts is where they meet. Tailwind, Radix and CodeMirror move independently and are unlikely to break the generation path, but they will break the editor UI if you upgrade them carelessly.

The licence is MIT. That permits commercial use, modification and redistribution, provided the copyright notice and permission notice are included. It offers no patent grant and no warranty, and it says nothing about the OpenAI terms that govern the model calls your instance makes. Those are two separate agreements, and the MIT licence on the code does not cover the API usage.

Editorial conclusion

Adopt design2code if you want a small, readable Next.js codebase you can deploy yourself and point at your own OpenAI key, and if your inputs are clean screenshots rather than dense production UIs. Skip it if you need an offline converter, a self-contained model, or a tool that understands a Figma file's layer structure instead of a flat image. Before committing, verify two things in the repository: the maxDuration value in app/api/code/route.ts against your hosting plan, and whether the OpenAI model identifier referenced in the API route is one your account can call.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. mostafasadeghi97/design2code on GitHub
4. Project website
5. README