AI零成本搭建个人网站，小白3步搞定！

大家好，这里是K姐。

一个帮助你把AI真正用起来的女子。

最近总是刷到一些超厉害的操作：像一句话生成诗朗诵网页、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上创建一个新仓库，把我们的网站的所有文件打包上传到这个仓库里。

点击页面右上角的Settings。

在Pages选项中勾选下图中的选项。

点击Save。

刷新一下页面，就可以看到网站链接啦。

大家都可以通过这个链接来访问我们刚刚做好的这个网站。

一些分享

这一套流程下来，对我这样的非技术人来说，不仅仅是一个网站的诞生，更是一套能力的解锁。

AI正在拓宽每个人的能力边界。

传统的开发还是太吃专业技能了，普通人根本摸不到边。真想学没有一年半载是入不了门的。

有了通义灵码这样的新一代AI辅助开发工具，普通人也有了展示自己想法的机会。

通义灵码编程智能体与MCP的结合，正在让“开发”变得更像“说话”一样自然。

只要你有想法，就能有成果。

技术门槛不再是围墙，而是下沉为脚下的基建。

编程语言不再是镣铐，而是锻造为手中的工具。

我们正处于一个过渡带——从程序员中心，走向创意中心。

不是每个人都要变成工程师，但像通义灵码这样的工具让每个人都可能变成产品的创作者。

未来会怎么样？我不知道。

或许我们不是那种写出底层引擎的人，但我们可以用工具堆出一座世界，站在它上面，说一句话、表达一个想法、发布一款产品。