diff --git a/README.md b/README.md
index 8c8aff9..d7afacf 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,30 @@
-# UIState
-一个 Cocos Creator 3.x 的插件,能够方便的管理多个UI状态
-
# 项目简介
-使用方法简单,只需一个在需要记录状态的节点上添加UIState组件,即可记录所有子节点(包含子孙节点)的状态改变
+一个 Cocos Creator 3.x 的插件,能够方便的管理多个UI状态,只需一个在需要记录状态的节点上添加UIState组件,即可记录所有子节点(包含子孙节点)的状态改变
1. 支持嵌套UIState。子节点(子孙节点)也可以加UIState,维护自己的状态
2. 数据量小。仅记录修改的节点
3. 代码逻辑清晰易扩展。可以很方便的扩展记录的组件和属性,支持记录自定义组件
+![image](https://github.com/cheney2013/ImageRepo/blob/main/2023-06-02-11-25-41.gif)
+
+# 安装和使用
+
+1. 将 extensions 目录下的 uistate-inspector 拷贝到你项目的 extensions 目录下
+
+![image](https://github.com/cheney2013/ImageRepo/blob/main/Snipaste_2023-06-02_12-08-08.png)
+
+2. 点击 Creator 工具栏的 扩展->扩展管理器,点击已安装扩展,点击刷新扩展,就可以看到 uistate-inspector 扩展
+
+![image](https://github.com/cheney2013/ImageRepo/blob/main/Snipaste_2023-06-02_12-09-33.png)
+
+3. 点击扩展右边的 toggle button,启用扩展
+4. 将 assets\script\component 目录下的 UIState.ts 文件复制到你项目的任意位置
+
+![image](https://github.com/cheney2013/ImageRepo/blob/main/Snipaste_2023-06-02_12-10-06.png)
+
+5. 为你需要记录UI状态的节点添加 UIState 组件
+
## 测试场景
嵌套UIState ✔ 父UIState节点不会保存子UIState节点的状态
@@ -38,16 +54,3 @@ Widget ✔
## 构建发布测试
Web桌面 ✔
-
-## 开发环境
-
-Node.js
-
-## 安装
-
-```bash
-# 安装依赖模块
-npm install
-# 构建
-npm run build
-```