The Problem

Designers and product teams often produce wireframes or screenshots but must hand them off to developers to build a working app. Translating a static mockup into a functional codebase is time‑consuming and error‑prone, especially for rapid prototyping.

What This Does

napkins.dev is a Next.js application that accepts a screenshot, runs it through the Llama 4 model (via Together.ai), and generates a minimal React/Next UI scaffold. The core generation logic lives in app/api/generateCode/route.ts, which calls the LLM and returns component code. UI primitives are provided by the lib/shadcn-docs/ folder (e.g., avatar.tsx, button.tsx, card.tsx, etc.) and wrapped by the components/ui/ collection. Styling is handled by Tailwind (tailwind.config.ts) and global CSS (app/globals.css). The repository also includes S3 upload support (app/api/s3‑upload/route.ts) for persisting generated images.

How It Is Wired

Execution begins with the Next.js App Router. The first server‑side request that triggers generation is the HTTP POST to /api/generateCode, implemented in app/api/generateCode/route.ts.

  1. Entry point – app/api/generateCode/route.ts reads the request payload, extracts the image URL, and calls the Llama 4 endpoint using the TOGETHER_API_KEY from .env.
  2. Code generation – The LLM response is parsed into a string of TypeScript/TSX code. The string is written to the response body and may be saved to S3 via the helper in app/api/s3-upload/route.ts.
  3. Component library – Generated code imports UI primitives from lib/shadcn-docs/*.tsx. The module lib/shadcn-docs/index.ts re‑exports all primitives and is the most connected internal module (imports 9 others, no incoming imports). This hub means any change to the index file ripples to every generated component.
  4. Rendering – The client‑side page app/page.tsx consumes the generated code, displaying it with the components/code-viewer.tsx component. This file contains deep nesting (max indent depth 6) and duplicated logic that also appears in lib/shadcn-docs/select.tsx and components/ui/button.tsx.
  5. Styling & assets – Tailwind classes are applied throughout; static assets such as logos live in public/. No database or persistent state beyond the optional S3 bucket is used.

The call graph shows 25 analyzed modules, 9 import edges, and no circular dependencies, indicating a relatively flat dependency structure aside from the central lib/shadcn-docs/index.ts.

How To Use It

# Clone the exact repository
git clone https://github.com/moses-y/napkins
cd napkins

# Install dependencies (npm is the package manager)
npm install

# Provide required environment variables
# .env.example shows the needed keys
#   TOGETHER_API_KEY=your_together_ai_key
#   S3_ACCESS_KEY_ID=...
#   S3_SECRET_ACCESS_KEY=...
#   S3_BUCKET=...
cp .env.example .env
# edit .env to insert your values

# Run the development server
npm run dev

The server starts on http://localhost:3000. Use the UI to upload a screenshot; the backend will invoke the LLM and return a generated app view.

Real‑World Use

A product team can embed napkins.dev in an internal portal. When a designer uploads a new wireframe, the service instantly produces a runnable Next.js prototype that developers can clone, review, and iterate on, reducing hand‑off time from days to minutes.

Code Health & Issues

  • High – No test suite – 25 source files, zero test files.
  • High – No CI workflow – No .github/workflows or other CI config.
  • Medium – Dependabot missing – No dependabot.yml to keep dependencies patched.
  • Low – Convention files missing – No .editorconfig, .gitattributes, or formatter config.
  • High – Duplicated code blocks – Identical 6‑line fragments appear in app/page.tsx, lib/shadcn-docs/select.tsx, components/ui/button.tsx, etc.
  • High – Oversized file – lib/shadcn.ts contains 2,751 lines, creating a large blast radius for changes.
  • Medium – Deep nesting – app/page.tsx reaches six levels of indentation, making the control flow hard to follow.

All findings are derived from deterministic static analysis; no additional issues have been inferred.

The Bottom Line

napkins.dev delivers a functional prototype generator built on a clean Next.js + Tailwind stack, but the codebase suffers from poor modularization, missing automated testing/CI, and a lack of basic repo conventions. It is suitable for experimentation or as a starting point for internal tooling, provided the team is prepared to add tests, CI, and refactor the large utility files before production use.