如何用AI免费搭建个人网站，小白3步搞定！

发布于 2025-05-16 · 最近总是刷到一些超厉害的操作：像一句话生成诗朗诵网页、10分钟创建3D网页游戏、全自动整理电脑文件等等，看得我特别心动。这几天终于摸索出一些方法。原来...

最近总是刷到一些很厉害的操作：比如一句话生成诗朗诵网页、10 分钟创建 3D 网页游戏、全自动整理电脑文件等等，看得我特别心动。

这几天终于摸索出了一些方法。

原来这些高效开发项目，都是通过 AI 来实现的。

全程一行代码都不用写，我也成功上线了自己的个人站：

https://koi0101-max.github.io/web/

整个过程非常简单，只需要打字表达我们的需求，而且不需要花一分钱！

我们一起还原一下个人站从搭建到部署的全过程。

网站搭建

先说工具的选择，我选择编程工具就两个原则：

要足够智能，听得懂我的指令，干活要有质量。
要有性价比，最好能免费用。

最近通义灵码上线了编程智能体，一句话就能让 AI 自动调用工具、生成代码，甚至完成工程部署。

深入了解了一下，发现通义灵码已经全面支持 Qwen3 系列模型，而且完全免费！

这不就是我的天选开发搭子嘛！

我们在插件商店搜索通义灵码，直接安装。（在 VS Code、JetBrains、Visual Studio 上都可以。）

以前想要做网站，光是一点点构思布局、考虑怎么部署，就够让我头疼了。

现在用 MCP，一句话就能搞定！

我们在通义灵码的会话窗口中点击MCP 工具。

点击MCP 广场。

这里有3000+ MCP 工具可供选择，满足你的各种个性化需求。

本次网站开发用到了这些 MCP：

Figma：可以访问 Figma 文件，把设计稿快速转化成可实际使用的代码。
MiniMax：支持生成语音、视频、图像，克隆声音等。

我们点击对应 MCP 右侧的安装按钮，通义灵码会自动为我们安装。

这个时候我们需要去对应工具的官网，生成一个 API 指令或者 access token，完成 MCP 的配置。

如果是首次使用 MCP 工具，还需要安装依赖，保证配置后的 MCP 能正常运行。

具体要求可以查看官网的说明文档或者魔搭社区的 MCP 服务详情。

等待页面显示已连接，说明配置成功啦。

我们打开 Figma 官网的设计稿模板，选中设计稿后单击鼠标右键，在弹出的选项菜单中选择 Copy/Paste as > Copy link to selection。

回到通义灵码界面，在会话框左下角，选择"智能体"模式。

在通义灵码的智能体模式中，AI 会自主理解、拆析需求，还可以自主调用多个 MCP 工具完成任务。

选择最近开源的顶尖模型 Qwen3-thingking，让它们强强联合。

我们把复制的设计稿链接粘贴到通义灵码的会话框，并输入我们的需求，比如：

请严格按照我提供的 Figma 链接，还原这个 HTML 页面。它会分析我的需求之后，自动调用合适的 MCP 工具来完成网页开发。而且每一次调用，它都会询问我是否同意。我们直接选择执行/同意即可。我们先看看它的回答：它用了响应式设计，让页面在不同设备上都能良好显示。考虑得比我更深~鼠标悬停在某些位置会有动画效果。复刻了网页的设计，页脚的小图标也都还原了。我们按照它的提醒，用浏览器打开这个 html 文件，看看生成的效果。

对比链接中的模板页面有一些微调，但是整体布局还是很不错的。

而且它还还原了设计稿中的交互效果！

一句指令就能达到这个效果，我真的太满意了！

不过这个样子距离直接部署上线还是有点差距，我们一起来把它优化一下。

页面优化

我们切换到智能问答模式。

在智能问答模式下，它回答我们的问题时不会对工程文件进行任何修改，这个模式很适合让 AI 给我们提供一些灵感和建议，或者做代码解读。

我们直接问：

我想把这个网站设计成我的个人博客，可以怎么优化。

它会仔细分析我的需求，总结出简洁又具体的方案，并给出代码示例。我们先把页面的布局优化一下。直接提需求：

导航栏的"Madelyn Torff"显示在页面最左侧。导航栏的另外三个选项，显示在页面的最右侧。

我准备在页面最后推荐一些我的常用工具，所以让它根据我的截图在页面最下方新增了一个板块。

输入需求：根据我的截图，在页脚和项目栏目中新增一个推荐工具页面。

我们继续一点点优化它。可以每次只改动一个地方，它的每次修改都会生成快照，我们可以通过单击快照，快速定位到某次变更时的对话。如果对某次编辑的效果不满意，或者需求有变化，可以在选择快照后，点击切换，一键回退到当时的状态。我想把这三个页面的内容做一个分割，第一页作为我的个人介绍页面，第二页放上我的文章，第三页放一下比较推荐的工具。于是我继续提需求：

将页面分为三屏，每一个页面高度都为 100%。其中第一屏为 hero 页，第二屏是项目页面，第三屏是工具推荐页。接下来我们要分别完善每个页面的内容。先让 AI 把界面中的英文都翻译成中文来显示：把页面中的信息翻译成中文显示。给页面添加一些交互效果。比如：增加交互效果，点击导航栏的文章按钮，页面会跳转到第二屏，点击导航栏的工具按钮，页面会跳转到第三屏。它说可以实现页面平滑切换的效果，不过用户没提，所以采用了直接跳转的效果。（对比实际效果之后，我还是选择了让页面平滑切换hhh。）有点意思。

我们继续完善第二屏的页面，模板中的原图片没有正常显示，我们可以直接生成几张图片来替换。

于是我继续发送需求：

为第二屏的文章分别生成合适的封面图。卡通画风。第一张图片，展示一个小女孩在电脑前敲代码的样子。第二张图片，展示风格各异的图片画框，第三张图片，展示电影院观影的第一视角。

它会结合上下文来处理问题，在分析我的需求之后，调用了 MiniMax MCP 来生成图片。

它新建了一个 images 文件夹存放图片，并且把图片放在对应的位置。

一步一步地调整，搭建网站的过程就像在搭积木一样。

比如让它在第二屏中再添加 5 张卡片，将所有卡片分为 2 行，整齐排列。

我们继续把 AI 工具的信息填写在第三屏的页面中。

也是先添加、排列好卡片，再逐步填充卡片的内容。

部署上线

把网页效果调整到我们满意的状态后，我们可以尝试把网站免费部署到互联网。

我们在 GitHub 上创建一个新仓库，把我们的网站的所有文件打包上传到这个仓库里。