WebDesignAgent是一个值得关注的新项目。它和以往的网页生成工具有什么不同？简单说，只需一段文字描述或几张图片，就能生成一个功能齐全、设计精美的网站。这个智能体（Agent）能帮你轻松创建各种类型的网站，而且输入方式非常灵活。
主要特性
- 多种输入方式：文字描述、图片灵感、视觉布局参考，甚至可以混合输入，统统没问题。
- 智能多页面设计：不只是单个页面，而是完整的、相互关联的多页面网站。
- 用户友好的定制：喜欢亲自动手？可以随时添加、删除或修改网页内容。
- 视觉智能：借助强大的多模态大模型（目前支持ChatGPT-4o），自主优化网页布局。
实际案例
- 基于简单描述创建的购物网站
- 利用单张图片生成的阿里巴巴达摩院网站
这些例子展示了WebDesignAgent的强大灵活性。无论你想创建个人博客还是复杂电商平台，它都能胜任。更关键的是，它支持多页面设计，提供迭代优化功能——你可以给出反馈，系统会据此精确修改代码。这种人机协作的方式，让网站设计更具个性化和精准度。
主要技术组件
从技术层面看，该项目基于OpenAI的API实现，包括GPT-4系列模型，用于理解自然语言指令并生成对应的HTML、CSS和Ja vaScript代码。图片生成则用到DALL-E 3，结合GPT-4的文本能力实现文本到图像的转换。同时，通过特定的提示工程技术优化代码生成的质量和一致性，而GPT-4o的多模态视觉理解能力，使得基于图片或视觉线索生成网站成为可能。
如何安装
一、项目拉取
进入WebDesignAgent的GitHub页面拉取项目，可以选择命令拉取或下载压缩包（二选一）。
1. 命令拉取：以Windows为例，用CMD或PowerShell打开终端，输入以下命令：
git clone https://github.com/DAMO-NLP-SG/WebDesignAgent.git
2. 下载压缩包：如果没有安装git，直接下载压缩包，解压后开始安装。
接下来拉取项目所需依赖。进入项目文件夹，在终端输入：
pip install -r requirements.txt
如果已拉取过，终端会显示相应信息。注意，拉取完依赖后终端窗口不要关闭，后续还会用到。
Tips：这里有个坑。如果依赖没有完全拉取成功，OpenAI接口返回代码后无法生成页面，但调用接口的费用照常扣除。
二、变量配置
用VScode、NotePad++或记事本打开config.yaml文件。需要配置API KEY，有两种选择（二选一）：
- AZURE_OPENAI：需要微软Azure Key，如果没有，需将
is_azure改为False。 - OPENAI_API_KEY：必填，填入OpenAI官方API key（也可用中转key）。OPENAI_PROXY_URL：非必填，有中转需求时填入中转地址。
填写完毕后保存config.yaml文件。
三、正式启动
回到刚才的终端，在该路径下输入命令：
python gui.py
如何使用
启动后的UI界面如下，功能说明：
Select Mode：选择模式，默认Web Design Mode（页面设计模式）和Chat Mode（对话模式）。
Select Model：选择模型，目前仅支持GPT-4o和GPT-4o-0513。
Language：网站语言，支持中文和英文。
CSS Framework：CSS框架，有四种可选，建议选bootstrap，也可选None。
sa ve_file：生成网站保存的文件夹名称，自定义。
website_description：用文字描述生成网站，例如“我要生成一个购物网站”，或更复杂的“企业门户网站，包含产品介绍、企业介绍、实时动态、表单填写页面”。
website_img：生成图片保存的文件夹名称，自定义。
feeback：反馈，用一段文字描述优化网站。
each refine times：优化轮数（迭代次数），一般填1-3，不宜过大，否则费用吃不消。
local_img_storage_path：本地图像上传路径，可根据截取的网页图片或自行设计的页面图片生成类似网站。
IMG Source：图像源，Local或Gen。若选择Gen，则通过DALL-E 3生成。
操作流程如下：
Step1：填写基础信息后，点击Plan按钮，生成页面结构（类似产品原型）。可对结构进行优化修改。下方四个小按钮对应不同页面，点击即可查看对应页面信息。
Step2：确定页面信息后，点击AutoGenerate按钮，让AI自动生成网站。此时后台终端会有运行步骤记录，切记不要关闭。生成的网站保存在sa ve_file路径下的文件夹内。
页面的视觉效果可能不够理想，但交互逻辑是完整的。可以进一步与AI沟通迭代，优化视觉效果或交互逻辑。
调用成本：
成本花费0.71美元，若进一步迭代，成本估计在7美元左右。
最后总结
这个项目的后续发展值得期待。据称计划支持更多语言模型、开发本地代码修改功能，甚至生成支持后端的代码。如果感兴趣，不妨去GitHub页面看看，也许还能为项目改进提供建议，顺手点个star！
项目地址：
https://github.com/DAMO-NLP-SG/WebDesignAgent