{
  "added_at": "2026-10-17",
  "additional_evidence_urls": [
    "https://github.com/abi/screenshot-to-code/blob/a8139779f7c5ae231b7f2a86fa7f83ddc5f7badc/LICENSE",
    "https://github.com/abi/screenshot-to-code/blob/a8139779f7c5ae231b7f2a86fa7f83ddc5f7badc/backend/pyproject.toml",
    "https://github.com/abi/screenshot-to-code/blob/a8139779f7c5ae231b7f2a86fa7f83ddc5f7badc/frontend/package.json"
  ],
  "category": "web-analysis",
  "description_en": "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.",
  "description_zh": "借助多模态模型，根据截图、设计稿、Figma 设计或屏幕录像生成 HTML/CSS、Tailwind、React、Vue、Bootstrap 或 Ionic 前端代码；可选的无头浏览器预览可让模型渲染并自查输出。结果是对界面外观的视觉重建，并非恢复原始源码或后端行为。",
  "entry_url": "https://awesomerea.org/resources/screenshot-to-code/",
  "entry_url_zh": "https://awesomerea.org/zh/resources/screenshot-to-code/",
  "evidence_url": "https://github.com/abi/screenshot-to-code/blob/a8139779f7c5ae231b7f2a86fa7f83ddc5f7badc/README.md",
  "group": "tools",
  "id": "screenshot-to-code",
  "json_url": "https://awesomerea.org/resources/screenshot-to-code/record.json",
  "kind": "tool",
  "markdown_url": "https://awesomerea.org/resources/screenshot-to-code/index.md",
  "markdown_url_zh": "https://awesomerea.org/zh/resources/screenshot-to-code/index.md",
  "name": "screenshot-to-code",
  "name_zh": "screenshot-to-code 截图转前端代码工具",
  "record_type": "resource",
  "relationship": "foundation",
  "requirements": [
    "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."
  ],
  "requirements_zh": [
    "需自行部署这一采用 MIT 许可证的仓库：后端为使用 Poetry 管理的 FastAPI（Python ^3.10），前端为通过 pnpm 运行的 React/Vite，也可用 Docker Compose 一并启动。审阅时没有 GitHub Release 或标签。",
    "至少需要一个 OpenAI、Anthropic 或 Gemini API 密钥，输入内容会交由所选提供方处理。视频模式必须使用 Gemini，素材提取也由 Gemini 完成；Replicate 密钥为可选项，上游建议配置以启用图像生成、编辑和背景移除。自检预览需要安装 Playwright 的 Chromium。",
    "README 未报告还原度或准确率数据。生成代码需要人工复核，无法恢复输入中未呈现的后端逻辑、API 或数据。"
  ],
  "targets": [
    "website"
  ],
  "url": "https://github.com/abi/screenshot-to-code",
  "verification": "source-reviewed",
  "verified_at": "2026-10-17"
}