diff --git a/packages/design/components/DelayTip/index.tsx b/packages/design/components/DelayTip/index.tsx
new file mode 100644
index 00000000..6041feca
--- /dev/null
+++ b/packages/design/components/DelayTip/index.tsx
@@ -0,0 +1,14 @@
+import { Tooltip, TooltipProps } from 'antd';
+import React from 'react';
+
+/**
+ * 延时提示
+ */
+export const DelayTip: React.FC<TooltipProps> = React.memo((props) => {
+  return (
+    <Tooltip mouseEnterDelay={1} {...props}>
+      {props.children}
+    </Tooltip>
+  );
+});
+DelayTip.displayName = 'DelayTip';
diff --git a/packages/design/components/Highlight/index.module.less b/packages/design/components/Highlight/index.module.less
new file mode 100644
index 00000000..14a361fe
--- /dev/null
+++ b/packages/design/components/Highlight/index.module.less
@@ -0,0 +1,8 @@
+.highLight {
+  background-color: rgba(0,0,0,0.2);
+  border-radius: 0.25rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
diff --git a/packages/design/components/Highlight/index.tsx b/packages/design/components/Highlight/index.tsx
new file mode 100644
index 00000000..ce46cc78
--- /dev/null
+++ b/packages/design/components/Highlight/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import styles from './index.module.less';
+
+export const Highlight: React.FC = React.memo((props) => {
+  return <span className={styles.highLight}>{props.children}</span>;
+});
+Highlight.displayName = 'Highlight';
diff --git a/packages/design/components/index.ts b/packages/design/components/index.ts
index 35487fd5..f577da18 100644
--- a/packages/design/components/index.ts
+++ b/packages/design/components/index.ts
@@ -1,3 +1,5 @@
+export { DelayTip } from './DelayTip';
+export { Highlight } from './Highlight';
 export { Icon } from './Icon';
 export { Image } from './Image';
 
diff --git a/packages/design/types/index.d.ts b/packages/design/types/index.d.ts
new file mode 100644
index 00000000..49ea90fe
--- /dev/null
+++ b/packages/design/types/index.d.ts
@@ -0,0 +1 @@
+declare module '*.module.less';
diff --git a/web/src/components/DelayTip.tsx b/web/src/components/DelayTip.tsx
index 6041feca..12ceb9c2 100644
--- a/web/src/components/DelayTip.tsx
+++ b/web/src/components/DelayTip.tsx
@@ -1,14 +1 @@
-import { Tooltip, TooltipProps } from 'antd';
-import React from 'react';
-
-/**
- * 延时提示
- */
-export const DelayTip: React.FC<TooltipProps> = React.memo((props) => {
-  return (
-    <Tooltip mouseEnterDelay={1} {...props}>
-      {props.children}
-    </Tooltip>
-  );
-});
-DelayTip.displayName = 'DelayTip';
+export { DelayTip } from 'tailchat-design';
diff --git a/web/src/components/Highlight.tsx b/web/src/components/Highlight.tsx
index 27675faf..235d550b 100644
--- a/web/src/components/Highlight.tsx
+++ b/web/src/components/Highlight.tsx
@@ -1,10 +1 @@
-import React from 'react';
-
-export const Highlight: React.FC = React.memo((props) => {
-  return (
-    <span className="bg-black bg-opacity-20 rounded py-1 px-2">
-      {props.children}
-    </span>
-  );
-});
-Highlight.displayName = 'Highlight';
+export { Highlight } from 'tailchat-design';