不会写代码,也能做个人网站

图 · 小白上手③：从一句话到一份可投递的简历，中间有四步

一、这一期做什么

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

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

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

二、准备材料

开工前先备齐这三样：

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

三、第一步：用 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 点

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

很多新手会在这里卡住：文件在自己电脑上双击能打开，发给别人却打不开，或者发出去只有一堆文件。原因很简单：生成出来的是一个 HTML 文件，还没有一个公网地址。想让任何人点开链接就能看，需要把它挂到静态托管上。

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

如果你想走 GitHub Pages 这条，可以先看站内那篇「GitHub 从零开始详细教程」，把仓库、提交、分支这些基本概念过一遍，再回来部署会顺很多。还有一个更省事的办法：直接问 WorkBuddy「我这个 HTML 文件要怎么让别人访问，请给出具体步骤」。它会按你的情况给方案——但最终点确认的还是你自己，涉及账号和域名的事，别全权交给它。

七、发布前补上真实体验

如果你打算把这次的经历写成文章分享，有一件事必须做：补上实测的真实数据。把下面几个问题回答了，内容立刻比「我做了个网站」值钱十倍：

不用追求「一次成功」。把踩过的坑和修改方法写出来，读者才更容易照着做。本期做的是静态个人网站，登录、数据库和支付这些功能可以后续再加。先把一页能看的页面做出来，比想清楚所有架构之后一直不动手强得多。

文中地址（复制到浏览器打开）

原文：https://ele.ac.cn/2207/第 1 期 · 从下载安装到交出第一份成果：https://ele.ac.cn/2205/第 2 期 · 专家、技能、连接器到底怎么配合用：https://ele.ac.cn/2206/第 4 期 · 让 AI 每天早上自动干活：https://ele.ac.cn/2208/本期用到的技能仓库 · vibe-resume-skill（含 12 套简历模板）：https://github.com/KevinYoung-Kw/vibe-resume-skill相关阅读 · GitHub 从零开始详细教程：看懂仓库、发布作品、版本管理与开源协作：https://ele.ac.cn/2047/相关阅读 · 用 WorkBuddy 做老板爱看的 PPT：一句话生成可编辑的 .pptx：https://ele.ac.cn/2085/

公众号正文不支持外链，上面地址请复制使用；也可以扫码看原文，原文里的链接可以直接点。

扫码或点左下角「阅读原文」看完整版 · 含全部可抄提示词与两张效果图