面试时如何用作品证明技能，而不是只说会？

学完这篇，你能把“我会”变成面试官可当场打开、运行、追问的作品证据，并用 3 分钟讲清技能。

第一步：拆岗位要求，列证据清单

这一步把招聘 JD 变成一张“要求→作品证据”表，做完你就知道该拿什么作品去面试。把 JD 复制到飞书文档或 Notion，建 4 列：技能要求、我的证据、链接、可演示动作。例如要求“熟悉 React + TypeScript”，证据写“待办清单项目”，链接放 GitHub 仓库，可演示动作写“现场改一个筛选条件”。

注意：JD 里“了解”和“负责过”要求不同，别用一个项目硬套所有技能。

第二步：选 2-3 个作品，宁少勿多

这一步从做过的东西里挑出最能证明核心能力的作品，做完后你的作品集有重点、不散。前端优先选：1 个在线 demo、1 个能看代码质量的项目、1 个有性能数据的项目。每个项目在 README 顶部写清项目名、时间、你的角色、技术栈。

注意：团队项目要标明你负责的模块，别把整个项目说成自己独立完成。

第三步：把作品做成可验证材料

这一步让面试官不装环境也能看到效果，做完你得到在线链接、源码和说明。前端项目在 GitHub 仓库根目录放 README.md、package.json，README 写“安装：npm install；启动：npm run dev；构建：npm run build”。部署到 Vercel：登录 vercel.com，点 Add New → Project，导入 Git 仓库，Framework Preset 选 Vite，Build Command 填 npm run build，Output Directory 填 dist，点 Deploy。如果只用 GitHub Pages：进入仓库 Settings → Pages，Source 选 Deploy from a branch，Branch 选 main，目录选 /(root)，点 Save。设计作品在 Figma 右上角 Share，权限改为 Anyone with the link can view。

注意：不要把密码、API Key、公司内部数据传上公开仓库，用 .env.example 代替。

第四步：准备 3 分钟演示稿

这一步把每个作品讲成“问题-动作-结果”，做完你能在面试中直接说。按 5 句模板写：背景、你的任务、关键行动、结果数据、反思。结果不要编，没有上线数据就写“测试环境 100 条数据下，查询从 800ms 降到 120ms”，并说明测试条件。录屏可用 QuickTime Player：文件 → 新建屏幕录制，选麦克风，录 2 分钟关键操作。

注意：只讲“我用了什么”不够，面试官更想听“为什么这么做、遇到什么坑”。

第五步：现场打开作品，边操作边解释

这一步用共享屏幕展示真实界面，做完面试官能看到你的操作和代码，而不是只听描述。提前在浏览器建书签文件夹“面试作品”，放在线 demo、GitHub 仓库、Figma 链接、录屏。面试时共享 Chrome 标签页，按“打开页面→走关键路径→打开对应代码文件”顺序。被问“这是你写的吗”，打开 GitHub 的 Commits 页面，指出你的提交记录和日期。

注意：提前测试网络和链接权限；有些公司电脑不能装软件，优先用在线 demo。

第六步：准备追问和面试后补发链接

这一步预判技术选型、难点、失败三类追问，并在面试后 24 小时内补发作品链接。每个项目写 3 个答案：为什么用这个框架？最大 bug 是什么？数据量扩大 10 倍怎么办？答案落到具体文件、函数、参数。面试后邮件主题写“应聘 XX 岗位-姓名-作品链接补充”，正文列出 GitHub、在线 demo、Figma，并说明每个链接对应哪项技能。

注意：不会的就说不了解，并说你查过什么资料，比硬编可信。

小结

• 先拆 JD，列“要求→证据→链接→可演示动作”表。
• 选 2-3 个作品，覆盖核心技能，不贪多。
• 作品要有在线 demo、README、运行命令和你的提交记录。
• 用“问题-动作-结果-反思”3 分钟讲清，结果要有测试条件。
• 现场打开真实作品，准备好选型、难点、失败三类追问。
• 面试后 24 小时内补发链接，文件名和标题统一。