creenshot to Code是一个开源的项目，利用人工智能技术(GPT-4V和 DALL-E 3)将用户的屏幕截图转换为前端网页代码，已在GitHub上斩获40K星标。项目的核心功能是自动化网页设计的编码过程，使得开发者能够通过提供网页的截图，快速生成相应的HTML、CSS和JavaScript代码，节省前端开发人员的时间和精力。

主要功能：

智能代码生成：利用GPT-4 Vision模型，项目能够分析用户提供的屏幕截图，并自动生成相应的HTML、CSS 和 JavaScript 代码，可以快速将设计稿转换为可运行的网页代码。

相似图像生成：项目还结合了DALL-E3的图像生成能力，能够根据生成的HTML代码中的标签，自动创建与原始截图相似的图像，并将这些图像嵌入到网页中，以保持页面的视觉一致性。实时代码更新:用户可以在应用程序中实时查看生成的代码，并且可以通过与A!的交互来调整样式或更新代码中缺失的部分，以满足特定的设计要求。

灵活的配置选项：应用程序提供了配置选项，允许用户选择使用的前端技术(如HTML+Tailwind、React + Tailwind、Bootstrap、Vue + Tailwind)以及是否启用DALL-E图像生成和功能URL网页克隆:除开手动上传截图外，允许用户输入URL自动截图以克隆在线网站。

编辑生成的代码：Screenshot to Code 内置了代码编辑器允许开发者对生成的代码进行修改，可以微调输出、纠正任何异常或添加个人代码风格

效果预览和代码导出：该工具提供实时预览功能，用户能够实时查看编辑和修改的效果，并支持下载或复制最终代码

支持本地部署：用户可以选择将该项目在本地电脑上部署，以便在自己的计算机上运行，这为那些希望在本地环境中使用该工具的用户提供了便利。

开源协议：MIT license

源码地址：https://github.com/abi/screenshot-to-code

技 术 栈：python和typescript为主

见的图片格式

jpg格式

文件名.jpg |文件名.jpeg。

特点：色彩信息保留较好，高清，颜色较多。

实际用处：常用于产品类图片。

gif格式

文件名.gif。

特点：最多存储256色，可以保存透明背景和动画效果。

实际用处：简单图形及字体，动态图。

png格式

文件名.png。

特点：存储形式丰富，可以保存透明背景。

实际用处：微信表情包

psd格式

文件名.psd。

是Photoshop的专用格式。

特点：可以存放图层、通道、遮罩等多种设计稿。

实际用处：可以直接从上面复制文字、获得图片、测量大小和距离。

PS切图

切图方式：图层切图、切片切图、PS插件切图等。

• 图层切图

第一步需要先选中需要的图层

选中单个图层：

鼠标选中图层后右击——快速导出为PNG——设置文件名——保存。

选中多个图层：

图层连续排列:长按shift键不动+鼠标选中所需的第一个图层+鼠标选中最后一个图层。

图层不连续排列，长按ctrl键不动+鼠标点选所需图层。

第二步选中需要的图层后

选择图层菜单（或直接在任意选中的图层上右击）——合并图层（Ctrl+e）——右击合并图层——快速导出为PNG——设置文件名——保存。

• 切片切图

在左侧工具栏选中切片工具——框选所需图片——选择格式——保存——切片选择：选中的切片——保存。

在图层选项卡上背景图片的左侧有个小眼睛的标志，这个是代表图层的可见性，点击小眼睛就会不可见图层，背景就变成透明的。

在背景透明的情况下，使用切片工具选中想要裁切的内容

“文件”——导出——存储为web所用格式

选择图片存储位置，在最下方切片选项那里，选择选中的切片。

jpg格式：保存的切片图带有纯色背景；

png格式：保存切片图是透明背景。

格式级别越高，图片越清晰，相对内存越大。

• PS插件切图

Cutterman：在ps中运行的插件，可以代替手工导出以及使用切片工具切图。

使用方法：首先从Cutterman官网上注册账号并下载安装包进行安装。

要求：ps必须是完整版的，绿色版本不支持。

官网网址：https://www.cutterman.cn

下载好之后，解压。双击.exe安装文件。默认安装地址，直接点击安装。

安装好之后重启PS。

选择窗口——扩展功能——Cutterman切图神器——最后注册Cutterman账号登录使用。

暂时不想使用插件切图，就不多赘述了，有需要的可自行了解。

明天开始准备使用学成在线这个案例，练练手。

使你完全不懂html，javascript,css，也能做出漂亮的网页，这在以前是不可想象的，而现在确是可行的，因为有这样一个项目：openUI。

openUI不仅仅能生成html页面，还能生成自适应网页，适配电脑端和手机端，还能把页面代码转换为React和vue等。

第1步，创建Python虚拟环境。

pyenv virtualenv 3.12.2 openui
pyenv local openui

第2步，你需要到github下载这个项目的源代码。

git clone https://github.com/wandb/openui

第3步，进入这个目录

cd openui/backend

第4步，安装依赖环境

pip install .

第5步，导入你的openAI的apikey

export OPENAI_API_KEY=xxx

第6步，运行openui程序

python -m openui

看到这个界面，就成功了，你可以用对话方式让程序生成网页，也可以上传一个截图，按截图样式生成html代码。很简单吧。