主题
第11章 作品集构建方法
11.1 问题场景
很多候选人的作品集只展示技术堆栈、页面截图或代码仓库地址，缺少业务目标、验证数据、关键决策和复盘过程，因此很难真正打动招聘方。 对于智能体（AI Agent）岗位尤其如此：如果作品集只写“用了 RAG / Tool Calling / Workflow”，但没有说明它解决了什么业务问题、怎么验证、为什么可信、你到底负责了什么，面试官通常无法判断你的真实交付能力。
很多前端工程师在转型时会踩几个常见坑：
- 项目很多，但每个都讲不深。
- 只讲技术点，不讲业务目标和结果。
- 只展示成功页面，不展示证据、评测和复盘。
- 讲不清个人贡献边界，像是在复述团队项目概览。
优秀作品集不是“我会什么工具”的堆叠，而是“我如何围绕真实问题持续交付结果”的证明材料。
前端迁移提示
前端背景并不是转型作品集的包袱，反而是差异化优势。你原来的经验可以直接迁移为：
- 复杂交互和状态设计 -> Agent UI / UX 与任务工作台能力。
- 工程协作和接口契约 -> Tool Calling、Workflow 和系统集成能力。
- 监控、上线、回滚经验 -> 评测、可观测性和生产治理能力。
- 页面演示能力 -> 作品集页面与项目演示叙事能力。
最小项目目标
本章建议先完成一个“最小作品集闭环”项目，例如：
- 从现有 3 个项目里挑 2 个，整理成统一项目卡片。
- 为每个项目补齐“问题 -> 方案 -> 结果 -> 复盘”链路。
- 准备最少 2 份可验证证据材料。
参考入口：
11.2 核心原理
作品集证据结构图
作品集构建的关键，不是把项目写得越长越好，而是把“问题定义、方案设计、结果证明、个人贡献和复盘”组织成一个高信息密度、可被追问、也经得住追问的结构。
一、项目选型：优先展示和目标岗位最相关的能力
作品集不是项目仓库总表，而是岗位对齐后的精选集。 建议优先选择：
- 与目标岗位能力高度相关的项目。
- 能体现完整工程闭环的项目。
- 你参与度高、能讲清细节和取舍的项目。
如果你是前端转 AI Agent 工程，最推荐优先展示：
- 企业知识库问答 Agent。
- 浏览器 / 办公自动化 Agent。
- 多步骤业务工作流 Agent。
- 项目线 D 全栈自托管 Agent — 零 API 依赖的本地知识问答系统。求职差异化亮点：展示私有化部署能力和云端/本地 trade-off 思维。
💡 如果目标岗位涉及数据合规或私有化部署，项目线 D 是最强差异化竞争力。面试时能讲清"为什么选自托管、如何做技术选型、与云端方案的 trade-off"会非常加分。
二、证据导向：每个项目都要有“可验证结果”
智能体（AI Agent）项目最容易被质疑“听起来不错，但如何证明”。 所以每个项目都建议至少准备：
- 指标结果。
- 截图或交互录屏。
- 输出样本或评测结果。
- 失败案例与修复说明。
如果没有证据，项目叙事很容易变成主观感受。
三、叙事闭环：从问题到复盘要形成一条线
一个成熟项目卡片至少应回答：
- 业务背景是什么。
- 为什么值得做。
- 你用了什么方案。
- 结果如何证明有效。
- 如果重做一次，会怎么优化。
这条叙事链越完整，面试官越容易判断你是“真正做过的人”。
四、个人贡献：不要只讲团队做了什么
作品集最常见的问题之一，是把团队总方案讲得很完整，但讲不清自己到底做了什么。 建议明确区分：
- 项目整体目标。
- 你主导或负责的核心链路。
- 你做出的关键决策。
- 你解决了哪些具体问题。
五、结构统一：便于比较，也便于复用
如果你有多个项目，建议统一结构。 这样既方便你自己准备，也方便面试官快速对比。 你可以直接参考：
- 作品集模板
docs/examples/assets/samples/example-11-portfolio-card.json
11.3 实操步骤
推荐做法不是先做一个很漂亮的个人站，而是先把“项目卡片、证据包、讲述提纲”整理出来，再决定最终呈现形态。
步骤 1：筛选 2 到 3 个代表项目
筛选标准建议包括：
- 和岗位最相关。
- 能体现不同层面的能力。
- 你最熟、最能讲清楚。
步骤 2：为每个项目写统一卡片
建议至少包含：
- 项目背景。
- 目标用户。
- 核心问题。
- 方案设计。
- 关键指标。
- 个人职责。
- 复盘总结。
步骤 3：准备证据材料
每个项目至少保留：
- 关键界面截图。
- 结果样本或评测结果。
- 系统架构或链路图。
- 一段失败样本与修复说明。
步骤 4：准备 3 分钟项目讲解稿
建议按以下顺序组织：
- 业务背景。
- 方案选择。
- 关键链路。
- 指标结果。
- 你的职责。
- 复盘与改进。
步骤 5：同步做作品集首页或总目录
如果你有多个项目，建议做一个统一入口，方便：
- 面试官快速扫描。
- 你自己选择重点展开项目。
- 后续继续新增项目时保持结构统一。
步骤 6：把样本和模板一起归档
建议至少保留：
- 作品集模板
- 项目卡片样本：
docs/examples/assets/samples/example-11-portfolio-card.json - 截图清单：
docs/examples/assets/screenshots/README.md - 章节片段索引
11.4 常见坑
坑 1：项目数量很多，但每个都很浅
比起 6 个讲不清的项目，2 到 3 个能被追问到底的项目更有价值。
坑 2：只展示成功结果，不展示过程和取舍
这会让作品集像宣传页，而不像工程经验总结。
坑 3：只有截图，没有业务和指标
纯截图无法证明项目价值，也很难体现工程深度。
坑 4：讲不清个人贡献
如果总是说“我们做了什么”，面试官很难判断你真正的能力边界。
坑 5：不同项目结构完全不同
结构不统一会增加理解成本，也会降低整体专业感。
坑 6：作品集和岗位不对齐
如果岗位看重 Agent 工程，你却主要展示通用前端页面，匹配度就会下降。
11.5 验证方式
作品集整理完后，不应只看“页面好不好看”，更要看它是否能真正支撑投递和面试。
一、项目能否在 3 分钟内讲清楚
- 是否能清晰讲出背景、方案、结果和复盘。
- 是否能在时间限制内说到重点。
二、每个项目是否有可验证结果
- 是否有 2 个以上可量化结果。
- 是否能拿出截图、结果样本或评测报告证明。
三、追问时是否能下钻
- 是否能讲清关键技术决策。
- 是否能解释为什么选这个方案而不是其他方案。
- 是否能说明失败过什么、怎么改的。
四、作品集是否和岗位对齐
从目标岗位视角检查：
- 作品集能否证明核心岗位能力。
- 项目顺序是否突出最相关的内容。
- 术语和表述是否接近岗位语境。
五、证据材料
- 项目卡片样本：
docs/examples/assets/samples/example-11-portfolio-card.json - 截图清单：
docs/examples/assets/screenshots/README.md - 图解配图：
docs/examples/assets/diagrams/chapter-11-portfolio-evidence.svg - 章节片段索引
- 作品集模板
11.6 面试表达
我构建作品集时优先强调业务价值与可验证结果，而不是工具清单。 每个项目都能讲清目标、方案、指标提升、个人职责和复盘，这让面试官更容易快速判断我的交付能力和成长路径。
实战案例：转型作品集重构
- 背景：原有作品偏前端展示，难体现智能体工程能力。
- 动作：重构项目卡片，补齐业务指标、技术取舍、个人职责和复盘证据，并统一作品集结构。
- 结果：作品集叙事更聚焦岗位需求，面试追问命中率提高，项目讲述也更稳定。
推荐答题框架
如果面试官问“你的作品集怎么组织的”，可以按下面顺序回答：
- 先讲项目筛选逻辑：为什么选这几个。
- 再讲统一结构：背景、方案、结果、复盘、职责。
- 再讲证据材料：截图、指标、输出样本、评测结果和图解材料。
- 最后讲它如何服务岗位对齐和面试表达。
11.7 练习任务
- 从现有项目中筛选 2 到 3 个最适合投递目标岗位的项目，并说明筛选理由。
- 为每个项目写一份统一项目卡片，至少包含背景、方案、结果、职责和复盘。
- 为每个项目整理 2 份以上证据材料，例如截图、结果样本、评测结果或架构图。
- 录制一段 3 分钟项目讲解，并根据录音总结 3 个改进点。
- 基于 作品集模板 和
docs/examples/assets/samples/example-11-portfolio-card.json，整理出你自己的作品集首页结构。
11.8 验收清单
- 任务完成率 >= 85%
- 关键指标达标率 >= 90%
- 异常场景通过率 >= 90%
- 至少完成 2 个统一结构的项目卡片。
- 至少保留 1 份项目卡片样本、1 组截图占位清单和 1 份章节代码片段索引。
- 至少能用 2 分钟讲清楚“为什么作品集不是项目列表，而是交付能力的证据系统”。