Hi, I'm Shunquan Wang
11 年全栈工程经验 · 前端架构 · 开源贡献者
构建高性能前端工程体系,主导过百人级团队的技术架构升级与工具链建设
About Me
我是 Shunquan Wang,一名拥有 11 年经验的全栈工程师。
从 Android 原生开发起步,逐步转型为前端架构师,主导过百人级团队的技术架构升级、前端基础设施建设和工具链体系搭建。
我相信好的工程不只是写代码,而是构建让团队高效协作的系统。从 @flatjs 构建工具到 CI/CD 平台,从错误监控到低代码搭建,我始终在用工程化思维解决实际问题。
近年来,我将重心延伸至 AI 应用层,实践 MCP 协议、Agent Skills、RAG 知识检索等前沿技术,探索 AI 与工程化的深度融合。
工作之余,我活跃于开源社区,维护 hyperse-io 组织下的多个项目,持续为社区贡献工具与实践。
踏入软件行业,从 Android 原生开发起步,深入移动端架构与性能优化
转型 Web 前端,开始探索跨端开发(小程序 / React Native / H5)
主导前端框架搭建与升级,开始承担团队技术规划职责
从零搭建前端效能工具矩阵:CI 平台、错误监控平台、低代码搭建系统
主导前端基础设施建设,打造 @flatjs 构建工具体系与规范化流程
推动 ESM 标准化落地,设计微前端架构与 H5 容器化方案
打造 VSCode 插件生态,开发 CodeMate 页面搭建平台
构建 Copilot MCP 服务,实践 n8n/LangChain/RAG/ComfyUI 等 AI 工具链
深耕 hyperse-io 开源生态,打造 Agent Skills 体系与 AI 驱动开发工具链
Skills
React
Next.js
TypeScript
JavaScript
HTML
CSS
Tailwind CSS
Vue
Angular
Ant Design
Material UI
Electron
GraphQL
Node.js
Nest.js
Java
Vendure
Express
TypeORM
Prisma
MySQL
ElasticSearch
Android
Kotlin
React Native
Flutter
JS Bridge
小程序
Rspack
Webpack
Vite
Git
VS Code
Playwright
Jest
Vitest
ESLint
Docker
MCP Protocol
Agent Skills
VSCode Copilot
n8n
LangChain
RAG
ComfyUI
Projects
@flatjs 前端构建工具体系
架构师 / 核心开发从零设计并落地一套完整的前端构建工具链,覆盖项目初始化、开发调试、增量构建、CDN 分发、多环境发布等全生命周期。支撑百人级前端团队的日常开发与交付流程。
- 基于 commit 信息实现智能增量构建,大幅缩短 CI 耗时
- CDN 资源自动分发与 HTML 路径热替换
- 编码规范、Git 规范、构建规范、发布规范四位一体管控
@dimjs 前端状态管理与公共库
核心开发设计并维护一套轻量级前端公共库,提供状态管理、通用工具函数、类型安全的 API 封装等能力,作为业务项目的基础依赖层。
- 类型驱动设计,零运行时开销
- 统一团队的状态管理范式,降低项目间的认知成本
微前端与插件化业务架构
架构师设计并实现多套业务隔离方案,包括基于 iframe 的微前端沙盒体系和基于 Window 插件模式的模块化架构,解决大型业务系统的模块解耦与独立交付问题。
- iframe 沙盒 + 跨域通信协议,实现安全隔离与高效交互
- 插件化架构:模块构建为 Library,宿主通过插件系统动态加载
- H5 容器化方案:统一 Bridge 抹平 Android/iOS 差异
CodeMate 前端页面搭建系统
主导开发一套面向前端团队的轻量级低代码平台,提供 API 解析、页面拖拽搭建、Mock 数据关联和出码能力,帮助团队快速生成标准化页面。
- API Schema 自动解析,一键生成数据绑定
- 物料中心管理模板和区块,支持团队协作贡献
- 60% 的标准 PC 页面可通过平台一键生成
VSCode 插件生态
主导开发围绕团队开发流程打造的 VSCode 插件矩阵,覆盖项目启动、编译发布、分支管理、Code Review、AI 辅助等场景。
- Flat 插件:一键服务启动、编译、Stable 发布
- GitLab 插件:分支自动创建、PR 管理、Code Review 流程
- Copilot MCP 服务:接入文档检索、代码 Review 等 AI 能力
前端持续集成平台
主导设计 / 全栈开发自研前端 CI/CD 平台,覆盖分支管理、健康度检查、多平台自动化构建(小程序/PC/H5/移动端)、发版计划与线上问题定位的全流程。
- 支持 300+ 品牌小程序同时构建发布多种版本
- 版本记录 + 错误日志平台联动,实现线上问题闭环
- 机器替代人工在关键节点做质量把控,显著降低发版风险
前端错误监控平台
主导设计 / 全栈开发多端错误日志采集与分析平台,提供数据上报、聚合分析、链路追踪和闭环处理能力,将线上问题从"被动发现"升级为"主动监控"。
- 多端 SDK 统一采集(Web/小程序/Android),数据存储于 ElasticSearch
- 小程序链路数据分析,前后端行为串联
- 与需求管理和 CI 平台联动,错误处理全闭环
H5 商城与跨端应用
核心开发负责多个 H5 商城项目的架构设计与开发,同时参与小程序和 React Native 跨端项目的技术选型与落地。
- 推动前端工程化在业务项目中的落地
- JSBridge 公共库设计,统一多端通信协议
营销助手移动端
核心开发 / 架构升级一款面向导购和运营的移动端工具,覆盖会员管理、数据分析、分销运营等模块,Android 原生 + React Native 混合架构。
- 主导 Android 架构从 MVC 到 MVVM 的演进
- React Native 模块化接入,实现部分页面跨端复用
AI & Innovation
AI 工作流编排 — n8n + LangChain
- 基于 n8n 构建可视化 AI 自动化工作流,串联数据采集、内容处理、通知分发等多环节流水线
- 使用 LangChain 编排 LLM 调用链,实现多步推理、工具调用与上下文记忆管理
- 将碎片化的 AI 能力组装为端到端的自动化解决方案,降低业务接入 AI 的门槛
RAG 知识检索增强
- 构建基于 RAG(Retrieval-Augmented Generation)的知识库检索系统
- 将内部文档、技术 Wiki、API 文档向量化存储,实现语义级精准检索
- 应用场景:内部文档智能问答、代码 Review 辅助、新人 Onboarding 加速
AI 图像生成 — ComfyUI
- 使用 ComfyUI 搭建 Stable Diffusion 工作流,探索 AI 图像生成在产品设计中的应用
- 构建可复用的节点化流水线,覆盖文生图、图生图、风格迁移等场景
- 将 AI 生成能力与前端工作流结合,探索设计资产自动化生成的可能性
MCP 协议与 Agent Skills 体系
- 设计并实现基于 MCP(Model Context Protocol)的可扩展 AI 工具服务架构
- 构建 VSCode Copilot MCP 服务:内部文档检索、代码 Review、工作总结、周报生成
- 开发自定义 Agent Skills 体系,让 AI Agent 具备项目感知、工具调用、多轮交互能力
工程化 × AI 融合
- 探索 AI 在构建优化、代码生成、错误智能诊断等工程化场景中的深度应用
- 在 hyperse-io 开源生态中实践 AI 辅助的代码生成、文档自动维护
- 持续关注并实践 LLM、多模态模型在开发者工具领域的前沿进展
技术栈一览
| 方向 | 工具 | 应用场景 |
|---|---|---|
| 工作流编排 | n8n | 可视化 AI 自动化流水线、多系统数据串联 |
| LLM 应用框架 | LangChain | 多步推理链、工具调用、上下文记忆管理 |
| 知识检索 | RAG | 内部文档问答、语义搜索、知识库增强 |
| 图像生成 | ComfyUI (Stable Diffusion) | 文生图、风格迁移、设计资产生成 |
| 工具协议 | MCP Protocol | AI 工具服务标准化、可扩展 Agent 能力 |
| Agent 能力 | Skills 体系 | 自定义 Agent 技能、项目感知、任务执行 |
| IDE 集成 | VSCode Copilot | 代码 Review、文档检索、周报生成 |