diff --git a/packages/editor-skeleton/package.json b/packages/editor-skeleton/package.json
index 4ed373452..a1d962cef 100644
--- a/packages/editor-skeleton/package.json
+++ b/packages/editor-skeleton/package.json
@@ -21,7 +21,6 @@
     "@ali/lowcode-editor-core": "1.0.72",
     "@ali/lowcode-types": "1.0.72",
     "@ali/lowcode-utils": "1.0.72",
-    "@ali/ve-less-variables": "^2.0.0",
     "@alifd/next": "^1.20.12",
     "classnames": "^2.2.6",
     "react": "^16.8.1",
diff --git a/packages/editor-skeleton/src/components/stage-box/index.less b/packages/editor-skeleton/src/components/stage-box/index.less
index a4df85cb8..fe62081f1 100644
--- a/packages/editor-skeleton/src/components/stage-box/index.less
+++ b/packages/editor-skeleton/src/components/stage-box/index.less
@@ -1,4 +1,4 @@
-@import "~@ali/ve-less-variables/index.less";
+@import '../../less-variables.less';
 
 .skeleton-stagebox {
   overflow-x: hidden;
diff --git a/packages/editor-skeleton/src/layouts/theme.less b/packages/editor-skeleton/src/layouts/theme.less
index 0d4651b17..b0da053db 100644
--- a/packages/editor-skeleton/src/layouts/theme.less
+++ b/packages/editor-skeleton/src/layouts/theme.less
@@ -1,4 +1,4 @@
-@import '~@ali/ve-less-variables/index.less';
+@import '../less-variables.less';
 
 /*
  * Theme Colors
diff --git a/packages/editor-skeleton/src/less-variables.less b/packages/editor-skeleton/src/less-variables.less
new file mode 100644
index 000000000..c44fc196e
--- /dev/null
+++ b/packages/editor-skeleton/src/less-variables.less
@@ -0,0 +1,215 @@
+/*
+ * 基础的 DPL 定义使用了 kuma base 的定义，参考：
+ * https://github.com/uxcore/kuma-base/tree/master/variables
+ */
+
+/**
+ * ===========================================================
+ * ==================== Font Family ==========================
+ * ===========================================================
+ */
+
+/*
+ * @font-family: "STHeiti", "Microsoft Yahei", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
+ */
+
+@font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial, sans-serif;
+@font-family-code: Monaco, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial,
+  sans-serif;
+
+/**
+ * ===========================================================
+ * ===================== Color DPL ===========================
+ * ===========================================================
+  */
+
+@brand-color-1: rgba(0, 108, 255, 1);
+@brand-color-2: rgba(25, 122, 255, 1);
+@brand-color-3: rgba(0, 96, 229, 1);
+
+@brand-color-1-3: rgba(0, 108, 255, 0.6);
+@brand-color-1-4: rgba(0, 108, 255, 0.4);
+@brand-color-1-5: rgba(0, 108, 255, 0.3);
+@brand-color-1-6: rgba(0, 108, 255, 0.2);
+@brand-color-1-7: rgba(0, 108, 255, 0.1);
+
+@brand-color: @brand-color-1;
+
+@white-alpha-1: rgb(255, 255, 255); // W-1
+@white-alpha-2: rgba(255, 255, 255, 0.8); // W-2 A80
+@white-alpha-3: rgba(255, 255, 255, 0.6); // W-3 A60
+@white-alpha-4: rgba(255, 255, 255, 0.4); // W-4 A40
+@white-alpha-5: rgba(255, 255, 255, 0.3); // W-5 A30
+@white-alpha-6: rgba(255, 255, 255, 0.2); // W-6 A20
+@white-alpha-7: rgba(255, 255, 255, 0.1); // W-7 A10
+@white-alpha-8: rgba(255, 255, 255, 0.06); // W-8 A6
+
+@dark-alpha-1: rgba(0, 0, 0, 1); // D-1 A100
+@dark-alpha-2: rgba(0, 0, 0, 0.8); // D-2 A80
+@dark-alpha-3: rgba(0, 0, 0, 0.6); // D-3 A60
+@dark-alpha-4: rgba(0, 0, 0, 0.4); // D-4 A40
+@dark-alpha-5: rgba(0, 0, 0, 0.3); // D-5 A30
+@dark-alpha-6: rgba(0, 0, 0, 0.2); // D-6 A20
+@dark-alpha-7: rgba(0, 0, 0, 0.1); // D-7 A10
+@dark-alpha-8: rgba(0, 0, 0, 0.06); // D-8 A6
+@dark-alpha-9: rgba(0, 0, 0, 0.04); // D-9 A4
+
+@normal-alpha-1: rgba(31, 56, 88, 1); // N-1 A100
+@normal-alpha-2: rgba(31, 56, 88, 0.8); // N-2 A80
+@normal-alpha-3: rgba(31, 56, 88, 0.6); // N-3 A60
+@normal-alpha-4: rgba(31, 56, 88, 0.4); // N-4 A40
+@normal-alpha-5: rgba(31, 56, 88, 0.3); // N-5 A30
+@normal-alpha-6: rgba(31, 56, 88, 0.2); // N-6 A20
+@normal-alpha-7: rgba(31, 56, 88, 0.1); // N-7 A10
+@normal-alpha-8: rgba(31, 56, 88, 0.06); // N-8 A6
+@normal-alpha-9: rgba(31, 56, 88, 0.04); // N-9 A4
+
+@normal-3: #77879c;
+@normal-4: #a3aebd;
+@normal-5: #bac3cc;
+@normal-6: #d1d7de;
+
+@gray-dark: #333; // N2_4
+@gray: #666; // N2_3
+@gray-light: #999; // N2_2
+@gray-lighter: #ccc; // N2_1
+
+@brand-secondary: #2c2f33; // B2_3
+// 补色
+@brand-complement: #00b3e8; // B3_1
+// 复合
+@brand-comosite: #00c587; // B3_2
+// 浓度
+@brand-deep: #73461d; // B3_3
+
+// F1-1
+@brand-danger: rgb(240, 70, 49);
+// F1-2 (10% white)
+@brand-danger-hover: rgba(240, 70, 49, 0.9);
+// F1-3 (5% black)
+@brand-danger-focus: rgba(240, 70, 49, 0.95);
+
+// F2-1
+@brand-warning: rgb(250, 189, 14);
+// F3-1
+@brand-success: rgb(102, 188, 92);
+// F4-1
+@brand-link: rgb(102, 188, 92);
+// F4-2
+@brand-link-hover: #2e76a6;
+
+// F1-1-7 A10
+@brand-danger-alpha-7: rgba(240, 70, 49, 0.9);
+// F1-1-8 A6
+@brand-danger-alpha-8: rgba(240, 70, 49, 0.8);
+// F2-1-2 A80
+@brand-warning-alpha-2: rgba(250, 189, 14, 0.8);
+// F2-1-7 A10
+@brand-warning-alpha-7: rgba(250, 189, 14, 0.9);
+// F3-1-2 A80
+@brand-success-alpha-2: rgba(102, 188, 92, 0.8);
+// F3-1-7 A10
+@brand-success-alpha-7: rgba(102, 188, 92, 0.9);
+// F4-1-7 A10
+@brand-link-alpha-7: rgba(102, 188, 92, 0.9);
+
+// 文本色
+@text-primary-color: @dark-alpha-3;
+@text-secondary-color: @normal-alpha-3;
+@text-thirdary-color: @dark-alpha-4;
+@text-disabled-color: @normal-alpha-5;
+@text-helper-color: @dark-alpha-4;
+@text-danger-color: @brand-danger;
+@text-ali-color: #ec6c00;
+
+/**
+  * ===========================================================
+  * =================== Shadow Box ============================
+  * ===========================================================
+  */
+
+@box-shadow-1: 0 1px 4px 0 rgba(31, 56, 88, 0.15); // 1 级阴影，物体由原来存在于底面的物体展开，物体和底面关联紧密
+@box-shadow-2: 0 2px 10px 0 rgba(31, 56, 88, 0.15); // 2 级阴影，hover状态，物体层级较高
+@box-shadow-3: 0 4px 15px 0 rgba(31, 56, 88, 0.15); // 3 级阴影，当物体层级高于所有界面元素，弹窗用
+
+/**
+  * ===========================================================
+  * ================= FontSize of Level =======================
+  * ===========================================================
+  */
+
+@fontSize-1: 26px;
+@fontSize-2: 20px;
+@fontSize-3: 16px;
+@fontSize-4: 14px;
+@fontSize-5: 12px;
+
+@fontLineHeight-1: 38px;
+@fontLineHeight-2: 30px;
+@fontLineHeight-3: 26px;
+@fontLineHeight-4: 24px;
+@fontLineHeight-5: 20px;
+
+/**
+  * ===========================================================
+  * ================= FontSize of Level =======================
+  * ===========================================================
+  */
+
+@global-border-radius: 3px;
+@input-border-radius: 3px;
+@popup-border-radius: 6px;
+
+/**
+  * ===========================================================
+  * ===================== Transistion =========================
+  * ===========================================================
+  */
+
+@transition-duration: 0.3s;
+@transition-ease: cubic-bezier(0.23, 1, 0.32, 1);
+@transition-delay: 0s;
+
+/**
+  * ===========================================================
+  * ================ Global Configruations ====================
+  * ===========================================================
+  */
+
+@topPaneHeight: 48px;
+@actionpane-height: 48px;
+@tabPaneWidth: 260px;
+@input-standard-height: 32px;
+@dockpane-width: 48px;
+
+/**
+  * ===========================================================
+  * =================== Deprecated Items ======================
+  * ===========================================================
+  */
+
+@head-bgcolor: @white-alpha-1;
+@pane-bgcolor: @white-alpha-1;
+@pane-dark-bgcolor: @white-alpha-1;
+@pane-bdcolor: @normal-4;
+@blank-bgcolor: @normal-5;
+@title-bgcolor: @white-alpha-1;
+@title-bdcolor: transparent;
+@section-bgcolor: transparent;
+@section-bdcolor: @white-alpha-1;
+@button-bgcolor: @white-alpha-1;
+@button-bdcolor: transparent;
+@button-blue-color: @brand-color;
+@button-blue-hover-color: @brand-color;
+@sub-title-bgcolor: @white-alpha-1;
+@sub-title-bdcolor: transparent;
+@text-color: @text-primary-color;
+@icon-color: @gray;
+@icon-color-active: @gray-light;
+@ghost-bgcolor: @dark-alpha-3;
+@input-bgcolor: transparent;
+@input-bdcolor: @normal-alpha-5;
+@hover-color: #5a99cc;
+@active-color: #5a99cc;
+@disabled-color: #666;
+@setter-popup-bg: rgb(80, 86, 109);
diff --git a/packages/engine/build.json b/packages/engine/build.json
index 5db5c8baa..d6601ad60 100644
--- a/packages/engine/build.json
+++ b/packages/engine/build.json
@@ -12,6 +12,7 @@
           "prop-types": "var window.PropTypes",
           "@ali/visualengine": "var window.VisualEngine",
           "@ali/visualengine-utils": "var window.VisualEngineUtils",
+          "@ali/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
           "rax": "var window.Rax",
           "monaco-editor/esm/vs/editor/editor.api": "var window.monaco",
           "monaco-editor/esm/vs/editor/editor.main.js": "var window.monaco"
diff --git a/packages/rax-simulator-renderer/package.json b/packages/rax-simulator-renderer/package.json
index ee6083f61..47b80923f 100644
--- a/packages/rax-simulator-renderer/package.json
+++ b/packages/rax-simulator-renderer/package.json
@@ -15,7 +15,6 @@
     "@ali/lowcode-rax-renderer": "1.0.72",
     "@ali/lowcode-types": "1.0.72",
     "@ali/lowcode-utils": "1.0.72",
-    "@ali/vu-css-style": "^1.0.2",
     "classnames": "^2.2.6",
     "driver-universal": "^3.1.3",
     "history": "^5.0.0",
diff --git a/packages/rax-simulator-renderer/src/builtin-components/renderUtils.ts b/packages/rax-simulator-renderer/src/builtin-components/renderUtils.ts
index 5e00aec1a..80b17c353 100644
--- a/packages/rax-simulator-renderer/src/builtin-components/renderUtils.ts
+++ b/packages/rax-simulator-renderer/src/builtin-components/renderUtils.ts
@@ -1,6 +1,7 @@
-import isObject from 'lodash/isObject';
-import { toCss } from '@ali/vu-css-style';
+import { isObject } from 'lodash';
+import { css } from '@ali/lowcode-utils';
 
+const { toCss } = css;
 const engine = (window as any).VisualEngine;
 const { Trunk, Viewport } = engine;
 
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 65990092f..4ea256a2b 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "@ali/lowcode-types": "1.0.72",
     "@alifd/next": "^1.19.16",
-    "lodash.get": "^4.4.2",
+    "lodash": "^4.17.21",
     "react": "^16"
   },
   "devDependencies": {
diff --git a/packages/utils/src/css-helper.ts b/packages/utils/src/css-helper.ts
new file mode 100644
index 000000000..b57cfe954
--- /dev/null
+++ b/packages/utils/src/css-helper.ts
@@ -0,0 +1,217 @@
+/**
+ * just for legao
+ * @author: jiushen
+ */
+// 需要通过 Env 来判断是否需要
+
+import some from 'lodash.some';
+
+const pseudoMap = ['hover', 'focus', 'active', 'visited'];
+
+const RE_CAMEL = /[A-Z]/g;
+const RE_HYPHEN = /[-\s]+(.)?/g;
+const CSS_REG = /:root(.*)\{.*/i;
+const PROPS_REG = /([^:]*):\s?(.*)/i;
+
+// 给 css 分组
+function groupingCss(css) {
+  let stackLength = 0;
+  let startIndex = 0;
+  const group = [];
+  css.split('').forEach((char, index) => {
+    if (char === '{') {
+      stackLength++;
+    }
+    if (char === '}') {
+      if (stackLength === 1) {
+        group.push(css.substring(startIndex, index + 1));
+        startIndex = index + 1;
+      }
+      stackLength--;
+    }
+  });
+  return group;
+}
+
+
+function isString(str) {
+  return {}.toString.call(str) === '[object String]';
+}
+
+function hyphenate(str) {
+  return str.replace(RE_CAMEL, w => `-${w}`).toLowerCase();
+}
+
+function camelize(str) {
+  return str.replace(RE_HYPHEN, (m, w) => (w ? w.toUpperCase() : ''));
+}
+/**
+ * convert
+ * {background-color: "red"}
+ * to
+ * background-color: red;
+ */
+function runtimeToCss(runtime) {
+  const css = [];
+  Object.keys(runtime).forEach((key) => {
+    css.push(`  ${key}: ${runtime[key]};`);
+  });
+  return css.join('\n');
+}
+
+function toNativeStyle(runtime) {
+  if (!runtime) {
+    return {};
+  }
+  if (runtime.default) {
+    const normalized = {};
+    Object.keys(runtime).forEach((pseudo) => {
+      if (pseudo === 'extra') {
+        normalized[pseudo] = runtime[pseudo];
+        return;
+      }
+      normalized[pseudo] = toNativeStyle(runtime[pseudo]);
+    });
+    return normalized;
+  }
+
+  const normalized = {};
+  Object.keys(runtime).forEach((key) => {
+    normalized[camelize(key)] = runtime[key];
+  });
+  return normalized;
+}
+
+function normalizeStyle(style) {
+  if (!style) {
+    return {};
+  }
+  if (style.default) {
+    const normalized = {};
+    Object.keys(style).forEach((pseudo) => {
+      if (pseudo === 'extra') {
+        normalized[pseudo] = style[pseudo];
+        return;
+      }
+      normalized[pseudo] = normalizeStyle(style[pseudo]);
+    });
+    return normalized;
+  }
+
+  const normalized = {};
+  Object.keys(style).forEach((key) => {
+    normalized[hyphenate(key)] = style[key];
+  });
+  return normalized;
+}
+
+
+function toCss(runtime) {
+  if (!runtime) {
+    return (
+      `:root {
+
+}`);
+  }
+
+  if (runtime.default) {
+    const css = [];
+    Object.keys(runtime).forEach((pseudo) => {
+      if (pseudo === 'extra') {
+        Array.isArray(runtime.extra) && css.push(runtime.extra.join('\n'));
+        return;
+      }
+      // 只需要对这四种做兼容
+      const prefix = pseudoMap.indexOf(pseudo) > -1 ? ':' : '';
+      css.push(
+        `:root${pseudo === 'default' ? '' : `${prefix}${pseudo}`} {
+${runtimeToCss(normalizeStyle(runtime[pseudo]))}
+}\n`);
+    });
+    return css.join('\n');
+  }
+
+  return (
+    `:root {
+${runtimeToCss(normalizeStyle(runtime))}
+}
+`
+  );
+}
+
+function cssToRuntime(css) {
+  if (!css) {
+    return {};
+  }
+  const runtime = {};
+  const groups = groupingCss(css);
+  groups.forEach((cssItem) => {
+    if (!cssItem.startsWith(':root')) {
+      runtime.extra = runtime.extra || [];
+      runtime.extra.push(cssItem.trim());
+    } else {
+      const res = /:root:?(.*)?{(.*)/ig.exec(cssItem.replace(/[\r\n]+/ig, '').trim());
+      if (res) {
+        let pseudo;
+
+        if (res[1] && res[1].trim() && some(pseudoMap, pse => res[1].indexOf(pse) === 0)) {
+          pseudo = res[1].trim();
+        } else if (res[1] && res[1].trim()) {
+          pseudo = res[1];
+        }
+
+        const s = {};
+        res[2].split(';').reduce((prev, next) => {
+          if (next.indexOf('base64') > -1) {
+            prev[prev.length - 1] += `;${next}`;
+          } else {
+            prev.push(next);
+          }
+          return prev;
+        }, []).forEach((item) => {
+          if (item) {
+            if (PROPS_REG.test(item)) {
+              const props = item.match(PROPS_REG);
+              const key = props[1];
+              const value = props[2];
+              if (key && value) {
+                s[key.trim()] = value.trim();
+              }
+            }
+          }
+        });
+
+        if (!pseudo) {
+          pseudo = 'default';
+        }
+        runtime[pseudo] = s;
+      }
+    }
+  });
+  return runtime;
+}
+
+function cssToStyle(css) {
+  try {
+    if (isString(css)) {
+      return toNativeStyle(cssToRuntime(css).default);
+    }
+    if (css.default) {
+      return toNativeStyle(normalizeStyle(css.default));
+    }
+    return toNativeStyle(normalizeStyle(css));
+  } catch (e) {
+    // do nothing
+  }
+  return {};
+}
+
+export {
+  hyphenate,
+  camelize,
+  toNativeStyle,
+  normalizeStyle,
+  toCss,
+  cssToRuntime,
+  cssToStyle,
+};
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 087591d99..874a15e72 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -24,3 +24,4 @@ export * from './misc';
 export * from './schema';
 export * from './node-helper';
 export * from './clone-enumerable-property';
+export * as css from './css-helper';
diff --git a/packages/utils/src/misc.ts b/packages/utils/src/misc.ts
index ccf2bd652..b192102b9 100644
--- a/packages/utils/src/misc.ts
+++ b/packages/utils/src/misc.ts
@@ -1,6 +1,6 @@
 
 import { isI18NObject } from './is-object';
-import get from 'lodash.get';
+import { get } from 'lodash';
 import { ComponentMeta } from '@ali/lowcode-designer';
 import { TransformStage } from '@ali/lowcode-types';
 interface Variable {
diff --git a/packages/vision-polyfill/src/bundle/upgrade-metadata.ts b/packages/vision-polyfill/src/bundle/upgrade-metadata.ts
index 953e85062..717b906d5 100644
--- a/packages/vision-polyfill/src/bundle/upgrade-metadata.ts
+++ b/packages/vision-polyfill/src/bundle/upgrade-metadata.ts
@@ -29,6 +29,11 @@ export enum DISPLAY_TYPE {
   ENTRY = 'entry',
 }
 
+type Tip = string | {
+  content?: string;
+  url?: string;
+  [key: string]: string | undefined;
+};
 // from vision 5.4
 export interface OldPropConfig {
   /**
@@ -45,10 +50,7 @@ export interface OldPropConfig {
    */
   name: string; // =>
   title?: string; // =>
-  tip?: {
-    content?: string;
-    url?: string;
-  };
+  tip?: Tip;
   defaultValue?: any; // => extraProps.defaultValue
   initialValue?: any | ((value: any, defaultValue: any) => any); // => initials.initialValue
   initial?: (value: any, defaultValue: any) => any; // => initials.initialValue
@@ -256,6 +258,21 @@ function formatPropValue(originalValue: any, value: any) {
   return value;
 }
 
+function isTipString(tip: Tip): tip is string {
+  return typeof tip === 'string';
+}
+
+function getTipAttr(tip: Tip, attrName: string, decorator: (originalValue: string) => string = v => v): string {
+  if (isTipString(tip)) {
+    return attrName === 'content' ? decorator(tip) : '';
+  }
+  return decorator(tip[attrName]!);
+}
+
+function getTipContent(tip: Tip, name: string): string {
+  return getTipAttr(tip, 'content', (v) => `属性：${name} | 说明：${v}`);
+}
+
 export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollector) {
   const {
     type,
@@ -301,14 +318,14 @@ export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollec
     if (typeof title !== 'object' || isI18nData(title) || isValidElement(title)) {
       newConfig.title = {
         label: title,
-        tip: tip.content,
-        docUrl: tip.url,
+        tip: getTipContent(tip, name),
+        docUrl: getTipAttr(tip, 'url'),
       };
     } else {
       newConfig.title = {
         ...(title as any),
-        tip: tip.content,
-        docUrl: tip.url,
+        tip: getTipContent(tip, name),
+        docUrl: getTipAttr(tip, 'url'),
       };
     }
   }
diff --git a/packages/vision-polyfill/src/props-reducers/style-reducer.ts b/packages/vision-polyfill/src/props-reducers/style-reducer.ts
index cd0e52805..f424eefe8 100644
--- a/packages/vision-polyfill/src/props-reducers/style-reducer.ts
+++ b/packages/vision-polyfill/src/props-reducers/style-reducer.ts
@@ -1,6 +1,7 @@
 import { project } from '@ali/lowcode-engine';
-import { isPlainObject } from '@ali/lowcode-utils';
-import { toCss } from '@ali/vu-css-style';
+import { isPlainObject, css } from '@ali/lowcode-utils';
+
+const { toCss } = css;
 
 export function stylePropsReducer(props: any, node: any) {
   let cssId;