diff --git a/.vitepress/config.mts b/.vitepress/config.mts
index 9ed2d8b..1febe9f 100644
--- a/.vitepress/config.mts
+++ b/.vitepress/config.mts
@@ -186,6 +186,7 @@ export default withMermaid({
 				{
 					text: "OpenMCP 使用手册",
 					items: [
+						{ text: 'UI 配色', link: '/plugin-tutorial/usage/ui-color' },
 						{ text: '连接 mcp 服务器', link: '/plugin-tutorial/usage/connect-mcp' },
 						{ text: '调试 tools, resources 和 prompts', link: '/plugin-tutorial/usage/debug' },
 						{ text: '连接大模型', link: '/plugin-tutorial/usage/connect-llm' },
diff --git a/.vitepress/theme/css/style.css b/.vitepress/theme/css/style.css
index a48e4d2..f2e1ecf 100644
--- a/.vitepress/theme/css/style.css
+++ b/.vitepress/theme/css/style.css
@@ -188,6 +188,18 @@
     }
 }
 
+.home-tab {
+	min-height: 477px;
+}
+
+
+@media (max-width: 500px) {
+    .home-tab {
+		min-height: 677px;
+    }
+}
+
+
 .VPHero .image-container img {
 	box-shadow: unset !important;
 }
diff --git a/index.md b/index.md
index 680e6a8..d9981ad 100644
--- a/index.md
+++ b/index.md
@@ -54,7 +54,7 @@ features:
 
 <br>
 
-<KTab>
+<KTab class="home-tab">
 <TwoSideLayout
   label="专业软件工程师"
   :texts="[
diff --git a/plugin-tutorial/quick-start/images/llm-bing-image-render.png b/plugin-tutorial/quick-start/images/llm-bing-image-render.png
new file mode 100644
index 0000000..7fe1168
Binary files /dev/null and b/plugin-tutorial/quick-start/images/llm-bing-image-render.png differ
diff --git a/plugin-tutorial/quick-start/images/rerun-bing-image.png b/plugin-tutorial/quick-start/images/rerun-bing-image.png
new file mode 100644
index 0000000..01b97cb
Binary files /dev/null and b/plugin-tutorial/quick-start/images/rerun-bing-image.png differ
diff --git a/plugin-tutorial/quick-start/put-into-llm.md b/plugin-tutorial/quick-start/put-into-llm.md
index 32a5982..d544523 100644
--- a/plugin-tutorial/quick-start/put-into-llm.md
+++ b/plugin-tutorial/quick-start/put-into-llm.md
@@ -22,17 +22,6 @@
 
 可以看到大模型选择使用了我们提供的工具 add 完成了上述的加法，OpenMCP 中你能看到大模型是如何调用每一个工具的和工具的返回结果。目前我们问的问题和 mcp 提供的工具都比较简单，对于复杂问题，大模型有可能会在一轮内同时调用多个工具来完成特定的任务，如果你希望大模型每次都只使用一个工具，可以点击下方的默认亮着的「允许模型在单轮回复中调用多个工具」 来禁用这个特性。
 
-## 快速调试
-
-在我们调试的过程中，难免会出现大模型回答得不好，而且这是因为某个工具出错导致的，为了快速定位是不是工具的问题，可以点击下方的小飞机图标
-
-![](./images/llm-fast-debug.png)
-
-点击后，OpenMCP 会一个新的测试 tool 的项目，并自动把当时大模型使用的参数自动填充到右侧的表单中：
-
-![](./images/llm-fast-debug-result.png)
-
-你要做的，只是点击运行来确定或者排除一个错误选项。
 
 ## 系统提示词
 
@@ -58,3 +47,19 @@
 
 ![](./images/system-prompt-image.png)
 
+然后将光标移动到第一个用户对话框上，此时会显示几个按钮，选择重新运行的按钮，openmcp 便会重新执行此处的对话。
+
+![](./images/rerun-bing-image.png)
+
+可以看到此时，图片就被正常渲染出来了：
+
+![](./images/llm-bing-image-render.png)
+
+
+关于更多使用 system prompt 或者其他更加精准的方法来控制 agent 的技巧，可以移步 [[go-neo4j-sse|go 实现 neo4j 的只读 mcp 服务器 (SSE)]]
+
+## 结语
+
+很好！你完成了 openmcp 的基础教程，接下来，该去做点有趣的事情了！在 [[mcp-examples|MCP 服务器开发案例]] 中，你能找到更多的使用 openmcp 进行 mcp 服务器开发的例子。
+
+遍地惊喜，任君自取。
\ No newline at end of file
diff --git a/plugin-tutorial/usage/connect-mcp.md b/plugin-tutorial/usage/connect-mcp.md
index e766caf..c74bec9 100644
--- a/plugin-tutorial/usage/connect-mcp.md
+++ b/plugin-tutorial/usage/connect-mcp.md
@@ -60,3 +60,18 @@ MCP 客户端是指能够通过 MCP 协议进行通信的大模型对话客户
 当然，允许MCP Server使用两个不同的endpoint同时支持两种连接方式，这对于想要迁移到Streamable Http但短时间又不能放弃SSE的情况特别有效
 :::
 
+## openmcp 插件的控制面板
+
+在 VLE 的左侧可以找到 openmcp 的图标，点击后就是 openmcp 的控制面板。
+
+![](./images/openmcp-control-panel.png)
+
+当前工作区曾经连接过的 mcp 服务器会出现在这里，这是因为 openmcp 默认将工作区启动的 mcp 的连接信息存储在了 `.vscode/tabs.{server-name}.json` 中，其中 `{server-name}` 就是 mcp 服务器连接成功的服务器名称。
+
+:::warning
+注意，同一个项目中，你不应该有两个名字完全相同的 mcp 服务器，这会导致 `.vscode/tabs.{server-name}.json` 连接信息存储冲突，发生未知错误。
+:::
+
+如果你想要在任意工作区都能使用同一个 mcp 服务器，可以考虑在「安装的 MCP 服务器」中添加成熟耐用的 mcp 服务器，这个位置添加的 mcp 服务器全局可用。
+
+在「入门与帮助」中，我们准备了一些可供入门的参考资料，还请阁下善加利用。
diff --git a/plugin-tutorial/usage/debug.md b/plugin-tutorial/usage/debug.md
index eb9c93d..50359db 100644
--- a/plugin-tutorial/usage/debug.md
+++ b/plugin-tutorial/usage/debug.md
@@ -1 +1,68 @@
-# 调试 tools, resources 和 prompts
\ No newline at end of file
+# 调试 tools, resources 和 prompts
+
+## 标签页
+
+openmcp 以标签页作为调试项目的最小单元，点击栏目中的 + 可以创建新的标签页。OpenMCP 的 tools, resources 和 prompts 的基本使用与 Inspector 差不多，但是 OpenMCP 会自动帮您完成左侧资源列表的初始化，Inspector 中这一步需要手动完成。
+
+## 调试内容的自动保存
+
+openmcp 具备自动保存测试结果的功能。如下的行为会触发 openmcp 对标签页及其内容进行保存：
+
+- 创建标签页，并选择一个有效的调试项目
+- 在调试页进行调试行为（选择工具，执行工具，询问大模型等）
+
+当前 mcp 项目的测试数据会被保存在 `.vscode/tabs.{server-name}.json` 中，其中 `{server-name}` 就是 mcp 服务器连接成功的服务器名称。
+
+:::warning
+注意，同一个项目中，你不应该有两个名字完全相同的 mcp 服务器，这会导致 `.vscode/tabs.{server-name}.json` 连接信息存储冲突，发生未知错误。
+:::
+
+## 快速调试
+
+在我们调试的过程中，难免会出现大模型回答得不好，而且这是因为某个工具出错导致的，为了快速定位是不是工具的问题，可以点击下方的小飞机图标
+
+![](./images/llm-fast-debug.png)
+
+点击后，OpenMCP 会一个新的测试 tool 的项目，并自动把当时大模型使用的参数自动填充到右侧的表单中：
+
+![](./images/llm-fast-debug-result.png)
+
+你要做的，只是点击运行来确定或者排除一个错误选项。
+
+## pydantic 支持
+
+使用 python 的 fastmcp 进行 tool 的创建时，你有两种方法来申明接口的类型，一种是通过 python 默认的 typing 库来申明复杂数据结构，或者通过 pydantic 来申明一个复杂的变量，下面是一个例子：
+
+```python
+from mcp.server.fastmcp import FastMCP
+from pydantic import BaseModel, Field
+from typing import Optional, Union, List, NamedTuple
+
+mcp = FastMCP('锦恢的 MCP Server', version="11.45.14")
+
+class PathParams(BaseModel):
+    start: str
+    end: str
+
+@mcp.tool(name="test",description="用来测试")
+def test(
+    params: PathParams,
+    test1: str,
+    test2: Union[str, List[str]] = Field("", description="测试参数2"),
+    test3: Optional[str] = Field(None, description="测试参数3")
+):
+    return [test1, test2, test3, params]
+```
+
+由于我们对这两种类型的申明方式实现了内部的转换，所以 openmcp 都是支持的。值得一提的是，如果你申明的变量是一个对象，比如上面的 `PathParams`，那么 openmcp 的 tool 调试窗口会生成一个「对象输入框」，这个输入框支持基本的格式检查和自动补全：
+
+![](./images/object-input.png)
+
+:::info 什么是对象？
+这里的「对象」是 javascript 中的概念，它指的是可被序列化的数据类型中，除去基本数据类型后，剩下的那部分。比如 { "name": "helloworld" } 就是一个对象。对象在 python 中更加类似于一个 dict 或者 namedTuple。
+:::
+
+:::warning
+虽然 openmcp 已经做到了尽可能多情况的支持，但是生产场景中，我们仍然不建议您将 mcp tool 的参数定义成对象，尽可能定义成简单数据类型也能更好提高大模型进行工具调用时的稳定性。
+:::
+
diff --git a/plugin-tutorial/usage/images/change-color.png b/plugin-tutorial/usage/images/change-color.png
new file mode 100644
index 0000000..e891ea4
Binary files /dev/null and b/plugin-tutorial/usage/images/change-color.png differ
diff --git a/plugin-tutorial/quick-start/images/llm-fast-debug-result.png b/plugin-tutorial/usage/images/llm-fast-debug-result.png
similarity index 100%
rename from plugin-tutorial/quick-start/images/llm-fast-debug-result.png
rename to plugin-tutorial/usage/images/llm-fast-debug-result.png
diff --git a/plugin-tutorial/quick-start/images/llm-fast-debug.png b/plugin-tutorial/usage/images/llm-fast-debug.png
similarity index 100%
rename from plugin-tutorial/quick-start/images/llm-fast-debug.png
rename to plugin-tutorial/usage/images/llm-fast-debug.png
diff --git a/plugin-tutorial/usage/images/object-input.png b/plugin-tutorial/usage/images/object-input.png
new file mode 100644
index 0000000..f8cb1b1
Binary files /dev/null and b/plugin-tutorial/usage/images/object-input.png differ
diff --git a/plugin-tutorial/usage/images/one-dark-pro.png b/plugin-tutorial/usage/images/one-dark-pro.png
new file mode 100644
index 0000000..c8a30aa
Binary files /dev/null and b/plugin-tutorial/usage/images/one-dark-pro.png differ
diff --git a/plugin-tutorial/usage/images/openmcp-control-panel.png b/plugin-tutorial/usage/images/openmcp-control-panel.png
new file mode 100644
index 0000000..d8203bb
Binary files /dev/null and b/plugin-tutorial/usage/images/openmcp-control-panel.png differ
diff --git a/plugin-tutorial/usage/images/trae-blue.png b/plugin-tutorial/usage/images/trae-blue.png
new file mode 100644
index 0000000..ea7f5f0
Binary files /dev/null and b/plugin-tutorial/usage/images/trae-blue.png differ
diff --git a/plugin-tutorial/usage/ui-color.md b/plugin-tutorial/usage/ui-color.md
new file mode 100644
index 0000000..cf53207
--- /dev/null
+++ b/plugin-tutorial/usage/ui-color.md
@@ -0,0 +1,25 @@
+# UI 配色
+
+## openmcp 的主题色随跟 vscode
+
+openmcp 的主题颜色完全跟随 vscode，如果你想要更换 openmcp 的主题颜色，你只需要更换 vscode 的主题颜色即可。
+
+比如当你把颜色切换为社区知名主题 One Dark Pro 时，openmcp 的表现：
+
+![](./images/one-dark-pro.png)
+
+
+## 切换主题色
+
+这里可以切换 openmcp 的主题色（默认是粉色）
+
+![](./images/change-color.png)
+
+
+## Trae 的特殊支持
+
+openmcp 对 trae 的默认主题色都有额外的支持。我们也鼓励我们的用户尝试 vscode，cursor，trae 等不同的 VLE 来获得最佳手感。
+
+openmcp 官方文档大部分演示的例子都是基于 trae 的「深蓝」默认主题。
+
+![](./images/trae-blue.png)
\ No newline at end of file