The Problem
Turning a wireframe or sketch into a functioning app feels like the kind of task that should take 10 minutes but somehow ends up taking half your day. You’ve got to mess with design tools, write boilerplate code, and pray your API keys are configured properly. For developers who want to skip the repetitive parts and get straight to building, this repo is trying to close that gap.
What This Does
napkins.dev takes a screenshot or wireframe and turns it into an app. That’s not marketing fluff—it literally uses Meta’s Llama 4 vision model and Together AI for inference to analyze your design and spit out functional code. The entry point for the magic is app/api/generateCode/route.ts, which handles the code generation.
On the front end, it’s a Next.js app styled with Tailwind. The bulk of the UI components live in components/ui/—like button.tsx, select.tsx, and tooltip.tsx. The generated code can be viewed in a sandbox powered by Sandpack (components/code-viewer.tsx). It even uploads your images to an S3 bucket (app/api/s3-upload/route.ts) so you don’t have to worry about local storage or setup.
The repo’s structure is clean but opinionated. The lib/shadcn-docs/ folder is packed with reusable UI components like card.tsx and checkbox.tsx, which are based on the Shadcn library. The next.config.mjs file handles build settings, and tailwind.config.ts takes care of your styling system.
Real-World Use
Let’s say you’re prototyping a new app and want to skip the boring part—writing layouts and boilerplate code. You sketch out the UI, take a screenshot, upload it to your local instance of Napkins, and voila: the repo spits out functional React/Next.js code, complete with Tailwind styles.
For example, you could use the code viewer (components/code-viewer.tsx) to tweak the generated app directly or edit prompts to refine the result. Want to store your screenshots? Configure your S3 bucket using the .env file and let the backend (app/api/s3-upload/route.ts) handle the heavy lifting.
The Bottom Line
This repo is clever and does what it promises. It’s perfect for hackathons, prototypes, or anyone who’s allergic to writing boilerplate. That said, it’s not production-ready—there’s no guarantee the generated app won’t require heavy cleanup. If you’re building something serious, you’ll want to treat this as a starting point, not a magic bullet. But for quick-and-dirty projects? It’s worth checking out.