前言
学长以前的系列文章中，
以前用 Python 写的 30+ 个小工具，
但是日常使用中十分不方便，
翻代码、配环境、手动跑，十分费劲，
很多时候都只能当"代码收藏家"------
学长每次想把Python小工具打包成网站，
纯后端出身的学长，一打开前端代码就头皮发麻：
"HTML不会写，CSS调不动，连个按钮都整不明白..."
理工男的审美也是不忍直视！
直到发现AI能当我的"前端翻译官"：
近期，学长运用豆包 + 千问 + Trae，
搭建出属于的学长工具库网站，
不用学前端，不用写代码，
直接把工具塞进网站，点开就用。
相关工具
豆包
传送门：www.doubao.com/
千问
传送门：www.qianwen.com/
Trae
传送门：www.trae.cn/
PS: 上诉工具是学长平时习惯使用，大家也可以使用自己熟悉的 AI 工具，比如：元宝、DeepSeek 等。
整体流程
实现一个 "学长工具库" 步骤：
- 根据需求描述，画出网站原型图
- 根据原型图，让 Trae 实现前端代码。
- 根据提示词，让 Trae 调整前端代码。
原型图
先使用豆包，生成网站原型图，如下：
原型图生成，效果如下：
原型图详情页如下：
需求文档
通义千问梳理出需求文档，如下：
生成的需求文档效果如下：
详细设计文档
使用千问，根据上述需求文档，生成详细设计文档，如下：
代码生成
首先，我们打开 Trae 的 solo 模式，如下：
接下来，选中原型图，输入提示词，AI 会自主生成整个界面，如下：
报错分析
在生成完成后，可能会出现一些代码报错，
我们直接让 Trae 帮我们分析并解决即可，如下：
解决上述语法错误之后，运行中报错以可以直接让 AI 分析
AI 会给出错误分析以及修复步骤，并最终按照该步骤直接执行。
网站运行
待上述所有流程均解决后，可以运行项目，最终效果如下：
PS：此效果比原型图少了许多工具，学长是为了方便提问 AI 以及修改，
因此只生成一个类型的工具，后续系列文章会慢慢完善。
此时，学长觉得按钮描述需要调整，则可以随时找 AI 进行修改：
最终更改效果如下：
结论
通过本文的介绍，你学会了如何利用豆包、通义、Trae 快速开发一个工具网站（前端）。
历史文章系列
71.30分钟用Trae搭建专属工具网站！零基础也能快速开发！