这是一个利用人工智能技术，将网页截图、设计原型图、Figma 设计稿甚至屏幕录像直接转换为干净、可运行的前端代码的开源工具。它解决了前端开发中繁琐的“像素级还原”工作，大幅提升了从视觉设计到实际代码的转换效率。

主要功能与特性

• 多格式输入支持：不仅支持静态的截图、Figma 设计和原型图，还支持将网站运行时的屏幕录像转化为可交互的功能原型。
• 丰富的技术栈输出：支持生成多种主流前端代码，包括 HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap 以及 Ionic + Tailwind。
• 强大的 AI 模型矩阵：默认集成 Gemini 3 Flash/Pro、GPT-5.5/5.4 Mini、Claude Opus 4.6/4.8 等顶级大模型，并结合 Replicate (z-image-turbo) 进行图像生成、背景移除和图像编辑。
• 智能资产提取：利用 Gemini 模型精准提取截图中的真实 Logo 和图片资产，保证生成页面的视觉还原度。
• 截图预览与自我检查：支持在无头浏览器（Chromium）中渲染生成的页面，让 AI 能够视觉化地检查并修正自己的生成结果。

安装与使用指南

该项目分为前端（React/Vite）和后端（FastAPI），支持本地运行和 Docker 部署。在运行前，你需要准备至少一个模型提供商的 API Key（推荐配置 OpenAI、Anthropic、Gemini 和 Replicate 以获得最佳效果），并将其写入 .env 文件中。

本地运行：

1. 启动后端：

cd backend
# 确保已在 .env 中配置好相关的 API Keys
poetry install
# 安装截图预览工具所需的 Chromium 浏览器
poetry run playwright install chromium
poetry env activate
# 运行后端服务
poetry run uvicorn main:app --reload --port 7001

1. 启动前端：

cd frontend
pnpm install
pnpm dev

启动后，在浏览器访问 http://localhost:5173 即可使用。

Docker 部署：

如果你更倾向于容器化部署，可以在项目根目录配置好 .env 文件后，直接运行：

docker-compose up -d --build

服务启动后同样访问 http://localhost:5173。

适用场景与目标用户

适用场景：
– 快速原型开发：将手绘草图或设计稿快速转化为可点击的前端原型。
– 网页复刻与重构：快速提取现有网页（如 NYTimes、Instagram 等）的 UI 结构并生成对应代码。
– 动态效果捕捉：通过屏幕录像功能，将复杂的交互动画转化为前端代码逻辑。

目标用户：
– 前端开发工程师：减少重复的 CSS 编写和布局调整工作，专注于核心业务逻辑。
– UI/UX 设计师：快速验证设计想法，将设计稿直接转化为可交互的 Demo 展示给客户或团队。
– 独立开发者与创业者：在没有庞大开发团队的情况下，快速构建产品 MVP（最小可行性产品）的前端界面。

总结

该项目巧妙地将大语言模型与前端工程深度结合，极大降低了前端还原设计的门槛。它不仅提供了丰富的技术栈选择，还通过引入截图预览和资产提取等机制，显著提升了代码生成的准确性和可用性。对于希望快速将视觉设计转化为实际代码、提升开发效率的团队或个人来说，这是一个非常值得尝试的提效工具。