連結：https://github.com/DAMO-NLP-SG/WebDesignAgent
WebDesignAgent是一個自動化的網站設計代理，能夠幫助使用者透過文本描述、圖片上傳或視覺佈局，快速建立出美觀且功能齊全的網站。它支援多頁面的生成和設計，使用者可以手動新增、刪除或修改網頁及其內容，實作個性化定製。此外，它還具備迭代最佳化功能，根據使用者反饋進行精確調整，以及利用視覺模型自主最佳化網頁佈局。
需求人群：
- WebDesignAgent適用於需要快速構建網站的設計師、開發者和企業。無論是個人專案還是商業需求，該產品都能提供高效、個性化的網站設計解決方案，特別適合那些尋求簡化網站開發流程並希望快速上線的使用者。
使用場景示例：
- Alibaba DAMO：使用圖片(damo.png)生成的網站(examples/damo/index.html)。
- 購物網站：透過描述(一個購物網站)生成的網站(examples/shopping/index.html)。
- 遊戲公司網站：結合圖片(damo.png)和描述(動作遊戲公司，代表作《黑神話：悟空》)生成的網站(examples/game/index.html)。
產品特色：
- 文本轉網站：將文本描述轉化為完全功能化、設計精美的網站。
- 圖片轉網站：上傳圖片，自動融入並建立引人注目的網站。
- 視覺線索轉網站：將視覺佈局應用到網站上。
- 混合設計：無縫結合文本、圖片和其他視覺元素，創造統一且吸引人的網頁設計。
- 多頁面掌握：生成並設計具有動態重新導向功能的相互連線的網頁。
- 使用者特定新增/刪除：手動新增、刪除或修改網頁、內容及其關係，以完美定製網站。
- 迭代細化：根據使用者反饋對網站程式碼進行精確修改。
- 視覺反映：利用強大的視覺模型自主最佳化網頁佈局。
使用教學：
1. 進入WebDesignAgent的GUI介面。
2. 選擇網頁設計模式。
3. 根據API選擇模型，例如gpt-4o。
4. 選擇網站語言。
5. 設定CSS框架，如Tailwind。
6. 設定儲存檔案的路徑。
7. 在網站描述欄位中輸入文本請求，或在網站圖片欄位中上傳圖片請求，或兩者結合輸入。
8. 點選計劃按鈕，獲取計劃的網站文本描述、內容和關係。
9. 如有需要，修改描述。
10. 點選自動生成按鈕，生成網站。
11. 根據反饋調整生成的網站，包括修改計劃結果、新增/刪除網頁、提供全網域反饋。