Tool
screenshot-to-code
Generate HTML/CSS, Tailwind, React, Vue, Bootstrap or Ionic front-end code from screenshots, mockups, Figma designs or screen recordings with multimodal models; an optional headless-browser preview lets the model check its rendered output. The result is a visual reconstruction of the interface, not recovered original source or backend behavior.
- Targets
- Website
- Category
- Website analysis tools
- Relationship
- Foundation tool
- Sources reviewed
Requirements & limits
- Self-host the MIT-licensed repository: a FastAPI backend managed with Poetry (Python ^3.10) and a React/Vite frontend run with pnpm, or both through Docker Compose. No GitHub release or tag existed at review.
- At least one OpenAI, Anthropic or Gemini API key is required, and inputs are processed by the selected providers. Gemini is required for video mode and handles asset extraction; a Replicate key is optional but recommended upstream for image generation, editing and background removal. The self-check preview needs Playwright's Chromium.
- The README reports no fidelity or accuracy figures. Generated code needs review and cannot recover backend logic, APIs or data that the input does not show.
About this entry
The description was reviewed against primary sources.
Primary sources
- README.md GitHub · abi/screenshot-to-code · Revision a813977
- LICENSE GitHub · abi/screenshot-to-code · Revision a813977
- backend/pyproject.toml GitHub · abi/screenshot-to-code · Revision a813977
- frontend/package.json GitHub · abi/screenshot-to-code · Revision a813977
More in Websites
- Dembrandt · Tool
- shuji · Tool
- Obfuscator.io Deobfuscator · Tool
- javascript-deobfuscator · Tool
- mitmproxy2swagger · Tool
- JPEXS Free Flash Decompiler (FFDec) · Tool