连服务器都省了！实测用WorkBuddy一句话零成本建个人站

想搭一个高颜值的个人作品集，但一想到买域名、配服务器、写前端就头大？

其实你只需要一段对话！

随着 AI 工具的不断发展，如今 WorkBuddy 俨然成为了国内最流行的 AI Agent 产品。

我用 WorkBuddy 做了一个叫「糖果屋」的个人作品集，生成网页、换成自己的内容，再拿到一个可以发给别人的网址，整个过程都留在了同一段对话里，最绝的是直接借用自带资料库做小型服务器，一键生成公开网址发给别人；后期随时修改，原链接自动实时生效！

当然，如果我们需要想要更加专业化，那么还是需要去弄一下这个域名，但是我只是为了先来简单的学习弄几下，那么我们也是可以不需要去弄这个域名，我们就可以看下面这一段例子。

中间还有一件很具体的小事：网址已经分享出去了，我又改了一次邮箱。更新之后，原来的链接继续用。

这篇就拿这次过程做例子，讲讲怎么从一段需求走到一个可以打开的个人网站。

一、这次要做一个什么网站？

首先你要先能够知道你要做一个什么样的网站

我这次的目标很明确：做一个个人作品集，把自我介绍、技能、项目、经历和联系方式放在一页里，让别人点开就知道我在做什么。

页面使用中文，名字叫「糖果屋」，风格是 Neo-Brutalism，也就是新粗野主义。名字听着有点绕，看图就明白：鲜艳的糖果色、粗黑边框、像往右下方挪了一点的硬阴影，按钮按下去有一点物理按压感。

技术要求也很简单：把 HTML、CSS、JavaScript 都放在同一个 HTML 文件里。你可以先理解为，页面内容、样式和交互都装进了一个文件，方便打开、修改和交付。

本次这个案例主要是用来展示信息的，然后登录收款等等这一些复杂功能并没有去放到这一版里面。

第一次跟着做，先把自己的介绍、几个项目和联系方式展示出来，就有一个能验收的目标了。

二、在 WorkBuddy 里把网页做出来

1.先把需求说清楚

我这次的会话使用了「网站开发」，还附了一份已有的「糖果屋个人主页.html」作为参考。WorkBuddy 先读取参考文件，再按照要求重建页面。

有参考文件，可以一起给它；没有的话，也可以先用文字把内容和视觉要求说清楚。

原始需求里，我写了配色、边框、阴影、字体、八个页面区块，以及鼠标悬停、滚动出现等交互。新手不需要先弄懂所有术语，下面是按这次需求整理的一版提示词，可以把名字和内容换成自己的：

帮我做一个中文个人作品集单页，网站名叫「糖果屋」。 使用 HTML、CSS、JavaScript，全部写在一个 HTML 文件里，不使用前端框架。 视觉风格：新粗野主义。使用粉色、黄色、天蓝色等饱和糖果色，搭配浅色背景；卡片和按钮使用粗黑边框、没有模糊的黑色硬阴影，不要毛玻璃效果。 页面包括：顶部导航、首屏自我介绍、技能、作品展示、经历、关于我、联系区、页脚。 电脑和手机都要能正常浏览。加入卡片悬停效果、按钮按压效果和适度的滚动动画。 个人资料使用我提供的内容。没有提供的经历、成果数字、邮箱和社交链接，请标为待补充，不要编造。 完成后给我可以打开的 HTML 文件，并检查手机排版和按钮链接。

最后这两句话，就是我根据这一次过程去给他补充上去的，尤其是这一句，“个人资料使用我提供的内容。没有提供的经历、成果数字、邮箱和社交链接，请标为待补充，不要编造。”。这里建议大家第一次就写进去，这样的话你后面可以少改很多东西

2.生成之后，打开文件看一遍

还是简单直白的那一句话，你等这一轮生成结束之后，WorkBuddy 会给你「糖果屋_个人作品集.html」的产物，我们打开它就可以看到给你生成的网页了。

当然你这一步要去看一个整体的效果符不符合你的心意，有没有达到你的一个预期，然后进行一个简单的测试，看下面有没有什么bug，比如说展示不全等等，那么你就可以在这里去做一个修改，直到符合你的心意为止。

3.把模板内容换成自己的

第一版出来之后，我继续发了一句：

把里面的内容改成 Drunk 的。

他就接着去给我替换了首屏里面介绍技能等等这些所有的相关内容，但是保留了原来的视觉风格啊。

不过的话，这里也会暴露出来一个问题，因为我给他的资料很少，他就会给我自己拟了一些内容，比如说邮箱，还有公司、学校，当然他也在回复的时候对我说了这些需要去进行核对。

所以，照着做的时候，最好直接把资料一起发过去：

把页面改成我的个人作品集，保留当前布局、配色和交互。 昵称：[你的昵称] 个人介绍：[两三句话] 展示项目：[项目名称、简介、真实链接] 个人经历：[真实经历；没有就删掉这一栏] 联系邮箱：[你的邮箱] 社交账号：[你的个人主页链接] 没有提供的信息请标为待补充，不要自行补写履历和成果数字。

当然这里还有一个容易遗漏掉的地方，那么就是你可以去测试一下我们的项目卡片，它点击过去是否真的会跳转到我们的联系区，跳转到你的GitHub。因为在你去真正的当做一个个人的作品集去使用的时候，这一些按钮我们都是要进行一个自我测试的

三、页面做完了，怎么让别人也能访问？

到这里，本地已经有了网页文件。接下来要解决的是分享。

我在对话里继续问，能不能借用 WorkBuddy 的资料库，让别人也访问这个页面。

为什么这里会问，去用他的资料库，因为他的资料库也是一个算是work buddy的一个小型服务器，去存储你自己的一些数据。

这次 WorkBuddy 返回了发布结果：把单文件网页放进资料库，并给出了公开页面链接。

这里要分清两个用途：

• 公开页面链接：发给别人，让对方看网站。

• 资料库管理入口：自己回去管理这份页面。

如果你也做的是这样的单文件展示页，可以接着给 WorkBuddy 发：

请把刚才生成的 HTML 网页放入资料库并发布，给我供别人浏览的公开页面链接。 同时告诉我对应的管理入口，以及以后修改内容怎么更新。

拿到链接之后自己先去打开一遍，我们先来用手机或者是没有登录的浏览器，去访查看一下这个的访问情况，看对方是否能够直接可以看到页面是否完整，这一切所有的都要以打开之后的结果为准，你也可以分享给你的朋友，让他给你测试查看一下。

我们也是可以直接在这个资料库里面点击上面的分享，去手动发布成一个网页，任何人得到网页链接都是可以去访问的

至于带账号、数据库或表单提交的网站，需要另外确认部署和数据保存方式。可以当作一个小练习，去实操一下。

四、发布之后，还能继续改吗？

这次我继续改了邮箱。

为什么说要他这一步让他去给我修改？直接我只说邮箱不对。

WorkBuddy 的回复里列出了四个同步修改的位置：联系区发邮件按钮、复制邮箱按钮、页脚邮箱图标，以及页脚显示的邮箱文字。

因为我们只在屏幕上看到文字，它背后的按钮处理逻辑可能还是旧的

你可以直接这样要求：

把网站里的邮箱统一改成 [你的邮箱]。 同时检查页面显示文字、复制邮箱按钮和发邮件链接，确保没有旧地址残留。 修改完成后，更新到原来的资料库页面，并把公开链接发我核对。

并且修改完了之后，我们依旧打开之前分享出去的那一个链接，他们也是同步的进行了一个更新，你用之前的链接也是换成了最新的内容。

以后再改简介、作品或联系方式，也要走完最后一步：打开之前发出去的公开链接，确认那里已经变成新内容。

它这一步的原理是什么呢？就是把workbuddy的资料库当做了一个小型服务器，然后我们进行的一些修改，它会改到资料库里面，网站是根据资料库里面的内容走的。

五、最后验收，重点看这几件事

这个案例里面需要检查的也都是比较具体的了。

• 先查个人信息。 你要先看一下我们的个人信息，哪一些是由我们自己提供的，然后哪一些是AI为了填满页面给自己拟出来的。当我们要保证这一条：宁可没有数据不放，也不要让他去给你造假数据

• 再点按钮。我们自己要进行一个简单的测试，你要确保我们的所有的按钮的功能展示出来的数据，跳转的页面全部都是正常的。这个比你单纯的看他说啊，没有什么问题要好得多

• 再看手机排版。 我们这里要在手机上看一下长标题有没有被截断，会不会被挤出屏幕等等的这一些细节，我们可以在手机上进行一个排版查看

• 最后查线上版本。 最后进行一个公开网页的检查，我们就用旧的链接去打开一下，看它数据有没有变成最新的，小心驶得万年船嘛，一般这里是没有什么问题的

我这次走完的流程，就是先生成一页网站，再把资料换成自己的，通过资料库分享出去，最后继续修改并核对线上效果。

第一次做，拿自己的介绍、三个真实项目和一个邮箱试一遍。等别人能打开、能看懂、能联系到你，再继续往里面加东西。

作者提示含AI生成内容。作者声明本文无利益相关，欢迎值友理性交流，和谐讨论～