diff --git a/doc/docs/.vitepress/config.js b/doc/docs/.vitepress/config.js
index bd3f1d1ea..f20ff1ee3 100644
--- a/doc/docs/.vitepress/config.js
+++ b/doc/docs/.vitepress/config.js
@@ -17,6 +17,7 @@ const config = {
               { text: '项目描述', link: '/zh/introduction/description' },
               { text: '开源精神', link: '/zh/introduction/openSource' },
               { text: '贡献者', link: '/zh/introduction/contributor' },
+              { text: '设计图及UI规范', link: '/zh/introduction/ui' },
             ],
           },
         ],
@@ -34,6 +35,7 @@ const config = {
               { text: 'description', link: '/en/introduction/description' },
               { text: 'openSource', link: '/en/introduction/openSource' },
               { text: 'contributor', link: '/en/introduction/contributor' },
+              { text: 'DesignDrawing、UISpecification', link: '/en/introduction/ui' },
             ],
           },
         ],
diff --git a/doc/docs/en/introduction/images/bg.png b/doc/docs/en/introduction/images/bg.png
new file mode 100644
index 000000000..c5a8e0dcc
Binary files /dev/null and b/doc/docs/en/introduction/images/bg.png differ
diff --git a/doc/docs/en/introduction/images/login.png b/doc/docs/en/introduction/images/login.png
new file mode 100644
index 000000000..af595da1c
Binary files /dev/null and b/doc/docs/en/introduction/images/login.png differ
diff --git a/doc/docs/en/introduction/images/register.png b/doc/docs/en/introduction/images/register.png
new file mode 100644
index 000000000..059cc8cfc
Binary files /dev/null and b/doc/docs/en/introduction/images/register.png differ
diff --git a/doc/docs/en/introduction/ui.md b/doc/docs/en/introduction/ui.md
new file mode 100644
index 000000000..e62fcaf75
--- /dev/null
+++ b/doc/docs/en/introduction/ui.md
@@ -0,0 +1,15 @@
+## UI specification
+#### 1. A good "product" reflects your cultural and aesthetic details, ha ha, try to unify the page effect! :grin:
+#### 2. Using the unified icon, I will pull you into the corresponding iconfont project :kissing_heart:
+
+## Design drawings
+
+![Screen shot](./images/bg.png)
+#### Background image (right click to save as picture)
+![Screen shot](./images/login.png)
+#### Login page
+![Screen shot](./images/register.png)
+#### Register page
+
+## Project reference address (UI appearance)
+http://beautiful.panm.cn/vue-admin-beautiful-pro/?hmsr=github&hmpl=&hmcu=&hmkw=&hmci=#/login?redirect=%2Findex
\ No newline at end of file
diff --git a/doc/docs/index.md b/doc/docs/index.md
index 802b403f6..01fdeff12 100644
--- a/doc/docs/index.md
+++ b/doc/docs/index.md
@@ -6,3 +6,7 @@
 ::: warning
 本文档采用vitepress编写，因vitepress正在完善中，浏览中如遇小bug是正常现象。 :joy:
 :::
+
+::: danger
+开发者可能都是比较忙的，感谢付出你的时间来开发此项目，进程会慢，但一定会做完，加油！ :thumbsup:
+:::
diff --git a/doc/docs/zh/introduction/images/bg.png b/doc/docs/zh/introduction/images/bg.png
new file mode 100644
index 000000000..c5a8e0dcc
Binary files /dev/null and b/doc/docs/zh/introduction/images/bg.png differ
diff --git a/doc/docs/zh/introduction/images/login.png b/doc/docs/zh/introduction/images/login.png
new file mode 100644
index 000000000..af595da1c
Binary files /dev/null and b/doc/docs/zh/introduction/images/login.png differ
diff --git a/doc/docs/zh/introduction/images/register.png b/doc/docs/zh/introduction/images/register.png
new file mode 100644
index 000000000..059cc8cfc
Binary files /dev/null and b/doc/docs/zh/introduction/images/register.png differ
diff --git a/doc/docs/zh/introduction/ui.md b/doc/docs/zh/introduction/ui.md
new file mode 100644
index 000000000..cf29efa74
--- /dev/null
+++ b/doc/docs/zh/introduction/ui.md
@@ -0,0 +1,15 @@
+## UI规范
+#### 1. 一款好的“产品”体现了您的文化、审美底蕴，哈哈，尽量页面效果统一！ :grin:
+#### 2. 使用统一的icon，我会拉你们进对应的iconfont项目！ :kissing_heart:
+
+## 设计图
+
+![Screen shot](./images/bg.png)
+#### 背景图（可右键另存为图片）
+![Screen shot](./images/login.png)
+#### 登录页
+![Screen shot](./images/register.png)
+#### 注册页
+
+## 项目参考地址（UI外观）
+http://beautiful.panm.cn/vue-admin-beautiful-pro/?hmsr=github&hmpl=&hmcu=&hmkw=&hmci=#/login?redirect=%2Findex
\ No newline at end of file