张宝文 - 资深前端开发工程师-6年

低调做人，高调做事

男 / 1998.09

广州大学 / 计算机网络技术

统招全日制 / 2020.06 毕业

微信/手机：13790920981

邮箱：coderkyriewen@gmail.com

github：https://github.com/zbw-zbw

掘金：https://juejin.cn/user/1239904848718135

个人介绍

2017 年 - 接触前端，热衷开源贡献，活跃于 Github、掘金，自我驱动力强，持续进步 ing

2021 年 - 加入夸克前端团队，从运营活动 H5 做到夸克小说社区完整链路（C 端 H5 + 低代码搭建组件 + 运营中台），5 年持续负责线上业务

2023 年 - 成为 Ant Design 社区活跃贡献者，贡献多个 PR，其中包括：给 Table、Transfer 组件实现 shift 多选功能，新增 useMultipleSelect hooks（点击查看 PR）

2025 年 - 独立开发并上线 2 款 Chrome 商店扩展（含订阅付费用户）与个人全栈站点，用 Next.js + AI SDK 从 0 打通产品、前端、后端、支付全链路

2026 年 - 研发方式迁移到 Agent 驱动：沉淀 10+ 个覆盖需求→实现→验证→度量全流程的 Agent Skill 并发布到内部技能市场。核心判断是「AI 写得快 ≠ 写得对」，因此重点建设产出验证与自主率度量体系，让 AI 提效变成可验证、可量化的结论

专业技能

AI 工程化（重点方向）：Agent Skill 设计与发布（10+ 个已沉淀上线内部技能市场）、MCP 工具链编排、Prompt 与研发工作流工程化；AI 产出验证体系（CDP 语义 / 像素 / 取证三层判定）、AI 自主率与纠偏成本度量；Vercel AI SDK 流式输出与 LLM 应用开发
框架与语言：React 全家桶（熟读源码，掌握 Fiber / 调度 / Hooks 实现原理）、TypeScript、Vue 2/3 全家桶、Rax；Next.js App Router + React 19 全栈开发
移动端 H5：跨端 JSBridge 适配（夸克 / UC / Android / iOS / 鸿蒙）、沉浸式与安全区、端能力降级、Hybrid 真机调试；长列表、媒体播放、手势与动画等移动端疑难场景
渲染与性能：SSR / CSR / 并行 SSR 三路渲染与降级设计、首屏数据预取与 hydration、骨架屏；rAF 调度绕过 React 渲染、IntersectionObserver 媒体节流、内存与资源池治理
工程化与低代码：Broccoli / Pegasus 搭建体系组件研发（propTypes + JSDoc 驱动运营配置面板）、Monorepo（Lerna / pnpm workspace）、Vite / Webpack 构建优化、changesets 版本发布
质量与监控：itrace / wpk 前端监控与告警、fact-stat 埋点体系与埋点自动校验、Chrome DevTools Protocol 自动化验证

工作经历

中软国际（阿里巴巴·夸克）- 1w+人（2021.09 - 2026.09）高级前端工程师

React Rax TypeScript 移动端 H5 SSR 低代码搭建 中后台 AI Coding Agent Skill

主导夸克小说社区前端完整链路：C 端 H5（26 个页面）、社区低代码搭建组件、运营中台（发帖 / 圈子 / 内容管理），是该业务线前端第一责任人
参与夸克 AI 娱乐运营中台从 0 到 1 建设，是仓库第一贡献者，负责小说社区全部运营模块
负责夸克 Broccoli 低代码搭建组件体系，独立产出 12 个搭建组件，支撑运营同学自主搭建活动页，前端不再介入日常配置需求
攻坚并行 SSR 渲染专项：完成 SSR / CSR / 并行 SSR 三路渲染的降级设计，并定位跨网关的平台级 SSR 故障根因，输出故障排查报告推动平台侧修复
从 0 实现端侧常驻 AppWorker 的广告事件上报模块：双数据源接入、请求签名、远程日志兜底，解决 iOS / Android 端能力探测差异，通过抓包完成端侧链路验证
推动研发流程 Agent 化：把需求分析、接口逻辑梳理、H5 活动开发、埋点校验、缺陷闭环等重复环节沉淀为 Agent Skill 并发布到内部技能市场，日常需求从「人工逐步执行」变成「Skill 驱动 + 人工校验」，并配套建立产出验证与自主率度量
负责夸克运营活动 H5、芭芭农场、碳账户、PC 插件中心、网址导航等业务开发与长期迭代

广州慕可生物科技有限公司 - 3000 人（2020.09 - 2021.09）前端组长

Vue TypeScript 业务开发 基建能力 代码审核 团队管理

负责 CRM / OA 办公协同 / 供应链 3 大业务线的日常迭代，共参与 30+ 次迭代开发
负责 IRY 小程序后台管理系统从 0 到 1 搭建，主要技术栈：Vue3 全家桶 + TypeScript
参与公司内部 10+ 个项目开发，沉淀 20+ 个通用或业务级别组件
负责前端开发中心每周 codereview 及组员 MR 代码质量审核
参与前端开发中心内部的简历筛选和面试（初试）工作

AI 工程化研发体系（2026 年主要投入方向）

出发点：AI Coding 让编码环节不再是瓶颈，瓶颈转移到「怎么确认 AI 写对了」和「AI 到底帮了多少」。我把这两件事都做成了可执行的流水线，而不是停留在方法论，公司项目与个人项目同一套体系。

Agent Skill 体系：沉淀 10+ 个覆盖研发全流程的 Skill——接口逻辑梳理、H5 活动全生命周期、设计稿还原、埋点校验、缺陷闭环、交付门禁、每日复盘，统一 monorepo 管理并接入自动发版同步流水线（幂等可重跑，版本已存在自动跳过）
AI 产出验证：基于 Chrome DevTools Protocol 做语义 / 像素 / 取证三层判定，阈值按基线校准，把「看着差不多」变成机器可判的红→绿证据，替代人工肉眼走查
AI 自主率度量：以 git commit trailer + 本地 JSONL 双写记录每次提交的 AI 自主程度与人工纠偏成本，可聚合出功能开发 vs BUGFIX、AI 全自主 vs 人工介入的比例，用数据回答「AI 到底提效多少」
质量门禁前置：开工前校验需求规格完整性（验收标准 / 验证手段 / 红线），交付前自动跑测试与构建并对照验收标准自检，全绿才允许宣布完成——把「AI 说改好了」变成「验证通过了」
埋点自动校验：零依赖脚本解析 HAR / Charles / curl 抓包，与埋点需求表逐条比对上报情况与参数差异，支持真机代理边操作边校验
缺陷自闭环流水线：本地 mock 复现 → CDP 红→绿验证 → 提交推送 → 状态流转，把重复的缺陷处理环节脚本化

项目经验

夸克小说社区 C 端 H5 - 项目角色：前端负责人

技术栈：Vue TypeScript JSBridge MPA fact-stat itrace

项目描述：夸克浏览器内的小说内容社区，包含内容流、帖子详情、圈子、话题、个人主页、消息中心等 26 个页面，需同时适配夸克 / UC 双宿主与 Android / iOS / 鸿蒙多端能力差异。

项目职责：

独立负责社区全部页面从 0 到 1 与长期迭代，沉淀近 30 个共享组件，其中个人主页、消息中心与公共组件层为个人核心产出
设计跨端 JSBridge 适配层：按运行环境动态加载对应 SDK，统一封装端能力调用与降级路径，业务代码无需感知宿主差异
抽象埋点与展现模式 mixin（埋点上报、曝光统计、深色模式适配），把重复的埋点接入成本压到一次配置
基于约定式目录自动生成 MPA 多入口构建配置，新增页面零构建配置改动
接入 itrace / wpk 监控并建立业务级 category 规范，线上问题从「用户反馈」变成「告警先到」

夸克 Broccoli 低代码搭建组件体系 - 项目角色：独立开发

技术栈：React TypeScript Broccoli Pegasus propTypes Schema

项目描述：面向夸克运营搭建平台的物料体系，独立产出 12 个可视化搭建组件，运营同学在平台上拖拽配置即可产出活动页，覆盖投票、弹幕、动态头图、Tab 容器、分享海报等场景。

项目职责：

建立组件配置协议：以 static propTypes + JSDoc 注释驱动生成运营配置面板，配合语义化类型（图片地址 / 颜色值 / 枚举）与嵌套结构约束，让非技术同学也能安全配置
语音投票组件：解决 Android Blink 媒体资源池上限导致的播放失败——通过 URL 打散绕过资源池复用，并加入元数据与播放双超时兜底，保证弱网下播放行为可预期
弹幕组件：用 requestAnimationFrame 直接调度轨道位移，绕过 React 渲染链路，避免高频弹幕引发的 re-render 抖动
动态头图组件：用 IntersectionObserver 做媒体节流，并以透明 base64 图替换实现 GIF 真暂停（浏览器无原生 API），离屏时释放解码开销
Tab 容器组件：以 Set 记录已加载 Tab 实现懒渲染 + 状态保留，配合统一的吸顶管理器解决多组件同时吸顶的层级冲突

夸克网盘视频签到活动（SSR 渲染专项）- 项目角色：核心开发

技术栈：Rax CompassJS SSR 并行 SSR DEF

项目描述：夸克网盘的视频签到活动页，需在弱网与低端机上保证首屏体验，采用 SSR / CSR / 并行 SSR（async-fetch）三路渲染。

项目职责：

设计三路渲染的降级矩阵：并行 SSR 失败降级同步 SSR、SSR 失败降级 CSR，任一环节异常不影响页面可用
实现首屏数据预取与 hydration 衔接，配合骨架屏消除 SSR / CSR 结构不一致导致的闪烁
定位并行 SSR 平台级故障根因（跨网关请求链路问题），产出故障排查报告推动平台侧修复，避免同类活动重复踩坑
上报渲染模式与首屏数据状态到 itrace，线上可按渲染路径（同步 SSR / 并行 SSR / CSR）分桶定位问题，降级不再是黑盒

夸克 AI 娱乐运营中台 - 项目角色：核心开发（第一贡献者）

技术栈：React TypeScript CompassJS Rematch

项目描述：夸克 AI 娱乐业务的一站式运营平台，覆盖内容管理、圈子与帖子运营、工作流编排、数据看板等模块，服务运营 / 产品 / 算法多方角色。

项目职责：

负责小说社区全部运营模块（帖子管理 / 圈子管理 / 点赞助推 / 帖子助推 / 分段评论）从 0 到 1，与 C 端 H5 形成端到端闭环，需求不再跨团队协作
基于 Compass Redux（@rematch/core）建立单一数据源规范，派生逻辑统一收敛到 selector，杜绝 props 透传与状态重复存储
沉淀中后台通用能力：表格 / 表单 / 弹窗的业务封装，新模块接入成本从「一周」压缩到「一天」
参与平台基础能力建设（可视化工作流编排、路由级权限体系、微前端接入存量子应用）

个人产品与开源

Image Harvest - 批量图片采集工具（已上线 Chrome 商店，已验证付费转化）

技术栈：Chrome Manifest V3 Preact Vite Next.js Supabase Web Crypto Creem

独立完成扩展端与后端服务全部开发并持续迭代，官网 image-harvest.kyriewen.cn
经营表现：月新增安装 160+，海外用户占比约 80%（美国 / 韩国 / 日本 / 新加坡 / 印度 / 香港），自然搜索贡献两成流量，零投放靠商店 ASO 与产品自然增长；已完成 6 语言本地化（英 / 中 / 韩 / 日 / 阿拉伯 / 西班牙）
扩展侧：sidePanel + content script + service worker 三端通信架构，虚拟列表支撑千级图片渲染，JSZip 打包下载
攻坚 MV3 用户手势限制：downloads 等 API 要求手势上下文，而手势在 await 后即失效，重构为「手势内同步发起 + 异步任务后置」的调度模型，修复批量下载静默失败
图像能力：pHash 感知哈希做相似图去重（汉明距离 + 宽高比双重约束降低误判），Median Cut 算法提取主色做筛选与分组
License 体系：ECDSA 签名离线校验（Node 侧 DER 与 WebCrypto 侧 IEEE-P1363 格式转换），三态校验结果配合宽限期设计，保证断网与服务异常时付费用户不被误锁
服务端：Next.js App Router + Supabase，自建 HMAC 签名 Cookie 做后台鉴权，用 Postgres RPC 实现限流；图片全程在浏览器内处理不落服务端，接入 Creem 完成订阅与 License 下发，独立跑通产品→研发→支付→运营闭环

hi.kyriewen.cn - 个人全栈站点

技术栈：Next.js React 19 Tailwind v4 shadcn/ui Vercel AI SDK Supabase

独立开发博客、工具集与 AI 能力接入，基于 streamText 实现流式对话
沉淀多平台内容发布流水线，选题→写作→排版→发布→数据回流全流程自动化

开源贡献

Ant Design：为 Table、Transfer 组件实现 shift 多选，抽象 useMultipleSelect hooks（PR #45285）
个人 Agent Skill 资产库 zbw-zbw/skills：通用研发 Skill monorepo，一次 push 自动按版本同步到发布渠道，幂等可重跑