外部作品 · 原文链接

我发现了个AI时代的OFFER收割技巧

夜凉小红书原作者 · 瑞哥那2026/09/28 88 浏览

我发现了个AI时代的OFFER收割技巧

视频拆解与复刻教程

用 Kimi K2.5 Agent 把简历做成个人网站：全流程还原 + 可复刻度评测

来源：小红书视频笔记「我发现了个AI时代的OFFER收割技巧」· 作者昵称公开页未读取到 · 视频 6 分 46 秒 · 拆解核验日期 2026-09-26

来源与证据说明

原视频：小红书视频笔记「我发现了个AI时代的OFFER收割技巧」。视频规格为 1280×720、30 fps、时长 6 分 46 秒（约 12175 帧）。本文由「视频拆解与复刻图文教程」流程产出：抽取原视频关键帧、逐帧还原操作流程，并核验所涉工具的官方资料；配图均为原视频整帧画面，未做裁切或遮挡。

原视频链接：xiaohongshu.com/explore/697a00ef000000000a0318df

证据与复刻声明：本文严格区分四层证据——来源画面事实（视频画面、字幕与界面可直接观察到的内容）、创作者披露（作者在视频中明确说明的工具与方法）、官方资料（撰稿时在其官方页面核验到的能力与说明）、复刻方案（为让读者做出同类作品而设计的步骤）。本文的复刻方案不等于创作者的完整原始流程；作者未在视频中披露的简历内容、全部对话轮次与耗时细节，本文一律标注为推断或我们的方案，不作虚构。

一、结论：能复刻，且可复刻度高

一句话结论：可以复刻。全程只在 Kimi 的网页端或 App 里完成——不写代码、不买域名、不配服务器；Kimi 生成完网站会自动部署成一个公开链接，直接复制发给面试官即可。

· 方法本质：把自己那份静态的简历 PDF，变成一个「有设计感、能点击、能分享」的个人网站链接，让面试官在众多候选人里记住你。作者的演示里，这个链接最终以手机扫码/分享的形式呈现给对方。

· 主要门槛只有一个半：① 需要一个 Kimi 账号（免费注册）；② 需要一份简历文件（PDF 或 Word）。剩下的全是「审美怎么喂给 AI」——这正是两条路线的差别所在。

· 作者的观点（视频口播）：他并不认为「做得多好看」是最关键的，但这个方法能帮你被看见；他在结尾展示了一个获奖级别的参考站点，并说「他（这套工具）真的会助你一臂之力」。

图 1：成品效果——作者把个人简历做成一个可滚动的个人网站，在手机上展示。来源：原视频画面

二、这条视频在做什么：两条路线 + 一个工具

来源画面事实：作者先给出一张「目前主流头部模型」的排序图，依次是 01 Claude、02 Gemini3、03 lovable，并口播「目前头部的 AI 工具还是 claude / gemini3 / lovable」；随后他放出一组对比，左侧标注 Original Video（Cr: Jesko Jet），右侧标注「Kimi 的输出」，画面正中打上 K2.5，口播「K2.5 真的有让我惊艳到」。正式演示时，他用的是 Kimi 的 K2.5 模型 + Agent 模式。

图 2：作者对头部模型的判断——Claude / Gemini3 / lovable（创作者披露）。来源：原视频画面

图 3：K2.5 输出对比——左侧为参考原作视频，右侧为 Kimi 的生成结果（创作者披露）。来源：原视频画面

来源画面事实：这条视频给出的做法是「两条路线」，用一个工具完成：

· 路线 A · 模板提示词：把作者写好的一套「前端专家角色 + 设计规范 + 页面结构」提示词，连同简历文件一起发给 Kimi，让它按固定规范生成。适合「我不知道要什么风格，但要好看」。

· 路线 B · 参考图片：把一张你喜欢的网页截图或设计图，连同简历一起发给 Kimi，让它「照着这个风格」做。适合「我已经有想模仿的样子」。

官方资料佐证（核验日期 2026-09-26）：Kimi K2.5 官方模型页原文写道——「作为原生多模态模型，Kimi K2.5 将文本、图像和视频输入转化为功能性前端代码……从重建复杂页面布局到构建带动画的完整网站，Kimi K2.5 支持从概念到可部署结果的完整视觉到代码工作流」。其中「自然语言」对应路线 A，「图像/视觉参考」对应路线 B，与视频演示完全一致。

图 4：Kimi 生成的另一个成品站示例（产品落地页），用于说明输出质量上限。来源：原视频画面

三、逐项拆解：从简历到网站链接

3.1 准备：打开 Kimi，选对模式，上传简历

来源画面事实：作者打开的是 Kimi 网页端（kimi.com）。首页输入框下方有一排能力入口（网站、文档、PPT、表格、深度研究、Agent 集群 Beta），输入框右下角是模型/模式选择器；作者在下拉里选择 K2.5，并切到 Agent 模式（视频字幕原文：「右下方选择 K2.5 agent 模式」）。左侧栏还有「新建对话 / 网站 / 文档 / PPT / 表格 / 深度研究 / Kimi Code / 历史会话」等入口。

图 5：Kimi 网页端首页——输入框右下角选择 K2.5 与 Agent 模式，下方为能力入口。来源：原视频画面

来源画面事实：页面正中间是 KIMI 输入框，作者把简历文件拖了进去，框内出现一个文件卡片（示例文件名 Resume 2.pdf），输入框下方挂着 Agent 标签与 K2.5 Agent 标识。

图 6：在 Kimi 输入框里上传简历文件（示例为 Resume 2.pdf）。来源：原视频画面

补充（来源画面事实）：上传菜单里写明了支持的格式——「支持 PDF、Word、Excel、PPT、图片和视频，最多 50 个」，并显示「剩余额度 40」。也就是说，免费额度是按任务/次数计的，这一点在第七节会再说明。

3.2 路线 A：用模板提示词生成（视频原文，可直接复制）

来源画面事实：作者在视频里说「我在这边给大家准备了这一套提示词」「我建议大家直接用我的模板」，并把这套提示词完整投在屏幕上。它是一份写给 AI 的完整「需求说明书」，分五段：角色设定、任务目标、核心限制、设计风格、内容映射逻辑、技术实现栈、执行步骤。原文如下（为便于在 Word 中阅读，已去掉原文的 Markdown 加粗星号，其余文字与【】标注保持原样）：

图 7：作者展示的模板提示词原文（角色设定 / 任务目标 / 核心限制三段）。来源：原视频画面

模板提示词（视频原文）

# 角色设定

你是一位获得 Awwwards/FWA 大奖级别的创意前端开发专家。你擅长将复杂的文本信息

转化为视觉惊艳、交互流畅的网页体验。

# 任务目标

请阅读我上传的【简历文件】，提取其中的关键信息，为我生成一个视觉效果极佳的个人主页。

# 核心限制（必须严格遵守）

1. 单文件输出 (Single File Output)：最终代码必须是一个单独的 index.html 文件。

2. 无需构建 (No Build Step)：所有依赖库（Vue 3, Tailwind CSS, GSAP）必须通过 CDN

引入。用户直接双击文件即可运行。

3. 易于配置 (Easy Config)：必须在代码的最顶部创建一个名为 const profileData 的

对象，将提取到的姓名、职位、链接、配色等信息都放在这里，方便非技术人员修改。

# 1. 设计风格【可由用户自定义】

整体氛围：【液态虚空 (Liquid Void) - 深色背景、神秘感、流体动画、极简主义】

视觉元素：【玻璃拟态 (Glassmorphism)、微噪点纹理、平滑的滚动效果】

配色方案：

背景色：【#050505（深炭黑）】

主文本：【#F0F0F0（米白）】

强调色：【#CCFF00（酸性绿 - 仅用于按钮或高亮）】

# 2. 内容映射逻辑（简历分析）

请智能分析简历内容，并映射到以下网页板块：

1. Hero（首屏）：展示用户的姓名（超大字体）和当前职位。入场动画要震撼。

2. About（关于）：使用 Bento Grid（便当盒格布局）展示用户的简介、经验年限、所在城市。

3. Experience（经历）：制作一个极简的垂直时间轴，鼠标悬停时高亮当前经历，其他部分变暗。

4. Skills（技能）：制作一个无限滚动的跑马灯 (Marquee)，展示技术栈关键词。

5. Footer（页脚）：占据半屏的超大「联系我」区域，包含邮箱和社交链接。

# 3. 技术实现栈

核心逻辑：Vue 3（使用 Composition API）

样式系统：Tailwind CSS（直接在 class 中写样式）

动画引擎：GSAP（用于制作丝滑的入场和滚动动画）

交互细节：自定义鼠标光标（一个混合模式的圆圈），鼠标悬停在链接上要有磁吸效果。

# 执行步骤

1. 读取并分析附带的简历内容。

2. 提取关键信息填充到 const profileData 对象中。

3. 根据「设计风格」编写 CSS 和动画逻辑。

4. 输出完整的、可直接运行的 index.html 代码。

调用要点（复刻方案）：把这段提示词和简历文件一起发出去。其中三处最值得保留——①「你先分析简历、再生成」保证内容对得上；②「单文件 + 无构建」保证交付物简单；③「设计风格可由用户自定义」这一整块，是你换风格的唯一开关（官方页也写明「可选择任意部分，并用交互式编辑继续细化」）。

图 8：Kimi 读取简历后的执行步骤与任务面板（Kimi 的 Computer 面板显示正在读取 Resume 2.pdf）。来源：原视频画面

补充（来源画面事实）：任务面板里能看到的执行步骤是四步——读取并分析简历内容、提取关键信息填充到 const profileData、根据设计风格编写 CSS 和动画逻辑、输出可直接运行的代码；与上面提示词里的「执行步骤」一一对应。作者口播「大概在 2 到 3 分钟之后」结果就出来了。

3.3 路线 B：用参考图片生成

来源画面事实：作者切换到第二条路线——在对话里上传多张喜欢的网页设计截图（画面标题写着「参考图片」，作者口播「任何类型的图片设计」），再附上简历，用一句自然语言下指令。画面里出现的实例化提示词原文是：

根据我上传的网页的风格，帮我做一个同样风格的英文个人网站，要求交互有趣

图 9：路线 B——上传任意类型的设计/网页截图作为「参考图片」。来源：原视频画面

图 10：路线 B 的完整输入：参考图 + 简历文件 + 一句自然语言指令。来源：原视频画面

来源画面事实：作者给出这条路线的效果对照——左侧「参考图片」（几张红黑配色的设计图 + Resume5.pdf），右侧「生成结果」（一个以 WORK EXPERIENCE 为主视觉的个人站点），并在字幕里解释了路线的适用性：「所以如果你上传的是静态图片的话」，模型可以跨过文字去理解视觉风格。

图 11：路线 B 的效果对照——左侧参考图片，右侧 Kimi 生成的结果。来源：原视频画面

选择建议（复刻方案）：想要「稳定好看」用路线 A（提示词把每个板块都规定死了）；想要「像某个具体网站」用路线 B（参考图给得越准、越多，越接近你想要的）。两条路线可以叠加：先给参考图定调，再补一句模板里的「内容映射逻辑」。

3.4 等待生成：Kimi 自动生成并部署成链接

来源画面事实：生成完成后，Kimi 在会话里返回「网站部署成功」，并给出「在线访问」链接（画面里可见形如 https://xxxxxxx.beta-ok.kimi.link 的地址）。作者口播「用上方任意一种方式完成之后」，你就拿到了一个可以直接打开、可以直接分享的网址。同一块面板里还有「预览（该版本已发布）」「全部文件（预览或者下载文件）」两个入口，以及网站版本历史（作者演示时通过「网站版本更新部署」回退到了 V1 原始版本）。

图 12：生成完成——Kimi 提示「网站部署成功」并返回在线访问链接（.beta-ok.kimi.link）。来源：原视频画面

官方资料佐证（核验日期 2026-09-26）：K2.5 官方页写明「最终得到的是功能完整、可发布和分享的网站」，并说明 Agent 模式下「提供输出预览（文档、演示文稿、电子表格、网站、研究报告），你可以随时查看、下载或分享」；官方把这条能力的产品入口标为「体验可视化编程」（kimi.com/build）。

3.5 可视化编辑：用画笔框选 → 添加到对话 → 让 Kimi 改

来源画面事实：拿到网站后，作者进入「编辑模式」（右上角按钮为「退出编辑」），在底部工具栏里有「标注 / 选择 / 画笔」等工具。作者口播的用法是：「用这个画笔去框出你想要修改的区域」，框完之后点「添加到对话」，截图会作为一张标注图发给 Kimi；随后在对话里用一句话说明要改什么（画面里出现的原文是「按照标注帮我修改」）。作者把这个动作类比成「平时你跟设计师沟通的方式」。

图 13：编辑模式——底部的「画笔 / 标注」工具，用于在网页上直接框选要改的区域。来源：原视频画面

图 14：框选后「添加到对话」，再让 Kimi 按标注修改（右侧为其任务面板）。来源：原视频画面

复刻要点（复刻方案）：这一步比提示词更关键。因为视觉问题很难用文字描述，「框出来 + 一句话」的沟通成本最低、命中率最高。建议一次只框一个区域、只改一件事，改完立刻看，避免一次提十条需求把自己绕晕。

3.6 换成自己的照片

来源画面事实：作者的网站首屏原本是一张参考图里的街拍摄影（黑白 + 灰色滤镜）。他直接把自己的照片上传给 Kimi，并让它替换首屏人物图；Kimi 完成后回执写着「已完成修改！更新内容：Hero 照片已替换为你上传的照片；照片改为圆形显示；添加了黑色圆形边框和黄色外圈装饰；移除了灰色滤镜」。作者口播「这也比较适合那些 AIGC 的同学」。

复刻要点（复刻方案）：首屏（Hero）是你的「第一印象」，务必换成自己的照片或作品图。同时顺手让 Kimi 一并调好裁切方式（圆形/方形）与边框，避免照片比例不对把版式撑坏。

3.7 迭代微调：改配色、加中英文切换、加语音展示

来源画面事实：作者演示了三类典型迭代，都是「一句话 + 可选框选」的方式完成：

· 改配色：作者对着一个红黑配色的站点说「这个红色现在不好看，我们做成银色渲染金属色，整个设计需要更加酷炫」，Kimi 随后把高亮色整体调整为银色金属质感并重新部署。

图 15：迭代示例——把整站配色改成「银色渲染金属色」（改后重新部署并给出新链接）。来源：原视频画面

· 加功能：作者在一个极简版网站上输入「需要支持中英文切换，加一个按钮」，Kimi 回执写明会把全站文案抽成语言对象、在导航栏加一个切换按钮、用 JS 动态加载，实现一键中英切换，并说明「I will now deploy the updated website」。

图 16：迭代示例——为一句话需求「支持中英文切换，加一个按钮」自动改造并重新部署。来源：原视频画面

· 加互动：作者的成品里还出现了一个「生成音频展示」的模块（页面里带 Stop 控制），说明这类网站可以继续往上加交互（如语音自我介绍），属于可选的加分项。

3.8 发布与分享：把链接发给面试官

来源画面事实：作者在预览窗口点右上角「分享」，口播「点击已发布复制链接」，拿到可对外访问的地址后，用它在手机端演示了网站效果——并强调「让面试官点击这个链接进去」，同时提醒要检查「网页端跟手机端的页面效果」都要正常。

图 17：点击「分享」→ 复制已发布链接，并在手机端验证移动端效果。来源：原视频画面

图 18：作者结尾展示的获奖级别参考站点，并说明「做得多好看不是最关键的」。来源：原视频画面

四、参数与操作速查表

项目	内容
工具	Kimi（月之暗面 Moonshot AI），网页端 kimi.com 或手机 App
模型 / 模式	K2.5 模型 + Agent 模式（输入框右下角选择）
输入素材（路线 A）	模板提示词（见 3.2 节）+ 简历文件（PDF / Word）
输入素材（路线 B）	参考图片（1 张或多张） + 简历文件 + 一句话指令
官方支持格式	支持 PDF、Word、Excel、PPT、图片和视频，单次最多 50 个
生成耗时	作者口播约 2～3 分钟（长文案 / 多轮改版会更久）
输出形态	可预览、可编辑、可发布的在线网站
部署地址	Kimi 自动生成的公开链接，形如 xxxxx.beta-ok.kimi.link
编辑方式	编辑模式 → 画笔框选区域 → 添加到对话 → 描述修改需求
交付方式	点「分享」复制已发布链接，发给面试官；并在手机上验证
官方入口	kimi.com（也可从 kimi.com/build 进入可视化编程）

五、手把手复刻 8 步

第 1 步 打开 Kimi 网页端（kimi.com）或 App，注册并登录（免费）。

第 2 步 在输入框右下角把模型切到 K2.5，并把模式选为 Agent。

第 3 步 上传你的简历文件（PDF 或 Word）；若要用参考图，一并上传你喜欢的网页截图。

第 4 步 选路线：路线 A 粘贴 3.2 节的模板提示词；路线 B 写一句「根据我上传的网页的风格，帮我做一个同样风格的英文个人网站，要求交互有趣」。

第 5 步 发送，等约 2～3 分钟；Kimi 会自动生成网站并部署，返回一个 kimi.link 预览链接。

第 6 步 进编辑模式，用画笔框选不满意的地方 → 添加到对话 → 用一句话说清要改成什么（配色 / 照片 / 版面 / 新功能）。

第 7 步 至少迭代一到两轮：换掉首屏照片、调好配色、确认移动端版面正常。

第 8 步 点分享 → 复制已发布链接 → 发给面试官；自己先在手机上打开一遍验证。

六、可复刻度评测与已知限制

可复刻度评测（依据视频画面与官方资料，核验日期 2026-09-26）：

环节	是否免费	门槛	可复刻度
注册并使用 Kimi	免费（有额度限制）	一个账号	高
上传简历并生成网站	免费额度内	简历文件	高
路线 A：模板提示词生成	免费	复制提示词	高
路线 B：参考图片生成	免费	一张参考图	高
自动部署成公开链接	免费（随生成自动部署）	无	高
可视化编辑与迭代	免费额度内	无	高
绑定自有域名	需自行处理	域名 + 配置	较低

已知限制：

限制	说明
作者昵称未读取到	从公开页面只能取到标题与一条评论，作者账号名待确认，本文未做臆测。
免费额度有限	K2.5 官方说明为「提供免费使用，但有使用限制」；画面里出现过「剩余额度 40」，高频迭代或长文案可能触及上限，需要付费计划。
生成耗时不可控	作者口播约 2～3 分钟，但改版、加功能或多轮迭代会明显更久；本文未把它标成「几分钟一定出」。
效果高度取决于输入	作者原话提示：不给风格、不给参考图时，「他大概率是做不出高级审美的」。质量的天花板由你的提示词/参考图决定。
首次生成不完美	作者的成品也是靠「框选 → 添加到对话 → 修改」多轮迭代才满意的，不要指望一次成型。
视频未披露的部分	作者的完整简历内容、全部对话轮次、每个版本的具体耗时均未完整展示，本文按要求标注为推断，不作虚构。