开源项目Screenshot-to-Code：截图图片生成代码

你是否经历过这样的日常？

• • 设计师发来一个高清设计稿，你对着屏幕一顿敲代码，结果还被说"这里不对那里歪了"！

• • 老板说要把页面做得"像某某网站一样"，你抓耳挠腮研究别人的布局到深夜！

• • 本以为写个前端页面很快，结果耗费的时间比后端还多！

别担心，让 Screenshot-to-Code 来解决这些烦恼！✨

Screenshot-to-Code 是啥？

它是一款"看图说话"的代码生成神器！不管是截图、设计稿，还是网页录屏，都能秒变成干净利落的代码。支持主流前端框架，让你的开发效率起飞！

🛠 支持的技术栈

• • HTML + Tailwind CSS：零基础也能写出高颜值页面！

• • React + Tailwind / Vue + Tailwind：组件化开发一步到位！

• • Bootstrap：经典永不过时！

• • SVG：完美还原设计图标，告别切图烦恼！

🤖 强大的 AI 模型支持

• • Claude Sonnet 3.5：最懂代码的 AI 模型

• • GPT-4v：速度快，效果好

• • DALL-E 3：图像生成的得力助手

🎥 还能录屏转代码？

没错！Screenshot-to-Code 真有这么神奇。录制一段网页交互视频，它就能自动生成对应的前端代码。比如录下"下拉刷新"的效果，马上就能获得实现代码！

它是怎么帮你的？

💻 写代码变轻松以前：

对着设计稿手写代码，调整到眼花

现在：

上传设计稿，几秒钟就能得到完美还原的代码！

🕒 节省开发时间以前：

一天只能做两三个页面，加班成日常

现在：

早上提需求，下午就能交付，效率翻倍！

🔄 支持多次修改

AI 也可能有理解偏差，但没关系！Screenshot-to-Code 支持反复调整，直到效果完美！

如何用 Screenshot-to-Code？

1. 准备环境：克隆项目，安装依赖包

2. 获取 API Key：准备 OpenAI 或 Anthropic 的 API Key

3. 上传设计：支持图片、设计稿、录屏等多种格式

4. 生成代码：选择合适的技术栈，等待代码生成

如果不想配置环境，还可以使用 Docker 快速部署：

echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

实战案例📱 做个像 Instagram 的页面

1. 上传 Instagram 的截图

2. 选择 React + Tailwind 技术栈

3. 一键生成代码，样式分毫不差！

📰 仿制新闻网站

1. 截取目标网站的首页

2. 用 Screenshot-to-Code 生成代码

3. 简单调整就能直接使用！

谁适合用 Screenshot-to-Code？

• • 前端开发者：摆脱重复劳动，专注创新

• • 初学者：对照代码学习，快速进步

• • 创业团队：加速产品开发，节省成本

试试吧！解放双手的快乐等着你让 Screenshot-to-Code 助你开发，喝着咖啡就把活干完！

👉 立即体验 Screenshot-to-Code

还在被前端开发折磨？Screenshot-to-Code 让你的工作事半功倍！😎