Skip to content

前端转 AI 全栈开发工程师学习路径与项目包 ​

面向已有前端基础、希望转型为“偏前端的 AI 全栈开发工程师”的学习者。
本资料包基于当前文件夹中的学习文档整理,不重新造一条孤立路线,而是把已有知识串成可以练、可以做作品集、可以面试表达的项目路径。

资料包内容 ​

  • 00-学习路径总览.md:从前端地基到 AI 全栈交付的阶段路线。
  • 00-现有学习文档映射.md:当前文件夹内所有学习文档与路线阶段的对应关系。
  • html-designs/index.html:7 个项目的本地 HTML 高保真设计稿总览。
  • 01-ai-prompt-workbench/:AI Prompt 工作台,强化 TypeScript、Vue、Vite、Tailwind。
  • 02-ai-ui-component-studio/:AI 产品组件与设计系统练习,强化 UI 工程能力。
  • 03-ai-task-fullstack-platform/:AI 任务管理全栈平台,强化 NestJS、Prisma、PostgreSQL。
  • 04-rag-knowledge-base/:个人知识库 RAG 系统,强化 LangChain、向量检索、引用来源 UI。
  • 05-agent-workflow-studio/:Agent 工作流编排台,强化 LangGraph、状态机、Redis、流式状态 UI。
  • 06-enterprise-ai-copilot/:企业 AI 助手控制台,补齐 Java、Spring、MyBatis、权限与审计。
  • 07-ai-product-ops-capstone/:AI 产品运营中台毕业项目,整合 Monorepo、Docker、Nginx、部署与作品集包装。

推荐使用方式 ​

  1. 先读 00-学习路径总览.md,确认整体阶段和时间线。
  2. 按项目编号顺序推进,每个项目先读 项目需求.md,再读 前端设计稿.md。
  3. 每个项目都先做前端静态页,再补接口和 AI 能力。
  4. 完成一个项目后写一篇项目复盘,沉淀为作品集材料。
  5. 最终把第 4、5、7 个项目作为求职主作品,第 1、2、3 个作为技术基础证明。

视觉方向 ​

这些设计稿统一采用“AI 工具型产品”方向:

  • 信息密度高,但不压迫。
  • 以工作台、侧边栏、数据卡片、流式反馈、状态时间线为核心。
  • 颜色克制,重点用蓝、青、绿色表达智能、进度和成功状态。
  • 偏前端岗位要特别展示:交互状态、响应式布局、组件复用、可访问性、加载/错误/空状态。

基于 VitePress 构建的个人学习文档知识库