diff --git a/docs/locales/zh_CN/LC_MESSAGES/designer.mo b/docs/locales/zh_CN/LC_MESSAGES/designer.mo
new file mode 100644
index 0000000000000000000000000000000000000000..3b433311bf6a622b7802300b8810ce81efb27e9b
Binary files /dev/null and b/docs/locales/zh_CN/LC_MESSAGES/designer.mo differ
diff --git a/docs/locales/zh_CN/LC_MESSAGES/designer.po b/docs/locales/zh_CN/LC_MESSAGES/designer.po
new file mode 100644
index 0000000000000000000000000000000000000000..e4ca5a95e0250fcb350e065343dbfc0a10cc9f30
--- /dev/null
+++ b/docs/locales/zh_CN/LC_MESSAGES/designer.po
@@ -0,0 +1,125 @@
+# SOME DESCRIPTIVE TITLE.
+# Copyright (C) 2021, zhiyiYo
+# This file is distributed under the same license as the PyQt-Fluent-Widgets
+# package.
+# FIRST AUTHOR <EMAIL@ADDRESS>, 2023.
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: PyQt-Fluent-Widgets \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2023-05-15 19:39+0800\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language: zh_CN\n"
+"Language-Team: zh_CN <LL@li.org>\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Generated-By: Babel 2.11.0\n"
+
+#: ../../source/designer.md:1 5a95d288e5b1434b8cba86077e0cb406
+msgid "Designer"
+msgstr "设计师"
+
+#: ../../source/designer.md:2 ef3623206f4e4e8d8b85b1beb3001618
+msgid "In Qt Designer, there are two ways to use PyQt-Fluent-Widgets."
+msgstr "在 Qt Designer 中，有两种使用 PyQt-Fluent-Widgets 的方式。"
+
+#: ../../source/designer.md:4 2f444d151c2a47c4b2caa2ed83dde361
+msgid "Promoting widget"
+msgstr "提升控件"
+
+#: ../../source/designer.md:5 3690b8ac54994aaab5984e91367cac7c
+msgid "Right click on a widget, select the Promote to ... of context menu."
+msgstr "右击一个小部件，选择右击菜单上的 `提升为...`"
+
+#: ../../source/designer.md:7 31af5abe19f34f9c9a4dd68974a4049c
+msgid ""
+"Promoting a widget indicates that it should be replaced with the "
+"specified subclass, in our case the qfluentwidgets.PushButton."
+msgstr "`提升为` 的作用是把原生部件替换成自定义小部件，在这个例子中是 `qfluentwidgets.PushButton`。"
+
+#: ../../source/designer.md:11 05dc0a215c274eb9a5b882bf035318c3
+msgid ""
+"You will be presented with a dialog to specify the custom widget class "
+"the placeholder widget will become."
+msgstr "弹出的对话框上需要填写自定义的组件名。"
+
+#: ../../source/designer.md:13 4c93b3604b014435b6e6b22ee051e3a2
+msgid ""
+"The header file is the name of the Python module used to import the "
+"class, which is qfluentwidgets. Specify PushButton as the class name of "
+"the widget to replace it with."
+msgstr "头文件是组件库的包名 `qfluentwidgets`，提升的类名称为 `PushButton`。"
+
+#: ../../source/designer.md:17 8dd82bee173b4c1390fba4bde1825a81
+msgid ""
+"Well, the widget is now promoted to fluent push button. But you won't be "
+"able to see any changes within Qt Designer. Save the window as "
+"mainwindow.ui and compile it to python code, you will see that the "
+"PushButton is imported from qfluentwidgets package."
+msgstr "完成提升后不会在设计师中看到任何变化，保存 ui 文件后编译为 py 代码，可以发现 `import` 的是 `PushButton`。"
+
+#: ../../source/designer.md:19 6e2249901ba54186bc253d932975d111
+msgid "Using plugin"
+msgstr "使用插件"
+
+#: ../../source/designer.md:20 a1ae6f86ce53459784ac25fb02a40e97
+msgid "create a virtual environment, conda is the recommended way."
+msgstr "创建一个虚拟环境，推荐使用 `conda`"
+
+#: ../../source/designer.md:21 7eaaa14b44e6453b9e02c20240968282
+msgid "Activate virtual environment and run the following code in shell:"
+msgstr "激活虚拟环境，在终端中输入下述命令安装所需的包："
+
+#: ../../source/designer.md:28 269fd5120ae744ff8ee1d8a31767130b
+msgid "Download the full code from PyQt-Fluent-Widgets Repo."
+msgstr ""
+"从 [PyQt-Fluent-Widgets 仓库](https://github.com/zhiyiYo/PyQt-Fluent-"
+"Widgets) 下载完整代码"
+
+#: ../../source/designer.md:29 c7a39af0ccc84a2abe7bd92280652a51
+msgid ""
+"Run python ./tools/designer.py to launch Qt Designer (You must use this "
+"way to launch Qt Designer)."
+msgstr "运行 `python ./tools/designer.py` 来启动设计师软件（必须使用脚本启动）"
+
+#: ../../source/designer.md:31 edc60c4d30d44cbba0b8d3e3e0fe5c06
+msgid ""
+"If everything goes smoothly, you will see all PyQt-Fluent-Widgets "
+"components in the sidebar of Qt Designer. If the startup fails or the "
+"components of PyQt-Fluent-Widgets cannot be seen, the solution can be "
+"found in #196."
+msgstr ""
+"一切无误的情况下能在侧边栏 Widget Box 中看到 PyQt-Fluent-Widgets 的组件。如果启动失败或者看不到 PyQt-"
+"Fluent-Widgets 的组件，解决方案参见 [#196](https://github.com/zhiyiYo/PyQt-Fluent-"
+"Widgets/issues/196)。"
+
+#: ../../source/designer.md:36 5099984215ec41569eb13ff147bc235a
+msgid ""
+"The plugin for PySide6 is unstable and may not start QtDesigner "
+"successfully. It is recommended to use QtDesigner of PyQt5/6 to generate "
+"ui files."
+msgstr "PySide6 的插件不稳定，可能无法启动 QtDesigner，建议使用 PyQt5/Qt6 的 QtDesigner 来生成 ui 文件。"
+
+#: ../../source/designer.md:38 761037286a514bec81013ff446e9a19f
+msgid ""
+"Note PyQt5 must upgrade PyQt5-Frameless-Window to 0.2.7 in order to use "
+"the plugin, while PySide6 and PyQt6 do not need to upgrading to frameless"
+" packages. PySide2 does not support plugins, but you can use PyQt5's "
+"QtDesigner to generate ui files and then compile them into py files using"
+" uic."
+msgstr ""
+"**注意**：PyQt5 要把 PyQt5-Frameless-Window 升级到 0.2.7 才能使用插件，PySide6 和 PyQt6 "
+"无需升级无边框包。PySide2 不支持插件，不过可以先用 PyQt5 的 QtDesigner 生成 ui 文件，然后用 uic 编译成 py "
+"文件。"
+
+#~ msgid "promote context menu"
+#~ msgstr "右击菜单"
+
+#~ msgid "promote dialog"
+#~ msgstr ""
+
diff --git a/docs/locales/zh_CN/LC_MESSAGES/license.mo b/docs/locales/zh_CN/LC_MESSAGES/license.mo
index e0a069ccdf8986d1895a967bcac4478b24d37848..0a664ee9bc40a596a718b0b76e9a7477a6bbc620 100644
Binary files a/docs/locales/zh_CN/LC_MESSAGES/license.mo and b/docs/locales/zh_CN/LC_MESSAGES/license.mo differ
diff --git a/docs/locales/zh_CN/LC_MESSAGES/license.po b/docs/locales/zh_CN/LC_MESSAGES/license.po
index b710ca65c461ee8c280d44117672d36fff219eb6..b4cec568dde034844628a72b594c261cf661a9c6 100644
--- a/docs/locales/zh_CN/LC_MESSAGES/license.po
+++ b/docs/locales/zh_CN/LC_MESSAGES/license.po
@@ -34,7 +34,7 @@ msgid ""
 "Non-commercial usage is licensed under GPLv3. For commercial purposes, "
 "please purchase on 爱发电 or ko-fi to support the development of this "
 "project."
-msgstr "PySide6-Fluent-Widgets 使用双许可证。非商业用途使用 GPLv3 许可证进行授权，商用请在 [爱发电](https://afdian.net/item/3cea239cf2cd11eda46352540025c377) 或者 [ko-fi](https://ko-fi.com/s/b5000d2dd7) 上进行购买以支持作者的开发。"
+msgstr "PySide6-Fluent-Widgets 和 PySide2-Fluent-Widgets 使用双许可证。非商业用途使用 GPLv3 许可证进行授权，商用请在 [爱发电](https://afdian.net/item/3cea239cf2cd11eda46352540025c377) 或者 [ko-fi](https://ko-fi.com/s/b5000d2dd7) 上进行购买以支持作者的开发。"
 
 #: ../../source/license.md:6 2656d350db8b48dc8b45e674613eb847
 msgid "Copyright © 2021 by zhiyiYo."
diff --git a/docs/source/_static/Designer_plugin.jpg b/docs/source/_static/Designer_plugin.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1d7d5457510efdccd673a7000aa6cd92f14757b7
Binary files /dev/null and b/docs/source/_static/Designer_plugin.jpg differ
diff --git a/docs/source/_static/promote_context.jpg b/docs/source/_static/promote_context.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c431477e86d9ed17bdcd5d8795626247109c59ff
Binary files /dev/null and b/docs/source/_static/promote_context.jpg differ
diff --git a/docs/source/_static/promote_dialog.jpg b/docs/source/_static/promote_dialog.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6c3489bccb981d32a6aa2fd12fbd68bfd11bdc6c
Binary files /dev/null and b/docs/source/_static/promote_dialog.jpg differ
diff --git a/docs/source/designer.md b/docs/source/designer.md
new file mode 100644
index 0000000000000000000000000000000000000000..79e461c0aa5f12080d5dd8e496a0bea9528b898b
--- /dev/null
+++ b/docs/source/designer.md
@@ -0,0 +1,39 @@
+## Designer
+In Qt Designer, there are two ways to use PyQt-Fluent-Widgets.
+
+### Promoting widget
+Right click on a widget, select the `Promote to ...` of context menu.
+
+Promoting a widget indicates that it should be replaced with the specified subclass, in our case the `qfluentwidgets.PushButton`.
+
+![](./_static/promote_context.jpg)
+
+You will be presented with a dialog to specify the custom widget class the placeholder widget will become.
+
+The header file is the name of the Python module used to import the class, which is `qfluentwidgets`. Specify `PushButton` as the class name of the widget to replace it with.
+
+![](./_static/promote_dialog.jpg)
+
+Well, the widget is now promoted to fluent push button. But you won't be able to see any changes within Qt Designer. Save the window as `mainwindow.ui` and compile it to python code, you will see that the `PushButton` is imported from `qfluentwidgets` package.
+
+### Using plugin
+1. create a virtual environment, `conda` is the recommended way.
+2. Activate virtual environment and run the following code in shell:
+
+   ```sh
+   pip install PyQt-Fluent-Widget
+   pip install pyqt5-tools
+   ```
+
+3. Download the full code from [PyQt-Fluent-Widgets Repo](https://github.com/zhiyiYo/PyQt-Fluent-Widgets).
+4. Run `python ./tools/designer.py` to launch Qt Designer (You must use this way to launch Qt Designer).
+
+If everything goes smoothly, you will see all PyQt-Fluent-Widgets components in the sidebar of Qt Designer.
+If the startup fails or the components of PyQt-Fluent-Widgets cannot be seen, the solution can be found in [#196](https://github.com/zhiyiYo/PyQt-Fluent-Widgets/issues/196).
+
+![](./_static/Designer_plugin.jpg)
+
+The plugin for PySide6 is unstable and may not start QtDesigner successfully. It is recommended to use QtDesigner of PyQt5/6 to generate ui files.
+
+> **Note**
+> PyQt5 must upgrade PyQt5-Frameless-Window to 0.2.7 in order to use the plugin, while PySide6 and PyQt6 do not need to upgrading to frameless packages. PySide2 does not support plugins, but you can use PyQt5's QtDesigner to generate ui files and then compile them into py files using uic.
\ No newline at end of file
diff --git a/docs/source/index.rst b/docs/source/index.rst
index 00d41e2ae356ac562a84393d406380491b3e395f..fd47e2a4a003017b0eabdfabf69adeb218113bd0 100644
--- a/docs/source/index.rst
+++ b/docs/source/index.rst
@@ -47,11 +47,12 @@ This document will show you all the features of PyQt-Fluent-Widgets and the best
    :caption: Contents
 
    quick-start
+   designer
    settings
    theme
    navigation
    icon
-   gallery
    support
    license
+   gallery
    see-also
diff --git a/examples/gallery/app/view/main_window.py b/examples/gallery/app/view/main_window.py
index 0cb356d73f70c678563ed3be3e563cffb7c0480f..a199cf33ed725a48c6d5feb1e79a9543ac59e48d 100644
--- a/examples/gallery/app/view/main_window.py
+++ b/examples/gallery/app/view/main_window.py
@@ -109,7 +109,7 @@ class MainWindow(FramelessWindow):
         self.widgetLayout.setContentsMargins(0, 48, 0, 0)
 
         signalBus.switchToSampleCard.connect(self.switchToSample)
-        signalBus.supportSignal.connect(self.showMessageBox)
+        signalBus.supportSignal.connect(self.onSupport)
 
         self.navigationInterface.displayModeChanged.connect(
             self.titleBar.raise_)
@@ -148,7 +148,7 @@ class MainWindow(FramelessWindow):
         self.navigationInterface.addWidget(
             routeKey='avatar',
             widget=AvatarWidget(':/gallery/images/shoko.png'),
-            onClick=self.showMessageBox,
+            onClick=self.onSupport,
             position=NavigationItemPosition.BOTTOM
         )
         self.addSubInterface(
@@ -197,16 +197,8 @@ class MainWindow(FramelessWindow):
         self.titleBar.move(46, 0)
         self.titleBar.resize(self.width()-46, self.titleBar.height())
 
-    def showMessageBox(self):
-        w = MessageBox(
-            self.tr('Buy me a coffee'),
-            self.tr('If this project helps you a lot and you want to support the development and maintenance of this project, feel free to sponsor me. Your support is highly appreciated 🥰'),
-            self
-        )
-        w.yesButton.setText(self.tr('Sure'))
-        w.cancelButton.setText(self.tr('Cancel'))
-        if w.exec():
-            QDesktopServices.openUrl(QUrl(SUPPORT_URL))
+    def onSupport(self):
+        QDesktopServices.openUrl(QUrl(SUPPORT_URL))
 
     def switchToSample(self, routeKey, index):
         """ switch to sample """