English | 中文
Frontend engineer focused on AIGC product interactions, ToB SaaS engineering, and micro-frontend architecture.
- 🔭 Currently building open-source demos that explore AI product patterns and enterprise frontend challenges
- 🌱 Learning Node.js BFF patterns, browser-side ML inference, and WebAssembly
- 💬 Ask me about SSE streaming, micro-frontends, or anything React/Vue
- ⚡ Fun fact: most of my recent projects are vibe coded with Kiro 🤖
| Project | Description | Link |
|---|---|---|
| AIGC Playground | 13 AI product interaction demos — streaming chat, voice, agent orchestration, digital human, and more. Pure frontend, zero API keys. | Live Demo · Repo |
| Demo Playground | 10 enterprise-grade ToB frontend demos — approval designer, RBAC, configurable table, org tree, file manager, and more. | Repo |
| Module Federation Demo | Micro-frontend with Webpack 5 Module Federation — React 18 + React 16 + Vue 3 cross-framework integration. | Repo |
| AI Pose Detection | Full-stack pose analysis with MediaPipe + FFmpeg.wasm — real-time detection, video editing, exercise scoring. | Live Demo · Repo |
React · Vue · TypeScript · Next.js · Node.js · Webpack · Vite · Tailwind CSS · ECharts · WebRTC · MediaPipe
English | 中文
前端工程师，专注 AIGC 产品交互、ToB SaaS 工程和微前端架构。
- 🔭 正在做一系列开源 demo，探索 AI 产品形态和企业级前端难点
- 🌱 在学 Node.js BFF 模式、浏览器端 ML 推理、WebAssembly
- 💬 可以聊 SSE 流式传输、微前端、React/Vue 相关的任何问题
- ⚡ 近期项目通过 vibe coding 方式构建（Kiro）🤖
| 项目 | 说明 | 链接 |
|---|---|---|
| AIGC Playground | 13 个 AI 产品交互 demo — 流式对话、语音、Agent 编排、数字人等。纯前端，无需 API Key。 | 在线体验 · 仓库 |
| Demo Playground | 10 个企业级 ToB 前端 demo — 审批设计器、权限管理、可配置表格、组织架构、文件管理器等。 | 仓库 |
| Module Federation Demo | Webpack 5 Module Federation 微前端 — React 18 + React 16 + Vue 3 跨框架集成。 | 仓库 |
| AI Pose Detection | 全栈姿态分析，MediaPipe + FFmpeg.wasm — 实时检测、视频编辑、运动评分。 | 在线体验 · 仓库 |
React · Vue · TypeScript · Next.js · Node.js · Webpack · Vite · Tailwind CSS · ECharts · WebRTC · MediaPipe