跳到主要内容

AI 智能工程 (AI Engineering) 体系导读✅

在大模型（LLM）与智能体（Agent）深度重塑软件工业的 2026 年，AI 智能工程已成为现代高级前端架构师与全栈技术专家的核心分水岭。根据头部大厂与高薪技术岗位（35K~160K+）的真实画像，现代工程师已全面跳出“简单的 Chat 对话框接入”这一原始阶段，深度进入**“交互体验重构（流式/Generative UI）、Agent 运行载体（Harness/MCP/Skills/Subagents）、端侧异构推理（WebGPU/本地 RAG）以及效能规范守卫（Spec-Driven/质量门禁）”**四大核心战役。

本项目严格遵循布鲁姆修订版认知分类学（Bloom's Taxonomy）与“技术问题域高内聚 × 认知深度递进”的双轴信息架构（IA），为前端与全栈工程师构建了一套自底向上、由浅入深的专业知识与能力测评体系。

知识架构与认知演进全景图 (Dual-Axis Architecture)​

核心能力矩阵与测评阶梯 (Assessment Rubrics)​

结合**米勒能力金字塔（Miller's Pyramid）**与大厂职级定级标准，AI 智能工程能力阶梯划分如下：

认知阶梯考核层级 (Bloom / Miller)初中级工程师 (20-30K)高级工程师 / 专家 (35-60K)资深架构师 / TL (70-150K+)
Tier 0: 概念基石记忆/理解
Knows		知道 Token 大致代表单词，会简单调用 OpenAI API深刻理解 BPE 算法本质与 Next-Token 机制对状态机的影响，精通采样参数调优掌握 Token 预算全局分配策略与长上下文降本增效架构设计
Tier 1: 大模型原理理解/应用
Knows How		了解 Transformer 名词，知道大模型有时会胡说八道掌握 Self-Attention 与多头注意力原理，精通 JSON Schema 严格模式与幻觉工程防御掌握端侧向量空间与 Embedding 算法体系，设计高维表征与检索协议
Tier 2: 流式交互应用/分析
Shows How		使用原生 EventSource 接收字符串并直接拼接 innerHTML掌握 ReadableStream 增量解码、Markdown AST 容错修补与平滑打字队列架构大型 Generative UI 动态组件工厂，实现 Shadow DOM 样式沙箱与防 XSS 注入
Tier 3: 智能体工程分析/综合
Does		仅能把 Agent 当作普通对话助手调用熟练架构 Agent Harness 前端宿主，掌握 MCP/Skills/Subagents 扩展体系与 HITL 门禁主导设计企业级复杂 AI DAG 工作流画布、支持多智能体协同、条件分支与分布式状态持久化
Tier 4: 协议与质量评价 (Evaluate)
Does		会使用 Cursor / Copilot 辅助编写日常业务代码熟练落地 MCP 协议客户端，设计严格的 Human-in-the-Loop 授权门禁建立团队 Rules 规范资产库，推行 SDD 体系，在 CI 流水线落地 Eval 自动化评测
Tier 5: 端侧底层评价/创造
DOK 4		了解端侧 AI 概念掌握浏览器端 WebGPU / Transformers.js 推理，优化会话滑动窗口摘要深入理解 Prompt Caching 前缀对齐与 KV-Cache 复用，实现纳秒级端云协同推理
Capstone 实战白板演示
Shows How		了解 Agent 大致概念能在 20 分钟内手写出可运行的 RAF 打字机队列与向量检索器能够从零白板手写工业级 ReAct Agent Loop 状态机与 HITL 拦截管道

核心主题与考题索引 (Topic Index)​

00. 核心概念与基石认知 (Core Concepts)​

  • {#p0-what-is-token-and-why}：什么是 Token？为什么计算机与大模型不能直接处理字符，而要有 Token 的概念？
  • {#p0-what-is-llm-autoregressive}：什么是大语言模型（LLM）？什么是自回归机制（Next-Token Prediction）？给传统前端带来了什么根本挑战？
  • {#p0-prompt-engineering-parameters}：什么是 Prompt Engineering？System Prompt 与 User Prompt 有何区别？采样参数（Temperature / Top-P）如何影响输出？
  • {#p1-token-budget-window-management}：前端在处理多轮长上下文交互时，如何设计合理的 Token 计量与动态预算管理机制？

01. 大模型原理与前端认知 (LLM Basics & Principles)​

  • {#p0-transformer-self-attention-for-fe}：前端工程师需要了解的 Transformer 架构：什么是 Self-Attention（自注意力机制）？多头注意力（Multi-Head Attention）解决了什么？
  • {#p0-llm-hallucination-mitigation}：为什么大模型会产生幻觉（Hallucination）？前端能从工程上做什么来防范和降低幻觉？
  • {#p0-structured-outputs-json-schema}：什么是结构化输出（Structured Outputs）？为什么基于 JSON Schema / Zod 约束比纯自然语言 Prompt 更可靠？
  • {#p0-transformer-architecture-paradigms}：BERT、GPT、T5 都基于 Transformer，三种架构范式的注意力掩码与训练目标有何本质区别？各自适合什么任务？
  • {#p0-llm-emergent-abilities-mirage}：大模型的「涌现能力」是真的吗？为什么有研究认为它只是度量方式造成的假象？
  • {#p1-embedding-vector-search-basics}：什么是 Embedding（向量嵌入）？向量空间与余弦相似度在前端语义搜索中是如何工作的？
  • {#p1-finetune-vs-rag-vs-prompt}：为什么用微调做代码生成，而不是纯 prompt 或 spec coding？微调和 RAG 各适合什么场景？
  • {#p1-positional-encoding-rope}：大模型怎么区分「猫追狗」和「狗追猫」？RoPE 旋转位置编码的原理与长上下文外推是怎么回事？
  • {#p1-llm-degenerate-repetition}：模型输出变成「复读机」，同一句话反复刷屏，怎么定位原因并修掉？
  • {#p1-rlhf-reward-model-ppo}：ChatGPT 里的强化学习是怎么实现的？为什么不直接拿人写的答案继续微调？
  • {#p1-lora-vs-qlora}：LoRA 和 QLoRA 有什么区别？为什么 QLoRA 能在单张 48GB 显卡上微调 65B 模型？
  • {#p1-mha-mqa-gqa-kv-cache}：多头注意力的 MHA、MQA、GQA 三种变体有什么区别？为什么 GQA 能让 KV Cache 显著变小？
  • {#p1-moe-sparse-expert-routing}：混合专家模型（MoE）是怎么做到「总参数量很大、单次推理只激活一小部分」的？专家之间负载不均怎么办？
  • {#p1-scaling-laws-compute-optimal}：Scaling Law 揭示了什么？为什么「模型越大越好」在算力预算固定时不成立？
  • {#p1-finetune-catastrophic-forgetting}：微调后模型「原有能力退化」，怎么诊断和缓解？EWC、LwF、重放三种做法的原理分别是什么？
  • {#p1-sft-data-curation-quality}：SFT 训练数据是越多越好吗？「1000 条高质量数据就够用」的说法成立吗？数据集该怎么构建？
  • {#p1-prenorm-rmsnorm-training-stability}：原始 Transformer 用的是 Post-norm + LayerNorm，为什么现代大模型几乎都换成了 Pre-norm + RMSNorm？
  • {#p1-ssm-mamba-vs-transformer}：SSM / Mamba 号称要取代 Transformer，它到底解决了什么问题、牺牲了什么？为什么主流 LLM 至今仍是 Decoder-Only Transformer？
  • {#p1-grpo-group-relative-policy-optimization}：PPO 要额外训一个价值模型，DeepSeek 的 GRPO 怎么把它省掉？
  • {#p1-llama-1-2-3-generations-evolution}：LLaMA 1、LLaMA 2、LLaMA 3 三代到底差在哪？为什么参数量总是 7B、13B、70B 这种数字？
  • {#p1-chain-of-thought-scale-threshold}：Chain-of-Thought 提示法是怎么让模型分步推理的？为什么小模型用 CoT 反而更差？
  • {#p1-vlm-modal-alignment-clip-llava}：多模态大模型（VLM）怎么把「图像」和「文本」对齐到一起？CLIP 的对比学习和 LLaVA 的视觉指令微调各解决了什么？

02. 流式交互与生成式 UI (Streaming & Generative UI)​

  • {#p0-ai-streaming-render}：前端如何实现类似 ChatGPT 的打字机流式响应？SSE 与 Fetch ReadableStream 该如何选择？
  • {#p0-ai-stream-markdown-flicker}：大模型流式输出 Markdown 时，如何避免代码块、公式与 Mermaid 图表解析闪烁？
  • {#p0-generative-ui-sandbox}：什么是生成式 UI（Generative UI）？如何安全渲染模型动态生成的 React/Vue 组件并防止 XSS？
  • {#p1-ai-chat-tree-state}：在大模型多轮分支对话交互中，复杂会话树状态机与撤销重试是如何设计的？
  • {#p0-streaming-concurrent-request-interrupt}：流式回复还没输出完，用户又发来一条新消息，前端怎么打断、怎么排队、怎么保证最终渲染顺序？
  • {#p1-streaming-asr-partial-final}：流式语音转写里，临时结果和最终结果有什么区别？前端怎么渲染才不会一直抖？

03. 智能体工程与前端载体 (Agent Engineering & Harness)​

  • {#p0-what-is-agent-core-elements}：什么是智能体（Agent）？Agent 的四大核心要素（LLM 大脑、规划 Planning、记忆 Memory、工具 Tools）是什么？
  • {#p0-mainstream-agents-comparison}：业界主流的 Agent 产品与框架有哪些（Cursor / Claude Code / AutoGen / LangGraph / CrewAI）？它们的架构选型与适用场景是什么？
  • {#p0-agent-extension-mechanisms}：Agent 主要的扩展手段有哪些？除了 Function Calling / Tool Use，MCP 协议、Skills 机制与 Subagent 多智能体协作是如何扩展 Agent 能力的？
  • {#p0-agent-frontend-harness}：前端如何架构大模型 Agent 交互界面（Agent Harness）？ReAct 规划决策轨迹与思考链流式可视化？
  • {#p0-agent-hitl-guardrail}：Agent 执行高风险工具（如删除文件、对外转账）时，前端如何设计 Human-in-the-Loop (HITL) 动态授权拦截门禁？
  • {#p0-ai-workflow-dag-canvas}：如何设计类似 Dify / Coze 的可视化 DAG 工作流编排画布？拓扑排序与流式执行调试如何落地？
  • {#p0-agent-model-harness-equation}：Agent = Model + Harness 这个等式怎么理解？Harness 到底决定了 Agent 的什么？
  • {#p0-agent-vs-skill-boundary}：什么场景该做成一个专职 Agent，什么场景只需要一个 Skill？两者对上下文窗口的占用差多少？
  • {#p0-agent-autonomy-vs-workflow-orchestration}：Agent 该完全自主决策，还是用固定 Workflow 编排？出现什么信号说明该切换？
  • {#p0-multi-agent-conflict-resolution}：多个 Agent 并发协作时，如何处理调度冲突、输出冲突和子 Agent 失败？
  • {#p0-debate-agent-verification}：让两个 Agent 互相挑错来提升准确性，怎么设计才不是「互相附和」？
  • {#p0-agent-sandbox-pool-scheduling}：要同时跑上千个 Agent 沙箱实例，资源池和调度怎么设计？沙箱怎么选型？
  • {#p0-agent-timeout-and-user-interrupt}：Agent 跑了 20 分钟还没结束，用户等不及了怎么停？超时该怎么设？
  • {#p0-multi-agent-stability-evaluation}：让 Agent 多次执行同一个任务，结果时好时坏，怎么度量稳定性、定位漂移来源？
  • {#p1-agent-orchestrator-harness-runtime-layers}：Agent、Orchestrator、Harness 和 Runtime 到底怎么分工？为什么要拆成四层？
  • {#p1-agent-trajectory-reward-credit-assignment}：要训一个会调工具的 Agent，多步轨迹的 Reward 怎么设计？信号稀疏时信用怎么分配？
  • {#p1-agent-failure-attribution-small-model}：线上 Agent 出现「指令遵循失败」，是模型能力不够还是工程没做好？怎么归因？
  • {#p1-agent-chain-latency-cost-optimization}：一个 Agent 任务要串好几次模型调用和工具调用，延迟和成本都压不下来，怎么优化？
  • {#p1-agent-approval-execution-consistency}：用户点了「确认」之后，怎么保证真正执行的内容和确认时看到的完全一致？审批后还能不能再调一次大模型？
  • {#p0-agent-prompt-injection-defense}：Agent 把检索到的网页、邮件或工单内容喂给模型时，提示注入（Prompt Injection）怎么防？直接注入和间接注入有什么区别？
  • {#p1-agent-reflexion-verbal-reinforcement}：Reflexion 的「语言化强化学习」和真正的权重更新有什么区别？Agent 怎么把失败经验变成下一次的成功？
  • {#p1-react-vs-plan-and-execute-architecture}：Agent 的推理和行动该交错还是拆开？ReAct 和 Plan-and-Execute 两种架构怎么选？

04. 协议生态与质量工程 (Protocols & Ecosystem)​

  • {#p0-mcp-protocol-frontend}：Model Context Protocol (MCP) 协议在前端是如何工作的？它与传统 Function Calling 有什么区别？
  • {#p0-ai-coding-quality-gate}：团队引入 Cursor / Copilot / Claude Code 后，前端团队如何建立代码质量审查门禁（Quality Gate）与防范幻觉？
  • {#p0-spec-driven-development}：什么是规格驱动开发（Spec-Driven Development, SDD）？如何通过规则资产库约束大模型生成符合架构的代码？
  • {#p1-ai-eval-benchmark}：如何搭建大模型应用与 Agent 的自动化评测（Eval）体系？指标如何量化与持续回归？
  • {#p0-eval-badcase-feedback-loop}：线上真实 bad case 怎么自动回流成评测集？修好一类之后怎么发现其他场景退化了？
  • {#p0-llm-as-judge-bias-calibration}：为什么让 Agent 自己给自己打分总是偏乐观？LLM-as-a-Judge 怎么用才可信？
  • {#p0-model-routing-fallback}：大小模型怎么路由？混合路由的兜底与限流怎么设计？
  • {#p0-mcp-progressive-tool-discovery}：工具定义把上下文窗口占满了：20 个工具每个都要写描述和示例，prompt 过长怎么办？
  • {#p0-eval-metric-bleu-ndcg-selection}：BLEU、ROUGE 这类 n-gram 指标为什么不能用来评 LLM 的生成？什么场景才轮到 NDCG？
  • {#p0-agent-process-metrics-prm}：只看最终答案能判断 Agent 好不好吗？过程指标该怎么设计，PRM 和结果评测差在哪？
  • {#p1-a2a-agent-interop-protocol}：A2A（Agent2Agent）协议是怎么让两个 Agent 对话的？它和 MCP 到底怎么分工？
  • {#p1-agent-skill-routing-eval}：Agent 到底怎么判断该用哪个 Skill？怎么设计测试集来度量这个路由准不准？
  • {#p1-asr-wer-downstream-metric-gap}：ASR 的 WER 明明降下来了，为什么下游任务的准确率反而可能下降？
  • {#p1-agent-public-benchmark-selection}：Agent 能力的公开基准该怎么选？GAIA、SWE-bench、AgentBench、WebArena 各自测的是什么？
  • {#p1-llm-observability-tracing-genai-semconv}：LLM 应用上线后怎么排查问题？AI 应用的可观测性和普通 Web 服务有什么不一样，OpenTelemetry 的 GenAI 语义约定到底约定了什么？

05. 端侧推理与底层运行机制 (Runtime & Internals)​

  • {#p1-browser-webgpu-llm}：浏览器端侧如何运行轻量大模型？WebGPU 与 Transformers.js / WebLLM 的底层推理机制是什么？
  • {#p0-rag-frontend-knowledge-base}：前端如何构建端侧本地 RAG 系统？文档分块、客户端 Embedding 与余弦相似度检索是如何落地的？
  • {#p1-agent-memory-context-compression}：Agent 长会话场景下，面对有限的上下文窗口，如何设计多级记忆管理与滑动压缩机制？
  • {#p0-prompt-caching-kv-cache-optimization}：什么是 Prompt Caching（前缀缓存）与 KV-Cache 状态优化？静态与动态上下文编排如何降低首字时延（TTFT）与成本？
  • {#p1-kv-cache-compression-quantization-eviction}：KV Cache 越用越大，有哪些压缩手段？量化、驱逐和低秩压缩各自是怎么做的？
  • {#p0-long-task-context-decay-drift}：长任务跑久了，上下文会「腐化」、行为会「漂移」，怎么检测和干预？
  • {#p0-agent-retry-storm-backoff}：工具失败后重试，为什么容易演变成「重试风暴」？退避与熔断怎么设计？
  • {#p0-agents-md-context-bloat}：AGENTS.md / 规则文件越写越长，效果反而变差，怎么治理？
  • {#p0-rag-intent-routing-multikb}：意图判断不准时，RAG 怎么保证检索到正确的知识库，而不是检索错库？
  • {#p0-agent-state-recovery-resume}：服务或容器重启后，Agent 的任务状态怎么恢复？任务执行到一半中断，怎么做到断点续跑？
  • {#p0-agent-memory-privacy-boundary}：记忆和个性化：如何让 Agent 长期记住用户习惯，又不泄漏隐私？
  • {#p0-rag-recall-quality-rerank}：RAG 召回质量怎么判断？召回不好该调什么参数，重排序怎么做？
  • {#p0-rag-doc-parse-index-pipeline}：企业知识问答要把 Word、PDF 灌进向量库，文档解析到入库的中间流程到底怎么走？
  • {#p1-vector-index-hnsw-vamana-diskann}：向量检索上亿条数据时，HNSW、DiskANN 这类图索引是怎么工作的？内存和 SSD 怎么取舍？
  • {#p1-vllm-paged-attention-batching}：vLLM 是怎么把推理吞吐做上去的？PagedAttention 和 Continuous Batching 分别解决了什么瓶颈？
  • {#p1-flashattention-io-aware-exact-attention}：FlashAttention 为什么能把注意力算得快？它说的「IO 感知」到底指什么？
  • {#p1-agent-memory-persistence-layers}：Agent 的记忆怎么持久化？会话级、任务级、项目级怎么分层？提取和冲突更新怎么处理？
  • {#p1-rag-parent-child-index}：RAG 流程中为什么要引入父子索引？「小块检索、大块喂给模型」是怎么权衡的？
  • {#p1-speculative-decoding-draft-verify}：投机解码（Speculative Decoding）是怎么用小模型给大模型「打草稿」加速的？为什么它不会改变输出分布？
  • {#p1-graphrag-local-global-search}：GraphRAG 和向量 RAG 到底差在哪？什么场景该建图索引，什么时候用传统 RAG 就够了？
  • {#p1-semantic-cache-similarity-threshold-false-hit}：语义缓存（Semantic Cache）是怎么用相似度命中回答的？阈值怎么定，误命中怎么办？
  • {#p1-self-rag-adaptive-retrieval-reflection-tokens}：RAG 是不是检索得越多越好？Self-RAG 怎么让模型自己决定要不要检索？
  • {#p1-rag-parametric-knowledge-conflict}：RAG 检索到的内容和大模型自己「知道」的不一致时该信哪个？冲突要怎么消解？
  • {#p0-rag-embedding-field-design-vs-filter}：商品库做 RAG 时，标题、类目、价格这些字段该拿哪个去做 embedding？为什么价格这种数值字段不该进向量？
  • {#p1-personalized-rag-user-profile-injection}：同一个问题，不同用户应该得到不同答案——个性化 RAG 怎么做？用户画像该注入到检索链路的哪一环？

实战白板与综合手写 (Coding Practice)​

  • {#p0-coding-agent-loop}：手写实现一个包含工具调用与终止条件的最小 Agent 运行时循环（Agent Loop）？
  • {#p0-coding-typing-buffer}：手写实现一个平滑打字机缓冲队列（Smooth Typing Buffer Queue）？
  • {#p0-coding-rag-cosine-search}：手写实现纯前端带重叠窗口（Overlap）的递归文档切分与余弦相似度检索器？
  • {#p0-coding-hitl-interceptor}：手写实现基于 Promise 控制反转模式的 Human-in-the-Loop 授权拦截管理器？