Open Source Creator & Tech Explorer

Hi, I'm Shunquan Wang
11 年全栈工程经验 · 前端架构 · 开源贡献者

构建高性能前端工程体系主导 Next.js / Nest.js 技术栈落地维护 hyperse-io 开源生态探索 AI 驱动的开发工具链

构建高性能前端工程体系,主导过百人级团队的技术架构升级与工具链建设

了解更多
11+ 年经验
12+ 开源项目
100+ Stars
Tech Stack:ReactNext.jsTypeScriptNode.jsRspackAI/MCP

About Me

我是 Shunquan Wang,一名拥有 11 年经验的全栈工程师。

Android 原生开发起步,逐步转型为前端架构师,主导过百人级团队的技术架构升级、前端基础设施建设和工具链体系搭建。

我相信好的工程不只是写代码,而是构建让团队高效协作的系统。从 @flatjs 构建工具到 CI/CD 平台,从错误监控到低代码搭建,我始终在用工程化思维解决实际问题。

近年来,我将重心延伸至 AI 应用层,实践 MCP 协议、Agent Skills、RAG 知识检索等前沿技术,探索 AI 与工程化的深度融合。

工作之余,我活跃于开源社区,维护 hyperse-io 组织下的多个项目,持续为社区贡献工具与实践。

JOURNEY
2015

踏入软件行业,从 Android 原生开发起步,深入移动端架构与性能优化

AndroidJava
2016

转型 Web 前端,开始探索跨端开发(小程序 / React Native / H5)

前端跨端
2018

主导前端框架搭建与升级,开始承担团队技术规划职责

架构团队
2020

从零搭建前端效能工具矩阵:CI 平台、错误监控平台、低代码搭建系统

工程化效能
2022

主导前端基础设施建设,打造 @flatjs 构建工具体系与规范化流程

基础设施构建
2023

推动 ESM 标准化落地,设计微前端架构与 H5 容器化方案

ESM微前端
2024

打造 VSCode 插件生态,开发 CodeMate 页面搭建平台

效能工具低代码
2025

构建 Copilot MCP 服务,实践 n8n/LangChain/RAG/ComfyUI 等 AI 工具链

AIMCPRAG
2026

深耕 hyperse-io 开源生态,打造 Agent Skills 体系与 AI 驱动开发工具链

开源AgentSkills

Skills

React

React

精通
7
HooksServer ComponentsRSC
Next.js

Next.js

精通
3
App RouterSSRISR
TypeScript

TypeScript

精通
5
类型体操TSXTypings
JavaScript

JavaScript

精通
7
ES2024JSXNode
HTML

HTML

精通
7
HTML5SemanticsSVG
CSS

CSS

精通
7
CSS3FlexGrid
Tailwind CSS

Tailwind CSS

熟练
3
v4Design SystemJIT
Vue

Vue

熟练
3
Vue 3Composition API
Angular

Angular

了解
2
RxJSNgModule
Ant Design

Ant Design

精通
7
Pro Components定制主题
Material UI

Material UI

熟练
5
v5ThemeStyled
Electron

Electron

熟练
3
IPCNative API
GraphQL

GraphQL

熟练
3
gql.tadaurqlApollo
Node.js

Node.js

精通
6
ExpressKoaStream
Nest.js

Nest.js

熟练
3
DIDecoratorsGraphQL
Java

Java

熟练
7
SpringRPCJVM
Vendure

Vendure

熟练
2
E-commercePlugin
Express

Express

熟练
5
MiddlewareREST
TypeORM

TypeORM

熟练
3
MigrationRelations
Prisma

Prisma

熟练
3
SchemaMigrate
MySQL

MySQL

熟练
5
SQLIndexOptimize
ElasticSearch

ElasticSearch

了解
2
全文检索日志分析
Android

Android

精通
7
MVVMJetpackKotlin
Kotlin

Kotlin

熟练
5
CoroutinesDSL
React Native

React Native

熟练
3
跨端Bridge
Flutter

Flutter

了解
2
DartWidget
JS Bridge

JS Bridge

精通
5
HybridH5 容器
小程序

小程序

熟练
4
微信跨端编译
Rspack

Rspack

精通
2
Rust高速构建
Webpack

Webpack

精通
5
PluginLoader
Vite

Vite

熟练
3
ESMHMR
Git

Git

精通
11
MonorepoCI/CD
VS Code

VS Code

精通
8
Extension APIMCP
Playwright

Playwright

熟练
2
E2E自动化测试
Jest

Jest

熟练
4
Unit TestCoverage
Vitest

Vitest

熟练
2
ESMFast
ESLint

ESLint

精通
6
Flat ConfigCustom Rules
Docker

Docker

熟练
3
ComposeCI/CD
MCP Protocol

MCP Protocol

精通
1
AI 工具服务Agent 集成
Agent Skills

Agent Skills

精通
1
技能体系任务执行
VSCode Copilot

VSCode Copilot

精通
2
IDE 集成MCP 服务
n8n

n8n

熟练
1
可视化编排自动化
LangChain

LangChain

熟练
1
LLM 框架多步推理
RAG

RAG

熟练
1
知识检索向量存储
ComfyUI

ComfyUI

了解
1
Stable Diffusion图像生成

Projects

@flatjs 前端构建工具体系

架构师 / 核心开发

从零设计并落地一套完整的前端构建工具链,覆盖项目初始化、开发调试、增量构建、CDN 分发、多环境发布等全生命周期。支撑百人级前端团队的日常开发与交付流程。

  • 基于 commit 信息实现智能增量构建,大幅缩短 CI 耗时
  • CDN 资源自动分发与 HTML 路径热替换
  • 编码规范、Git 规范、构建规范、发布规范四位一体管控
TypeScriptRspack/WebpackMonorepoNode.jsCDN
支撑数百个前端模块的日常构建发布

@dimjs 前端状态管理与公共库

核心开发

设计并维护一套轻量级前端公共库,提供状态管理、通用工具函数、类型安全的 API 封装等能力,作为业务项目的基础依赖层。

  • 类型驱动设计,零运行时开销
  • 统一团队的状态管理范式,降低项目间的认知成本
TypeScriptReactMonorepo

微前端与插件化业务架构

架构师

设计并实现多套业务隔离方案,包括基于 iframe 的微前端沙盒体系和基于 Window 插件模式的模块化架构,解决大型业务系统的模块解耦与独立交付问题。

  • iframe 沙盒 + 跨域通信协议,实现安全隔离与高效交互
  • 插件化架构:模块构建为 Library,宿主通过插件系统动态加载
  • H5 容器化方案:统一 Bridge 抹平 Android/iOS 差异
TypeScriptiframepostMessageBridgeAndroid/iOS Native

CodeMate 前端页面搭建系统

主导开发

一套面向前端团队的轻量级低代码平台,提供 API 解析、页面拖拽搭建、Mock 数据关联和出码能力,帮助团队快速生成标准化页面。

  • API Schema 自动解析,一键生成数据绑定
  • 物料中心管理模板和区块,支持团队协作贡献
  • 60% 的标准 PC 页面可通过平台一键生成
ReactElectronNode.jsMock 服务
60% PC 页面一键生成

VSCode 插件生态

主导开发

围绕团队开发流程打造的 VSCode 插件矩阵,覆盖项目启动、编译发布、分支管理、Code Review、AI 辅助等场景。

  • Flat 插件:一键服务启动、编译、Stable 发布
  • GitLab 插件:分支自动创建、PR 管理、Code Review 流程
  • Copilot MCP 服务:接入文档检索、代码 Review 等 AI 能力
TypeScriptVSCode Extension APIMCP ProtocolLLM

前端持续集成平台

主导设计 / 全栈开发

自研前端 CI/CD 平台,覆盖分支管理、健康度检查、多平台自动化构建(小程序/PC/H5/移动端)、发版计划与线上问题定位的全流程。

  • 支持 300+ 品牌小程序同时构建发布多种版本
  • 版本记录 + 错误日志平台联动,实现线上问题闭环
  • 机器替代人工在关键节点做质量把控,显著降低发版风险
Node.jsMySQL自动化构建多平台适配
300+ 品牌同时发版,发版时间缩短 70%

前端错误监控平台

主导设计 / 全栈开发

多端错误日志采集与分析平台,提供数据上报、聚合分析、链路追踪和闭环处理能力,将线上问题从"被动发现"升级为"主动监控"。

  • 多端 SDK 统一采集(Web/小程序/Android),数据存储于 ElasticSearch
  • 小程序链路数据分析,前后端行为串联
  • 与需求管理和 CI 平台联动,错误处理全闭环
Node.jsElasticSearch多端 SDKAndroid SDK
70% 线上问题可通过平台直接定位

H5 商城与跨端应用

核心开发

负责多个 H5 商城项目的架构设计与开发,同时参与小程序和 React Native 跨端项目的技术选型与落地。

  • 推动前端工程化在业务项目中的落地
  • JSBridge 公共库设计,统一多端通信协议
ReactReact Native小程序JSBridge

营销助手移动端

核心开发 / 架构升级

一款面向导购和运营的移动端工具,覆盖会员管理、数据分析、分销运营等模块,Android 原生 + React Native 混合架构。

  • 主导 Android 架构从 MVC 到 MVVM 的演进
  • React Native 模块化接入,实现部分页面跨端复用
Android (Kotlin/Java)MVVMJetpackReact Native

hyperse-io 开源生态

创建者 / 核心维护者

个人发起的开源组织,沉淀多年工程化实践,提供一系列开发工具和基础设施库。

  • 涵盖构建工具、类型工具、框架扩展等多个方向
  • 活跃于 rspack、vendure 等知名开源社区
TypeScriptNode.jsRust

AI & Innovation

探索 AI 技术在工程化场景中的深度应用,将前沿 AI 能力转化为实际生产力工具。
🔗

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、文档检索、周报生成

Contact

保持联系

欢迎通过以下方式与我交流技术、开源或任何有趣的想法。