主题
附录 04 作品集模板
本附录面向“已经做了项目，但不知道怎么整理成可投递材料”的场景。很多前端工程师转型 AI Agent 时，最大的问题不是没做东西，而是做出来的内容仍然像学习笔记、代码仓库或零散 Demo，无法在简历、作品集和面试中形成一个完整、有说服力的项目叙事。
这份附录的目标，是把你已经做出的内容整理成“能被看到、能被验证、能被追问、也能讲清楚”的作品集材料。
1. 作品集到底要证明什么
一个成熟作品集不是证明“我学过这些概念”，而是证明：
- 你能理解真实业务问题。
- 你能把问题拆成可执行方案。
- 你能把方案做成工程结果。
- 你能用指标、截图、日志和复盘证明结果。
- 你能把自己的角色和决策讲清楚。
对 AI Agent 岗位来说，作品集尤其要避免两种常见问题：
- 只有聊天截图，没有工程细节。
- 只有代码仓库，没有业务背景与指标结果。
2. 作品集推荐结构
建议一个项目的作品集页面至少包含以下部分：
- 项目概览。
- 业务背景。
- 核心问题。
- 方案设计。
- 关键链路。
- 结果指标。
- 你的职责。
- 复盘总结。
如果你有多个项目，建议按“由浅到深”的顺序排列：
- 单 Agent 项目。
- RAG / 工具调用项目。
- Workflow / 多步骤任务项目。
3. 一页项目卡片模板
3.1 精简版项目卡片
适合放在主页、简历或项目总览页：
text
项目名称：
项目类型：RAG / Tool Calling / Workflow / Multi-Agent / Agent UX
业务场景：
解决问题：
核心能力：
关键结果：
个人职责：
项目链接：3.2 完整版项目卡片
适合作为作品集详情页的开头：
text
项目名称：
一句话描述：
目标用户：
业务背景：
核心问题：
方案概述：
关键模块：模型 / 检索 / 工具 / 工作流 / 前端交互 / 评测 / 观测 / 安全
结果指标：
个人职责：
项目周期：
项目状态：Demo / MVP / 已上线 / 持续迭代4. 项目详情页模板
4.1 业务背景模板
text
原始问题是什么：
谁在这个流程里最痛：
原来的处理方式有什么低效点：
为什么这个问题值得用 AI Agent 来做：4.2 方案设计模板
text
系统目标：
为什么选择这种方案：
整体架构：
关键链路：
为什么不用更复杂 / 更简单的替代方案：4.3 关键链路模板
text
1. 用户输入什么
2. 系统如何理解目标
3. 是否触发检索或工具调用
4. 是否有工作流节点或人工确认
5. 最终结果如何展示或执行4.4 指标结果模板
text
优化前：
优化后：
关键指标：
- 正确率 / 命中率
- 引用准确率
- 拒答准确率
- 完成率
- 延迟
- 成本
- 人工介入比例4.5 复盘模板
text
做对了什么：
最大的坑是什么：
如果重做一次会改什么：
下一阶段准备补什么：5. 最值得展示的证据材料
很多人作品集最大的问题是“全是文字，没有证据”。 建议每个项目至少准备 4 到 6 类证据：
- 系统架构图。
- 核心链路图。
- 关键界面截图。
- 评测结果图表。
- 失败样本与修复记录。
- 发布 / 监控 / 回滚相关截图或文档。
如果你是前端转型，尤其要展示：
- 过程可见的 UI 设计。
- 引用、状态、确认、失败恢复这些体验细节。
- 你如何把技术系统做成用户可用产品。
6. 三类高价值作品集页面模板
6.1 知识型 Agent 页面模板
适合企业知识库问答、制度问答、文档助手等项目。
text
问题场景：
知识来源：
为什么需要 RAG：
引用与拒答怎么做：
评测集如何设计：
结果指标：
前端如何展示证据与风险：6.2 执行型 Agent 页面模板
适合浏览器自动化、办公助手、任务草稿生成等项目。
text
任务目标：
执行计划如何生成：
哪些步骤自动执行：
哪些步骤人工确认：
失败如何恢复：
前端如何展示步骤与状态：6.3 工作流型 Agent 页面模板
适合多步骤业务流程、审批辅助、运营工作台等项目。
text
业务流程：
节点设计：
状态机：
人工介入点：
补偿机制：
观测指标：
交付结果：6.4 自托管型 Agent 页面模板
适合私有化部署、数据合规、本地推理等项目。
项目 D：全栈自托管 AI Agent
一句话定位：零 API 依赖的企业知识问答系统，数据完全不出域
技术栈：Ollama + Qwen3 / BGE-M3 / ChromaDB / Next.js / Docker Compose
核心亮点：
- 端到端零外部 API 调用，月运行成本为 0
- 与云端版（项目 A）形成完整的技术选型对比能力
- Docker Compose 一键部署，5 分钟完成私有化交付
可量化成果（示例）：
- 首次响应延迟 < 2s（8B 模型本地推理）
- 知识问答准确率 > 80%（20 题测试集验证）
- 全链路零 API 费用，相比云端方案月省 ¥XXX
面试话术：
"我同时搭建了云端和自托管两个版本的知识问答 Agent。自托管版使用 Ollama + Qwen3 推理、BGE-M3 Embedding 和 ChromaDB 向量库，实现了数据完全不出域。在 XX 场景下对比两种方案后，我发现自托管在延迟和成本上有优势，但在模型能力和运维复杂度上需要权衡。"
7. 作品集首页模板
如果你要做一个总作品集首页，建议结构如下：
text
个人简介：
转型方向：前端 -> AI Agent 工程
能力标签：RAG / Tool Calling / Workflow / Eval / Observability / Agent UX
代表项目：
- 项目 A
- 项目 B
- 项目 C
- 项目 D
工程证据：
- 评测
- 监控
- 架构图
- 发布流程
联系方式：8. 简历里的项目描述模板
简历版本不适合写得太长，建议压缩成 3 到 4 行：
text
项目名称 + 场景
我负责的核心链路
关键技术点
可量化结果示例：
text
企业知识库问答 Agent：负责从检索增强、引用展示到评测回归的完整闭环设计，建设结构化输出与前端证据展示机制，完成命中率、引用准确率和拒答准确率的基线评测，并沉淀上线监控与问题回溯流程。9. Demo 演示脚本模板
很多项目在面试中“讲得很散”，是因为没有演示脚本。 建议提前准备：
text
1. 先讲业务背景。
2. 再讲系统架构。
3. 再演示一条典型链路。
4. 展示一个失败或边界案例。
5. 展示评测或指标结果。
6. 最后讲你的职责和复盘。10. 前端转型时最该突出什么
前端工程师做作品集，不要只强调“我也会调模型了”。 更应该突出：
- 你如何把 AI 能力变成用户可见产品。
- 你如何处理状态、交互、流式反馈和人工确认。
- 你如何让系统更可信、更可解释、更可恢复。
- 你如何和后端、算法、产品协作推进整个系统落地。
11. 常见坑
11.1 只展示最终聊天结果
这样很难体现工程深度，也经不起追问。
11.2 不写自己的职责
如果不明确你的角色，面试官很难判断你到底贡献了什么。
11.3 指标太空泛
“效果更好了”“更稳定了”这类话术说服力很弱。
11.4 没有复盘
没有复盘的项目，看起来像一次性作业，不像真实工程实践。
11.5 页面太长但没有层次
作品集不是论文，信息应该分层、可扫读、重点突出。
12. 面试表达
你可以这样讲：
“我做作品集时，不是把项目当成代码仓库展示，而是按业务背景、方案设计、关键链路、指标结果、个人职责和复盘这六层来组织材料。这样既能让面试官快速理解项目价值，也能在追问时继续往下展开工程细节。”