WorkBuddy 从零开始详细教程③：不会编程也能做出自己的个人网站

一、这一期做什么

前两期讲了安装和基础功能，这一期直接动手：先用 WorkBuddy 生成一份个人简历，再做一页作品集网站。

为什么从简历开始？因为简历是「结构明确、对错好判断」的东西——教育、技能、项目、实习，写没写全你一眼就能看出来。用它来练手，比一上来就做复杂网站靠谱得多。

做网站这件事，最容易卡住的从来不是技术，而是「不知道该长什么样」。所以这一期的核心方法只有一句：找一个你喜欢的页面当参考，把喜欢的部分指出来。

二、准备材料

开工前先备齐这三样：

要准备什么	具体内容
能正常使用的 WorkBuddy	已经登录，能新建任务
一段真实个人经历	教育背景、技能、项目、实习——有多少写多少
作品集内容	昵称、一句话自我介绍、3 个作品的标题和简介

材料齐了，先做简历网页，再做作品集。

三、第一步：用 Skill 生成简历

为什么用技能而不是直接让它写？因为技能里带着现成的排版模板。直接让它自由发挥，出来的往往是一堆看着挺整齐、投出去却被筛掉的版式；用技能，字体、间距、分页规则都是调好的。

这次用的技能是 vibe-resume-skill，仓库里自带 12 套可投递的 HTML / PDF 模板，支持在对话里直接生成、修改、导出。

1. 先装技能，并确认装上了

在 WorkBuddy 里新建任务，发送：

请帮我安装这个简历 Skill：
https://github.com/KevinYoung-Kw/vibe-resume-skill

安装后确认是否可用，并列出可选模板。
如果安装失败，请说明原因。

注意最后两句：「确认是否可用」和「失败请说明原因」。少了这两句，它可能装到一半就默默过去了，你还以为装好了。

2. 提交经历，生成简历

确认技能可用后，把你的个人经历粘上去，再发：

请使用 vibe-resume-skill 的 basic-a4 模板，
将以上材料整理成 AI 应用开发工程师简历。

只使用我提供的信息，不编造经历或数据。
尽量控制在一页 A4，保持正常阅读字号。
生成 HTML，并尝试导出 PDF 和预览图。
无法导出时，请说明原因。

3. 不满意就继续对话修改

简历生成后大概率要改两三轮。别重新开任务，在同一个任务里继续说，它会带着上下文改。

版面太空：

请适当收紧段落间距，保留内容和模板风格。
不要靠缩小字号凑一页，修改后检查分页。

要加经历：

把下面这段经历加入已有简历，保留其他内容。
如果一页放不下，请先给出精简建议。

「不要靠缩小字号凑一页」这句建议一定加上。你不管的话，它为了塞进一页，很可能把字号调到 9pt，打印出来根本没法看。

四、第二步：参考喜欢的模板，做作品集网站

简历搞定，接下来做作品集。这一步的关键是先找一个参考页。

不知道怎么描述网站风格，很正常。解决办法不是去学设计术语，而是：找一个你喜欢的页面，把 HTML 文件、截图或网址交给它，再告诉它你想保留哪些设计。

这次用一个参考页 space-2.html 举例。它的这几个特征都可以直接拿来当设计方向：大标题、圆形头像、荧光黄绿点缀，以及底部悬浮导航。

先上传参考文件，再发提示词：

请参考我上传的 space-2.html，制作我的个人作品集网站。

先阅读文件，概括它的布局、配色和交互，再根据以下要求生成页面。

个人信息：
昵称：你的昵称
介绍：一句话说说你在做什么。

希望保留的设计：
1. 大标题与描边文字。
2. 圆形头像和荧光黄绿强调色。
3. 底部悬浮导航。
4. 简洁的作品列表和轻微滚动动画。

页面内容：
关于：介绍你的方向和现在在做的事。
作品：放 3 个作品的标题和简介。
联系：没有提供联系方式时，显示“待补充”。

未提供的作品信息标注为占位内容，不编造经历和成绩。
头像优先使用我提供的图片，没有则使用占位图。
如保留聊天演示，请注明是预设回复，不是真实 AI 对话。

交付要求：
生成一个 HTML 文件，CSS/JS 全部内联。
移除外部字体等网络依赖，本地双击即可打开。
适配手机和电脑，确保导航、按钮可用。
告诉我文件保存位置和打开方法。

生成后，用浏览器打开，检查内容和手机端布局。不满意的地方继续在同一个任务里改：

整体风格保留，但手机端首屏太长。
请缩小标题与头像，收紧间距，
并确保底部导航不会遮挡正文。

回头看这段提示词，你会发现成功的关键不在技术词，而在于「希望保留的设计」那四条写得足够具体。指着具体元素说「我要这个」，永远比说「做得高级一点」有效。

五、记住这 4 点

要点	具体怎么做
需求写具体	展示什么、什么风格、按钮做什么、交付什么文件，都说清楚
修改沿用同一个任务	指出位置和问题，比「再好看一点」容易落实得多
生成后自己检查	核对内容、手机布局、按钮链接和 PDF 分页
本地打开不等于上线	想让别人通过网址访问，还得再走一步部署

六、本地打开 ≠ 上线，想让别人访问怎么办

很多新手会在这里卡住：文件在自己电脑上双击能打开，发给别人却打不开，或者发出去只有一堆文件。

原因很简单：生成出来的是一个 HTML 文件，还没有一个公网地址。想让任何人点开链接就能看，需要把它挂到静态托管上。

好消息是，纯静态页面（就是这种 CSS/JS 全内联的单个 HTML 文件）的托管是完全免费的，不需要买服务器、不需要域名。常见的几条路：

方式	适合什么情况	麻烦点在哪
GitHub Pages	有 GitHub 账号，想顺便把代码一起管起来	要过一遍 Git 基本操作
Cloudflare Pages / Netlify / Vercel	只想上传文件夹，不想碰命令行	需要注册账号，界面是英文
各类静态托管面板	已经有机器和宝塔面板的人	得自己配域名解析

如果你想走 GitHub Pages 这条，可以先看站内那篇 GitHub 从零开始详细教程，把仓库、提交、分支这些基本概念过一遍，再回来部署会顺很多。

还有一个更省事的办法：直接问 WorkBuddy「我这个 HTML 文件要怎么让别人访问，请给出具体步骤」。它会按你的情况给方案——但最终点确认的还是你自己，涉及账号和域名的事，别全权交给它。

七、发布前补上真实体验

如果你打算把这次的经历写成文章分享，有一件事必须做：补上实测的真实数据。

把下面几个问题回答了，内容立刻比「我做了个网站」值钱十倍：

问题	为什么值得写
从开始到出第一版用了多久？	读者最关心的成本问题
首版有什么问题？	证明你真的跑过，不是复述教程
改了几轮？每轮改了什么？	给出可复用的修改句式
最后解决了吗？怎么解决的？	这才是别人搜不到的部分

不用追求「一次成功」。把踩过的坑和修改方法写出来，读者才更容易照着做。

本期做的是静态个人网站，登录、数据库和支付这些功能可以后续再加。先把一页能看的页面做出来，比想清楚所有架构之后一直不动手强得多。

站内相关

• GitHub 从零开始详细教程：看懂仓库、发布作品、版本管理与开源协作——把网站挂上线那条路，从这里开始最快。
• 用 WorkBuddy 做老板爱看的 PPT：一句话生成可编辑的 .pptx（附可抄提示词）——同样是「用需求描述换来一份成品」，思路可以互相借用。

本篇为「WorkBuddy 小白上手」系列第 3 期。文中工具说明以对应仓库与官方文档为准，版本更新后功能入口可能有所调整。