Primary question: Does a Gemini-backed conversion of one of your real mockups beat your manual rebuild time, and is the generated Tailwind clean enough to keep?
RepoDaily adoption score
RepoDaily rates this as 89/100 (strong) for adoption: evidence, installation path, production risk, differentiation, license clarity, and AI/agent fit are scored from the article sources and adoption notes.
6 source(s) across 5 source category/categories, plus a RepoDaily-specific evidence module when available.
6 workflow step(s), 6 next-action step(s), and 9 command/install signal(s) were detected.
Trending momentum is +309 stars, with maintenance/release/issue signals counted when present.
Risk is marked medium, with 4 security note(s) and 4 explicit skip condition(s).
3 opportunity lens item(s), 4 alternative(s), and 4 type-specific section(s) support differentiation.
License source or license wording is present.
4 AI/agent-related signal(s) were detected in the article text and metadata.
Project overview
abi/screenshot-to-code does one job with unusual breadth: feed it a screenshot, a mockup, a Figma design, or a screen recording, and it returns working code. The README lists six target stacks — HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, and Ionic + Tailwind — which covers everything from marketing pages to mobile-flavored UI. The project is MIT-licensed (Copyright (c) 2023 Abi Raja) and ships as two deployable pieces: a React/Vite frontend and a FastAPI backend managed with Poetry. If that sounds like setup work, the maintainer also points to a hosted version at screenshottocode.com that needs no local install at all.
The engine is a matrix of frontier models rather than one model. Default variants named in the README include Gemini 3 Flash Preview and Gemini 3.1 Pro Preview (described as the best models), GPT-5.5 and GPT-5.4 Mini, Claude Opus 4.6 and Claude Opus 4.8, plus z-image-turbo via Replicate for image generation. Provider keys decide capability: GEMINI_API_KEY powers the Gemini variants, extracts the real logos and images out of your screenshot, and is required for video mode; REPLICATE_API_KEY enables image generation, background removal, and image editing — without it, the README states that edit_images and remove_backgrounds are unavailable. With all four keys set, the app automatically picks a stronger mix of models per variant; with one key, it stays inside that provider only.
The repo pulled 309 stars in this trend window at rank #17, and the reasons are visible in the README rather than in marketing copy: a model lineup current enough to name two Preview-labeled Gemini releases, an asset-extraction feature that reuses real brand assets instead of placeholders, a video mode that turns a recording of a site in action into a functional prototype, and a hosted entry point that makes the first conversion a thirty-second test. The trade-offs are equally concrete: you need at least one paid provider key, the local Ollama path is explicitly rated as poor-quality results, and the generated code is a starting draft, not a finished component.
Why it is trending now
- 309 stars in the trend window at rank #17 for a repo that has been MIT-licensed since 2023, with the hosted product at screenshottocode.com lowering the barrier to a first try.
- The default model lineup is current: Gemini 3 Flash Preview and Gemini 3.1 Pro Preview, GPT-5.5, GPT-5.4 Mini, Claude Opus 4.6 and 4.8, plus z-image-turbo on Replicate for image generation.
- Gemini variants extract real assets — the actual logos and images from your screenshot — instead of generic placeholders, which is the detail that usually sinks screenshot converters.
- Video mode: record a website in action and get back a functional prototype, with GEMINI_API_KEY listed as required.
- Six output stacks from one input surface: HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind.
- With all four provider keys set, the app automatically picks a stronger mix of models per variant, which turns the tool into a side-by-side model comparison for the same design.
Problem it solves
- Turning a finished design into a first component is slow manual work: measuring spacing, sampling colors, and retyping copy.
- Most converters lose real assets — brand logos come back as placeholder rectangles that someone still has to replace.
- A static mockup cannot show interactions, and a video of a flow cannot be clicked; neither communicates behavior.
- Comparing how different models convert the same design means wiring OpenAI, Anthropic, and Gemini APIs yourself.
- Designs arrive in different shapes — screenshots, Figma files, screen recordings — and most tools accept only one of them.
How it works
- Drop a screenshot, mockup, Figma design, or screen recording into the web UI (frontend served on port 5173 in the Docker setup).
- Pick a target stack: HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, or Ionic + Tailwind.
- The FastAPI backend (uvicorn on port 7001) calls your configured provider. With all four keys set, it picks a stronger mix of models per variant; with a single key, it uses that provider's models only.
- Gemini variants extract the real logos and images from the source screenshot; Replicate's z-image-turbo generates images and powers edit_images and remove_backgrounds when REPLICATE_API_KEY is set.
- A Playwright-installed Chromium is used by the screenshot preview tool, so you can compare the generated page against the original.
- For video, record a site in action and Gemini produces a functional prototype of the flow.
Six output stacks, one input surface
The stack list is broader than most design-to-code tools: HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, and Ionic + Tailwind. HTML + CSS covers teams that do not use Tailwind; Ionic + Tailwind targets mobile-flavored interfaces; React and Vue cover the two dominant component frameworks. The same screenshot can be regenerated against a different stack, which makes the tool useful for porting an existing page between frameworks rather than only for greenfield drafts.
The model matrix behind each conversion
- Gemini 3 Flash Preview and Gemini 3.1 Pro Preview are described in the README as the best models, and GEMINI_API_KEY is strongly recommended.
- GPT-5.5 and GPT-5.4 Mini unlock with OPENAI_API_KEY; the Claude variants (Opus and Sonnet lines, plus Fable per the key table) unlock with ANTHROPIC_API_KEY.
- z-image-turbo on Replicate handles image generation, background removal, and image editing.
- At least one of OpenAI, Anthropic, or Gemini is required; adding all four keys gives the best results and lets you compare multiple models per generation.
- An Ollama open-source-model path exists, but the README links to an issue #354 comment and explicitly notes it is not recommended due to poor-quality results.
Command surface: what you actually type
- Backend setup from the README: cd backend, then write .env with echo "OPENAI_API_KEY=sk-your-key" > .env and append ANTHROPIC_API_KEY, GEMINI_API_KEY, REPLICATE_API_KEY lines.
- Install Poetry first if missing: pip install --upgrade poetry, then poetry install inside backend/.
- Install the preview browser: poetry run playwright install chromium; on Linux use poetry run playwright install --with-deps chromium, which needs sudo/apt for system libraries.
- Activate the environment with poetry env activate (run the printed activation command), then start the API: poetry run uvicorn main:app --reload --port 7001.
- Root-level tests: pnpm run test chains test:frontend (pnpm -C frontend test) and test:backend (cd backend && poetry run pytest); the package manager is pinned to pnpm@10.32.1.
- OpenAI, Anthropic, and Gemini keys can be entered in the frontend settings dialog (gear icon after the app loads); Replicate must be configured on the backend side instead.
Integration surface: four keys, four capabilities
- OPENAI_API_KEY: GPT-5.5 and GPT-5.4 Mini code generation.
- ANTHROPIC_API_KEY: Claude code-gen variants.
- GEMINI_API_KEY (strongly recommended): Gemini 3 Flash and 3.1 Pro variants, real-asset extraction from the screenshot, and the only path to video mode.
- REPLICATE_API_KEY (strongly recommended): image generation, background removal, image editing — the README states edit_images and remove_backgrounds are unavailable without it.
- The frontend talks to the backend over a websocket-style hookup: if you change BACKEND_PORT, you must also change VITE_WS_BACKEND_URL in frontend/.env.local, per the docker-compose comments.
- More keys means the app automatically picks a stronger mix of models per variant; a single key restricts generation to that provider.
Deployment notes: docker-compose maps two ports
- docker-compose.yml defines a backend service built from ./backend/Dockerfile that loads env_file .env and exposes ${BACKEND_PORT:-7001}.
- The backend container command is poetry run uvicorn main:app --host 0.0.0.0 --port ${BACKEND_PORT:-7001}.
- The frontend service builds from ./frontend/Dockerfile and maps port 5173:5173.
- Port overrides go through the BACKEND_PORT environment variable — remember the matching VITE_WS_BACKEND_URL change in frontend/.env.local.
- Secrets ride through the .env file into the backend container, so file permissions and exclusion from version control matter on any shared host.
Maintenance read: MIT license, pnpm workspaces, and preview-model churn
- MIT License, Copyright (c) 2023 Abi Raja: commercial use, modification, and sublicensing are permitted with the notice retained — no legal blocker to embedding this in a product.
- package.json declares workspaces for frontend and backend but keeps version at 0.0.0, so the repo itself offers no semver contract; pin a commit if output stability matters to you.
- The headline models include Preview-labeled Gemini releases (Gemini 3 Flash Preview, Gemini 3.1 Pro Preview); when providers rotate these, generation quality can drift.
- The Ollama offline path is documented only as an issue #354 comment, not as first-class setup instructions — fully local operation is a secondary concern for this project.
- Test entry points do exist: pnpm -C frontend test for the frontend and poetry run pytest for the backend, chained by the root pnpm run test script.
Who should pay attention?
Good fit if
- You already pay for a Gemini, OpenAI, or Anthropic key and want a first-draft component from a real mockup in minutes.
- You need the same screen in two stacks (say React + Tailwind and Vue + Tailwind) and want the app's multi-model mix by setting all four keys.
- You have a GEMINI_API_KEY and want a screen recording of a live site turned into a clickable prototype.
- You self-host internal tools and can run docker-compose with a custom BACKEND_PORT and the matching frontend/.env.local change.
Skip for now if
- You need fully offline conversion — the README rates the Ollama path as poor-quality results.
- You cannot send screenshots or recordings (possibly unreleased UI) to OpenAI, Anthropic, Google, or Replicate.
- You expect production-grade accessibility and responsive behavior without human review; the output is a draft to edit.
- You want a library API to embed rather than a full React/Vite plus FastAPI application to deploy and keep updated.
Risks and cautions
MIT licensing and clean Docker packaging keep legal and deployment risk low, but output quality and running cost depend on external, partly preview-stage model APIs.
- At least one paid provider key is mandatory, and the README's recommended configuration is Gemini plus Replicate — two bills, not one.
- Without REPLICATE_API_KEY, edit_images and remove_backgrounds are explicitly unavailable, so image handling degrades.
- The default lineup includes Preview-labeled Gemini models, so quality can shift when the providers update them.
- The Ollama local path is described as poor-quality, leaving no strong offline fallback, and package version stays 0.0.0 with no compatibility promises.
- Provider keys live in backend/.env (written with echo per the README) and are loaded into the container via env_file in docker-compose — restrict permissions and keep the file out of version control.
- OpenAI, Anthropic, and Gemini keys can also be entered through the frontend settings dialog (gear icon), so anyone with access to a shared deployment's UI can set or replace them.
- Screenshots, mockups, and recordings are sent to whichever provider backs the chosen variant; treat unreleased designs as data leaving your perimeter.
- Treat the generated HTML the way you would treat any third-party snippet: review links, scripts, and external URLs before merging.
Alternatives to compare
| Approach | When to use | Trade-off |
|---|---|---|
Screenshot to Code (hosted) | You want the fastest first conversion with zero Poetry, Playwright, or Docker setup | Commercial hosted product at screenshottocode.com |
tldraw Make Real | You would rather draw on a canvas and turn that sketch into a working app than start from an existing screenshot | Open source; you supply your own model API key |
v0 by Vercel | You want prompt-driven React/Tailwind generation with hosting bundled into a vendor product | Commercial subscription |
Anima | Your source of truth is a Figma file and you want a maintained design-to-code pipeline rather than pixel conversion | Commercial plans |
What this trend reveals
Mockup-to-component service for client work
An agency can run the Docker stack privately (BACKEND_PORT override plus the VITE_WS_BACKEND_URL change in frontend/.env.local), feed client Figma exports in, and hand back React + Tailwind first drafts with the real logos already extracted by Gemini.
Convert three real client screens, time the manual rebuild against the generated draft plus cleanup, and check whether asset extraction pulled the actual logos before quoting this to a client.
Video-mode demo factory for internal tools
Record a 30-second flow of an existing dashboard and let video mode produce a clickable prototype — useful for stakeholder reviews without exposing the real system. GEMINI_API_KEY is required for this path.
Pick one internal page, record the flow, and check whether the generated prototype reproduces the core interactions and copy accurately enough for a review meeting.
Model bake-off on your own design
Because the app picks a stronger mix with more keys and lets you compare models per generation, the same mockup can serve as a fixed benchmark across GPT-5.5, Claude Opus, and Gemini 3 variants before you standardize on one provider.
Run one screenshot twice — once with a single key, once with all four — diff the generated HTML + Tailwind for fidelity, and compare provider spend for the same output.
RepoDaily verdict
A genuinely useful draft generator with an unusually wide stack list (HTML/Tailwind through Ionic) and its best output gated behind Gemini plus Replicate keys. Run one of your own mockups through it before deciding it belongs in your build; the hosted version exists if Poetry and Playwright are not worth the trouble.