LJ.
返回手记

前端技能的新定位 - AI 时代的核心竞争力

前端开发·

前端技能的新定位 - AI 时代的核心竞争力

系列终章：写完前 7 篇后，我一直在思考一个问题 — AI 会让前端工程师消失吗？
答案是：不会，但会让那些只会调 API 的前端消失。

这篇文章是整个系列的总结，也是对"前端工程师如何在 AI 时代找到自己位置"这个问题的回答。

一、焦虑的本质：不是技术变了，是定位模糊了

现象

很多前端同学（包括我）最近的状态：

  • 桌面开发学了一堆（Electron、Tauri、Electrobun），但不知道什么时候用
  • AI Agent 跑通了 demo，但不知道怎么做成产品
  • React/Vue 还在写，但感觉"AI 能替代我"

问题不是技术

问题是：你不知道自己在产品链条中的价值是什么。

举个例子：

  • ❌ "我会 React" → 这不是竞争力，AI 也会
  • ✅ "我能用 React 快速实现复杂交互，并确保性能和可维护性" → 这才是竞争力

AI 时代，工具会的人很多，但知道什么时候用、怎么用好的人很少。

二、前端的新定位：从"页面实现者"到"体验架构师"

传统前端的定位（已过时）

产品设计 → 视觉设计 → 前端实现 → 测试上线
           ↑
         你在这里：接需求、写代码、调样式

这种定位的问题：

  1. 可替代性强 — AI 能写 80% 的代码
  2. 价值感低 — 你只是"执行层"
  3. 成长天花板低 — 你的技能局限在"怎么写"，而不是"为什么写"

AI 时代的新定位

用户需求 ←→ 前端工程师 ←→ 技术实现
              ↑
            你在这里：
            - 理解用户真实需求
            - 设计体验方案（Web/Desktop/Agent）
            - 选择技术方案并实现
            - 验证效果并迭代

核心变化：从"实现者"到"决策者"

你不再是"有需求就做"，而是：

  1. 质疑需求 — 这个需求真的需要桌面端吗？还是 Web 就够了？
  2. 设计方案 — 如果做桌面端，用 Electron 还是 Tauri？为什么？
  3. 评估成本 — 这个功能用 AI Agent 能节省多少开发时间？
  4. 验证效果 — 上线后，用户体验真的变好了吗？

三、核心竞争力：六个不可替代的能力

基于前 7 篇的实践，我总结出 6 个 AI 无法替代的前端能力：

1. 产品思维 — 知道"为什么做"

场景：产品经理说"我们要做一个桌面端"

  • ❌ 旧思维："好的，我去学 Electron"
  • ✅ 新思维："为什么要做桌面端？解决什么问题？有没有更简单的方案？"

案例（来自第 1 篇）：

  • 需求：文件管理器需要访问本地文件
  • 方案 A：Web + File System API（轻量，但权限受限）
  • 方案 B：Tauri 桌面端（完整权限，但开发成本高）

决策依据：

  • 如果只是"上传/下载文件" → Web 就够了
  • 如果需要"监听文件变化、批量处理" → 必须桌面端

AI 做不到的：AI 只会告诉你"怎么做"，但不会告诉你"该不该做"。

2. 技术深度 — 知道"底层原理"

场景：Tauri 应用启动慢，用户抱怨

  • ❌ 旧思维：问 AI"怎么优化 Tauri 启动速度"
  • ✅ 新思维：理解 Tauri 的启动流程 → Rust 后端初始化 + WebView 加载 → 针对性优化

实际优化（来自第 3 篇）：

// ❌ 启动时加载所有模块
fn main() {
  load_all_modules(); // 耗时 2s
  tauri::Builder::default().run();
}
 
// ✅ 延迟加载非关键模块
fn main() {
  tauri::Builder::default()
    .setup(|app| {
      // 只加载核心模块
      load_core_modules();
 
      // 后台异步加载其他模块
      spawn(async { load_secondary_modules() });
      Ok(())
    })
    .run();
}

AI 做不到的：AI 能给你代码，但理解"为什么这样写"需要你自己。

3. 系统设计 — 知道"如何组合"

场景：做一个 AI 驱动的桌面应用

  • ❌ 旧思维：Tauri + AI SDK，写一个大文件
  • ✅ 新思维：分层设计 → UI 层（React）、逻辑层（Rust）、AI 层（独立服务）

架构对比（来自第 6 篇）：

❌ 单体架构：
React ← → Tauri ← → OpenAI API
          ↑
        所有逻辑都在这里（难维护）

✅ 分层架构：
React ← → Tauri ← → AI Service
          ↑           ↑
        UI逻辑      AI逻辑（可复用）

AI 做不到的：AI 能写单个模块，但设计整体架构需要人。

4. AI 协作 — 知道"怎么用 AI"

不是"让 AI 写代码"，而是"让 AI 做你的工具"

示例工作流（来自第 5 篇）：

  1. 我：设计 Agent 的 Tool 接口
  2. AI：生成初始实现代码
  3. 我：Review 并补充边界处理
  4. AI：写单元测试
  5. 我：跑测试、修 bug、上线

关键：

  • ✅ 你主导设计 — AI 只是执行
  • ✅ 你验证结果 — AI 的代码不一定对
  • ✅ 你积累经验 — AI 不会替你学习

5. 用户理解 — 知道"用户要什么"

场景：做一个 AI 文件助手

  • ❌ 旧思维："我加了 20 个 AI 功能，用户肯定喜欢"
  • ✅ 新思维："用户最常用的 3 个功能是什么？其他的先不做"

实际案例（来自第 7 篇）：

// ❌ 功能堆砌
const tools = [
  "file_search",
  "file_rename",
  "file_copy",
  "file_compress",
  "file_encrypt",
  "file_backup",
  // ... 还有 14 个
]
 
// ✅ 聚焦核心
const tools = [
  "file_search", // 80% 用户需要
  "file_organize", // 60% 用户需要
  "file_summary", // 40% 用户需要
]

AI 做不到的：AI 不知道用户真正想要什么，你需要通过数据 + 反馈来判断。

6. 快速学习 — 知道"怎么学新东西"

AI 时代变化太快：

  • 今天学 Electron，明天出 Tauri，后天出 Electrobun
  • 今天学 LangChain，明天出 Vercel AI SDK，后天出 xxx

关键不是"学什么"，而是"怎么学"

我的学习方法（来自这 7 篇的实践）：

  1. 先用 — 跑一个最小 demo（1 小时）
  2. 再读文档 — 理解核心概念（2 小时）
  3. 做项目 — 写一个真实功能（1 天）
  4. 写总结 — 输出文章/文档（半天）

示例：学 Tauri

  • Day 1：跑官方 demo，理解 Rust ↔ JS 通信
  • Day 2：做一个"本地文件搜索"功能
  • Day 3：写文章《Tauri 实战：从 0 到 1》

AI 做不到的：AI 能给你答案,但学习的过程只能你自己走。

四、行动建议：如何建立这 6 个能力？

短期（1-3 个月）

  1. 做一个真实项目 — 不要只学,要做

    • 例如：用 Tauri + AI SDK 做一个"本地笔记助手"
    • 目标：上线,有真实用户

  2. 写技术文章 — 强迫自己理解

    • 每周至少 1 篇
    • 重点：不是"教程"，而是"我为什么这样做"

  3. 参与开源 — 看别人怎么设计

    • 贡献 Tauri/Vercel AI SDK 的 issue/PR
    • 学习优秀项目的架构

中期（3-6 个月）

  1. 建立个人技术栈 — 不要什么都学

    • 选 1 个桌面框架（Tauri/Electron）深入
    • 选 1 个 AI 框架（Vercel AI SDK/LangChain）精通

  2. 积累技术资产 — 沉淀可复用的东西

    • 例如：Tauri + AI 的项目模板
    • 例如：常用 AI Tools 的封装

  3. 建立反馈循环 — 验证你的判断

    • 上线项目 → 收集用户反馈 → 迭代
    • 写文章 → 看评论/数据 → 改进

长期（6-12 个月）

  1. 成为某个领域的专家 — 不要做"全栈"

    • 例如："Tauri + AI 桌面应用"方向的专家
    • 目标：别人遇到问题会来问你

  2. 输出系统性内容 — 建立影响力

    • 例如：开源一个"Tauri AI Starter"
    • 例如：写一个"前端转型 AI 应用开发"系列（就像这个系列）

  3. 帮助别人 — 教学相长

    • 回答社区问题
    • 做技术分享
    • 带新人做项目

五、写在最后：AI 不是威胁，是放大器

这个系列写了 8 篇，从"为什么做桌面"到"怎么做 AI Agent"，再到今天的"如何定位自己"。

核心结论：

  • AI 不会让前端消失
  • 但 AI 会让"只会写代码"的前端消失

未来的前端工程师，不是"代码写得快"，而是：

  1. 懂产品 — 知道该做什么
  2. 懂技术 — 知道怎么做
  3. 懂用户 — 知道做得对不对
  4. 会用 AI — 让 AI 帮你做重复的事
  5. 能学习 — 跟上变化的速度
  6. 能输出 — 沉淀可复用的东西

AI 是放大器：

  • 如果你只会"调 API" → AI 让你失业
  • 如果你会"设计系统" → AI 让你效率 10 倍

选择权在你手上。

系列回顾

  1. 理解变化 - 为什么产品要做桌面和 Agent？
  2. 桌面应用技术选型 - Electron vs Tauri vs Electrobun
  3. 桌面应用的前端挑战 - 不只是"套个壳"
  4. AI Agent 开发入门 - 从插件思维到 Agent 思维
  5. Vercel AI SDK 实战 - 快速构建 AI Agent
  6. 实战项目 - Tauri + AI SDK 打造桌面 Agent
  7. 转型期生存策略 - 边学边做，保持产出
  8. 前端技能的新定位 - AI 时代的核心竞争力（本篇）

感谢你读完这个系列。如果有帮助，欢迎分享给同样焦虑的前端朋友。

我们都在转型的路上，一起加油。🚀