阅读前，劳烦点赞关注下，便于讨论互动，会经常分享各种软件神器和免费技术干货

言归正传 程序员工程师在人们传统印象中多么高大上很神秘，码农是程序员对自己的自嘲。随着2023人工智能元年开启，很多人工智能开源工具问世，程序员的铁饭碗也不是很保险了。本文给大家安利一款开源的人工智能工具，只需一张截图拖动点点就可自动生成几乎可以乱真的网页。这款AI工具就是Screenshot to Code。

介绍

Screenshot-to-Code 是一款开源AI开发工具，可根据截图自动转化为乱真并实际可用的源代码网页。对前端开发者而言，它可以显著减少开发时间，可迅速将设计截图转化为实际代码，从而大大提高开发效率。该工具是利用GPT-4生成代码，并使用DALL-E3生成外观相似的图像。甚至用户可以直接输入要克隆的网站URL即可。

亮点

• 图像识别技术：采用先进的图像识别算法和机器学习技术，分析屏幕截图中的设计元素，识别页面组件、布局和样式。
• 自动生成代码：基于图像识别技术，软件能够自动生成初始的前端代码，包括HTML、CSS和JavaScript，捕捉页面的布局结构和设计样式，从而减少手动编写代码的工作量。
• 支持多种前端框架：Screenshot to Code 支持多种流行的前端框架，如React、Vue.js和Bootstrap等，为用户提供相应的代码生成。
• 可定制性：用户可以根据自己的需求对生成的代码进行定制，软件提供了一些配置选项，可以选择导入自定义样式，或者更改组件和布局的生成规则。
• 易于使用：提供简洁直观的用户界面，用户只需拖放屏幕截图到软件窗口中，点击几个按钮，即可生成前端代码。

使用

技术栈：前端React/Vite + 后端FastAPI。您还需要一个能够访问 GPT-4 Vision API 密钥。

• 1.部署安装：在GitHub上下载代码

后端

cd backend
echo "OPENAI_API_KEY=your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001

前端

cd frontend
yarn
yarn dev

• 2.截图并拖放：将需要转换的屏幕截图文件拖放到软件窗口中。软件将自动加载并显示截图。

• 3.设规则克隆转化：根据需要配置选项。点击生成按钮，开始转换过程。软件将分析截图，并在生成几乎可以乱真的页面。

• 4.生成代码：切换到代码窗口可显示生成的前端代码。

愿你有所获，你我同学习、共成长。