diff --git a/docs/content/public/assets/screenshot-api-example.avif b/docs/content/public/assets/screenshot-api-example.avif
new file mode 100644
index 000000000..562a04b35
Binary files /dev/null and b/docs/content/public/assets/screenshot-api-example.avif differ
diff --git a/docs/content/public/assets/screenshot-chat.avif b/docs/content/public/assets/screenshot-chat.avif
new file mode 100644
index 000000000..8d2204d17
Binary files /dev/null and b/docs/content/public/assets/screenshot-chat.avif differ
diff --git a/docs/content/zh-Hans/docs/manual/web/index.md b/docs/content/zh-Hans/docs/manual/web/index.md
index 1ce99dd8b..8f632635b 100644
--- a/docs/content/zh-Hans/docs/manual/web/index.md
+++ b/docs/content/zh-Hans/docs/manual/web/index.md
@@ -2,3 +2,60 @@
 title: 网页版上手指南
 description: 如何使用网页版的 Project AIRI
 ---
+
+## 欢迎来到 AIRI！
+
+首次使用 AIRI ，需要给 AIRI 一个“大脑”。点击“开始吧”让我们进入模型配置页面
+
+### 选择服务来源
+
+这里选择你的大模型提供商，你可以选择 OpenAI 、DeepSeek、Ollama 等，也可以使用其他所有兼容 OpenAI 格式的 API 站点。
+填入你的 API 密钥，如果选择 OpenAI 兼容 API ，还需要配置 Base URL ，即大模型提供商的 API 端点。此处以硅基流动举例。
+
+![](/assets/screenshot-api-example.avif)
+
+### 选择模型
+
+从模型列表中选择一个你喜欢的 AI 模型用于 AIRI 的大脑。
+
+::: tip
+
+如果你使用的模型带有思考功能，生成回复可能需要很长时间。建议使用非思考模型以提高对话流畅度。
+
+:::
+
+### 开始你的第一条对话
+
+在对话框中输入文字就可以和 AIRI 对话了~
+![](/assets/screenshot-chat.avif)
+
+## 眼睛，耳朵和嘴巴
+
+AIRI 除了文字对话，还有很多交互方式。点击页面右上角的[设置]-> [机体模块] ，为她添加更多交互功能。
+
+### 让AIRI开口说话
+
+点击[发声]来配置语音合成，自带的 Kokoro TTS 不支持中文，因此需要我们点[＋]新增一个来源。填入相关内容后，回到[发声]页面选择刚才新增的语音合成提供商即可。
+
+### 让AIRI听见声音
+
+有时候打字聊天太麻烦，这时候需要配置一个语音转文字。点击[听觉]来配置转文字。浏览器自带的 STT 对中文的支持不完整，我们依然要新建来源才能实现。
+配置好语音转文字提供商，你还需要选择一个可用的麦克风。你可以在 AIRI 首页对话框中点击麦克风图标来选择麦克风以及转文字的开关
+
+### 让AIRI看见你
+
+未完工，静待花开
+
+
+## 角色卡
+
+AIRI 有一个内置角色卡名叫“ReLU”，你也可以自己为模型写一个角色卡。你可以在首页右上角找到切换角色卡的按钮，亦可以从设置中切换。
+
+### 角色卡内容
+
+角色卡包含了 AIRI 的名称、描述、性格、行为等等，你可以高度自定义你的 AI 。
+
+### 角色卡设置
+
+每张角色卡都可以为其每个机体模块选择特定的模型提供商，通过切换角色卡可以快速切换你的模型。
+