企业官网建设流程全解析

说实话，这两年前端圈的人多少都有点焦虑。前几年面试问的是“你怎么优化首屏”，后来问“你怎么设计组件库”，现在面试官张嘴就问“你会不会AI”。我自己也经历过那个阶段：朋友说自己在做AI应用，我想说我也在用AI——Copilot每天给我补全代码，然后就没有然后了。那种感觉就像你会用手机拍照，但谈不上“会摄影”。前端学AI到底要学哪些东西？这个问题我认真梳理过，也踩了不少坑，这篇就来聊聊我自己的理解和学习路径。

先说结论：前端学AI，不是让你去啃Transformer论文，也不是让你转型做算法工程师。前端的增量价值在于，把大模型的能力包装成用户能感知、愿意用的产品。你要学的是怎么调用模型、怎么处理流式输出、怎么设计AI交互、怎么用AI反向提升前端开发效率。核心关键词就两个：前端和AI，交集才是你该花时间的地方。

适用的人大概分几类：一是业务前端，想在自己负责的页面里加入AI能力；二是资深前端或技术Leader，要评估AI对团队研发流程的重塑；三是准备面试的候选人，AI相关经验确实越来越常出现在前端面试题里了。不管哪一类，下面这份拆解都值得看完。

1. 先搞清楚：前端学AI，到底要学哪些东西

网上关于AI学习的路线图很多，但大部分是给算法工程师写的。前端照着学，学一个月还在补数学基础，主线任务早就丢了。我建议先按“知识板块”而不是“技术路线”来拆，这样才能看清哪些是必须掌握的，哪些属于锦上添花。

1.1 先自我诊断：你属于哪一类前端

我习惯把前端分成三类，不同定位对AI的学习深度完全不同：

• 业务交付型前端：写页面、调接口、修bug，日常被需求追着跑。这类人学AI，优先学“怎么用AI提效”，其次是“在页面里嵌入AI能力”，比如智能问答、文案生成、图像识别。
• 工程效率型前端：负责脚手架、组件库、CI/CD、性能监控。这类人学AI，重点在“用AI改造研发链路”，比如自动生成代码、AI辅助Code Review、智能测试。
• 应用创新型前端：做产品探索、新业务落地、给公司找第二增长曲线。这类人学AI，重点在“构建完整的AI应用”，包括大模型API接入、Agent流程编排、知识库问答、多模态交互。

先搞清楚自己是哪一类，学习计划才不至于跑偏。我自己属于从业务交付型往应用创新型过渡的状态，所以下面的拆解会更侧重“怎么把AI能力落到前端产品里”。

1.2 AI知识地图：四个板块一目了然

真正需要前端掌握的AI知识，可以圈成四个板块：

这个分层是我自己总结的，也一直在用。前端最容易犯的错误是盯着“认知层”不放，觉得不懂模型原理就没法干活，实际上你不需要会训练模型，就像你不必懂内燃机原理也能开车一样。

1.3 为什么不是去学算法和训练模型

我见过一些前端同事，买了一大堆机器学习的书，从线性回归看到反向传播，最后发现工作里根本用不上。原因很简单：前端没有模型训练的算力和数据，也没有这个职责边界。大部分AI产品的形态是“前端应用 + 现成模型API”，你负责的是输入输出的组织、交互流程的设计、用户体验的保障。

反过来说，前端也有自己的护城河——同样一个大模型，有人接出来就是个聊天框，有人能做出来带知识库、带插件调用、带流式渲染的智能工作台。差距就在“给AI搭建舞台”的能力上，这恰好是前端的主场。

2. 知识点逐个拆解：从原理到落地

很多前端第一次接触大模型API，第一反应是“这不就是个HTTP接口吗，跟平时的后端接口有什么区别？”实际做完一个功能就会发现，差别非常大。下面把这几个核心知识点逐个拆开讲。

2.1 提示词工程：前端写提示词的四种套路

提示词工程听起来很玄，其实就是“怎么跟模型说话，让它按你的要求输出”。前端写提示词和普通用户不一样，你不是在闲聊，你是在为产品设计行为规则。我常用的有四种套路：

• 角色设定：让模型扮演特定角色。“你是一位资深前端开发工程师，擅长Vue3和TypeScript，请帮我审查下面的组件代码。”
• 示例驱动：给模型一个输入输出的例子，它会模仿这个格式。“参考这个例子：用户输入‘帮我写一个防抖函数’，输出‘实现代码 + 用法说明 + 注意事项’。请用同样的结构回答下面的问题。”
• 步骤拆解：把复杂任务拆成几步，让模型逐步执行。“第一步，提取用户需求；第二步，判断需要哪些技术方案；第三步，输出代码；第四步，检查代码边界情况。”
• 格式约束：用JSON、Markdown或XML标签约束输出结构。“请用JSON格式回答，包含code、description、tips三个字段。”

我在项目里的一个经验是：提示词要当作代码来维护，写进配置里，后续要能迭代。不要在UI代码里硬编码一大段Prompt，那会让产品经理改起来很痛苦。

2.2 流式输出与大模型API：前端对接AI的第一道坎

普通接口请求是一次性拿到完整响应，大模型不一样。一个几百字的回答，如果等全部生成完再返回，用户会等十几秒甚至几十秒，体验非常差。所以主流大模型API都支持流式输出，服务器边生成边推送，前端一边接收一边渲染，就像在聊天工具里看对方“正在输入”。

前端对接流式输出，核心是SSE或者ReadableStream。SSE最简单，用EventSource就能接，但只支持服务端单向推送；如果要传参数，得用POST + stream的方式。最近更常见的做法是直接用fetch读取响应流：

const response = await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ messages: [{ role: 'user', content: '你好，介绍一下你自己' }], }), }); const reader = response.body.getReader(); const decoder = new TextDecoder(); while (true) { const { done, value } = await reader.read(); if (done) break; const chunk = decoder.decode(value, { stream: true }); // 把chunk按行解析，更新页面状态 }

注意这里说的/api/chat是一个由你的后端（Node.js、Java、Go都行）转发到模型的接口。因为大部分模型API的Key不能暴露在浏览器端，所以你需要一个后端转发层，前端只需要处理流式解析和增量渲染。

2.3 Function Calling：让大模型调用你的前端能力

这是前端做AI应用时最需要花时间理解的概念。Function Calling允许模型根据用户的请求，输出一个“调用某个函数”的结构化指令，然后由你的前端代码执行这个函数，再把结果回传给模型做下一步回复。

举个例子：用户问“帮我查一下北京的天气并提醒我带伞”，模型不会自己查天气，但它会输出类似getWeather({ city: '北京' })的JSON，你收到后去调天气API、拿到结果再塞回对话，模型基于这个结果生成最终回复。整个过程用户的感知是“AI帮我完成了一个任务”。

前端接Function Calling的流程大概是：

1. 把可用的函数名、描述、入参Schema传给模型；
2. 模型根据用户意图决定是否调用函数，返回结构化调用指令；
3. 前端执行函数，拿到真实数据；
4. 将函数结果追加到消息列表，再次请求模型；
5. 模型基于函数结果生成最终回复。

这个能力是开发AI Agent、智能助手、自动化工具的基础。很多前端面试题里提到的“AI Agent”本质上就是“模型 + 工具 + 循环”，而工具注册这一步，前端完全可以自己搞定。

2.4 Embeddings与RAG：给AI接上外部知识库

大模型的知识是训练时就定死的，它不知道你公司的内部文档，也不知道你产品的私有数据。RAG（检索增强生成）就是解决这个问题的通用方案：先把文档切成小块、转成向量存起来，用户提问时先检索最相关的片段，再把片段和问题一起丢给模型，让模型基于这些材料回答。

前端要理解的核心是“向量检索”的基本思路。一个不严谨但容易理解的类比：你把每个句子映射成一个高维空间里的坐标，意思相近的句子坐标也相近。用户提问时，把问题也映射成坐标，然后找出最近的几个文档片段，就是你要喂给模型的知识。

这类架构前端不一定全栈做，但你要能设计清楚交互链路：用户上传文档、服务端切分转向量、向量库存起来、用户提问、检索相关片段、组装上下文给模型、流式返回。工程上可选的方案很多，存向量可以用专门的向量数据库，比如Milvus、Qdrant、Chroma，也可以用传统数据库加向量插件，比如pgvector。前端更需要关注的是检索结果的展示方式：引用了哪些文档、置信度怎么表达、检索不到时怎么提示。

2.5 Agent与多智能体协作：前端应用的下一个形态

如果说Function Calling让AI能用单一工具，Agent就是让AI能自主地规划步骤、循环执行、自我纠错。多Agent协作更进一步，把不同角色的Agent组合在一起，比如一个负责理解用户意图，一个负责写代码，一个负责审查代码，一个负责测试，它们之间的消息流转很像前端的事件总线。

前端在Agent应用里的职责很明确：可视化Agent的思考过程、展示执行步骤的状态、支持用户中途干预、把最终结果组织成易于阅读的界面。现在已经有团队做出类似的“AI工作台”，左侧是对话面板，右侧是任务执行日志，每一步工具调用都清晰可见，用户还能随时暂停、修改指令。这种产品形态对前端的挑战反而比后端更大，因为你要设计的是“人机协作”的新交互范式。

3. 一份可照抄的学习路线：三个月从入门到能干活

很多前端问“到底怎么安排时间”，我给一条自己走通过的路线，按三个月来排。每天不用花太多时间，但要保证持续投入，每周至少3到4小时。

3.1 基础期（第1-2周）：看懂模型、学会提问

第一周做的事情很简单：把大模型的基本概念搞清楚。不用看书，去读模型厂商的官方文档，了解什么是Token、什么是上下文窗口、什么是温度参数，以及怎么计算调用成本。然后练提示词，找一个项目里的真实需求，比如“根据接口文档生成TypeScript类型定义”，不断调整提示词直到输出稳定。

这阶段的目标是“能用AI稳定地产出质量不错的代码和文案”。注意观察同样的Prompt在不同的温度参数下输出的差异，这能帮你建立对模型行为的直觉。

3.2 对接期（第3-6周）：写一个聊天机器人

第二个月开始动手写代码。用你熟悉的前端框架，做一个最小可用的聊天页面，然后逐步加功能：先接流式输出、再做消息历史管理、再做停止生成、再做Markdown渲染和代码高亮。

这个阶段会踩到不少坑，比如流式响应的拼接、中文字符被截断导致乱码、渲染性能问题等。把这些坑都记下来，它们就是你面试时能讲的项目经验。接着尝试接入Function Calling，做一个“能查日期、能算加减乘除、能获取天气”的小助手。等这些做完，你已经具备开发基础AI应用的能力了。

3.3 应用期（第7-10周）：做知识库问答/智能客服

第三个月做点复杂项目，我推荐做“个人知识库问答系统”。你可以拿自己平时的学习笔记当语料，上传、切分、转向量、存库，然后实现问答检索。做完之后你会对RAG的完整链路有非常清晰的认识。

如果还有精力，再造一个Agent场景：比如一个“代码审查助手”，让用户粘贴代码，AI自动检查并给出优化建议——这个过程中可能需要调用多个工具，比如静态分析工具、安全检查工具等。这种项目既贴近前端场景，又能展示你的工程能力。

3.4 工程期（第11-12周）：用AI重塑前端开发

最后两周从“做AI应用”切换到“用AI做前端”。把AI工具系统地用起来：配置好代码补全、AI辅助提交信息生成、AI写单测、AI做视觉走查。这个阶段的目标是让“人机协作开发”成为你的肌肉记忆。

同时建议做一件加分的事：把你自己处理过的典型Prompt整理成团队的“提示词模板库”。前端组最缺的就是这种沉淀，你能整理出来，说明你不只是会用AI，还懂得把AI能力工程化，这在面试里是很加分的亮点。

4. 避坑指南：我在实际项目中踩过的坑

最后这部分是掏心窝子的内容。下面每一条都是我真金白银踩出来的，分享出来就是希望后来者少走点弯路。

4.1 不要重复造轮子

前端做AI功能，最容易踩的坑是什么都要自己写。聊天会话组件、消息列表、流式渲染、对话管理，这些社区里已经有很成熟的开源方案了。比如阿里开源过AI会话前端控件，其他团队也有类似项目，用起来比从零写靠谱得多。

当然，直接拿来用之前要先确认几点：是否支持流式渲染？是否兼容你的前端框架？移动端适配怎么样？有没有做过性能优化？如果不符合，再考虑自己造轮子。开包即用永远比重新发明轮子省时间。

4.2 性能与体验细节

AI界面的性能问题往往不是首屏加载慢，而是“持续输出时页面卡顿”。流式输出意味着界面会高频更新，如果状态管理写得太粗放，或者每次chunk都触发全量渲染，浏览器很快会吃不消。

我的建议是：高频更新的部分用局部刷新，不要大范围setState；长文本渲染用虚拟列表或者分片渲染；代码高亮和Markdown渲染尽量放到Worker里做，避免阻塞主线程。还有一个很实用的技巧：给流式输出加一个缓冲，等攒够一小段文本再渲染，视觉上更流畅，性能也更稳。

4.3 接口兼容与模型切换问题

AI应用的接口变化非常快，今天用一个模型，明天可能因为成本、效果、合规原因要换另一个。我强烈建议前端在组件里加一层模型适配层，不要让业务代码直接依赖某个厂商的SDK。把“发消息”“收消息”“错误处理”这些行为统一封装，换模型时只要换适配器。

接口协议方面也建议做好兼容，有些厂商返回的是标准OpenAI格式，有些是自定义格式，统一转成内部结构再交给前端消费，能省掉很多麻烦。

4.4 问题速查表

为了方便排查问题，我把实际开发中常见的故障整理成了一张速查表：

提示：排查AI问题最忌讳“猜”，一定要先把输入输出日志完整打出来。Prompt是什么、模型返回了什么、最终渲染了什么，三条日志串起来，大多数问题一眼就能定位。

写在最后

前端学AI这件事，真正值钱的能力不是会写提示词，也不是会调API，而是能把AI能力封装成好用的产品。“AI写代码”只是最表层的东西，更深一层的价值是你会不会用AI去重新设计前端的工作流和产品形态。

我个人在实际操作中的体会是：别想着等“学完了”再动手，就现在，选一个你手头正在做的功能，思考一下它能不能加一个AI入口，然后从读官方文档开始，半天时间就能跑通一个最小的demo。做完第一个真正能用的AI功能的时候，你会发现自己对API的认知、对交互设计的理解都上了一个台阶。前端是离用户最近的人，AI时代最缺的恰恰是能把技术变成体验的人——这就是前端的机会。