跳到主要内容

6 个月学习计划（前端+AI）

副标题：3 个项目、工程化清单、求职包装

目标：按“能找工作 / 能做项目 / 能落地”来规划，不走学院派路线。

目录​

第 1-2 个月：入门与建立认知（能跑 Demo）​

目标：跑通一个 ChatGPT Demo（别纠结样式，先跑通闭环）。

  • LLM 基础
    • Token、上下文窗口、温度/Top-p、幻觉、RAG 概念
  • Prompt 工程
    • 结构化 Prompt（Role/Task/Constraint/Output）
    • 多轮对话控制（追问/收敛/拒答）
  • API 接入
    • 至少接 1 个模型 API（OpenAI/国产均可）
  • Node.js 最低配
    • API 转发（保护 Key）
    • SSE 流式输出

阶段产出（可写到简历/作品集）：

  • 一个可用的流式聊天 Demo（支持取消）
  • 一篇 README：说明架构、关键决策、踩坑点

月度交付物（可量化）​

  • 第 1 个月：SSE 聊天 Demo + 鉴权 + 取消 + 基础日志
  • 第 2 个月：Prompt 模板化 + 失败兜底 + 简单评估用例集

第 3-4 个月：做“能讲故事的项目”（作品集核心）​

目标：做 2-3 个“有真实用户价值”的项目，重点是 可讲清楚你解决了什么问题。

建议至少做两个：

  • 项目 A：AI Chat（流式 + 可配置 Prompt）
    • Prompt 模板选择、参数化
    • 错误兜底：超时/限流/重试
  • 项目 B：文档问答（RAG + 引用来源）
    • 上传文档 → 切分 → Embedding → 检索 → 引用回答
    • UI 可展开证据片段、可跳转原文

这个阶段你要学会“产品化叙事”：

  • 这个项目解决谁的什么痛点？
  • 你如何证明它更准/更好用？
  • 你如何控制成本与风险？

项目需求细化（建议照着做）​

项目 A：AI Chat（流式 + 可配置 Prompt）

  • 支持：流式输出/停止/继续
  • 提供：Prompt 模板选择 + 参数面板（温度、长度、是否引用）
  • 具备：错误码统一 + 兜底文案

项目 B：文档问答（RAG + 引用来源）

  • 支持：文档上传、切分、Embedding 入库
  • 支持：TopK 检索 + 引用来源
  • UI：证据可展开、可复制、可跳转原文

项目 C：AI 工具型应用（任选）

  • 例子：简历优化 / PRD 生成 / 会议纪要
  • 重点：结构化输出 + 可编辑 + 版本管理

第 5-6 个月：产品化与工程化（超过大多数只会调 API 的人）​

目标：把项目从“能跑”升级到“能上线”。

建议补齐这些能力：

  • 多模型切换：主备模型、按任务选择模型
  • 成本面板：按用户/按天统计 Token 与费用
  • Prompt 版本管理：可回滚、可 A/B
  • 监控与日志
    • traceId
    • 关键耗时：检索/生成/总耗时
    • 错误分布：超时、限流、模型不可用

月度交付物（可量化）​

  • 第 5 个月：多模型切换 + 成本面板 + Prompt 版本管理
  • 第 6 个月：监控告警 + 评估回归 + 线上 A/B

作品集项目建议：3 个就够用​

  1. AI Chat（流式 + 中断/继续）
    • 重点：体验与状态机、流式代理、错误兜底
  2. 文档问答 RAG（引用来源）
    • 重点：切分/检索策略、引用可追溯、评估体系
  3. AI 工具型应用（可产品化）
    • 任选一个垂直场景：PRD/简历/会议纪要/周报/客服话术
    • 重点：模板化、可配置、成本控制、结果可编辑

作品集展示方式（面试官最爱看）​

  • 1 张架构图（前端/服务端/模型/向量库）
  • 1 段录屏（30-60 秒）
  • 1 个“评估指标”截图（命中率/引用准确率）

工程化清单：你要比别人“更可控、更稳定”​

把下面清单当作“作品集加分项”：

  • 安全
    • Key 不落前端
    • 鉴权（用户/组织/权限）
    • 内容安全策略（拒答/降级）
  • 稳定性
    • 超时、重试、断线重连（SSE）
    • 限流（按用户/按 IP/按并发）
  • 可观测
    • traceId 贯穿前后端
    • 日志脱敏
    • 失败原因可统计、可归因
  • 成本
    • 输入/输出限制
    • 历史摘要
    • 缓存与复用（例如相同问题短期缓存）

工程化加分项（能显著拉开差距）​

  • Prompt 版本回滚（v1/v2）
  • 关键路径埋点（耗时、失败原因）
  • 敏感内容过滤与审计日志

求职包装：不要说“前端转 AI”，要说“AI 应用工程”​

更推荐的表述：

  • “AI 应用工程师（前端背景）”

简历关键词（按优先级挑你真的做过的写）：

  • AI 应用架构
  • Prompt Engineering（模板化/版本管理/评估）
  • RAG 实战（切分/检索/引用/评估）
  • 流式交互（SSE、中断/继续、状态机）
  • 成本控制与可观测性（限流、日志、指标）

面试官最在意的主线：

  • 你能不能把 AI 做成一个“稳定好用的产品”

简历表述样例（可直接改成你的）​

  • 设计并实现 AI Chat（SSE 流式 + 取消 + 统一错误码），平均 TTFT < 1.5s
  • 构建 RAG 文档问答（切分/检索/引用），引用准确率提升至 92%
  • 搭建 Prompt 模板化与版本管理体系，格式合格率从 88% 提升到 97%

面试高频追问：你可以怎么回答​

1）“你怎么处理幻觉？”​

回答结构建议：

  • 先说“为什么会幻觉”
  • 再说“产品层怎么降低”：约束、引用、工具、校验
  • 最后说“工程化”：用例集评估与回归

2）“RAG 为什么准？怎么评估？”​

回答结构建议：

  • 端到端流程
  • 关键参数（切分、TopK、重排）
  • 指标（命中率、引用准确率、失败类型）

3）“为什么要服务端？前端直连不行吗？”​

回答结构建议：

  • Key 安全
  • 鉴权与限流
  • 流式代理与日志审计
  • 成本控制与灰度

最小可运行 Demo（6 个月计划版）​

目标：第 1 周就跑通一个“能讲清楚的 Demo”，作为后续作品集基线。

最小可运行代码（AI Chat 起步版）​

// 伪代码：最小聊天请求
fetch("/api/ai/chat/stream", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ messages: [{ role: "user", content: "你好" }] }),
});

完整 Demo 结构（6 个月路线的最小骨架）​

demo-portfolio/
  chat/
    server/
    web/
  rag/
    ingest/
    server/
    web/
  tools/
    server/
    web/

常见坑排查清单​

  • 只做功能不做展示：缺录屏/缺架构图 → 面试无法讲清楚
  • 缺评估指标：只有“能跑”→ 面试官认为不可控
  • 没有日志与错误码：线上问题无法复现与定位

完整可运行代码（作品集清单生成）​

源码目录：docs/demos/portfolio-demo

node docs/demos/portfolio-demo/index.js