王玉军博客

Appearance

AI 大前端全栈架构师技能清单 ​

定位 ​

这套路线是前端转型 AI 应用全栈开发的完整技术栈，适配开发 AI 智能体、AI 桌面客户端、Web AI 平台。

它面向字节、阿里等大厂的 AI 大前端岗位，以前端为根基，向下延伸 Node 后端，横向扩展到 AI 智能体开发、RAG 系统、本地大模型部署、容器运维，是一条"前端 → 全栈 → AI 应用"的进阶路径。

核心思路可以概括为三句话：

  • 以前端为根基：保住 React/Vue 等前端基本盘，同时掌握工程化能力。
  • 延伸 Node 后端：用同一种语言打通前后端，降低全栈转型成本。
  • 拥抱 AI 应用层：把重心放在 LLM 编排、Agent 框架、RAG 与私有化部署上，而不是去做大模型底座。

1. 基础核心 ​

任何上层技术都建立在这块地基之上，面试与日常工作都绕不开。

类别内容说明
数据结构与算法数组、链表、栈队列、树、图、排序、哈希、动态规划等大厂面试必考，也是性能优化的底层思维
语言TypeScript、Python、Java（Node.js）TS 是前端主线；Python 是 AI 生态主线；Java/Node 用于后端
数据库SQL（PostgreSQL）关系型数据库与复杂查询是 RAG/业务系统的数据底座

为什么是这三门语言？

  • TypeScript：前端工程的事实标准，也是 Node 全栈后端的类型安全底座。
  • Python：AI 生态（LangChain、模型调用、数据处理）的第一语言，绝大多数 Agent 示例都是 Python。
  • Java（Node.js）：大厂后端主流是 Java，但前端转型优先走 Node.js，复用语言优势，降低学习成本。

2. 前端技术 ​

前端是这套路线的根基，先把基本盘打牢。

2.1 框架与状态管理 ​

  • React 18：配合 Zustand / Jotai 等轻量状态库，适合 AI 应用里高频、细粒度的状态更新。
  • Vue 3：配合 Pinia 做组合式 API 与集中式状态管理。
ts
// React 18 + Zustand 示例：管理对话会话状态
import { create } from "zustand";

interface ChatState {
  messages: { role: string; content: string }[];
  addMessage: (msg: { role: string; content: string }) => void;
}

export const useChatStore = create<ChatState>((set) => ({
  messages: [],
  addMessage: (msg) =>
    set((state) => ({ messages: [...state.messages, msg] })),
}));

2.2 桌面端 ​

  • Electron：Web 技术栈快速出桌面客户端，生态成熟。
  • Tauri：Rust 内核，体积小、性能好、内存占用低，是 AI 桌面客户端的热门选型。

2.3 UI 与工程化 ​

  • UI：shadcn/ui + TailwindCSS，组件可控、可定制，配合 AI 生成界面效率高。
  • 工程化：pnpm monorepo 管理多包项目，Vite / Rspack 负责构建与开发提速。

3. 后端技术（Node 全栈） ​

前端转型全栈，优先用 Node 打通后端，避免语言切换带来的心智负担。

3.1 服务框架与 SSR ​

  • NestJS：企业级 Node 服务框架，依赖注入、模块化、装饰器风格，适合构建 AI 平台的 API 服务。
  • 同构 SSR：Next.js（React）/ Nuxt（Vue），一套代码兼顾渲染与 SEO。
ts
// NestJS 示例：一个简单的 AI 对话接口
import { Controller, Post, Body } from "@nestjs/common";

@Controller("chat")
export class ChatController {
  @Post()
  async chat(@Body() body: { prompt: string }) {
    // 调用下游 Agent / LLM 服务
    return { reply: await this.agentService.run(body.prompt) };
  }
}

3.2 数据层与规范 ​

  • 数据库：PostgreSQL，关系型数据 + 向量扩展可并存。
  • ORM：Prisma / TypeORM。
  • 规范：RESTful API 设计、JWT 身份认证。
ts
// Prisma 示例：定义用户与会话模型
model User {
  id       String   @id @default(cuid())
  email    String   @unique
  chats    Chat[]
}

model Chat {
  id        String   @id @default(cuid())
  userId    String
  user      User     @relation(fields: [userId], references: [id])
  messages  Json
  createdAt DateTime @default(now())
}

4. AI 应用 & Agent 智能体开发（重点） ​

这是整条路线最核心、最能拉开差距的部分，也是 AI 大前端岗位区别于传统前端的关键。

4.1 LLM 编排 ​

  • 链式调用（Chain）：把多个 LLM 步骤串成流水线，比如"检索 → 生成 → 校验"。
  • 图调用（Graph）：用有向图组织复杂流程，支持条件分支、循环、并行，是构建 Agent 的核心抽象。

4.2 Agent 框架 ​

框架特点
LangChain最主流，抽象齐全，生态最丰富
LangGraph基于图的状态机编排，适合复杂多步 Agent
MastraTypeScript 原生，对前端工程师友好
RagFlow深度文档理解与 RAG 工作流，偏产品化落地

4.3 RAG 知识库系统 + 向量数据库 ​

RAG（检索增强生成）是让私有数据"喂"给大模型的主流方案，核心链路：

  1. 文档切分（Chunking）
  2. 向量化（Embedding）
  3. 存入向量数据库
  4. 检索（Retrieval）相似片段
  5. 拼入 Prompt 生成答案

常用向量数据库：Milvus、Qdrant、Chroma、pgvector（PostgreSQL 扩展）等。

4.4 本地模型部署 ​

  • Ollama：本地一键拉取、运行大模型的工具。
  • Qwen3（通义千问 3）：本地私有化部署的热门开源模型。
bash
# 拉取并运行 Qwen3
ollama pull qwen3
ollama run qwen3 "你好，介绍一下你自己"

4.5 基础认知：模型微调 ​

  • 理解微调（Fine-tuning）、LoRA、指令微调等概念，知道何时该微调、何时用 RAG 即可，不必深入训练底座。

5. 工程化 & DevOps ​

让 AI 应用真正"跑起来、可交付、能运维"。

  • Git 版本管理：分支模型、协作规范。
  • pnpm monorepo：多包项目架构，共享代码与依赖。
  • CI/CD 自动化流水线：构建、测试、部署自动化。
  • 容器编排：Docker → Docker Compose → K8s / K3s / Minikube。
dockerfile
# Dockerfile 示例：打包 AI 服务
FROM node:20-alpine AS build
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable && pnpm install --frozen-lockfile
COPY . .
RUN pnpm build

FROM node:20-alpine
WORKDIR /app
COPY --from=build /app/dist ./dist
EXPOSE 3000
CMD ["node", "dist/main.js"]

技术组合落地项目 ​

这套技术栈可以直接组合成一个可落地、可写进简历的项目：

Tauri 桌面 AI 客户端 + NestJS 服务端 + LangGraph 智能体 + RAG 知识库 + Ollama 私有化模型

  • Tauri 桌面客户端：负责交互界面与本地能力调用。
  • NestJS 服务端：提供 RESTful API、JWT 鉴权、业务编排。
  • LangGraph 智能体：承担复杂任务的多步推理与工具调用。
  • RAG 知识库：接入私有文档，让回答基于真实数据。
  • Ollama + Qwen3：私有化部署模型，数据不出本地。

这样的组合覆盖了前端、后端、AI、数据、运维五层，完整对应 AI 大前端全栈岗位的能力画像。

路线定位总结 ​

面向大厂 AI 大前端岗位，以前端为根基，延伸 Node 后端、AI 智能体开发、RAG 系统、本地大模型部署、容器运维。

一条清晰的学习主线：

前端基础（TS/React/Vue）
    → 工程化（pnpm monorepo / Vite / CI-CD）
    → Node 全栈（NestJS / NextJS / Prisma / PostgreSQL）
    → AI 应用层（LangChain / LangGraph / RAG / Ollama）
    → 容器运维（Docker / K8s）

关键不在于把每一层都学到"专家级"，而在于打通从界面到模型的全链路，成为能独立交付 AI 应用的人。

参考资源 ​