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

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

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

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

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

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

1. 网站搭建

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

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

最近通义灵码上线了编程智能体，一句话就能让 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 文件，看看生成的效果。

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

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

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

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

2. 页面内容优化

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

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

我们直接问：

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

它会仔细分析我的需求，总结出简洁又具体的方案，并给出代码示例。

我们先把页面的布局优化一下。

直接提需求：

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

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

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

我们继续一点点优化它。

可以每次只改动一个地方，它的每次修改，都会生成快照，我们可以通过单击快照，快速定位到某次变更时的对话。

如果对某次编辑的效果不满意，或者需求有变化，可以在选择快照后，点击切换，一键回退到当时的状态。

我想把这三个页面的内容做一个分割，第一页作为我的个人介绍页面，第二页放上我的文章，第三页放一下比较推荐的工具。

于是我继续提需求：

将页面分三屏，每一个页面高度都为 100%。其中第一屏为 hero 页，第二屏是项目页面，第三屏是工具推荐页。

接下来我们要分别完善每个页面的内容。

先让 AI 把界面中的英文都翻译成中文来显示：

把页面中的信息翻译成中文显示。

给页面添加一些交互效果。比如：

增加交互效果，点击导航栏的文章按钮，页面会跳转到第二屏，点击导航栏的工具按钮，页面会跳转到第三屏。

它说可以实现页面平滑切换的效果，不过用户没提，所以采用了直接跳转的效果。（对比实际效果之后，我还是选择了让页面平滑切换 hhh。）

有点意思。

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

于是我继续发送需求：

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

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

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

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

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

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

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

3. 部署上线

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

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

点击页面右上角的 Settings。

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

点击 Save。

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

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