一、项目定位

Screenshot to Code 是基于 React 与 FastAPI 的应用，可根据截图生成 HTML、Tailwind、React、Vue、Bootstrap 或 Ionic 代码。

二、好玩在哪里

它可以生成初始布局并渲染预览，再通过 OpenAI、Anthropic 或 Gemini 模型迭代；可选图片功能还会使用其他 Provider。

三、推荐上手路线

使用自己拥有权利的截图，只选择一种输出技术栈并配置一个 Provider Key，先比较桌面与移动宽度，再手动修改代码。

四、环境与成本

本地运行需要 Python 后端、React/Vite 前端和至少一个模型 API Key；自动截图预览可选装 Chromium，API 调用可能产生费用。

五、适合谁

适合把自有设计做成原型、学习布局实现，或将内部设计稿转换为可编辑代码。

六、局限与安全边界

截图无法提供响应式规则、组件状态、语义和原始素材，生成代码通常还需要清理与无障碍修正。 不要上传机密界面，也不要未经许可复制第三方设计；Key 只放服务端并设置费用上限，使用前检查生成依赖。

七、项目与许可

仓库内容按 MIT 提供，具体以项目当前 LICENSE 为准。项目地址：https://github.com/abi/screenshot-to-code