一句话生成整个网站，WebDesignAgent颠覆网页设计！

WebDesignAgent是一个值得关注的新项目。它和以往的网页生成工具有什么不同？简单说，只需一段文字描述或几张图片，就能生成一个功能齐全、设计精美的网站。这个智能体（Agent）能帮你轻松创建各种类型的网站，而且输入方式非常灵活。

主要特性

1. 多种输入方式
   ：文字描述、图片灵感、视觉布局参考，甚至可以混合输入，统统没问题。

2. 智能多页面设计
   ：不只是单个页面，而是完整的、相互关联的多页面网站。

3. 用户友好的定制
   ：喜欢亲自动手？可以随时添加、删除或修改网页内容。

4. 视觉智能
   ：借助强大的多模态大模型（目前支持ChatGPT-4o），自主优化网页布局。

实际案例

1. 基于简单描述创建的购物网站

2. 利用单张图片生成的阿里巴巴达摩院网站

这些例子展示了WebDesignAgent的强大灵活性。无论你想创建个人博客还是复杂电商平台，它都能胜任。更关键的是，它支持多页面设计，提供迭代优化功能——你可以给出反馈，系统会据此精确修改代码。这种人机协作的方式，让网站设计更具个性化和精准度。

从技术层面看，该项目基于OpenAI的API实现，包括GPT-4系列模型，用于理解自然语言指令并生成对应的HTML、CSS和Ja vaScript代码。图片生成则用到DALL-E 3，结合GPT-4的文本能力实现文本到图像的转换。同时，通过特定的提示工程技术优化代码生成的质量和一致性，而GPT-4o的多模态视觉理解能力，使得基于图片或视觉线索生成网站成为可能。

如何安装

一、项目拉取

进入WebDesignAgent的GitHub页面拉取项目，可以选择命令拉取或下载压缩包（二选一）。

以Windows为例，用CMD或PowerShell打开终端，输入以下命令：

git clone https://github.com/DAMO-NLP-SG/WebDesignAgent.git

如果没有安装git，直接下载压缩包，解压后开始安装。

接下来拉取项目所需依赖。进入项目文件夹，在终端输入：

pip install -r requirements.txt

如果已拉取过，终端会显示相应信息。注意，拉取完依赖后终端窗口不要关闭，后续还会用到。

Tips：这里有个坑。如果依赖没有完全拉取成功，OpenAI接口返回代码后无法生成页面，但调用接口的费用照常扣除。

二、变量配置

用VScode、NotePad++或记事本打开config.yaml文件。需要配置API KEY，有两种选择（二选一）：

1. AZURE_OPENAI
   ：需要微软Azure Key，如果没有，需将is_azure改为False。

2. OPENAI_API_KEY
   ：必填，填入OpenAI官方API key（也可用中转key）。

   OPENAI_PROXY_URL
   ：非必填，有中转需求时填入中转地址。

填写完毕后保存config.yaml文件。

三、正式启动

回到刚才的终端，在该路径下输入命令：

python gui.py

如何使用

启动后的UI界面如下，功能说明：

：选择模式，默认Web Design Mode（页面设计模式）和Chat Mode（对话模式）。
：选择模型，目前仅支持GPT-4o和GPT-4o-0513。
：网站语言，支持中文和英文。
：CSS框架，有四种可选，建议选bootstrap，也可选None。
：生成网站保存的文件夹名称，自定义。
：用文字描述生成网站，例如“我要生成一个购物网站”，或更复杂的“企业门户网站，包含产品介绍、企业介绍、实时动态、表单填写页面”。
：生成图片保存的文件夹名称，自定义。
：反馈，用一段文字描述优化网站。
：优化轮数（迭代次数），一般填1-3，不宜过大，否则费用吃不消。
：本地图像上传路径，可根据截取的网页图片或自行设计的页面图片生成类似网站。
：图像源，Local或Gen。若选择Gen，则通过DALL-E 3生成。

填写基础信息后，点击，生成页面结构（类似产品原型）。可对结构进行优化修改。下方四个小按钮对应不同页面，点击即可查看对应页面信息。

确定页面信息后，点击，让AI自动生成网站。此时后台终端会有运行步骤记录，切记不要关闭。生成的网站保存在sa ve_file路径下的文件夹内。

页面的视觉效果可能不够理想，但交互逻辑是完整的。可以进一步与AI沟通迭代，优化视觉效果或交互逻辑。

成本花费0.71美元，若进一步迭代，成本估计在7美元左右。

最后总结

这个项目的后续发展值得期待。据称计划支持更多语言模型、开发本地代码修改功能，甚至生成支持后端的代码。如果感兴趣，不妨去GitHub页面看看，也许还能为项目改进提供建议，顺手点个star！

https://github.com/DAMO-NLP-SG/WebDesignAgent