用Claude Skill把无聊简历变成动画网页

一份简历，为什么不能有性格？

大多数在线简历长得都一样：白底黑字、时间线、技能条。开发者 dooa-ansari 在 Dev.to 上分享了一个小项目，试图改变这件事——他把一份普通简历（或 LinkedIn 导出的 PDF）喂给一个自定义的 Claude Skill，产出的不是文档，而是一个带动画、可交互的单页个人网站。

整个输出只有一个 HTML 文件。没有框架，没有构建步骤，丢到 GitHub Pages 上就能用。

Claude Skill 是 Anthropic 为 Claude 推出的可扩展能力机制。它本质上是一个包含指令文件（SKILL.md）、资源模板和可选脚本的文件夹，告诉 Claude 在特定任务场景下该遵循什么流程、调用哪些工具、产出什么格式。与普通的系统提示词不同，Skill 可以打包参考资料和可执行脚本，让模型在需要时按需读取和执行，从而把「一次性对话」变成可复用、可分发的标准化流程。用户既可以在 Claude 应用里通过 Settings 上传 Skill 压缩包，也可以在 Claude Code 里通过插件市场安装，这让社区分享的 Skill 能像 App 一样被一键启用。

这个 Skill 到底生成了什么

页面上的内容不是套模板填字段，而是围绕「这个人是谁」重新组织：

• 会动的虚拟形象：眨眼、打字、挥手，还会冒对话气泡。发型、配色、眼镜都可以选。
• 职业经历 = 游戏关卡：每份工作是一个关卡，升级时有「LEVEL UP!」弹出动画，并标注你在那段经历里解锁了什么技能。
• 成就计数器和「为什么雇我」卡片：每一张都对应简历里的真实内容，不是空话。
• 角色属性面板：带一个小的动画「快乐角落」场景，以及一些体现性格的 perks。
• GitHub 项目图：把项目和技术栈画成一张可交互的关系图。

这里的取舍很有意思：它放弃了「信息密度最大化」的传统简历思路，转而追求记忆点。招聘方看一份简历平均只有几秒，一个会动的头像和关卡式经历，至少在「让人多看两眼」这件事上有优势。

工作原理：Claude 负责读和问，Python 负责造

这个 Skill 的设计思路是职责分离，Claude 不做渲染，只做理解和采访。

当你说「用我的简历做一个动画简历」时，流程分四步：

1. 索要简历。PDF、DOCX、纯文本、LinkedIn 的「Save to PDF」导出都支持，也可以直接给 GitHub 用户名。
2. 问几个快速问题：主题风格、虚拟形象长相、喜欢的颜色、兴趣爱好、目标岗位。

之后就交给一个普通的 Python 脚本完成构建。Skill 文件夹的结构大致是：

skills/animated-resume/
├── SKILL.md                    # Claude 遵循的指令
├── assets/template.html        # 动画页面模板
├── assets/example-profile.json # 完整的虚构示例
├── references/schema.md        # profile.json 每个字段的说明
└── scripts/build.py            # profile.json → index.html

这种「LLM 负责结构化数据、脚本负责确定性渲染」的模式，比让模型直接吐 HTML 更可靠——渲染逻辑不会因为模型发挥而漂移，样式和动画始终一致。

职责分离在这里指的是把「理解」和「渲染」拆给不同执行者。LLM 擅长从非结构化文本里抽取字段、追问缺失信息、做语义归类，但它在生成大段 HTML/CSS/JS 时容易出现格式漂移、样式不一致、变量名错乱等问题，而且每次输出都可能不同，难以复现。让 Python 脚本消费一个固定的 JSON 数据结构来渲染页面，则每次运行结果完全一致，样式和动画由模板决定，不受模型随机性影响。这种模式在工程上被称为「LLM 做前端理解、确定性代码做后端产出」，也是当前让 AI 生成内容更可控的主流做法之一。

两分钟上手

如果你用的是 Claude Code，安装只需要两条命令：

/plugin marketplace add dooa-ansari/animated-resume-claude-skill
/plugin install animated-resume@animated-resume

然后直接说：

Make me an animated resume from my CV.

如果你用的是 Claude 应用（claude.ai 或桌面端），从仓库下载 animated-resume-skill.zip，在 Settings → Capabilities → Skills 里上传即可。

Claude Code 是 Anthropic 推出的命令行编程工具，运行在终端里，可以直接读写本地文件、执行命令。它支持插件市场机制，用户通过 /plugin marketplace add 添加第三方仓库作为插件源，再用 /plugin install 安装具体插件。这里的 animated-resume 就是被封装成插件分发的 Skill。而 Claude 应用（claude.ai 网页版和桌面客户端）走的是另一条路径——Skills 功能位于 Settings 的 Capabilities 面板下，通过上传 zip 包来启用。两条路径最终加载的是同一套 SKILL.md 和脚本，区别只在分发方式。

发布上线

因为产物是单个 HTML 文件，托管几乎是零成本：

1. 把 index.html 放进一个 GitHub 仓库。
2. 进入 Settings → Pages → Deploy from a branch，选择 main / (root)。
3. 页面会发布在 https://<your-username>.github.io/<repo>/。

拿到链接后，放进 LinkedIn 资料或邮件签名都很自然。相比让人下载一份 PDF，一个链接显然更容易被点开——这也是这类「简历即网页」方案最实际的收益。

一些值得注意的设计取舍

从工程角度看，这个项目展示了 Claude Skill 的一种典型用法：把模型当成流程编排器和信息抽取器，而不是万能生成器。真正的难点（动画、布局、交互）交给模板和脚本，模型只负责把非结构化简历转成结构化的 profile.json。

代价也很明显：页面结构是固定的，个性化程度取决于模板里预留了多少槽位。作者在 demo 里用的是虚构人物，也说明了模板的灵活度上限。

代码以 MIT 协议开源，可以自用、fork，或者借鉴思路做自己的 Skill：

👉 github.com/dooa-ansari/animated-resume-claude-skill