用 AI 打造网页版个人简历：零代码，从 PRD 到上线全流程

你是不是也有过这样的经历：好不容易做好一份 PDF 简历，发出去之后想更新，却发现对方手里的永远是旧版；想放上你最新的热门作品、一段视频、一个外部链接，PDF 却怎么都装不下。

传统 PDF 简历装不下视频，装不下外链，装不下你最新发布的作品；而网页版简历可以全部装下，而且随时更新。点开一个链接就能看到你是谁，滑动浏览你的所有作品，一键跳转到你的内容平台；如果对方还想要传统简历，再一键下载成 A4 PDF 发过去。

今天我们就用 AI 做一个这样的网页版个人简历。不管你是做运营、做设计、做自媒体，还是学生、自由职业者，全程不需要懂任何代码，跟着这套提示词和流程走一遍，你就能拥有一个属于自己的网页版简历。

本教程会用到下面这些工具和网站，先集中列在这里，后面用到时可以随时回来查。

VSCode 和 Claude Code 完全免费；OnePageLove 和 Awwwards 用来找设计参考；EdgeOne Pages 和 GitHub 用在最后的部署环节。

在开始之前，第一件事就是准备开发工具。

网上的 AI 编程工具五花八门，这里推荐通用性最强、上限最高的组合，也是我自己最常用的：VSCode 加 Claude Code 插件。

这两个工具完全免费。具体的安装方法非常简单，可以去看我之前出的《Vibe Coding 工具箱》那一期，这里不展开讲。

按照教程给 Claude Code 接入模型之后，我们就正式开始做网页版简历。

第一步要做的事很简单：让 AI 先写一个简历的产品文档，也就是简历 PRD，用来整体呈现简历的内容和设计。

一份漂亮的网页简历，通常包含 7 个板块：

那这 7 个板块的内容从哪里来？很简单——直接把你现成的简历存进工作区，让 AI 按这 7 个板块重新整理成一份 PRD，不用你自己动手。

把现有简历，加上下面这段提示词，一起发给 AI：

对 AI 说：

我准备做一个 HTML 版本的简历。请帮我在 PRDs 文件夹内创建一份网页简历 PRD.md。我已经把现有简历存在了工作区，请按以下 7 个标准板块重新整理我的内容：
一、Hero 区：姓名、一句话定位、联系方式；
二、关于我：2 到 3 段详细自我介绍；
三、作品和项目：每个作品包含名称、一句话描述、链接、截图；
四、经历和履历：时间线格式；
五、技能和背书：技能列表加推荐评价，适合用图表呈现；
六、内容输出：B 站、小红书、公众号、GitHub 等内容平台链接；
七、联系 CTA：邮箱、社交账号、预约链接。
整理要求：作品和内容输出这两块如果我现有简历里没有，请列出占位并提醒我补充。每个板块用 Markdown 输出。

几秒钟之后，你就能拿到一份结构清晰的网页简历 PRD。

有了简历 PRD，接下来要找一个设计参考。这一步是做出风格化简历很关键的一步。

如果你没有设计基础，不建议自己从零设计。最好的办法是去找现在比较流行的顶尖设计风格，然后直接对标。这里推荐两个网站：

• OnePageLove（主推）：打开后在分类里选 Personal，里面有非常多别人做好的个人网站，直接挑你喜欢的。
• Awwwards：顶级设计网站合集。想做风格独特的简历，可以来这里找天花板级别的灵感。

核心方法非常简单——找素材、截图、喂给 AI。截图时记得多截几屏，包括导航栏、Hero 区域、卡片、图文排版等，让信息更丰富。

挑好之后，把 3 到 5 张截图发给 AI（有具体网页链接的话也一起发），并先用 @ 命令引用一下简历 PRD，然后发这段提示词：

对 AI 说：

我发给你的几张截图是我喜欢的网页设计参考，加上我之前生成的网页简历 PRD。请基于这两份资料，帮我写一份 UI 设计文档，包括两部分：
一、视觉风格规范：配色方案、字体规范、圆角、阴影、卡片样式，以及整体视觉调性；
二、7 个板块的具体 UI 设计：每个板块用什么 UI 组件、布局结构如何、有哪些交互效果。
请把这份文档放在 design 文件夹里。

AI 会基于截图和简历 PRD 生成一份完整的 UI 设计文档，并用 Markdown 现况图把设计直观展示出来。打开看一下，有不满意的地方直接反馈——比如想让某个板块换种布局，告诉 AI 第几行、具体改成什么样，它会快速修改。

现在我们有了简历 PRD 和 UI 设计文档，接下来让 AI 真正动手做简历。

这一步很简单——把前两步产出的两份文档一起喂给 AI，让它生成一个完整的 HTML 文件。

对 AI 说：

请基于网页简历 PRD 和 UI 设计文档，生成一个完整的静态 HTML 个人简历。要求：
一、单文件运行，所有 CSS 写在 style 标签内、JS 写在 script 标签内，打开即用；
二、完整实现 PRD 里的 7 个板块，以及 UI 设计文档里的视觉风格；
三、移动端响应式适配，手机上也能正常浏览；
四、顶部加锚点导航栏，可快速跳转到不同板块；
五、作品、经历这类信息密集的板块用网格卡片呈现，不要长段落堆砌；
六、技能和工具用图标加标签的方式呈现，不要纯文字列表；
七、板块之间和板块内部要有充分的留白和层级，信息密度高但不拥挤；
八、技能和背书板块用图表方式呈现，可自由选择柱状图、雷达图、时间轴等合适的图表类型。
简历加载时做一个简单的动效。

几分钟之后，你就能拿到一个完整的 HTML 简历文件。打开看一下，大概率会看到一个已经非常像样的简历——配色、布局、字体都按你给的参考来了，所有板块也都齐了。

如果有不满意的地方，这很正常，AI 第一次生成不可能 100% 符合预期。下一步我们就来改它。

改稿这件事，新手最容易犯的错误是描述太模糊——“我觉得这个不太好看”“这里能不能改一下”。这种反馈 AI 完全 get 不到你想要什么。

所以这里有一个固定的反馈格式，套着它给 AI 提反馈，改稿效率会高很多——框选截图、描述实际、描述期望。

先对有问题的地方截图、把问题处框选出来，把截图发给 AI，然后按这三点说清楚：

1. 我在什么位置发现了什么问题？
2. 这里我看到的是什么错误？
3. 我希望改成什么样子？

结构化的反馈，AI 基本一次就能改到位。一般经过两到三轮修改，简历就基本符合你的预期了。

这一步走完，你手里就有了一份自己真正满意的网页简历。下一步，我们给它加上下载 PDF 的功能。

传统 HR 仍然需要一份能直接打印、或作为邮件附件发送的 PDF 简历。所以我们的网页简历最好兼顾这种需求——网址用来主动传播，PDF 用来应付传统场景。

注意这里要生成的是一份精简的传统简历，而不是把网页内容原样塞进 PDF。提示词如下：

对 AI 说：

请在 index.html 里加一个“下载 PDF”按钮，点击后可下载一份 A4 单页的简历 PDF。要求：
一、PDF 是给传统场景用的，内容必须精简到一页 A4，不要把网页所有内容都塞进去；
二、必须保留：Hero 区（姓名 + 一句话定位 + 联系方式）、经历和履历、最重要的 3 个作品（名称 + 一句话描述 + 链接）、核心技能；
三、网页特有的内容不要放进 PDF，比如锚点导航、视频、暗色切换、图表（图表改成文字版精简列表）；
四、网页上的链接在 PDF 里转成可点击的文字超链接，作品名后面跟一个简短网址；
五、PDF 的字号、间距、布局要适合纸面阅读，不要照搬网页的视觉风格；
六、“下载 PDF”按钮放在 Hero 区右上角的显眼位置。

发完提示词，AI 会帮你把功能加上。打开页面就能看到多了一个下载按钮，点击即可得到一份单页 PDF 简历，非常方便。

这一步走完，你的简历就有了两种形态：网址版用来传播展示，PDF 版用来应付传统场景。

最后一步，我们把本地的 HTML 简历部署到线上，拿到一个真正可以发给别人的公开网址。

这里推荐用 EdgeOne Pages，可以理解成国内版的 Vercel。具体操作：

1. 把代码推送到 GitHub；
2. 在 EdgeOne Pages 上拉取你的仓库，点击 Deploy；
3. 几分钟之内就能拿到一个公开网址，任何设备都能打开访问。

整个流程和用 Vercel 部署几乎一模一样，感兴趣可以看我之前讲部署的那期视频。

拿到网址之后，这就是你的网页简历地址，可以发给任何人——微信、邮件、名片、朋友圈，贴在哪里都行。如果想要更短、更好记的网址（比如你的名字加域名后缀），可以去任意域名服务商买一个域名，在 EdgeOne Pages 后台绑定上去即可，这一步可选。

更关键的是：以后每改一次、推送到 GitHub，它就会自动重新部署更新。所有人拿到的永远是最新版，再也不会出现“发出去就改不了”的尴尬。

以上就是用 AI 做一份网页版个人简历的完整流程。最后快速回顾一下：

整个过程不需要你懂任何代码，只要按这套提示词和流程走一遍，就能拥有一个属于自己的网页简历。不管你做运营、设计、自媒体，还是学生、自由职业者，都可以拥有一个属于自己的网址。

在 AI 时代，这个网址就是你最好的个人名片。