从9年前端到AI实践者：我的学习之路

AI搬砖路人A
7 阅读11分钟

从9年前端到AI实践者：我的学习之路

引言：从零散学习到系统认知

作为一个写了9年前端的老兵，我在2023年第一次接触AI项目时，完全是摸着石头过河。那一年，我们团队启动了公司知识库RAG系统和智能客服两个项目，但说实话，当时的我对AI的理解还很零碎。

记得第一次在小程序里集成智能客服时，用户问"这个团购券怎么用"，模型回答"请参考用户手册第5章"——但我们的小程序根本没有用户手册！那一刻我既尴尬又意识到：AI落地远比想象中复杂。

不过真正让我开始系统学习AI的，是在2026年初偶然发现WayToAGI知识库。这个发现让我意识到，过去三年我虽然一直在用AI工具，但学习方式太碎片化了。

2023年：零散的AI初体验

2023年对我来说是AI的启蒙年，但学习过程相当琐碎：

LangChain RAG实践总结 我最初使用LangChain Python框架自己实现了前端部门知识库的RAG系统。得益于前端部门丰富的文档积累，RAG系统有充足的内容可处理。通过LangChain，我能够：

  1. 文档预处理与分块：针对不同类型的文档（技术规范、项目文档、代码文件、会议记录）设计了不同的分块策略。对于代码文件，我保留了完整的函数和组件定义；对于长篇文档，采用语义分块确保上下文完整性。

  2. 嵌入与向量化：使用开源的text-embedding模型将处理后的文本块转换为向量，并存储到Chroma向量数据库中。考虑到中文技术文档的特点，我对比了多个嵌入模型，最终选择了在中文技术术语上表现更好的模型。

  3. 检索与生成优化：实现多路召回策略，结合关键词匹配和语义相似度，确保检索结果的相关性。同时，通过Prompt工程优化，让大模型能够更好地理解前端技术上下文，避免生成不准确的技术建议。

  4. 评估与迭代：建立了简单的评估机制，通过人工测试常见问题的回答质量，不断调整分块策略和检索参数。

后来，随着公司AI部门提供了更专业的RAG工具平台，我将前端知识库迁移到了公司内部工具上。这个迁移过程让我意识到，虽然自己动手实现RAG很有价值，能深入理解每个环节的工作原理，但专业团队的工具在性能、稳定性和功能丰富度上都有显著优势。

踩坑智能客服之路

相比之下，智能客服项目就比较坎坷了。作为首个启动这个项目的开发，我套用公司现有Java8 + Spring Boot搭建了一个简单的服务，主要集成了火山引擎的AI能力来实现智能客服功能。选择火山引擎是因为它在中文场景下表现不错，而且有相对完善的API文档。

AI相关的踩坑经历

坑1：中文编码问题 火山引擎返回的中文响应在存储和显示时经常出现乱码。问题出在多个环节：

  • HTTP响应处理：HttpClient默认使用ISO-8859-1解码
  • 数据库存储：MySQL连接URL缺少characterEncoding=utf8参数
  • JSON序列化：Jackson在处理中文时需要显式设置字符编码

最终的解决方案是在每个环节都显式指定UTF-8编码：

// HTTP客户端配置
CloseableHttpClient httpClient = HttpClients.custom()
    .setDefaultRequestConfig(RequestConfig.custom()
        .setCharset(StandardCharsets.UTF_8)
        .build())
    .build();

// 发送请求时显式设置UTF-8编码
HttpPost post = new HttpPost("https://api.volcengine.com/ai");
post.setHeader("Content-Type", "application/json; charset=utf-8");
StringEntity entity = new StringEntity(jsonPayload, StandardCharsets.UTF_8);
post.setEntity(entity);

// 处理响应时确保UTF-8解码
CloseableHttpResponse response = httpClient.execute(post);
try {
    HttpEntity responseEntity = response.getEntity();
    String responseBody = EntityUtils.toString(responseEntity, StandardCharsets.UTF_8);
    // 处理响应内容...
} finally {
    response.close();
}

// 数据库连接
spring.datasource.url=jdbc:mysql://localhost:3306/chat?useUnicode=true&characterEncoding=utf8

坑2：上下文保持的缺失 最初的实现完全忽略了对话上下文。用户问"这个团购券怎么用？"，然后接着问"能退吗？"，第二个问题完全没有上下文，导致模型无法理解"这个"指的是什么。

火山引擎的API本身不提供对话状态管理，需要自己实现。我尝试了两种方案：

  • 方案一：简单拼接历史消息 把最近3轮对话拼接到当前Prompt中，但很快遇到token限制问题

  • 方案二：上下文摘要 用另一个AI调用对历史对话进行摘要，但增加了延迟和成本

最终采用了一个折中方案：把前几轮的内容总结后拼接，并通过关键词提取来判断话题是否延续。

坑3：Prompt设计的陷阱 最初我的Prompt非常简单："请回答用户关于团购的问题，从商品内容中获取关键信息，结合用户的问题给出答案"。结果模型经常胡说八道，比如编造不存在的退款政策。

后来我学会了结构化Prompt设计，把商家信息、商品信息、规则限制都作为上下文传入：

你是一个专业的团购客服助手，请基于以下信息回答问题：

【商家信息】
名称：XX餐厅
营业时间：10:00-22:00
地址：北京市朝阳区XXX

【商品信息】
团购券：双人套餐券
有效期：2023-06-01至2023-12-31
使用规则：需提前1小时预约，节假日不可用

【用户问题】
{user_question}

【回答要求】
1. 只能基于上述信息回答，不能编造
2. 如果信息不足，回答"我需要确认一下，请稍等"
3. 回答要简洁，不超过3句话

坑4：模型幻觉的应对 即使有了结构化Prompt，火山引擎还是会偶尔产生幻觉。比如用户问"支持哪些支付方式"，它会回答"支持支付宝、微信、银联、比特币"——但我们根本没开通比特币支付！

这个问题让我意识到，AI客服不能完全依赖大模型，必须加入严格的后处理和验证机制。后来我们建立了一个关键词白名单，对敏感信息（如支付方式、退款政策）进行二次验证。

坑5：响应延迟的用户体验 火山引擎的API响应时间不稳定，有时候需要3-5秒。在小程序里，用户看到长时间的"思考中..."会直接关闭对话。

为了解决这个问题，我实现了渐进式响应：

  • 先返回一个快速的loading消息
  • 后台异步调用火山API
  • 收到结果后再推送完整回答

但这又带来了新的问题：如果用户在等待期间发送新消息，会导致对话混乱。最终还是需要完整的对话状态机来管理。

为什么效果不理想？

回顾这个项目，效果不理想的主要原因有：

  1. AI理解浅薄：对大模型的特性和限制理解不够，以为调用API就能解决问题
  2. 缺乏工程化思维：没有考虑对话状态管理、错误处理、监控告警等生产环境必需的功能
  3. 过度依赖单一模型：完全依赖火山引擎，没有fallback机制
  4. 用户体验考虑不足：没有针对小程序的特殊场景做优化

工具的日常使用 2023年我主要把AI当作开发辅助工具：

  • GitHub Copilot：写代码、补全函数
  • 后来开始用Cursor：理解复杂代码逻辑
  • 偶尔用Claude：调试问题、解释错误信息

但那时候我对AI的理解还停留在"工具"层面，没有深入思考如何系统性地应用AI解决业务问题。

2024-2025年：工具驱动的渐进式学习

这两年我继续在日常开发中使用AI工具，但学习仍然是碎片化的：

  • GitHub Copilot 成了我的主力助手，特别是在处理重复代码和样板代码时
  • Cursor 帮我快速理解大型代码库，特别是在接手新项目时特别有用
  • Claude 在调试复杂问题时表现出色，特别是能帮我分析错误堆栈和提出解决方案

虽然工具用得越来越熟练，但我总觉得缺少一个系统的学习框架。经常会遇到这样的情况：知道某个AI功能很有用，但不知道最佳实践是什么；或者看到别人用得很厉害，但自己不知道从哪里开始学起。

2026年初：遇见WayToAGI，找到学习方向

转折点出现在2026年初，我在掘金上偶然发现了WayToAGI知识库。这个知识库最打动我的地方在于它的系统性和工程师视角。

它不是简单地罗列各种AI技术和工具，而是提供了一个完整的知识体系框架：

  • 从基础的AI概念理解
  • 到中级的工程实践
  • 再到高级的应用场景

更重要的是，它强调实践导向的学习理念，这与我的工程背景完美契合。我不需要成为AI理论专家，但我需要知道如何将AI技术应用到实际项目中。

我的AI学习方法论

基于这几年的经验，我总结出了一套适合前端工程师的AI学习方法：

1. 以工具为切入点，逐步深入

不要一开始就研究复杂的理论，而是从你已经在用的工具开始：

  • 先熟练掌握GitHub Copilot的基础功能
  • 然后尝试Cursor的代码理解和生成能力
  • 再深入使用Claude的复杂任务处理能力

每个工具都代表了AI能力的不同层次，通过工具的使用自然过渡到更深层的理解。

2. 用项目驱动学习

想学什么技术，就立刻找个地方用起来。比如：

  • 想学RAG？先给团队文档做个问答系统
  • 想学Prompt工程？先优化你的日常开发Prompt
  • 想学AI集成？先在小程序里加个简单的AI功能

3. 发挥前端工程师的优势

作为前端工程师，我们在AI时代有独特优势：

  • 用户体验敏感：知道什么样的AI交互是友好的
  • 工程化思维：擅长将复杂问题分解为可管理的模块
  • 快速迭代能力：能快速验证想法并收集反馈

给前端工程师的建议

如果你也在AI学习的路上，我的建议是：

  1. 不要被理论吓倒：先从工具开始，边用边学
  2. 重视已有资产：你们团队的文档、代码、规范都是宝贵的RAG素材
  3. 保持工程思维：用前端的工程化方法来解决AI落地问题
  4. 寻找系统学习路径：像WayToAGI这样的知识库能帮你建立完整认知
  5. 量力而行：不一定要勉强自己去做不熟悉的技术栈，发挥自己的优势更重要

写在最后

回头看这三年的AI学习之路，我觉得最有价值的不是学会了多少技术，而是改变了思维方式。我不再把AI当作神秘的黑盒子，而是看作可以工程化处理的技术工具。

那个用火山引擎做智能客服的经历虽然效果不好，但它让我明白了什么是真正的AI工程化。技术永远在变，但解决问题的能力永远不会过时。AI时代，前端工程师的价值不是在减少，而是在升级。我们不再是单纯的界面实现者，而是AI产品的核心构建者。

特别要提醒的是：别忽视你们团队已有的文档和代码，它们可能就是最好的AI学习素材。前端工程师天然就是知识的组织者，这在AI时代会成为巨大的优势。

欢迎交流：如果你也在探索前端与AI的结合，或者对我的学习路径感兴趣，欢迎在评论区讨论！

avatar
文章
阅读
粉丝