AI 全栈开发的技术全景图前端需要补什么本文是【前端转 AI 全栈实战】系列第 02 篇。上一篇前端不会死但只写页面的前端会 | 下一篇用 JS 和 Python 分别调通你的第一个 AI API这篇文章要解决什么问题上一篇我们聊了前端转型的方向结论是AI 全栈JS/TS Python是最值得走的路。但AI 全栈这四个字太大了具体到技术层面AI 应用到底涉及哪些技术我作为前端哪些已经会了需要新学的东西有多少Python 要学到什么程度哪些东西看着吓人但其实不用学这篇文章给你画一张完整的技术地图让你心里有数——不至于觉得什么都要学而焦虑也不至于低估需要补的东西。LLM 是什么前端理解到这个程度就够了先快速建立一个基础认知。LLMLarge Language Model大语言模型就是 ChatGPT / DeepSeek / Claude 背后的技术。前端只需要理解三件事1. 它是一个文本进、文本出的函数输入一段文字Prompt 输出一段文字AI 的回复从 API 调用的角度看LLM 就是一个 HTTP 接口。你发一个 POST 请求带上你的问题它返回一个 JSON里面是回答。和你调后端接口没有任何区别。2. 它是概率性的不是确定性的同样的输入可能得到不同的输出。这和你之前写的前端完全不一样——调一个后端 API同样的参数永远返回同样的结果。但 AI 不是。这意味着你需要学会处理不确定性输出格式可能不一致、回答质量可能波动、偶尔会胡说八道幻觉。3. 它按 token 计费Token 大约等于 0.75 个英文单词或 0.5 个中文字。每次调 AI API 都有成本——输入的 token 收费输出的 token 也收费。模型越强越贵。就这三点。你不需要知道 Transformer 架构是什么、注意力机制怎么算、梯度下降怎么优化。那是训练模型的人要操心的事不是你的事。你在哪一层API 调用 vs 微调 vs 训练AI 技术栈可以分成三层你需要确认自己在哪一层层级做什么需要的技能适合谁模型训练从零训练一个 LLMPyTorch、GPU 集群、数学AI 研究员模型微调在已有模型上用私有数据调优Python、ML 框架、标注数据ML 工程师应用开发调 API、写 Prompt、搭产品JS/TS、Python、HTTP、UI你前端转 AI 全栈我们在最上面一层——应用层。这一层不需要理解模型内部原理就像你用 MySQL 不需要知道 B 树怎么实现一样。你要做的是会调 AI API和调后端接口一样会写好的 Prompt让 AI 按你要的格式回答会处理 AI 的输出流式渲染、格式解析、错误处理会用 Python 框架搭 AI 后端FastAPI LangChain会把 AI 能力集成到产品中前端 UI 后端服务技术全景图四层能力模型下面这张图是 AI 全栈开发的完整技术地图分成四层第一层你已经会的直接迁移这是你作为前端开发者已经掌握的技能在 AI 应用开发中可以直接复用技能在 AI 应用中怎么用HTTP / fetch调 AI API 就是发 HTTP 请求JSON 处理AI API 的请求和响应都是 JSONSSE / 流式处理ChatGPT 的打字机效果就是 SSE状态管理对话历史、AI 回复状态、加载中…Vue / ReactAI 应用的前端 UI 还是用这些框架写TypeScript类型安全在 AI 应用中一样重要组件化思维聊天气泡、消息列表、输入框都是组件这些不是有点关系是核心技能。AI 应用的前端 80% 的工作和你之前做的一样——只是你渲染的内容从后端返回的数据变成了 AI 返回的文本。第二层需要新学的 — JS/TS 侧用你已有的 JS/TS 技能栈可以直接开始学这些Prompt 工程这是 AI 应用开发最核心的技能之一。不是简单地问 AI 一句话而是设计结构化的指令——角色设定、输出格式约束、Few-shot 示例——让 AI 稳定地输出你要的结果。// 不是这样constprompt帮我翻译一下这段话// 而是这样constprompt你是一个专业的中英翻译。请将以下中文翻译为英文。 要求 1. 使用简洁的技术文档风格 2. 保留代码相关术语不翻译 3. 输出纯文本不要加额外说明 原文${text}AI API 对接OpenAI、DeepSeek、Claude、通义千问、Gemini、Ollama——每家都有自己的 API但大部分兼容 OpenAI 格式。你需要学会封装一个统一的调用层一套代码适配多家厂商。MCP 协议Model Context ProtocolAI 工具的标准化协议。Cursor、Claude Desktop 都在用。写 MCP Server 本质上就是写一个 JSON-RPC 服务Node.js 天然适配。CLI 工具开发用 Node.js 做 AI 命令行工具是前端切入 AI 开发的最快路径。不需要写 UI直接用终端交互专注于 AI 逻辑本身。第三层需要新学的 — Python 侧这是前端转 AI 全栈必须补的一条腿。AI 后端生态几乎全在 Python绕不开。但好消息是前端学 Python 比你想的快得多。JS/TS 概念Python 对应说明async/awaitasync/await一模一样的语法fetch()httpx/requestsHTTP 请求库Express 路由FastAPI 路由写法几乎一样TypeScript 类型Pydantic 模型Python 的类型系统npmpip / uv包管理器interface {}class(BaseModel)数据结构定义看个对比你就明白了ExpressJSapp.post(/api/chat,async(req,res){const{message}req.bodyconstresultawaitcallAI(message)res.json({reply:result})})FastAPIPythonapp.post(/api/chat)asyncdefchat(request:ChatRequest):resultawaitcall_ai(request.message)return{reply:result}是不是几乎一样FastAPI 对前端来说就是Python 版的 Express TypeScript。Python 侧需要掌握的核心技术技术干什么学习成本FastAPI写 AI 后端 API、SSE 流式输出低像 ExpressLangChainAI 应用框架封装了 RAG、Agent、Chain 等中概念多但文档好SQLAlchemy数据库 ORM异步版本低类似 PrismaPydantic数据校验和序列化极低就是 Python 的 Zod向量数据库RAG 的核心——存储和检索文本向量中概念新但 API 简单Python 学到什么程度够用不需要学到精通。你不需要写 Python 的 metaclass、decorator 原理、GIL 机制。你需要的是基础语法1-2 天能搞定你有 JS 基础async/await 异步编程你已经会了FastAPI 框架照着 Express 的思路理解LangChain 基础用法调 API 的高级封装大概 1-2 周就能达到能用 Python 写 AI 后端的水平。不需要像学前端那样花几个月。第四层不需要学的别被吓到看到 AI 领域的技术文章你可能被这些名词吓到过❌PyTorch / TensorFlow—— 这是训练模型用的你调 API 不需要❌GPU 集群 / CUDA—— 这是部署模型用的你用云 API 不需要❌损失函数 / 反向传播—— 这是机器学习的数学基础应用层不需要❌模型微调 / LoRA—— 大部分场景 RAG Prompt 就够了不需要微调❌分布式训练—— 这是 AI Infra 的事不是你的事记住你的定位你是 AI 应用开发者不是 AI 研究员。就像你用 React 不需要知道 Fiber 调度算法的每一行代码一样。推荐学习路径基于上面的分析我建议的学习顺序是第1步用 JS 调通 AI API你最熟悉的语言零心理负担 ↓ 第2步学 Prompt 工程AI 应用的核心技能不涉及代码语言 ↓ 第3步用 JS 做一个 AI 工具CLI / Chrome 扩展 / npm 包 ↓ 第4步学 Python 基础 FastAPI1-2 周对照 JS 学 ↓ 第5步用 FastAPI 写 AI 后端对话 API、SSE 流式输出 ↓ 第6步学 LangChain做 RAG 和 Agent ↓ 第7步前后端联调做一个完整的 AI 全栈项目先 JS 后 Python先工具后产品先简单后复杂。这也是本系列文章的编排顺序——跟着一篇一篇走走完就是一个能独立做 AI 全栈项目的人了。工具清单最后给你一张工具清单收藏备用AI API 服务服务特点推荐场景DeepSeek便宜、质量好、国内快日常开发首选OpenAI生态最好、兼容性最强需要兼容性时Claude代码理解力强、上下文长复杂代码场景通义千问阿里云、国内合规企业项目Gemini免费额度多省钱Ollama完全本地、零成本隐私要求高/学习用开发工具工具用途CursorAI 辅助编码写代码的效率翻倍Node.js 18JS/TS 运行时原生支持 fetchPython 3.11Python 运行时uvPython 包管理器比 pip 快 10 倍FastAPIPython Web 框架VS Code编辑器Python JS 双语言AI 框架框架语言用途LangChainPythonRAG、Agent、Chain 编排Vercel AI SDKJS/TS前端 AI 集成MCP SDKJS/PythonMCP Server 开发总结LLM 对你来说就是一个 HTTP API——文本进、文本出、按 token 收费。你在应用层不需要关心模型训练和底层算法。你已有的前端技能HTTP、JSON、SSE、状态管理、组件化在 AI 应用中直接复用。新要学的分两块JS/TS 侧Prompt 工程、AI API、MCP、CLI 工具Python 侧FastAPI、LangChain、RAG、Agent。Python 对前端来说学习曲线很平1-2 周就能上手写 AI 后端。PyTorch、GPU、模型训练——不需要学别被吓到。下一篇我们开始动手——用 JS 和 Python 分别调通第一个 AI API写出你的第一个 AI 程序。下一篇预告03 | 用 JS 和 Python 分别调通你的第一个 AI API讨论话题你觉得前端学 Python 难吗有没有已经开始学的聊聊你的体验