The Career Atlas · Vol. 01 2026 / Spring Edition
前端 · Node.js · AI 应用 · 求职准备

前端工程师转向 AI 应用方向的能力地图,与一份可落地的 6 周准备路线。

基于 25 家公司真实 JD 的横向剖析,抽象出四维能力模型;再用 10 个社区知名 Agent 产品作为能力载体的具象样本——从 Claude Code 到 OpenCode、Cline、Codex CLI——把"高阶 IC"这件抽象的事,翻译成你今晚就能开始动手的清单。

25+
家公司 JD
10
个 Agent 样本
4
维能力模型
6w
备战节奏
对象画像 35 岁 · 10 年前端 · Node.js 万级 QPS 路线 Senior IC, 不带团队 调研截止 2026-05-26
In this issue ≈ 14 min read
  1. 01The Landscape25 JDs
  2. 02The Atlas4 dims
  3. 03The Mirrorgap
  4. 04The Field Guide10 agents
  5. 05Three PathsA / B / C
  6. 06The Sprint6 weeks
  7. 07Liftoffdeploy
  8. 08Colophon & Sourceslinks
Chapter 01

市场长什么样:25 家公司,4 个梯队。

不去看 JD,谈"AI 应用方向"等于扔飞镖。下面按 4 个梯队展开:OpenAI / 字节 / MiniMax / DeepSeek 这 4 家点名;国内大厂 AI 业务线;国内 AI 创业公司;海外 AI 公司(薪资透明)。每张卡都摘出最能代表当下趋势的 1–2 个岗位,带源链接。

A 4 家点名公司 5 cards
OpenAI
SF · Hybrid
Full-Stack Engineer, ChatGPT Ecosystem (Apps Platform & SDK)
  • 构建 ChatGPT Apps SDK 与开发者生态平台
  • 明确要求 MCP / Function Calling / iframe Web Component
  • API/SDK 抽象设计、开发者文档
  • "hands-on LLM-based systems" 写进职责
openai.com/careers ↗
OpenAI
SF · Hybrid
Frontend Software Engineer, Codex App
  • 桌面端 (Electron/Tauri) + IDE 插件
  • Coding Agent 形态:diff 流式、tool call、长任务进度
  • React/TS 专家级 + Node 进程间通信
openai.com/codex ↗
字节跳动 · Flow
北京/上海/杭州
前端工程师 — 豆包 / Coze / Web Infra
  • 豆包 ChatUI、Coze Studio 拖拽编排画布
  • Modern.js / Rspack / Rsbuild 工具链
  • "AI-first" Web Infra 团队,Rust+TS 双栈优先
  • Coze 已支持 MCP,对插件生态有要求
webinfra.org ↗
DeepSeek
~84 万 · 14 薪
全栈 / Agent Harness 工程师
  • 明确写"Vibe Coding 重度用户"——Claude Code / Cursor / Manus 深度使用者
  • Agent 核心机制(Tool Use、Planning、Memory、Multi-Agent)
  • 对底层(容器、网络)有理解者优先
  • 几乎不招纯前端,全栈倾向极强
量子位报道 ↗
MiniMax
上海/北京/深圳
前端开发工程师 — 海螺 AI / Talkie
  • React + TS + 移动端 H5 + 桌面端
  • 语音流(WebRTC / WebSocket / Web Audio)
  • 多模态消息 ChatUI(图/音/视频/文件)
  • Talkie 海外业务,需要国际化经验
飞书招聘 ↗
B 国内大厂 AI 业务线 3 cards
阿里巴巴
杭州/北京
前端 / Node.js 工程师 — 通义实验室 / 阿里云百炼
  • 5+ 年 React/TS
  • PC + Mobile + 小程序 + Node.js + Hybrid 全栈
  • RAG 知识库 UI、Agent 编排画布
  • Rax / Ice.js / Midway 加分
careers-tongyi.alibaba.com ↗
腾讯
深圳/北京/上海
前端工程师 — 元宝 / 混元
  • React/Vue + TS;微信/QQ 小程序、PWA
  • TSW (Tencent Server Side) BFF + SSR
  • 多模型路由、群聊 Agent、实时 ASR/TTS
  • 2026 春招"混元/AI 基建急缺"
careers.tencent.com ↗
百度
AI 岗 90%
前端工程师 — 文心快码 Comate AI IDE
  • Monaco / CodeMirror 编辑器二次开发
  • VSCode 插件 Host、Electron、LSP
  • MCP 协议、Tool Use 可视化、Diff 流式
  • F2C / D2C / AST 操作经验加分
comate.baidu.com ↗
C 国内 AI 创业公司 6 cards
月之暗面 (Kimi)
北京
高级前端开发工程师
  • 3+ 年 React 优先;强构建链与性能优化
  • SSE 流式、长上下文对话、文件解析渲染
  • Kimi-Researcher Agent、Markdown/Code/Math 渲染
moonshot.jobs.feishu.cn ↗
智谱 AI
北京 · 16 薪
前端 / 全栈工程师
  • React/Next.js + TS 精通
  • 智谱清言 + bigmodel.cn 开放平台
  • BFF / SSE 代理 / 网关层(Node 或 Go 协同)
  • Function Calling 调试 UI、GLM-PC 智能体
zhipu-ai.jobs ↗
阶跃星辰 StepFun
上海/北京
前端研发工程师
  • "跃问" + 开放平台 platform.stepfun.com
  • Step-2 / Step-1V 多模态:语音 ASR、图/视频渲染
  • WebGL/WebGPU 偶发场景
mokahr.com/step ↗
面壁智能 ModelBest
北京 · 清华系
前端 / 全栈工程师
  • MiniCPM 端侧模型 Demo + 开发者平台
  • 端侧多模态实时音视频对话 UI
  • WebGPU / WebRTC / onnxruntime-web / llama.cpp WASM 加分
modelbest.jobs ↗
商汤 SenseTime
上海/北京/香港
高级前端 / Web 全栈工程师
  • 商量 / 日日新 / 小浣熊 / 如影数字人
  • 5+ 年 React/Vue;Monorepo + 设计系统
  • SSR (Next.js);上市公司流程规范
  • 跨地域协作(沪/京/港);英文沟通
sensetime.com ↗
零一 / 百川 / Manus
谨慎评估
综合评估 — 战略收缩中
  • 2025 都有战略收缩 / 人员调整
  • Manus 国内规模收缩,重心转新加坡
  • 百川聚焦医疗 AI,前端岗少
  • 选 offer 关注融资节奏与商业化路径
01ai / manus / baichuan ↗
D 海外 AI 公司(薪资透明) 6 cards
Anthropic
$300K–$320K
Software Engineer, Full-stack (Product Engineering)
  • 5+ 年;React + TS 专家级
  • visa sponsorship 有;hybrid 25% 现场
  • 1 个 JD 覆盖 6 个子团队(Dev Experience / Growth / Vertical)
  • LLM / Prompt / AI-native 产品经验是硬需求
anthropic ↗
Anthropic
$320K–$405K
Staff SWE, Claude Developer Platform
  • 7–10+ 年;Next.js 专家
  • Anthropic API 的 Console + 评测工具
  • Prompt 工程 / Evals / dev tool 包装
  • "为 human 和 AI developer 共同设计"
anthropic staff ↗
Vercel
$196K–$294K
Software Engineer, AI SDK
  • 5+ 年 JS/TS;构建维护 AI SDK 本身
  • Streaming、Tool Calling、Structured Output、Agent Loop
  • OSS 贡献经验是显性硬需求
  • 远程国家清单不含中国大陆
vercel/ai-sdk ↗
Cursor (Anysphere)
TC $808K–$1.1M+
Software Engineer, Generalist / Agent Harness
  • 没有 PM;工程师同时承担产品、ship、用户对话
  • TypeScript 深度是硬要求
  • "a haven for self-motivated individual contributors"
  • APAC 仅 Sales/Support;亚洲无 SWE 岗
cursor.com/careers ↗
Mistral AI
Paris / London
Software Engineer, Frontend
  • 明确要求 TypeScript + Node.js 双必备
  • React/Next.js/Remix/Vue 任一
  • Le Chat 2026 新增 agent mode + persistent memory + code interpreter
  • 限 EU/UK 工作权;3 天到岗;个别 sponsor
jobs.lever.co/mistral ↗
xAI · Perplexity · Cohere
SF / NY / London
Frontend / Full-stack 多岗位
  • xAI: 5 天到岗,Next.js + TS + Grok Studio
  • Perplexity: SF 为主,部分 remote;agentic features
  • Cohere: RAG / 向量库 / LLM 集成是硬需求
  • 三家均不接受中国境内远程;Anthropic / Vercel / Cohere 可办 visa
xai / perplexity / cohere ↗
共性 01

「AI 应用经验」已经从加分项升级为硬条目

OpenAI 写明 LLM-based systems,Anthropic 写明 LLM / Prompt / AI-native,DeepSeek 写"Vibe Coding 重度用户",Mistral 写明 NodeJS——过去的"了解 AI 优先"已经是"必须做过 AI 产品"。

共性 02

MCP / Agent / Streaming 已经是新通用语

OpenAI Apps SDK、字节 Coze、百度 Comate、Anthropic Developer Platform 都明示 MCP;Streaming + Tool Calling 合流几乎是所有 ChatUI 岗的实际工作。

共性 03

「纯前端」收缩,「前端为主全栈」扩张

OpenAI ChatGPT 全栈岗 > 纯前端岗;DeepSeek 几乎不招纯前端;Anthropic Full-stack 一个 JD 涵盖 6 个子方向。你 Node.js 万级 QPS SSR 的背景在这趋势下是显性资产。

海外现实

海外岗对中国候选人的真实状况

Vercel / Cursor / xAI / Mistral / Perplexity 都不接受中国境内远程;APAC 的 AI 应用前端岗极少。可行路径:① Anthropic / Vercel / Cohere 的 visa sponsor 岗(需赴美/欧);② Singapore 的 Stripe / Figma APAC 岗。

Chapter 02

把 25 份 JD 抽象成 4 个维度。

条形长度代表"被多少家公司明确点名"——满分 12。读这一节,你应该感觉到自己哪一维已经远超线,哪一维需要立刻补齐

01
D1 · 最高溢价能力

AI 应用硬技能

把模型能力变成产品的工程链路。10 年传统前端在这一维往往只有 1–2 分——这是这次转向的核心战场。

LLM API · SSE/WebSocket 流式
Tool Use / Function Calling 调度
Streaming + tool_use 合流(最容易翻车)
MCP 客户端 / 服务端
Agent Loop · 终止条件 · 最大轮数
Prompt 工程 · cache-aware 模板
RAG · 向量检索 · Citation UI
Context 压缩 / 长会话治理
Evals / 在线 Observability
多模态:ASR / TTS / 图 / 视频
02
D2 · 你已经长在身上的

Node.js / 全栈工程

万级 QPS SSR 这个背景在 AI 应用语境下是稀缺资产。重点不是再补什么,而是把这些"系统视角"翻译到 AI 应用的场景。

TypeScript 深度(运行时类型 / 工程模式)
Next.js / React Server Components
SSR / 流式渲染(你的强项)
Edge Runtime · Workers / Vercel Edge
BFF:Koa / Nest / Egg / Modern.js
高并发服务端 · 万级 QPS(你的强项)
WebSocket / SSE 长连接治理
Monorepo · pnpm · Turborepo
构建链:Vite / Rspack / Turbopack
03
D3 · 决定能否进豆包 / Anthropic Product

AI 产品 / 业务理解

「会调 API」和「会做产品」是两件事。这一维通过产品研究笔记就能补,不一定要写代码——但必须能讲清楚为什么

ChatUI · Markdown / Code / Math 渲染
Coding Agent · diff / permission / 长任务
Agent 任务树 · 取消 · 进度反馈
Workflow 可视化编排 · DAG 画布
开发者产品 SDK / API / Playground
多端形态:Web / 桌面 / IDE 插件
增长 / 国际化 / A/B 实验
行业垂直(医疗 / 金融 / 法律 / 教育)
04
D4 · 35 岁 IC 路线的胜负手

软技能 · 职业路径

35 岁 + 无管理经验不是问题——Cursor 直接把"IC haven"写进 careers。问题是怎么把它讲成 Senior / Staff IC 的优势。

跨团队推动(PM / 算法 / Designer)
自驱 · Generalist mindset
0→1 经验 · 端到端 Ownership
英文沟通(海外岗硬需求)
OSS 贡献 / 公开作品集
写作能力(blog / docs / 技术拆解)
行业判断(哪些能力高价值)
IC 路线 vs Tech Lead 的清晰选择
Chapter 03

把镜子拿过来:差距在哪里。

基于你的背景做的初步评估。橙色 = 当前;蓝色虚线 = 目标(国内大厂 AI 业务 P7 / 海外 Senior IC)。这是讨论起点,不是定论。

/ Radar · 4-dim self-assessment
D1 · AI 应用硬技能 当前 1.5 / 目标 4.0

最大缺口——6 周首要任务。 Streaming、Tool Use、Agent Loop、MCP 这些"看似都听过"的概念,必须有手写代码经验。判断标准很简单:能不能在 30 分钟内白板写出一个能跑的 Agent Loop。

D2 · Node.js / 全栈工程 当前 4.0 / 目标 4.0

已经达标。万级 QPS SSR 是稀缺资产——这意味着你懂 V8 GC、stream 背压、Edge cache、连接池治理。把这些"系统视角"翻译到 AI 应用语境(SSE 重连策略、Token-by-token 计费、长会话内存治理)。

D3 · AI 产品 / 业务理解 当前 2.0 / 目标 3.5

10 年产品经验,但没做过 AI 产品形态。补法:拆 ChatGPT / Claude / Cursor 的 UI 决策——为什么 ChatGPT 把 thinking 折叠?为什么 Cursor 用 inline diff 不是 side-by-side?这部分通过产品研究笔记就能补。

D4 · 软技能 · 职业路径 当前 3.0 / 目标 3.5

跨团队推动 + 自驱 + 0→1 这三项你 10 年基本都做过,重点是把故事讲清楚。英文 / OSS / 公开写作是空白,海外岗要补。35 岁 + 无管理是资产,不是负担。

Chapter 04

能力模型需要载体:10 个社区 Agent 的横截面。

抽象的能力模型必须有产品承接,否则就是空话。下面是社区 10 个知名 Agent——你不需要复刻它们,但要看得懂每一个解决了哪些工程问题。

· 重要澄清 · 你之前说的"OpenClaw"并不是 Coding Agent。openclaw/openclaw 是 Peter Steinberger 做的跨消息平台个人助理框架(WhatsApp / iMessage / Discord),不是 Claude Code 复刻。你大概率想说的是 OpenCode(sst/opencode,TS + Bun,166k★,是真正对标 Claude Code 的开源项目)。下表用 OpenCode 替代。
产品 形态 语言 / Runtime License MCP 学习价值
Claude Code CLI + Desktop TS · Bun 闭源 (leak) 一等 127k ●●●●●
OpenAI Codex CLI CLI + IDE Rust + TS SDK Apache-2.0 一等 82.5k ●●●●●
OpenCode (sst) CLI + Desktop TS · Bun MIT 166k ●●●●○
Cline VS Code 插件 + SDK TS Apache-2.0 一等 ~58k ●●●●○
Cursor Composer IDE (Electron) 闭源 ●●●●○ 读 blog
Aider CLI Python · tree-sitter Apache-2.0 45.2k ●●●●○ repo-map
Continue.dev VS Code / JetBrains TS + Kotlin Apache-2.0 33.2k ●●●○○
Roo Code VS Code 插件 TS 已 archive 24.1k ●●○○○
Manus 浏览器 + 云 VM 闭源 ●●●○○ paradigm
Devin 云 IDE 闭源 ●●○○○ 只能看 blog
/ Insight 01

Claude Code 的工程比例:1.6% AI · 98.4% 基础设施

这是 OpenAI / Anthropic 招的"AI 应用工程师"画像——你写的不是模型,你写的是包裹模型的所有 plumbing。Streaming 合流、Token 计费、错误恢复、Context 压缩、Permission 闸门——这些是工程含量所在。

/ Insight 02

Cline 是唯一可以完整 clone 的 TS 工业级 Agent

Apache-2.0 完整开源,TS 写,SDK 已抽离。重点读 src/core/task/Task.ts 的主循环和 src/services/mcp/ 的 MCP 适配——这是你"前端 + AI 全栈"画像最直接的对标库。

/ Insight 03

Cursor 用 LLM 反向监督训练 embedding

Cursor 官方博客披露:让 LLM 给 Agent 历史检索轨迹打分,反向训练 embedding,Agent 准确率 +12.5%。面试杀手锏话题——你不需要自己训,但要能讲清楚思路。

/ Insight 04

读哪些 · 写什么 · 怎么对标

① 读 Claude Code leak 拆解 + 通读 claude-agent-sdk-typescript。② 200 行写自己的 Agent Loop。③ Clone Cline 调试 Task.ts。④ 加 MCP + Context 压缩 + Diff Apply。⑤ 选垂直场景做 demo + 写 blog。

Chapter 05

三条路径:从必做 200 行,到选做 800 小时。

三个项目不是"造大轮子",而是把能力模型里 D1 + D3 的子项装进具体产品。任何一个独立完成,都足够支撑简历 + blog + 面试的 30 分钟系统设计。不需要全做,建议至少把方案 A 做完。

Path B · 强烈推荐

垂直场景 Agent

⏱ 8–12 周 · 300–500h · CLI + Web 双形态

基于方案 A 加垂直场景。关键:避开"又一个 Coding Agent"(市场太挤),选你真有领域知识的方向。推荐三选一:

SQL Warehouse Agent — 接 BigQuery / ClickHouse,NL→SQL + 自动可视化;
财报阅读 Agent — 接 SEC EDGAR / 巨潮,PDF 拆解 + 财务术语解释 + 引用回链;
个人邮件 Triage Agent — Gmail API + 分类 + 自动起草。

D1 新增MCP client (stdio + SSE) · RAG · Context 压缩 · Evals
D2 新增Next.js 14 + RSC · Vercel AI SDK · Edge Streaming
D3 新增ChatUI · Citation UI · Agent 任务树 · 取消 / 重试 · 多端形态
D4 新增0→1 端到端 · 开源 + 写作
Resume Bullet独立设计并开源一款财报阅读 Agent(XYZ-agent),月活 N,GitHub k★,含完整 Evals 体系(accuracy / cost / latency 三维度自动化测试)。
Path C · 选做

开源 mini-IDE

⏱ 3–6 月 · 800h+ · VSCode 插件起步

复刻 Cline / OpenCode 的核心子集 + 一个差异化亮点。VSCode 插件形态最现实,桌面端(Electron / Tauri)需求更高但工程量翻倍。

差异化亮点候选:①「时间机器」回滚 Agent 每一步决策;②「Cost-aware 路由」自动选最便宜模型;③「Privacy-first 本地索引」用 onnxruntime-web 离线 embedding。

D1 全部D1 全部子项 + Codebase Indexing + Diff Apply
D2VSCode Extension Host · LSP · Monorepo + Turborepo · Edge / WASM
D3IDE 插件 · diff 流式 · inline 补全 · 多 IDE 兼容
D4维护社区 · issue 处理 · 写发布博客 · 演讲
Resume Bullet这一档项目直接是 Cursor / Anthropic / OpenAI 面试官眼里的"对口作品"。1k+ stars 起,可在面试系统设计环节直接用作 case study。
Chapter 06

6 周节奏:与方案 A 同步推进。

每周约 15–20 小时(工作日晚上 + 周末半天)。6 周末时你应该手握:① 一个 2k 行 mini-agent;② 3 篇技术 blog;③ 拆解 25+ JD 形成的求职 narrative。

Week 01

建立认知地图:读 Claude Code 拆解 + 通读 Anthropic SDK

读 InfoQ / Kubesimplify / Varonis 三篇 Claude Code 源码泄露分析。通读官方 claude-agent-sdk-typescriptopenai/agents-js。注册 Anthropic + OpenAI API key($20 月度预算)。

DELIVER 一张手绘的 Agent 架构图(QueryEngine / Tool / Permission / MCP 边界)
Week 02

动手:mini-agent 0.1,跑通 streaming 三件套

200 行实现:消息历史管理 + tool_use 协议 + SSE 解析。先把 read_file / write_file / bash 三个工具跑通。重点踩坑点:Anthropic streaming 的 content_block_delta 累积、tool_use 的 input partial JSON 合并。

DELIVER mini-agent v0.1 推到 GitHub,README 含 demo gif
Week 03

Clone Cline 调试 + 加 MCP / Permission

本地跑通 cline/cline,重点调试 Task.ts 主循环。给自己的 mini-agent 加:① MCP client (stdio);② Permission Prompt(按通配匹配 + always allow 持久化);③ Context 压缩的 /compact 命令。

DELIVER mini-agent v0.3 + 一篇 blog《Inside Cline: A code reading》
Week 04

系统化复盘 + 产出 narrative

写第二篇 blog《From 200 lines to 2k: what I learned building a Claude Code clone》。把你 10 年前端 + Node.js SSR 万级 QPS 的经验重新翻译到 AI 应用语境——流式背压、Edge 缓存、连接池、V8 GC 这些"系统视角"是你的独特资产。

DELIVER 2 篇技术 blog + 一份"求职 narrative 文档"(1 页 A4,自描述)
Week 05

产品形态修炼 · D3 维度补课(不写代码周)

专门拆 ChatGPT / Claude / Cursor / Perplexity 的 UI 决策,每个产品 500 字研究笔记:思考折叠、citation 行为、tool call 可视化、长任务进度反馈。同步刷 Anthropic Engineering blog + OpenAI cookbook + Vercel AI SDK docs。

DELIVER 5 份 UX 拆解笔记,挂在个人 blog
Week 06

投简历 + 面试演练

按优先级投:① 国内 — 字节豆包 / Coze、智谱、Kimi、阿里通义、百度 Comate;② 海外 visa sponsor — Anthropic Product Eng / Vercel AI SDK / Cohere Full-stack。准备 3 个 STAR 故事:万级 QPS SSR、mini-agent 工程取舍、跨团队协作 0→1。

DELIVER 至少 8 家投递;2–3 场技术面练手;明确意向公司清单
Chapter 07

Liftoff:30 秒上线 Cloudflare Pages。

这份报告是单文件 v2.html。下面四种方式任选,推荐方式 ① Pages 拖拽——零配置。

01

Cloudflare Pages · 拖拽上传(最快,推荐)

登录 dash.cloudflare.com,左侧 Workers & Pages → Create → Pages → Upload assets。把 v2.html 拖进去 → Deploy。30 秒后你拿到 https://<project>.pages.dev

02

Wrangler CLI

本地有 Node 环境的话,3 行命令搞定:

npm install -g wrangler
wrangler login
wrangler pages deploy ./ --project-name=career-atlas
03

挂自定义域名

Pages 项目里点 Custom domains → 输入域名(前提是该域名 DNS 在 Cloudflare 托管),系统自动签 SSL,2 分钟生效。

04

想做成可登录、可保存笔记?

这份报告是个理想的"个人作品集"种子页。下一步:

  1. 改造成 Next.js + Cloudflare Workers(Edge Runtime + R2 存数据)
  2. 加"我的备战进度"小看板(D1 KV 存进度)
  3. 挂 Cloudflare AI Gateway,用作 mini-agent 的 production-grade 网关
  4. 这件事本身可以成为方案 A 的线上演示页,简历多一个 live demo 链接