高级前端开发工程师（AI Agent 产品方向） · 杭州 · 5 年经验
songzhixing@example.com · 136 0000 0000 · github.com/songzhixing
个人优势
- 5 年前端经验，前 3 年做电商中后台，近 2 年负责公司 AI 助手的前端，从对话界面、工具调用过程展示到人工确认交互都由我设计和实现
- 熟悉 Agent 产品里前端特有的问题：流式渲染的稳定性、断线续传、多步任务的过程可视化、中断与重新生成、模型草稿的编辑与采纳
- 做过生成式界面：模型返回结构化数据，前端按类型渲染成表格、卡片和可操作表单，而不是只显示一段 Markdown
- 用前端性能的方式度量 AI 体验：首字时间、渲染卡顿、回答完整率、等待放弃率都有埋点和看板，每次改版前后对比
- 和后端、算法同学协作时负责定义前后端的流式协议和事件格式，工具编排和模型调用由后端负责
- 前端工程基本功扎实：组件库、性能优化、监控告警、端到端测试都做过
- 技术栈：TypeScript、React、Next.js、Vercel AI SDK（前端部分）、SSE、Zustand、TanStack Query、Tailwind CSS、Playwright、Sentry
工作经历
某企业服务公司 · 高级前端开发工程师（AI 助手方向）
AI 助手组 7 人（算法 2、后端 2、前端 2、产品 1），助手嵌在公司的 CRM 产品里，服务约 3000 家企业客户。我负责助手前端，是前端方向的负责人。
- 工具调用过程可视化：助手回答前要查客户、订单、合同等多个系统，早期用户只能对着加载动画等 10 多秒。和后端约定步骤事件格式，把每一步以卡片形式流式展示查询对象和中间结果；等待期间的放弃率从 31% 降到 12%
- 流式渲染：长回答里表格和代码块在流式过程中频繁抖动，长对话滚动明显卡顿。改为按块增量解析、未闭合的结构先占位，长列表虚拟化；200 轮以上的对话滚动帧率稳定在 55 帧以上，渲染相关的用户反馈基本消失
- 断线续传：销售常在手机上使用，网络切换时回答会中断。前端记录已收到的事件序号，重连后从断点续传，移动端回答完整率从 88% 提高到 99%
- 人工确认与草稿编辑：改客户阶段、发跟进邮件这类写操作，模型只生成草稿。设计了「草稿卡片 → 编辑 → 确认」的交互，用户可以逐字段修改后再提交；草稿采纳率约 64%，没有出现未经确认就执行的写操作
- 体验度量：搭建 AI 功能的前端埋点和看板，首字时间、完整率、重新生成率、放弃率按版本对比，产品和算法同学据此判断改动效果
某电商公司 · 前端开发工程师
商家后台组 9 人，负责商品、订单和营销三个模块的前端。
- 主导商品发布页重构，200 多个字段的单页表单拆成分步表单，配合草稿自动保存，商家发布商品的平均耗时从 12 分钟降到 5 分钟
- 搭建前端监控，接入错误、性能和接口耗时数据，线上问题从商家反馈到定位的时间从半天缩短到 30 分钟以内
- 负责团队组件库的表格和表单组件，被 4 条业务线使用；2023 年参与内部客服问答原型的对话界面，之后转到 AI 助手方向
项目经历
销售跟进助手（生成式界面）
React / Next.js / Vercel AI SDK / SSE / Playwright
销售每天要在 CRM 里翻聊天记录、合同和工单才能写出跟进计划，纯文字回答还要再手动整理进系统。
- 和后端约定结构化输出的 schema：客户风险、跟进建议、邮件草稿分别返回，前端渲染成风险卡片、可勾选的待办和可编辑的邮件表单
- 每条建议都可以展开查看依据，点击跳转到原始聊天记录或合同条款，没有依据的内容标注为「待确认」
- 用 Playwright 录制 30 条典型对话做端到端回归，模型或接口格式变化导致的渲染问题在发布前就能发现；试点团队 40 名销售使用三个月，单个客户的跟进准备时间中位数降到 4 分钟