AI 前端工程师核心能力清单
摘要：
结合前端基础 + AI 工程化 + 落地实战，分基础硬技能、AI 专项能力、工程 & 业务能力、软技能四大块，清晰划分必备 / 进阶要求。
一、前端通用基础（底盘，必须扎实）
1. 核心技术栈
- HTML/CSS：布局、响应式、动画、样式工程化（Tailwind、Less/Sass）、跨端兼容
- JavaScript/TypeScript：ES6+、异步、闭包、原型、TS 类型体操、泛型、接口
- 主流框架：Vue3 / React 二选一为主，熟练组合式API、Hook、状态管理（Pinia/Vuex、Redux/Zustand）、路由、组件封装
- 工程化：Vite/Webpack/Rollup、Git、ESLint/Prettier、模块化、构建优化、性能监控
2. 常用工具 & 生态
-
跨端：UniApp、Taro、Electron（AI 桌面客户端常用）
-
UI 组件库：Element Plus、Ant Design、Naive UI 等
-
调试：Chrome DevTools、性能分析、网络抓包
二、AI 前端专项能力（核心差异化）
1. 大模型基础 & 接口调用（入门必备）
- 理解LLM 基础概念：对话上下文、Prompt、Token、流式输出、温度、上下文窗口
- RESTful / SSE / WebSocket：实现流式打字机效果（AI 对话最核心场景）
- 对接各类大模型 API：国内主流模型、OpenAI 系列，熟练处理鉴权、请求重试、异常捕获
- 对话会话管理：历史消息拼接、Token 节流、上下文裁剪、会话持久化
2. 向量检索 & RAG（检索增强生成，主流落地场景）
-
了解 RAG完整流程 ：文档解析 → 切片 → 向量化 → 向量库检索 → 拼接 Prompt → LLM 回答
-
前端 / 轻量端实践：
1、前端解析文档：PDF、Word、Markdown、文本分片
2、轻量向量库：本地 / 服务端向量库基础使用
3、语义相似度、召回逻辑、结果排序
3. AI 交互 & 富文本渲染（AI 产品高频场景）
-
Markdown 实时渲染：代码块、表格、公式、换行、语法高亮（marked/md-it + 代码高亮插件）
-
代码块能力：代码复制、运行、语法高亮、行号、语法报错展示
-
富文本 / 流式渲染优化：防卡顿、分段渲染、滚动定位、长文本虚拟列表
-
模态交互：AI 生成动画、加载状态、思考中动画、气泡对话、气泡提示
4. 多模态前端能力（进阶加分）
-
文生图、图生图： 图片上传、预览、裁剪、请求图生图接口、图片流式返回
-
语音交互： 麦克风录音、音频采集、ASR 语音转文字、TTS 文字转语音、音频播放 / 暂停
-
视频相关： 简单视频流、帧截取、画面预览
5. 前端侧 AI 推理（本地 AI / 端侧 AI，高阶）
-
了解 WebLLM、Transformers.js、ONNX Runtime Web
-
实现浏览器本地运行小模型：本地问答、本地翻译、本地文生图，无需后端
-
性能优化：模型加载缓存、显存 / 内存控制、WebWorker 解阻塞主线程
三、工程化 & 架构能力（中高级必备）
1、复杂 AI 应用架构设计
- 对话系统状态管理、多会话隔离、多模型切换
- 接口统一封装、适配器模式（对接多家大模型统一入口）
2、性能 & 体验优化
-
流式请求防抖、节流、请求中断（取消上一轮回答）
-
大列表虚拟滚动、内存泄漏排查、首屏 / 加载速度优化
3、安全 & 合规
-
前端请求防篡改、敏感内容过滤、用户输入风控
-
Token 安全、接口防刷、会话数据加密
4、全栈浅能力（加分项）
- Node.js 简单服务：代理转发、接口中转、文件处理、简单中间层
- 基础数据库、简单部署、Docker 基础使用
四、业务 & 产品思维
- 理解 AI 产品逻辑：对话机器人、知识库、AI 写作、AI 绘图、AI 助手等场景
- 能根据Prompt 特性优化交互：比如长提示输入、模板提示、预设角色
- 体验打磨：感知用户使用痛点，优化流式、断句、回显、错误提示
五、不同层级能力对标
初级 AI 前端（入门 / 应届生）
- 扎实前端基础 + TS
- 会对接大模型 API、实现SSE 流式对话、Markdown 渲染
- 独立完成 AI 聊天页、简单问答页面开发
中级 AI 前端（主力开发）
-
熟练 RAG 流程、文档解析、向量检索对接
-
掌握多模态（语音 / 图片）交互、复杂对话架构
-
能做性能优化、多模型适配、通用 AI 组件封装
高级 / 资深 AI 前端（架构 / 负责人）
-
精通端侧 AI（WebLLM/ONNX）、本地模型部署优化
-
设计 AI 应用整体架构、跨端 AI 方案、大流量高并发处理
-
结合业务选型模型、设计私有化 / 离线 AI 前端方案
六、推荐学习路线（快速上手）
- 补全前端 + TS 基础 → 练 Vue/React 项目
- 学习 SSE、WebSocket，手写流式对话 Demo
- 对接公开大模型 API，实现完整聊天界面（消息、历史、Markdown、代码块）
- 学习 RAG 流程，做简易知识库问答
- 进阶：WebLLM / 语音 / 图片多模态、端侧本地模型