diff --git a/playground/.eslintrc.js b/playground/.eslintrc.js
new file mode 100644
index 000000000..4cbbc590d
--- /dev/null
+++ b/playground/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  // Umi Max 项目
+  extends: require.resolve('@umijs/max/eslint'),
+  rules: {
+  'react/react-in-jsx-scope': 0
+  }
+};
diff --git a/playground/.umirc.ts b/playground/config/config.ts
similarity index 55%
rename from playground/.umirc.ts
rename to playground/config/config.ts
index b4d7b4cec..36fb8746b 100644
--- a/playground/.umirc.ts
+++ b/playground/config/config.ts
@@ -1,14 +1,8 @@
 import { defineConfig } from 'umi';
 
 export default defineConfig({
-  nodeModulesTransform: {
-    type: 'none',
-  },
-  routes: [
-    { path: '/', component: '@/pages/index' },
-  ],
-  fastRefresh: {},
-  webpack5: {},
+  routes: [{ path: '/', component: '@/pages/index' }],
+  fastRefresh: true,
   chainWebpack: (memo) => {
     memo.module.rule('ts-in-node_modules').include.clear();
     return memo;
diff --git a/playground/package.json b/playground/package.json
index 595d64a4c..e6c616229 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -4,11 +4,9 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "umi dev",
-    "postinstall": "umi generate tmp",
-    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
-    "test": "umi-test",
-    "test:coverage": "umi-test --coverage"
+    "start": "max dev",
+    "postinstall": "max setup",
+    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'"
   },
   "author": {
     "name": "AntV",
@@ -30,8 +28,7 @@
     "@types/numeral": "^2.0.2",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "@umijs/preset-react": "1.x",
-    "@umijs/test": "^3.5.20",
+    "@umijs/max": "^4.0.88",
     "lint-staged": "^10.0.7",
     "prettier": "^2.2.0",
     "typescript": "^4.1.2",
@@ -62,7 +59,6 @@
     "react-dom": "^17.0.2",
     "react-json-view": "^1.19.1",
     "react-vega": "^7.4.3",
-    "umi": "^3.5.20",
     "vega": "^5.15.0",
     "vega-datasets": "^2.2.0",
     "vega-lite": "^4.15.0"
diff --git a/playground/src/DevPlayground/ChartAdvisor/Chart.tsx b/playground/src/DevPlayground/ChartAdvisor/Chart.tsx
index 092053461..a4001a1bc 100644
--- a/playground/src/DevPlayground/ChartAdvisor/Chart.tsx
+++ b/playground/src/DevPlayground/ChartAdvisor/Chart.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { render } from '@antv/g2';
 
diff --git a/playground/src/DevPlayground/NTV/index.tsx b/playground/src/DevPlayground/NTV/index.tsx
index 1f126679b..6d4e5ef47 100644
--- a/playground/src/DevPlayground/NTV/index.tsx
+++ b/playground/src/DevPlayground/NTV/index.tsx
@@ -1,17 +1,17 @@
 /* eslint-disable no-template-curly-in-string */
-import React, { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
-import { Skeleton, Switch, Divider, Tooltip, Popover, Checkbox } from 'antd';
+import { Checkbox, Divider, Popover, Skeleton, Switch, Tooltip } from 'antd';
 // import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
 import numeral from 'numeral';
 
 import {
+  createCustomPhraseFactory,
   NarrativeTextVis,
   NtvPluginManager,
-  createCustomPhraseFactory,
   seedToken,
 } from '../../../../packages/ava-react/src';
-import { generateTextSpec, NarrativeTextSpec } from '../../../../packages/ava/lib';
+import { generateTextSpec, NarrativeTextSpec } from '../../../../packages/ava/src';
 
 import fluctuationData from './mock-data';