1. What this project is
Screenshot to Code is a React and FastAPI application that generates HTML, Tailwind, React, Vue, Bootstrap, or Ionic output from screenshots and optional visual feedback.
2. What you can make
It can produce an initial layout, render a preview, and iterate with supported OpenAI, Anthropic, or Gemini models; optional image features use additional providers.
3. Recommended first use
Use a screenshot you own, select one output stack, configure one provider key, and compare the rendered result at desktop and mobile widths before editing the code manually.
4. Requirements and cost
Local use needs a Python backend, React/Vite frontend, and at least one model API key. Chromium is optional for automated screenshot preview, and API use can cost money.
5. Who it suits
Useful for prototyping your own design, learning layout implementation, or rebuilding an internal mockup into editable code.
6. Limits and safety
A screenshot cannot reveal responsive rules, component states, semantics, or original assets. Generated code usually needs cleanup and accessibility work. Do not upload confidential interfaces or copy third-party designs without permission. Store keys server-side, set spending limits, and inspect generated dependencies before use.
7. Project and license
Repository content is provided under MIT; check the current LICENSE before reuse. Repository: https://github.com/abi/screenshot-to-code