标签： 前端开发

方式一：本地源码运行（推荐开发调试）

# 1. 克隆项目
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code

# 2. 配置API密钥（后端）
cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
echo "ANTHROPIC_API_KEY=your-key" >> .env
echo "GEMINI_API_KEY=your-key" >> .env

# 3. 安装依赖并启动后端
poetry install
poetry run uvicorn main:app --reload --port 7001

# 4. 新终端启动前端
cd ../frontend
yarn
yarn dev

启动后访问 http://localhost:5173 即可使用。

方式二：Docker 一键运行（推荐快速体验）

# 在项目根目录执行
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

🎯 截图转代码

上传任意网页截图或设计稿，AI自动分析布局结构，生成对应前端代码，支持多种技术栈自由切换。

🔄 多模型支持

内置支持 Claude Opus/Sonnet、GPT-4.5/4.1、Gemini 3 Flash/Pro 等顶级模型，也支持自定义API兼容接口。

🛠️ 多技术栈输出

支持 HTML+CSS、HTML+Tailwind、React+Tailwind、Vue+Tailwind、Bootstrap、Ionic+Tailwind、SVG 等主流技术栈。

🎬 录屏转原型（实验性）

支持上传网站操作录屏视频，AI直接生成可交互的功能原型，非常适合产品快速验证和演示。

🔒 隐私优先，本地可控

支持通过 Ollama 运行本地开源模型，所有数据不出本地；也可自托管 Docker 版本，完全掌控数据隐私。

📌 场景一：设计师交付前端代码

设计师完成 Figma 设计稿后，开发人员只需截图上传，即可快速获得可运行的前端代码骨架，大幅减少从设计到代码的重复劳动。实测可将一个中等复杂度页面从 2小时 缩短到 30秒 出初稿。

🎓 场景二：学习前端的新手临摹练习

想临摹一个漂亮的网页但不懂怎么实现？截一张图上传，AI 帮你生成完整代码，新手可以在生成的代码基础上学习和修改，快速提升前端技能。

🚀 场景三：产品快速原型验证

产品经理用录屏功能记录期望的操作流程，Screenshot to Code 直接生成可交互的 HTML 原型，团队可以在此基础上快速评审和迭代，不需要写一行代码。