前端学 LLM

完整课程路线图

这套博客系列按“认知 -> 模型调用 -> 应用基础系统 -> 复杂能力系统 -> 产品化边界”的顺序推进。它不把深度学习数学、Transformer 论文细节、从零训练模型、CUDA 或 GPU Kernel 作为前期重点，而是优先列出前端工程师进入 LLM 应用开发时会遇到的基础系统。

项目实践不是这个系列的主线。每个主题可以保留一个很小的练习，用来确认你理解了概念、接口、状态和边界；真正的收束放在综合 PRD，用一个简单的 AI Native App PRD 把前面的系统串起来。

能力路线

整套内容按能力语义组织。能力域是主层级，具体主题是能力域内的学习单元。

认知与模型调用基础

目标：先理解 LLM 是什么、API 如何工作、Prompt 和 Token 如何影响结果，再把 AI Chat 的前端状态和 Streaming 体验讲清楚。

覆盖主题：

现代 AI 与 LLM 入门认知

目标：理解 AI、生成式 AI、LLM、ChatGPT、现代 AI 能力版图，以及前端为什么要系统学习 LLM。

已完成文章：

LLM API 基础与对话模型

关键词：completion、chat completion、Responses API、messages、role、system prompt、assistant message、temperature、top_p、多轮对话上下文。

小作业：用 Node.js 封装一个最小 LLM Client，实现命令行 AI 问答工具。

Prompt 基础与提示词设计

关键词：指令、上下文、约束、输出格式、few-shot、Prompt Template、Prompt 分层、Prompt Debugging。

小作业：实现一个极简 Prompt Playground，支持模板变量、temperature 调节和两组 Prompt 对比。

Token、上下文与成本意识

关键词：Tokenizer、Context Window、输入成本、输出成本、上下文裁剪、摘要、长上下文副作用。

小作业：实现 Token Counter、请求成本估算和一个简单上下文裁剪策略。

Streaming 与 AI Chat 前端工程

关键词：SSE、ReadableStream、增量渲染、停止生成、重试、Markdown 增量渲染、Chat UI 状态机。

小作业：实现一个支持 Streaming、停止生成和失败重试的最小 Chat UI。

应用基础篇术语大全

为了避免术语混用，这里给出应用基础阶段的常用术语速查表（每个术语一句话解释）。

  • LLM：Large Language Model，大语言模型，能基于上下文生成文本或结构化结果。
  • Prompt：给模型的指令与上下文输入。
  • System Prompt：约束模型行为与风格的高优先级提示词。
  • Messages：多轮对话中的消息数组，通常包含 system/user/assistant/tool 等角色。
  • Token：模型计费与上下文窗口的最小文本单位。
  • Context Window：单次推理可容纳的最大上下文长度。
  • Temperature：控制采样随机性，越高通常越发散。
  • Top-p：核采样阈值，限制候选 token 的累计概率范围。
  • Streaming：模型边生成边返回内容的输出方式。
  • Structured Output：让模型按 JSON/Schema 等固定结构输出。
  • Schema Validation：用 JSON Schema/Zod 等规则校验模型输出格式与字段。
  • Tool Calling：模型产出工具名与参数，由应用侧执行外部工具调用。
  • Function Calling：Tool Calling 的函数式接口形态，强调参数结构化。
  • MCP：Model Context Protocol，用统一协议向模型/Agent 提供工具与上下文资源。
  • A2A：Agent-to-Agent 协议，用于 Agent 与 Agent 之间的任务、消息与状态通信。
  • Skill：给 Agent 使用的一套文字版 workflow/playbook，用于约束执行步骤与策略。
  • RAG：Retrieval-Augmented Generation，先检索知识再生成答案。
  • Embedding：把文本映射为向量，用于语义检索与相似度计算。
  • Vector DB：存储向量并做近似最近邻检索的数据库系统。
  • Re-rank：对召回结果做二次排序，提升最终命中质量。
  • Grounding：让回答绑定可验证证据，减少无依据生成。
  • Hallucination：模型生成看似合理但事实错误或无依据的内容。
  • Guardrails：对输入输出与工具执行施加的安全与质量约束。
  • Fallback：主方案失败时自动切换到降级方案。
  • Retry：请求失败后按策略重试以提升成功率。
  • Idempotency：同一请求重复执行不会产生额外副作用的能力。
  • Observability：通过日志、指标、链路追踪观察系统状态与问题。
  • Eval：用数据集与指标系统性评估模型与应用质量。
  • Latency：从请求到响应的端到端耗时。
  • Throughput：单位时间内系统可处理的请求量。
  • AI Gateway：统一管理模型访问、鉴权、路由、限流与审计的入口层。
  • Agent：围绕目标-状态-工具循环执行多步任务的系统。
  • Agent Loop：Agent 的 observe/plan/act/verify/recover 迭代闭环。

Tool / Function Calling / MCP 的区别

  • Tool：具体动作能力，例如 readFile、searchWeb、runCommand。
  • Function Calling：让模型稳定产出“要调用哪个函数、传什么参数”的结构化调用格式。
  • MCP：Model Context Protocol，是把工具与上下文资源标准化接入模型/Agent 的协议层。

一句话理解：Tool 是动作能力，Function Calling 是调用表达格式，MCP 是接入标准协议。

AI 应用基础系统

目标：把“调模型”推进到“做系统”。这一模块关注模型输出如何被程序消费，工具如何被安全调用，模型调用如何被网关管理，Prompt、上下文、记忆和评估如何工程化。

覆盖主题：

  • 结构化输出与工具调用基础。
  • AI 应用基础架构。
  • Prompt Engineering 工程化。
  • Context Engineering 与记忆系统。
  • 可靠性、幻觉与评估体系。

知识、工具与 Agent 系统

目标：进入更复杂的 LLM 应用能力，包括文档知识、Workflow、Agent、多模态输入输出，以及 Browser Agent / Computer Use。

覆盖主题：

  • RAG Engineering。
  • Workflow 与 Agent Engineering。
  • 多模态 AI 基础与工程。
  • Browser Agent 与 Computer Use。

生产化与产品化边界

目标：补齐真实产品必须面对的成本、性能、安全、权限、信任体验和 AI Native 应用设计问题。

覆盖主题：

  • AI Infra 与性能优化。
  • AI 安全、权限与合规。
  • AI 产品工程与 UX。
  • AI Native Application 设计。

综合 PRD 与进阶路线

目标：用一个简单 PRD 收束前面的系统学习，再根据个人方向继续深入模型原理、部署、Infra、产品或研究阅读。

覆盖主题：

  • 综合大作业：AI Native App PRD。
  • 后续进阶方向。

综合大作业不是做十个项目，而是选择一个简单 AI Native App 场景，写出 PRD，说明用户、场景、核心流程、上下文来源、模型能力、工具边界、RAG/Agent 是否需要、安全权限、评估方式和 MVP 范围。

这不是一条“学会某个 API”或“做完一组项目”的路线，而是一条“理解 LLM 应用基础系统”的路线。