ArchestackGitHub ↗ (opens in a new tab)

11st of 2 in Design to code

screenshot-to-code

Turns screenshots and mockups into Tailwind, React or Vue code

Live demo ↗ (opens in a new tab)Repository on GitHub ↗ (opens in a new tab)
Stars
80.2k
License
MIT
Last commit
Oct 2026

Overview

Takes a screenshot, mockup, Figma export or screen recording and generates HTML with Tailwind or CSS, React, Vue, Bootstrap or Ionic code using Gemini 3, GPT-5.5 or Claude Opus models, with Replicate for image generation and background removal. Runs as a React/Vite frontend on port 5173 and a FastAPI backend on 7001, or via docker-compose. For developers prototyping UIs from designs.

Who it is for: Developers prototyping UIs from designs

Strengths

  • Six output stacks including React, Vue, Bootstrap and Ionic with Tailwind
  • Video mode turns a screen recording into a working prototype (needs Gemini)
  • Optional headless Chromium lets the agent render and check its own output
  • docker-compose brings up frontend and backend with one env file

Weaknesses

  • Requires at least one OpenAI, Anthropic or Gemini API key; no bundled local model
  • Ollama models are possible but the README calls the results poor quality
  • Replicate key must be set in backend/.env, not in the UI
  • Docker setup has no hot reload; file changes need a rebuild

What it needs

  • no GPU
  • Compose
  • Needs OpenAI, Anthropic or Gemini API key, Replicate API key (optional), Playwright Chromium (optional preview)
  • Models: Gemini 3 Flash Preview, Gemini 3.1 Pro Preview, GPT-5.5, GPT-5.4 Mini, Claude Opus 4.6/4.8
  • port 5173

Head to head

Also in Design to code

See all 2
Also in Design to code
RankProjectScore
2OnlookVisual editor that edits Next.js and Tailwind apps with AI Live demo ↗ (opens in a new tab)26.9k stars, Apache-2.047 out of 100