在职 · 一周内可到岗
你好，我是
李琳 · Colin
</>AI 全栈工程师
前端出身的 AI 全栈工程师 —— 做画布编辑器引擎、时间线播放引擎，也做 AI 视频与内容产品。
向下滚动
ABOUT
关于我
10 年前端开发经验，业务覆盖海外 AIGC 产品、医疗互联网、K12 在线教育、本地生活平台，能独立承担从需求拆解、技术方案、工程搭建到上线交付的完整链路。
近两年专注海外 AI 产品：AI 视频生成 SaaS 的 Web 编辑器、AI 内容工具和浏览器扩展。主攻方向是编辑器引擎 —— 基于 DOM 的 1920×1080 画布、撤销/重做、帧级对齐的时间线播放引擎、GSAP 动画与 Yjs 实时协作。
具备前端 Owner 经验，带过 5 人前端活动方向，能制定开发规范、拆分公共模块、推动组件库和 CI/CD 落地。1 年 Python 经验，用 FastAPI 做 LLM 应用与 RAG 知识库，持续向全栈和 Agent 工程延伸。
熟练把 Claude Code、Codex 融入方案推演、代码生成、重构、测试与文档沉淀，并维护自己日常在用的 agent skills。
李琳 · Colin
- 现居 / 状态
- 在职，一周内到岗
- 学历
- 本科 · 中国石油大学 · 计算机科学与技术
- 当前方向
- AI 视频 SaaS · 编辑器引擎 · Agent 工程
- 行业
- 海外 AI · 医疗 · 教育 · 直播 IM · 本地生活
年
前端开发经验
个
行业交付经验
w+
CSDN 博客阅读
+
GitHub 开源仓库
SKILLS
技能栈
前端核心
- React 19
- Vue 2/3
- TypeScript
- Next.js 16
- Tailwind CSS
- Zustand + immer
- Vite / Webpack / Rollup
- 性能优化
编辑器与动画
- DOM 画布引擎
- react-moveable
- 撤销/重做
- 时间线播放引擎
- GSAP
- Three.js
- TipTap
- Yjs 实时协作
小程序 / App / 桌面
- 微信小程序
- uni-app 多端
- React Native / Expo
- Flutter
- Electron
- Chrome 扩展 MV3
- App 内嵌小程序
- H5 / PC 适配
AI 与后端
- LLM 应用
- RAG 知识库
- SSE 流式
- Python / FastAPI
- Node.js / Fastify
- Agent 编排
- 多模型接入
- Redis / MySQL / Mongo
工程化与协作
- CI/CD
- Qiankun 微前端
- Monorepo / pnpm
- Node 自动化部署
- ESLint / husky
- Storybook
- 组件库建设
- 前端 Owner
CANVAS EDITOR ✦ TIMELINE ENGINE ✦ AI VIDEO ✦ REAL-TIME COLLAB ✦ NEXT.JS ✦ RAG ✦ AGENT CANVAS EDITOR ✦ TIMELINE ENGINE ✦ AI VIDEO ✦ REAL-TIME COLLAB ✦ NEXT.JS ✦ RAG ✦ AGENT CANVAS EDITOR ✦ TIMELINE ENGINE ✦ AI VIDEO ✦ REAL-TIME COLLAB ✦ NEXT.JS ✦ RAG ✦ AGENT CANVAS EDITOR ✦ TIMELINE ENGINE ✦ AI VIDEO ✦ REAL-TIME COLLAB ✦ NEXT.JS ✦ RAG ✦ AGENT
CANVAS EDITOR ✦ TIMELINE ENGINE ✦ AI VIDEO ✦ REAL-TIME COLLAB ✦ NEXT.JS ✦ RAG ✦ AGENT CANVAS EDITOR ✦ TIMELINE ENGINE ✦ AI VIDEO ✦ REAL-TIME COLLAB ✦ NEXT.JS ✦ RAG ✦ AGENT CANVAS EDITOR ✦ TIMELINE ENGINE ✦ AI VIDEO ✦ REAL-TIME COLLAB ✦ NEXT.JS ✦ RAG ✦ AGENT CANVAS EDITOR ✦ TIMELINE ENGINE ✦ AI VIDEO ✦ REAL-TIME COLLAB ✦ NEXT.JS ✦ RAG ✦ AGENT
EXPERIENCE
工作经历
- 2022.08 - 至今NOW
诺信创联（医疗 / AIGC）
高级前端工程师 / 前端 Owner
- 海外 AI
- 画布编辑器
- 微前端
- 小程序
- 负责 C 端小程序、PC 管理后台、AIGC 数字人与编辑器、活动中台等核心业务的前端开发与架构设计。
- 在海外 AI 项目中承担关键技术调研与项目攻坚：方案验证、技术风险拆解、复杂交互落地、跨端兼容问题处理。
- 作为活动方向项目 Owner，负责需求评审、任务拆分、技术方案、上线排期和质量把控，带 5 人前端团队。
- 主导小程序与 uni-app 技术选型、工程规范、环境切换、命令行打包发布、腾讯 IM/TRTC 集成、App 内嵌小程序。
- 负责画布编辑器架构、公共模块抽离、Qiankun 微前端迁移、组件库完善与图表组件二次封装。
- 2020.08 - 2022.08
高思教育 / 爱学习（K12 在线教育）
前端工程师
- 直播课堂
- Qiankun
- 组件库
- 性能优化
- 参与网校老师端、学生端、教研平台和在线学习 App/小程序建设，覆盖直播课堂、题库教研、课程学习、社区互动。
- 负责 Vue 项目迭代、Qiankun 微前端调研与迁移、公共 UI 组件库建设、第三方组件重写与性能优化。
- 集成百家云直播 SDK、SSE 实时数据更新、html2canvas 课件生成、SVGA 礼物动效和 Cocos Creator 互动小游戏。
- 沉淀登录、埋点、课程等公共页面与 Node 脚本能力，曾将项目体验评分从 48 分优化到 95 分。
- 2018.07 - 2020.08
58 同城
前端开发工程师
- 本地生活
- H5 活动
- 商家后台
- 埋点
- 参与本地生活 / 房产频道移动端页面、运营活动 H5 和商家后台模块开发，技术栈以 Vue、JavaScript、Webpack 为主。
- 负责列表页、详情页、筛选组件、推荐模块、活动落地页和表单类后台页面，处理移动端适配、弱网与异常态。
- 封装请求、分页、筛选、弹窗、上传、表格等通用能力，完成接口联调、登录态、权限判断与埋点接入。
- 通过图片懒加载、接口并行、按需加载与缓存策略优化页面性能，支撑高频运营需求稳定上线。
PROJECTS
代表项目
AIGC / 画布编辑器 / 海外产品
Leadde · AI 视频生成 SaaS
对标 HeyGen / Synthesia 的 AI 视频生成平台：300+ 数字人形象、88 种语言配音，PPT / PDF / 脚本一键成片，浏览器内编辑、云端渲染。担任 Web 视频编辑器核心开发。
- React 19
- TypeScript
- Vite
- Zustand
- react-moveable
- GSAP
- Yjs
- TipTap
- Tailwind
- 自研画布编辑器引擎：React 19 + react-moveable 的 1920×1080 DOM 画布，多选、组合/解组（旋转矩阵换算）、对齐吸附、裁剪平移、剪贴板与快捷键，分层为 core / interactions / history / sync。
- 状态架构与撤销重做：基于 slice 的 Zustand 画布 store，快照 + 命令混合式 undo，保证 store、DOM 与交互控件三方一致。
- 预览播放引擎：rAF 驱动、以音频为时钟，逐帧同步多页时间线、转场、视频裁剪、入场动画与 GSAP 受控 seek。
- 编辑器即渲染器：导出录制复用同一画布逐帧驱动，按 媒体 → 首帧稳定 → 动画挂载 → 字体就绪 顺序闸门，保证成片与预览一致。
- 文字自动对比度：沿图层 z-order 合成 alpha 推算文字真实背景（含旋转图层逆变换与视频帧离屏采样），自动选取可读文字色。
- 实时协作：Yjs / y-websocket 通道，断线全量重建、退避重连与统一只读闸门。
- 排查并修复了 Playwright 无头录制拦截 gzip CDN 资源导致成片丢字体的问题。
Chrome 扩展 / Next.js SSR / 10 语言
Lynote · AI 内容工具
AI 内容工具矩阵：YouTube 字幕翻译与总结、AI 改写与检测扩展，以及 Next.js 15 的多语言 SaaS 站点。
- WXT
- React 19
- Next.js 15
- TypeScript
- Zustand
- next-intl
- SSE
- YouTube Transcript Generator：Shadow DOM 注入 YouTube 侧栏做样式与事件隔离，service worker 请求代理绕过 CORS，Zustand + chrome.storage 跨标签同步登录态，翻译的暂停/继续/重试状态机。
- AI Humanizer & Detector：划词浮动工具栏，首次划词才懒挂载 Shadow DOM 与 React 树，自动上下翻转定位，扩展到网站的 locale 前缀交接协议。
- lynote.ai：老站迁移到 Next.js 15 App Router 并对首页做 SSR，POST SSE 流式翻译（可暂停/停止），AI 视频摘要与短链分享，多语言 SEO 与分析。
AIGC / 画布交互 / 技术预研
PPT-to-Canvas 编辑器
上传 PPT 或输入 Prompt，系统解析内容并转化为可编辑画布元素，支持动画、视频、图表、数字人，最终生成带数字人讲解的视频。
- 设计编辑器整体架构与画布数据结构，抽象元素模型、层级关系、选区状态、历史记录与工具栏聚合机制。
- 负责 PPT 解析、内容到画布元素映射、编辑器状态管理等关键技术预研与方案验证。
- 实现拖拽、缩放、旋转、组合/解组、层级移动、撤销/重做、外部元素复制粘贴等高频编辑能力。
- 实现单页播放与时间线预览，通过控制画布元素时间轴模拟视频播放效果。
- Canvas/DOM
- 状态管理
- 时间线
- PPT 解析
React + TypeScript / SaaS AIGC
数字人直播平台
基于虚拟数字人技术的直播平台，支持数字人形象编辑、AI 话术续写、云手机中控台登录授权和直播间互动。
- 实现数字人拖拽、缩放、实时编辑与浏览器插件弹幕抓取，打通直播侧内容生产与互动链路。
- 使用 Hooks 与通用组件拆分业务逻辑，结合 Node 自动化部署提升迭代效率与发布稳定性。
- React
- TypeScript
- Hooks
- Node 部署
uni-app 小程序 / 医疗 ToC
智慧中医互联网医院
覆盖在线问诊、快速问诊、电子处方等场景的互联网医院小程序，负责技术选型、框架搭建与整体交付。
- 接入腾讯 IM / TRTC，实现文本、图片、音频与视频通话，支撑医患沟通链路。
- 建设多环境切换、全局跳转、命令行打包发布到微信小程序后台、ESLint/commitlint/husky 规范等工程能力。
- uni-app
- Vue
- 腾讯 IM/TRTC
- CLI 发布
商业化桌面产品
Electron + Python 桌面自动化客户端
Electron 主进程 + Python 子进程的双进程架构，配套授权服务与签名自动更新。
- 双进程通过 stdin 的 NDJSON 事件流通信，主进程负责 UI 与调度，Python 负责自动化执行。
- 配套 Fastify 授权服务、Ed25519 签名自动更新，Windows 与 macOS 双端打包分发。
- Electron
- Python
- Fastify
- Ed25519
Vue + Qiankun / 医疗运营后台
雅典娜管理系统
医疗运营后台，负责微前端框架搭建、微应用改造迁移与公共组件库建设。
- 负责 Qiankun 微前端框架搭建、微应用改造迁移、公共 UI 组件库与 ECharts 图表组件封装。
- 路由懒加载、Webpack 分包与图表防抖提升性能，完善本地微应用热更新方案降低联调成本。
- Vue
- Qiankun
- ECharts
- Webpack
Vue / Cocos Creator / SSE
K12 在线课堂与教学服务系统
老师端、学生端直播课堂与 TSS 教学服务系统，支持直播授课、课前课后互动、答题发布、白板手写与教研录题。
- 集成百家云 SDK，使用 SSE 建立长连接实现数据热更新；html2canvas 生成清晰课件图片。
- 重写 localStorage 过期策略、keep-alive 缓存逻辑与部分 Element UI 组件；Cocos Creator 开发课堂互动小游戏并嵌入 PC 项目。
- Vue
- SSE
- Cocos Creator
- html2canvas
OPEN SOURCE
开源与创作
上游贡献
daybrush/moveable
在生产级视频编辑器里长期基于 react-moveable 做画布交互，已在 #1156 申请协助维护。想带上游的改动：把组合作为可序列化的持久实体（而非运行时 targets 数组）、按子元素类型分发的递归组内缩放、跨 −180/180 边界的旋转吸附。
daybrush/moveable/issues/1156我的开源仓库
个人项目
山河记中国历史的 3D 沙盘：疆域变迁、诗人行迹、古代战役复原Next.js 16 · Three.js · Cloudflare Workers
Claudio个人 AI 电台，Claude Code 担任 DJ 选曲与串场，经 TTS 播出Node.js · React PWA · WebSocket · TTS
AI 文化 App可切换多模型供应商、带 RAG 知识库的移动端 AI 应用React Native (Expo) · FastAPI · RAG · SSE
AI 漫剧流水线小说 → 角色素材 → 分镜 → AI 成片，用机器可读清单在 agent 会话间接力AI 视频 · ComfyUI · Agent Skill
ease-music开源本地音乐播放器（Android / iOS），分层架构、可插拔音源Expo · React Native · SQLite
CONTACT
聊聊？
正在寻找 AI 产品 / 编辑器引擎 / 大前端方向的机会，也欢迎开源协作与技术交流。