使用AI工具Screenshot to Code将UI设计图翻译成代码

一、获取openAI apikey。

  一般有两种方式，一种是到openAI官网注册账号，付费申请GPT4的apikey。另一种是某宝买代理。我这里采用第二种。

二、安装Screenshot to Code

 1.到github下载源码。

 2.启动，两种方式：源码启动和docker启动。

    需要一个能够访问 GPT-4 Vision 的 OpenAI API key。

（1）源码启动

如果直接使用openAI没用代理的话忽略OPENAI_BASE_URL。

启动后端：

cd backend
echo "OPENAI_API_KEY=这里换成你的apikey" > .env
echo "OPENAI_BASE_URL=这里换成你的代理请求地址" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001

启动前端：

cd frontend
yarn
yarn dev

（2）docker 启动

在源代码根目录下执行：

echo "OPENAI_API_KEY=这里换成你的apikey" > .env
echo "OPENAI_BASE_URL=这里换成你的代理请求地址" > .env

构建镜像并启动容器：

docker-compose up -d --build

启动成功如下图所示：

 3.启动完成后，在 http://localhost:5173 访问应用。

三、设计图翻译成代码

将设计图拖到页面上的灰色区域，即自动生成代码。如下图所示：

左边的是设计图，右边是生成的代码渲染的页面。

下载源码：