一、获取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 访问应用。
三、设计图翻译成代码
将设计图拖到页面上的灰色区域，即自动生成代码。如下图所示：
左边的是设计图，右边是生成的代码渲染的页面。
下载源码：
)
)