[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-433":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":16,"starSnapshotCount":16,"syncStatus":30,"lastSyncTime":31,"discoverSource":32},433,"screenshot-to-code","abi\u002Fscreenshot-to-code","abi","Drop in a screenshot and convert it to clean code (HTML\u002FTailwind\u002FReact\u002FVue)","https:\u002F\u002Fscreenshottocode.com",null,"TypeScript",72868,8976,408,118,0,12,95,311,57,45,"MIT License",false,"main",true,[],"2026-06-12 02:00:13","\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fabi\u002Flilo\">\n    \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fabi\u002Flilo\u002Fmain\u002Ffrontend\u002Fpublic\u002Freadme-logo.png\" alt=\"Sponsored by Lilo\" width=\"180\" \u002F>\n  \u003C\u002Fa>\n  \u003Cbr \u002F>\n  Sponsored by \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fabi\u002Flilo\">Lilo\u003C\u002Fa>\n\u003C\u002Fp>\n\n# screenshot-to-code\n\nA simple tool to convert screenshots, mockups and Figma designs into clean, functional code using AI. Now supporting Gemini 3 and Claude Opus 4.5!\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F85b911c0-efea-4957-badb-daa97ec402ad\n\nSupported stacks:\n\n- HTML + Tailwind\n- HTML + CSS\n- React + Tailwind\n- Vue + Tailwind\n- Bootstrap\n- Ionic + Tailwind\n- SVG\n\nSupported AI models:\n\n- Gemini 3 Flash and Pro - Best models! (Google)\n- Claude Opus 4.5 - Best model! (Anthropic)\n- GPT-5.3, GPT-5.2, GPT-4.1 (OpenAI)\n- Other models are available as well but we recommend using the above models.\n- DALL-E 3 or Flux Schnell (using Replicate) for image generation\n\nSee the [Examples](#-examples) section below for more demos.\n\nWe have experimental support for taking a video\u002Fscreen recording of a website in action and turning that into a functional prototype.\n\n![google in app quick 3](https:\u002F\u002Fgithub.com\u002Fabi\u002Fscreenshot-to-code\u002Fassets\u002F23818\u002F8758ffa4-9483-4b9b-bb66-abd6d1594c33)\n\n[Learn more about video here](https:\u002F\u002Fgithub.com\u002Fabi\u002Fscreenshot-to-code\u002Fwiki\u002FScreen-Recording-to-Code).\n\n[Follow me on Twitter for updates](https:\u002F\u002Ftwitter.com\u002F_abi_).\n\n## 🌍 Hosted Version\n\n[Try it live on the hosted version (paid)](https:\u002F\u002Fscreenshottocode.com).\n\n## 🛠 Getting Started\n\nThe app has a React\u002FVite frontend and a FastAPI backend.\n\nKeys needed:\n\n- [OpenAI API key](https:\u002F\u002Fgithub.com\u002Fabi\u002Fscreenshot-to-code\u002Fblob\u002Fmain\u002FTroubleshooting.md), Anthropic key, or Google Gemini key\n- Multiple keys are recommended so you can compare results from different models\n\nIf you'd like to run the app with Ollama open source models (not recommended due to poor quality results), [follow this comment](https:\u002F\u002Fgithub.com\u002Fabi\u002Fscreenshot-to-code\u002Fissues\u002F354#issuecomment-2435479853).\n\nRun the backend (I use Poetry for package management - `pip install --upgrade poetry` if you don't have it):\n\n```bash\ncd backend\necho \"OPENAI_API_KEY=sk-your-key\" > .env\necho \"ANTHROPIC_API_KEY=your-key\" >> .env\necho \"GEMINI_API_KEY=your-key\" >> .env\npoetry install\npoetry env activate\n# run the printed command, e.g. source \u002Fpath\u002Fto\u002Fvenv\u002Fbin\u002Factivate\npoetry run uvicorn main:app --reload --port 7001\n```\n\nYou can also set up the keys using the settings dialog on the front-end (click the gear icon after loading the frontend).\n\nRun the frontend:\n\n```bash\ncd frontend\nyarn\nyarn dev\n```\n\nOpen http:\u002F\u002Flocalhost:5173 to use the app.\n\nIf you prefer to run the backend on a different port, update VITE_WS_BACKEND_URL in `frontend\u002F.env.local`\n\n## Docker\n\nIf you have Docker installed on your system, in the root directory, run:\n\n```bash\necho \"OPENAI_API_KEY=sk-your-key\" > .env\ndocker-compose up -d --build\n```\n\nThe app will be up and running at http:\u002F\u002Flocalhost:5173. Note that you can't develop the application with this setup as the file changes won't trigger a rebuild.\n\n## 🙋‍♂️ FAQs\n\n- **I'm running into an error when setting up the backend. How can I fix it?** [Try this](https:\u002F\u002Fgithub.com\u002Fabi\u002Fscreenshot-to-code\u002Fissues\u002F3#issuecomment-1814777959). If that still doesn't work, open an issue.\n- **How do I get an OpenAI API key?** See https:\u002F\u002Fgithub.com\u002Fabi\u002Fscreenshot-to-code\u002Fblob\u002Fmain\u002FTroubleshooting.md\n- **How can I configure an OpenAI proxy?** - If you're not able to access the OpenAI API directly (due to e.g. country restrictions), you can try a VPN or you can configure the OpenAI base URL to use a proxy: Set OPENAI_BASE_URL in the `backend\u002F.env` or directly in the UI in the settings dialog. Make sure the URL has \"v1\" in the path so it should look like this: `https:\u002F\u002Fxxx.xxxxx.xxx\u002Fv1`\n- **How can I update the backend host that my front-end connects to?** - Configure VITE_HTTP_BACKEND_URL and VITE_WS_BACKEND_URL in front\u002F.env.local For example, set VITE_HTTP_BACKEND_URL=http:\u002F\u002F124.10.20.1:7001\n- **Seeing UTF-8 errors when running the backend?** - On windows, open the .env file with notepad++, then go to Encoding and select UTF-8.\n- **How can I provide feedback?** For feedback, feature requests and bug reports, open an issue or ping me on [Twitter](https:\u002F\u002Ftwitter.com\u002F_abi_).\n\n## 📚 Examples\n\n**NYTimes**\n\n| Original                                                                                                                                                        | Replica                                                                                                                                                         |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003Cimg width=\"1238\" alt=\"Screenshot 2023-11-20 at 12 54 03 PM\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F6b0ae86c-1b0f-4598-a578-c7b62205b3e2\"> | \u003Cimg width=\"1414\" alt=\"Screenshot 2023-11-20 at 12 59 56 PM\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F981c490e-9be6-407e-8e46-2642f0ca613e\"> |\n\n\n**Instagram**\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fa335a105-f9cc-40e6-ac6b-64e5390bfc21\n\n**Hacker News**\n\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F205cb5c7-9c3c-438d-acd4-26dfe6e077e5\n","screenshot-to-code 是一个将截图、设计稿或Figma设计转换为干净、可运行代码（如HTML、Tailwind、React、Vue等）的工具。该项目利用先进的AI技术，支持多种前端框架和样式库，并兼容Gemini 3、Claude Opus 4.5等顶级AI模型，确保生成代码的质量与准确性。此外，它还提供实验性的视频转代码功能，能够根据网站操作视频生成原型代码。适用于快速原型开发、设计到代码自动化等场景，极大地提高了前端开发效率。项目采用TypeScript编写，遵循MIT许可证，可在本地部署或通过官网访问付费版本。",2,"2026-06-11 02:35:46","top_all"]