2025 年 AI 前端工程师核心技能与实战指南

深入理解 AI 相关技能要求

1. 理解 AI 原理：部分岗位要求理解智能体（AI Agent）的工作原理、Function Calling 机制等。这并不意味着需要成为算法专家，但掌握基础知识能让你更好地与 AI 模型协同工作。
2. 掌握前端 AI 工具链：能够熟练运用在浏览器或 Node.js 环境中运行 AI 模型的工具库是关键。例如 TensorFlow.js 是当前前端 AI 开发的首选框架之一，此外 ONNX Runtime Web、WebNN API 也值得重点关注。
3. 具备 AI 应用场景经验：企业看重将 AI 技术落地到具体业务场景的能力，包括 AIGC 功能开发（如图片、视频生成类应用）、智能交互体验（如语音交互、智能推荐），以及利用 AI Agent 技术优化工作流。

主要厂商具体要求对比

• 腾讯：侧重智能体上下文工程、Agent 框架，需熟悉至少一种主流 Agent 框架。
• 字节跳动：关注 AI 技术与小程序平台结合，有智能体上下文工程开发经验者优先。
• 阿里巴巴：强调通义大模型应用，通义实验室相关经验优先。
• 美团：重视 AI Coding 工具辅助开发，能在 AI 工具协助下完成全栈开发。
• 京东：优先考虑有 Copilot、LangChain 应用、Agent UI 等 AI 相关产品开发经验者。
• 同花顺：需实现 AIGC 产品中流式输出、实时结果展示等交互功能，掌握 WebSocket 等实时通信技术。

五、成长路径与建议

1. 基础阶段：掌握前端核心技能 + Python 基础。
2. 进阶阶段：熟悉 Prompt Engineering + AI 框架（TensorFlow.js 等）。
3. 高级阶段：掌握智能体开发 + RAG 应用 + 模型部署优化。

给求职者的建议：

• 优先掌握 Vue3/React + Prompt Engineering + TensorFlow.js。
• 项目经验方面，至少完成 1-2 个 AI 前端项目，如智能对话界面、AIGC 内容生成工具。
• 持续学习，关注 Hugging Face、LangChain 等开源社区，保持对新技术的敏感度。

六、实战项目：AI 智能表单助手

为了演示如何将 AI 技术落地到实际业务中，我们构建了一个AI 智能表单助手。该项目旨在解决用户填写表单时格式错误率高、体验差的问题。

1. 项目概述

• 解决问题：用户填写表单时经常填错格式（如日期格式错误、邮箱格式错误），需要反复修改。
• 解决方案：
  • 用 AI 自动生成表单验证逻辑。
  • 实时提供智能格式提示。
  • 基于 RAG 实现表单相关知识库问答。
• 预期效果：表单填写错误率降低，用户完成时间缩短。

2. 技术栈

3. 详细实现步骤

第一步：创建项目结构

npm create vue@latest ai-form-assistant
cd ai-form-assistant
npm install @tensorflow/tfjs @langchain/core @langchain/openai

第二步：使用 AI 生成基础表单

在 src/components/FormAssistant.vue 中，输入提示词：'用 Vue3 Composition API 写一个表单组件，包含姓名、邮箱、日期输入框，支持实时验证和错误提示，使用 Ant Design Vue 样式'。

生成的代码示例：

<template>
  <a-form :model="form" :rules="rules" @submit="handleSubmit">
    <a-form-item name="name" label="姓名">
      <a-input v-model:value="form.name" placeholder="请输入姓名" />
    </a-form-item>
    <a-form-item name="email" label="邮箱">
      <a-input v-model:value="form.email" placeholder="请输入邮箱" />
    </a-form-item>
    <a-form-item name="date" label="日期">
      <a-date-picker v-model:value="form.date" placeholder="请选择日期" />
    </a-form-item>
    <a-button type="primary" html-type="submit">提交</a-button>
  </a-form>
</template>

<script setup>
import { reactive } from 'vue';
import { message } from 'ant-design-vue';

const form = reactive({
  name: '',
  email: '',
  date: ''
});

const rules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ],
  date: [{ required: true, message: '请选择日期', trigger: 'change' }]
};

const handleSubmit = () => {
  // 表单提交逻辑
  message.success('表单提交成功！');
};
</script>

第三步：集成 TensorFlow.js 实现实时验证

创建文件 src/utils/validate.js，用于加载预训练模型进行日期格式验证。

// 用 TensorFlow.js 实现日期格式验证
import * as tf from '@tensorflow/tfjs';

export async function validateDate(input) {
  // 加载预训练模型（实际项目中应缓存模型）
  const model = await tf.loadLayersModel('https://your-cdn.com/date-format-model/model.json');
  
  // 准备输入数据
  const inputTensor = tf.tensor([input]);
  
  // 预测
  const prediction = model.predict(inputTensor);
  const result = await prediction.data();
  
  // 返回结果（概率 > 0.8 为有效格式）
  return result[0] > 0.8;
}

在表单中使用该验证逻辑：

<script setup>
import { validateDate } from '@/utils/validate';

const dateRules = [
  { required: true, message: '请选择日期', trigger: 'change' },
  {
    validator: async (rule, value) => {
      if (!value) return Promise.resolve();
      const isValid = await validateDate(value);
      if (!isValid) {
        return Promise.reject('日期格式不正确，应为 YYYY-MM-DD');
      }
      return Promise.resolve();
    }
  }
];
</script>

第四步：集成 LangChain 实现 RAG 知识库

创建文件 src/ai/rag.js，构建基于知识库的智能问答。

import { OpenAI } from '@langchain/openai';
import { RecursiveCharacterTextSplitter } from 'langchain/text_splitter';
import { MemoryVectorStore } from 'langchain/vectorstores/memory';
import { OpenAIEmbeddings } from '@langchain/openai';

// 1. 准备知识库数据
const knowledgeBase = `
表单填写常见问题：
1. 日期格式：应为 YYYY-MM-DD，例如 2023-12-31
2. 邮箱格式：应包含@符号，例如 [email protected]
3. 手机号码：11 位数字，以 1 开头
4. 金额：应为数字，保留两位小数
5. 省份：填写全称，如'北京市'、'广东省'
`;

// 2. 创建 RAG 系统
export async function getFormHelp(query) {
  // 分割文本
  const textSplitter = new RecursiveCharacterTextSplitter({ chunkSize: 1000 });
  const docs = await textSplitter.createDocuments([knowledgeBase]);
  
  // 创建向量存储
  const vectorStore = await MemoryVectorStore.fromDocuments(
    docs,
    new OpenAIEmbeddings()
  );
  
  // 检索相关文档
  const retriever = vectorStore.asRetriever();
  const relevantDocs = await retriever.getRelevantDocuments(query);
  
  // 生成回答
  const llm = new OpenAI({ temperature: 0.7, modelName: 'gpt-3.5-turbo' });
  const context = relevantDocs.map(doc => doc.pageContent).join('\n');
  const prompt = `根据以下知识库信息，回答用户关于表单填写的问题：\n知识库：${context}\n问题：${query}\n回答:`;
  
  const response = await llm.invoke(prompt);
  return response;
}

在表单组件中调用帮助功能：

<template>
  <!-- ...其他表单代码 -->
  <a-tooltip title="点击获取填写帮助">
    <a-button type="link" @click="showHelp">?</a-button>
  </a-tooltip>
</template>

<script setup>
import { ref } from 'vue';
import { getFormHelp } from '@/ai/rag';

const helpText = ref('');

const showHelp = async () => {
  const query = "日期格式应该怎么填写？";
  helpText.value = await getFormHelp(query);
  // 显示帮助信息
};
</script>

4. 项目效果与优化

• 用户体验提升：实时验证输入格式，自动提示正确写法；点击问号按钮获取详细帮助。
• 性能优化：模型加载时需检查是否已缓存，避免重复请求。
• 本地化支持：可根据用户语言环境翻译查询和回答，提升国际化体验。

通过这个项目，可以直观地看到 AI 技术如何嵌入到传统前端开发流程中，解决实际问题并提升效率。