前端 + AI 学习记录（Day 51–60）：第二个项目、AI 基建与输出影响力

这一篇是第六也是最后一篇阶段总结，覆盖 Day 51–60：
重点是 第二个综合项目（代码助手）、抽离前端 AI 基建、以及把成果输出成简历/文章/视频。

一、阶段目标：从“会做”到“可复用 & 可展示”

最后 10 天，我给自己的目标是：

完成第二个有清晰业务场景的实战项目（例如：前端代码助手）；
把项目里通用的 hooks/components/utils 抽出来，作为“前端 AI 基础库”；
把 60 天的成果，用 文章 + Demo + 简历 的形式完整地表达出来。

二、Day 51–55：第二个综合项目 —— Code Assistant

1. 项目选型与需求拆解（Day 51）

我选择了一个自己日常一定会用到的场景：前端代码助手 Code Assistant。

核心需求：
- 解释：解释一段代码的逻辑、用途、潜在坑点；
- 修复：基于报错/问题描述，给出修复建议 + 修复后代码；
- 重构：输出更易读/更易维护的写法；
- 生成测试：为给定函数/组件生成 Jest/Vitest 测试用例。
典型用户故事：
- “我贴一段报错和代码，希望 AI 告诉我为什么错以及怎么改”；
- “我把一个复杂组件贴进来，希望 AI 帮我做重构建议和部分代码重写”；
- “我给出一个工具函数，想要自动生成单元测试”。

这一整天主要在写文字：用户故事、行为路径、边界情况，而不是马上写代码，这非常有利于后面少踩坑。

2. 信息架构 & 交互设计（Day 52）

把 Code Assistant 页面的结构梳理清楚：

页面结构：
- 顶部：项目名 + 模式说明（解释 / 修复 / 重构 / 测试）；
- 左侧（CodePanel）：
  - 模式选择（Radio/Tab）
  - 语言选择（TS/JS/React/Vue…）
  - 代码输入区（大 textarea / 后续可换成 Monaco）
- 右侧（ChatPanel）：
  - 问答列表（上下文对话）
  - 问题输入区（可以为空，仅基于代码）

状态模型（前端 state）：

type Mode = 'explain' | 'fix' | 'refactor' | 'test'

interface CodeAssistantState {
  mode: Mode
  language: string
  code: string
  question: string
  // messages: ChatMessage[]   // 复用之前的 Message 模型
}

和前面的通用 Chat 不同的是：这里多了 mode + language + code 这三块业务状态，
但底层 useChat / useStreamingChat / aiClient 都可以直接复用。

3. 接入聊天 + RAG + Function Calling（Day 53）

后端接口设计为一个统一的 /api/code-assistant：

前端请求结构：

interface CodeAssistantRequest {
  mode: 'explain' | 'fix' | 'refactor' | 'test'
  language: string
  code: string
  question?: string
  history?: { role: 'user'|'assistant'; content: string }[]
}

后端处理思路（逻辑上）：
- 根据 mode 选择 Prompt 模板：
  - explain：多讲解、少改动；
  - fix：必须指出 bug 位置 + 修后代码；
  - refactor：强调可读性/抽组件/命名等；
  - test：给出测试结构 + 关键断言。
- 可选：在 Function Calling 里挂上 lint/test 等工具，比如：
  - lint_code：用 ESLint/TS 编译器做静态分析；
  - run_tests：在沙箱环境中跑测试代码。
前端部分，只需要：
在点击“发送”时，把 mode/language/code/question 一起丢出去，然后照常走 Chat 渲染流程。

4. 调试面板 / Prompt 模板 / 日志接入（Day 54）

这一整天的重点是把之前的工程化能力真正用在 Code Assistant 里：

调试面板（Day 35 沉淀的能力）：
- 每次请求记录：
  - prompt（最终模板渲染后）；
  - mode / language / 代码字数（存在 meta 里，而不是全量日志）；
  - 耗时 / 模型名 / 错误信息。
Prompt 模板（Day 34 的能力）：
- 为每个 mode 定义独立模板并在调试面板中展示，方便观察：
  - 同一段代码在不同 Prompt 下的回答差异；
  - 调整模板后对“典型样本”的影响。
日志与评估：
- 选几段典型代码，固定问题，观察不同版本 Prompt + 不同参数下的回答质量；
- 提前为后面 Day 55 的“基准评估”准备数据。

5. 基准评估 & 文档撰写（Day 55）

最后一天主要做两个收尾工作：

小型基准集评估：
- 针对 Code Assistant，挑出 N 条典型样本：
  - 常见 bug 场景；
  - 重构场景；
  - 测试生成场景。
- 对每条样本：
  - 看 AI 是否正确定位问题 / 给出合理修复/重构建议 / 生成可运行的测试；
  - 简单打 1–5 分或 0–10 分，记录在表里。
- 有了这一批样本，你后面再改 Prompt / 模型 / 工具，都有“基线可以对比”。
技术文档（README / 架构说明 / API 文档）：
- 项目简介：Code Assistant 是什么，有什么价值；
- 架构说明：
  - 前端：CodePanel / ChatPanel / DebugPanel / PromptLab 的关系；
  - 后端：/api/code-assistant 的数据流，是否使用 RAG / Agent / Tools；
- 接口文档：请求字段含义 + 响应字段含义 + 示例。

这一步不是写给 AI 看的，是写给未来的你和未来的同事看的。
能让别人“一眼看懂”这个项目，是非常重要的能力。

三、Day 56–60：抽基建 & 输出影响力

1. 抽离前端 AI 基础库（Day 56）

把两个项目里反复用到的东西整理成一个本地 NPM 包结构（或者 monorepo 子包）：
- hooks：
  - useChat / useStreamingChat / useSSE；
  - useThrottledText；
  - useMultiTabSync；
- components：
  - ChatWindow；
  - DebugPanel；
  - AgentTimeline；
  - EmbeddingScatter；
- core & utils：
  - aiClient 抽象；
  - renderPrompt；
  - requestWithRetry。
目标是：
将来在任何新项目里，只需要：
```
import { HttpAIClient, useStreamingChat, ChatWindow } from 'ai-frontend-kit'
```
再配上一个 /api/... 的后端，就能快速起飞。

2. 长文技术总结（Day 57）

写了一篇/计划写一篇类似这样的文章：

《前端如何系统接入 AI：从 0 到两个完整项目的实践》
推荐结构：
1. 为什么前端要关心 AI；
2. LLM / Prompt / RAG / Agent 的极简解释；
3. 项目一（通用聊天 + RAG）的架构与实践；
4. 项目二（Code Assistant）的场景与实践；
5. 前端工程化：调试、实验台、性能、安全；
6. 踩坑与经验；
7. 未来计划。
写这篇文章的价值：
- 帮你理清脑子里的东西；
- 也为后来者（同事/读者）提供一条可复用路线；
- 也是你之后应聘/晋级时的高质量“素材”。

3. Demo 视频录制（Day 58）

准备一个 5–10 分钟 Demo 脚本：
- 展示：
  - 通用聊天 + 文档问答；
  - Code Assistant 四种模式；
  - 调试面板 / Prompt 实验台；
- 每个模块简要讲解“前端是怎么接进来的”。
录屏 + 解释：
以后投简历 / 内部分享 / 对外分享，都可以直接拿出来用。

4. 简历 / Portfolio 梳理（Day 59）

针对简历中的“前端 + AI”模块，整理出 1–2 条项目经历：
- 项目名字、职责、技术栈、难点 & 解决方案、成果；
- 技能标签里明确写出 RAG / LangChain / Function Calling / SSE / 性能优化等。
同时为 GitHub / 个人站设计一个简单结构：
- 首页：
  - 一句话介绍 + 两个 Demo 链接；
- 项目页面：
  - 截图 + 功能简介 + 技术要点 + 运行方式。

5. Day 60：60 天总复盘 & 3 个月规划

回顾整条路：
- Day 1–10：打通调用链 & 最小 RAG；
- Day 11–20：LangChain / Agent & 工程思维；
- Day 21–30：RAG 质量、安全、前端基础设施；
- Day 31–40：多模态、多会话、调试/实验台/SDK；
- Day 41–50：工作流、多 Agent、知识中心；
- Day 51–60：第二个项目、基建抽离、对外输出。
给自己定了一个后续 3 个月方向（可以因人而异）：
1. 深入某一个方向：比如 LangChain 高级用法、多 Agent 系统设计；
2. 打磨一个前端+AI 的开源项目（例如 ai-frontend-kit）；
3. 持续输出：文章、Demo、分享，形成“前端 + AI”标签。

总结：从“前端 + AI 入门”到“前端 + AI 实战”

用 60 天把这条路走完之后，你已经有：

两套完整的实战项目：通用聊天 + 文档问答、Code Assistant；
一套相对完整的 前端 AI 基建（hooks / components / utils）；
对 RAG / Agent / 多模态 / 工作流 / 安全 / 工程化的系统认知。

接下来，更多就是 深度 + 广度 的问题：
在一个真实的业务环境里，把这套能力用出来、压榨出来、打磨到可以被团队复用、被社区看见。

posted @ 2025-12-17 15:03 XiaoZhengTou 阅读(0) 评论(0) 收藏举报

刷新页面返回顶部

前端+AI的结合

前端 + AI 学习记录（Day 51–60）：第二个项目、AI 基建与输出影响力

前端 + AI 学习记录（Day 51–60）：第二个项目、AI 基建与输出影响力

一、阶段目标：从“会做”到“可复用 & 可展示”

二、Day 51–55：第二个综合项目 —— Code Assistant

1. 项目选型与需求拆解（Day 51）

2. 信息架构 & 交互设计（Day 52）

3. 接入聊天 + RAG + Function Calling（Day 53）

4. 调试面板 / Prompt 模板 / 日志接入（Day 54）

5. 基准评估 & 文档撰写（Day 55）

三、Day 56–60：抽基建 & 输出影响力

1. 抽离前端 AI 基础库（Day 56）

2. 长文技术总结（Day 57）

3. Demo 视频录制（Day 58）

4. 简历 / Portfolio 梳理（Day 59）

5. Day 60：60 天总复盘 & 3 个月规划

总结：从“前端 + AI 入门”到“前端 + AI 实战”

公告