diff --git a/docs/02-user-guide/10-settings/01-appearance.md b/docs/02-user-guide/10-settings/01-appearance.md
index 470320e..6ab1304 100644
--- a/docs/02-user-guide/10-settings/01-appearance.md
+++ b/docs/02-user-guide/10-settings/01-appearance.md
@@ -13,6 +13,8 @@ DesireCore 支持三种主题模式，你可以随时在设置中切换，找到
 1. 点击左下角的 **齿轮图标** 打开设置面板
 2. 找到 **外观** 分区
 
+![外观设置界面](/img/user-guide/settings/settings-appearance.svg)
+
 ## 主题模式
 
 DesireCore 提供三种主题模式：
diff --git a/docs/02-user-guide/10-settings/02-language.md b/docs/02-user-guide/10-settings/02-language.md
index a5dfa47..e8edf47 100644
--- a/docs/02-user-guide/10-settings/02-language.md
+++ b/docs/02-user-guide/10-settings/02-language.md
@@ -24,6 +24,8 @@ DesireCore 支持多语言界面，你可以随时切换。
 3. 点击 **语言 / Language** 右侧的下拉菜单
 4. 选择目标语言
 
+![语言设置界面](/img/user-guide/settings/settings-language.svg)
+
 切换后，界面所有文案会立即更新为所选语言，无需重启。
 
 ## 语言切换的影响范围
diff --git a/docs/02-user-guide/10-settings/05-permissions.md b/docs/02-user-guide/10-settings/05-permissions.md
index 94b6e14..69d0ffc 100644
--- a/docs/02-user-guide/10-settings/05-permissions.md
+++ b/docs/02-user-guide/10-settings/05-permissions.md
@@ -13,6 +13,8 @@ DesireCore 的部分功能需要操作系统授予相应权限才能正常工作
 1. 打开 **设置** 面板
 2. 点击 **权限管理** 分区中的 **系统权限**
 
+![权限设置界面](/img/user-guide/settings/settings-permissions.svg)
+
 ## 权限列表
 
 | 权限 | 用途 | 何时需要 |
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/01-appearance.md b/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/01-appearance.md
index 92be2f9..f235dc5 100644
--- a/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/01-appearance.md
+++ b/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/01-appearance.md
@@ -13,6 +13,8 @@ DesireCore supports three theme modes. You can switch between them in settings a
 1. Click the **gear icon** in the bottom-left corner to open the settings panel
 2. Find the **Appearance** section
 
+![Appearance Settings](./img/settings-appearance.svg)
+
 ## Theme Modes
 
 DesireCore offers three theme modes:
@@ -35,4 +37,4 @@ If your usage environment differs significantly between day and night, we recomm
 
 Regardless of which theme you choose, DesireCore adopts a Glassmorphism design language, with interface elements featuring semi-transparent and blur effects to create a sense of depth and modernity.
 
-The glassmorphism effect is more pronounced in dark mode, suitable for immersive use.
+The glassmorphism effect is more pronounced in dark mode, suitable for immersive use.
\ No newline at end of file
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/02-language.md b/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/02-language.md
index 4c3aff5..0a32f59 100644
--- a/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/02-language.md
+++ b/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/02-language.md
@@ -24,6 +24,8 @@ More languages will be added in future versions based on community feedback.
 3. Click the dropdown menu to the right of **Language**
 4. Select your target language
 
+![Language Settings](./img/settings-language.svg)
+
 After switching, all interface text will immediately update to the selected language.
 
 ## Scope of Language Switching
@@ -40,4 +42,4 @@ Language switching **does not** affect the agent's conversation language. The la
 
 ## Contributing Translations
 
-DesireCore's interface text is stored in the `app/data/i18n/` directory. If you'd like to help improve translations or contribute new languages, welcome to submit a Pull Request via GitHub.
+DesireCore's interface text is stored in the `app/data/i18n/` directory. If you'd like to help improve translations or contribute new languages, welcome to submit a Pull Request via GitHub.
\ No newline at end of file
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/05-permissions.md b/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/05-permissions.md
index 9275cba..c35717f 100644
--- a/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/05-permissions.md
+++ b/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/05-permissions.md
@@ -13,6 +13,8 @@ Some DesireCore features require the operating system to grant corresponding per
 1. Open the **Settings** panel
 2. Click **System Permissions** in the **Permission Management** section
 
+![Permission Settings](./img/settings-permissions.svg)
+
 ## Permission List
 
 | Permission | Purpose | When Needed |
@@ -49,4 +51,4 @@ Each permission item displays its current status:
 
 ## Web Mode Note
 
-When running DesireCore in Web mode, permissions are managed by the browser. Browsers usually automatically popup to ask when you first use hardware like microphone or camera. You can view and manage granted permissions in the browser's site settings.
+When running DesireCore in Web mode, permissions are managed by the browser. Browsers usually automatically popup to ask when you first use hardware like microphone or camera. You can view and manage granted permissions in the browser's site settings.
\ No newline at end of file
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/img/settings-appearance.svg b/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/img/settings-appearance.svg
new file mode 100644
index 0000000..9b54100
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/img/settings-appearance.svg
@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 380" fill="none">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="520" y2="380" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1a1a2e"/>
+      <stop offset="1" stop-color="#16213e"/>
+    </linearGradient>
+    <filter id="blur1"><feGaussianBlur in="SourceGraphic" stdDeviation="2"/></filter>
+  </defs>
+  <rect width="520" height="380" rx="12" fill="url(#bg)"/>
+  <!-- Title -->
+  <text x="24" y="36" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#e2e8f0">Appearance</text>
+  <line x1="24" y1="48" x2="496" y2="48" stroke="#334155" stroke-width="1"/>
+  <!-- Theme selector -->
+  <rect x="24" y="64" width="472" height="56" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <text x="40" y="88" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">Theme</text>
+  <text x="40" y="106" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#64748b">Follow System (default)</text>
+  <!-- Dropdown indicator -->
+  <rect x="380" y="76" width="104" height="32" rx="6" fill="#0f172a" stroke="#475569" stroke-width="1"/>
+  <text x="392" y="96" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#94a3b8">Follow System</text>
+  <path d="M472 90 L476 96 L480 90" stroke="#64748b" stroke-width="1.5" fill="none"/>
+  <!-- Three theme previews -->
+  <rect x="24" y="136" width="472" height="100" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <text x="40" y="158" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">Theme Preview</text>
+  <!-- Light theme preview -->
+  <rect x="40" y="172" width="136" height="52" rx="6" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
+  <rect x="48" y="180" width="48" height="6" rx="2" fill="#e2e8f0"/>
+  <rect x="48" y="192" width="80" height="4" rx="2" fill="#cbd5e1"/>
+  <rect x="48" y="200" width="64" height="4" rx="2" fill="#e2e8f0"/>
+  <text x="108" y="216" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#64748b" text-anchor="middle">Light</text>
+  <!-- Dark theme preview -->
+  <rect x="192" y="172" width="136" height="52" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
+  <rect x="200" y="180" width="48" height="6" rx="2" fill="#334155"/>
+  <rect x="200" y="192" width="80" height="4" rx="2" fill="#1e293b"/>
+  <rect x="200" y="200" width="64" height="4" rx="2" fill="#334155"/>
+  <text x="260" y="216" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#64748b" text-anchor="middle">Dark</text>
+  <!-- System theme preview -->
+  <rect x="344" y="172" width="136" height="52" rx="6" fill="#0f172a" stroke="#3b82f6" stroke-width="1.5"/>
+  <rect x="352" y="180" width="48" height="6" rx="2" fill="#334155"/>
+  <rect x="352" y="192" width="80" height="4" rx="2" fill="#1e293b"/>
+  <rect x="352" y="200" width="64" height="4" rx="2" fill="#3b82f6" opacity="0.6"/>
+  <text x="412" y="216" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#3b82f6" text-anchor="middle">Follow System ✓</text>
+  <!-- Glassmorphism section -->
+  <rect x="24" y="252" width="472" height="108" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <text x="40" y="276" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">Glassmorphism</text>
+  <rect x="40" y="292" width="140" height="52" rx="6" fill="#1e293b" fill-opacity="0.6" stroke="#475569" stroke-width="0.5" filter="url(#blur1)"/>
+  <text x="110" y="314" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">Translucent</text>
+  <rect x="196" y="292" width="140" height="52" rx="6" fill="#1e293b" fill-opacity="0.6" stroke="#475569" stroke-width="0.5" filter="url(#blur1)"/>
+  <text x="266" y="314" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">Blur</text>
+  <rect x="352" y="292" width="140" height="52" rx="6" fill="#1e293b" fill-opacity="0.6" stroke="#60a5fa" stroke-width="0.5" filter="url(#blur1)"/>
+  <text x="422" y="314" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">Soft Shadow</text>
+</svg>
\ No newline at end of file
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/img/settings-language.svg b/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/img/settings-language.svg
new file mode 100644
index 0000000..d0f9657
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/img/settings-language.svg
@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 320" fill="none">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="520" y2="320" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1a1a2e"/>
+      <stop offset="1" stop-color="#16213e"/>
+    </linearGradient>
+  </defs>
+  <rect width="520" height="320" rx="12" fill="url(#bg)"/>
+  <!-- Title -->
+  <text x="24" y="36" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#e2e8f0">Language</text>
+  <line x1="24" y1="48" x2="496" y2="48" stroke="#334155" stroke-width="1"/>
+  <!-- Language selector -->
+  <rect x="24" y="64" width="472" height="56" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <text x="40" y="88" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">Language</text>
+  <rect x="380" y="76" width="104" height="32" rx="6" fill="#0f172a" stroke="#475569" stroke-width="1"/>
+  <text x="392" y="96" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#94a3b8">English</text>
+  <path d="M472 90 L476 96 L480 90" stroke="#64748b" stroke-width="1.5" fill="none"/>
+  <!-- Language options -->
+  <rect x="24" y="136" width="472" height="80" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <text x="40" y="160" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">Supported Languages</text>
+  <!-- English option (selected) -->
+  <rect x="40" y="176" width="208" height="28" rx="4" fill="#0f172a" stroke="#3b82f6" stroke-width="1.5"/>
+  <text x="56" y="194" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#e2e8f0">🇺🇸  English (en-US)</text>
+  <text x="224" y="194" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#3b82f6">✓</text>
+  <!-- Chinese option -->
+  <rect x="264" y="176" width="220" height="28" rx="4" fill="#0f172a" stroke="#334155" stroke-width="1"/>
+  <text x="280" y="194" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#94a3b8">🇨🇳  Simplified Chinese (zh-CN)</text>
+  <!-- Info box -->
+  <rect x="24" y="232" width="472" height="72" rx="8" fill="#0f172a" stroke="#1e40af" stroke-width="1"/>
+  <text x="40" y="256" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#60a5fa">ℹ️  Language switching only affects the app UI text</text>
+  <text x="40" y="276" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#94a3b8">The agent's reply language follows its Persona, not the UI language.</text>
+  <text x="40" y="292" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#64748b">Fallback: missing translations fall back to Simplified Chinese.</text>
+</svg>
\ No newline at end of file
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/img/settings-permissions.svg b/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/img/settings-permissions.svg
new file mode 100644
index 0000000..2117b9c
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/02-user-guide/10-settings/img/settings-permissions.svg
@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 420" fill="none">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="520" y2="420" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1a1a2e"/>
+      <stop offset="1" stop-color="#16213e"/>
+    </linearGradient>
+  </defs>
+  <rect width="520" height="420" rx="12" fill="url(#bg)"/>
+  <!-- Title -->
+  <text x="24" y="36" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#e2e8f0">Permissions</text>
+  <line x1="24" y1="48" x2="496" y2="48" stroke="#334155" stroke-width="1"/>
+  <!-- Permission items -->
+  <rect x="24" y="60" width="472" height="44" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <circle cx="48" cy="82" r="10" fill="#0f172a" stroke="#22c55e" stroke-width="1.5"/>
+  <text x="48" y="86" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#22c55e" text-anchor="middle">✓</text>
+  <text x="68" y="78" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">Screen Recording</text>
+  <text x="68" y="94" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#64748b">Screenshots, screen sharing</text>
+  <text x="472" y="86" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#22c55e" text-anchor="end">Authorized</text>
+
+  <rect x="24" y="112" width="472" height="44" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <circle cx="48" cy="134" r="10" fill="#0f172a" stroke="#22c55e" stroke-width="1.5"/>
+  <text x="48" y="138" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#22c55e" text-anchor="middle">✓</text>
+  <text x="68" y="130" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">Microphone</text>
+  <text x="68" y="146" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#64748b">Voice input, voice calls</text>
+  <text x="472" y="138" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#22c55e" text-anchor="end">Authorized</text>
+
+  <rect x="24" y="164" width="472" height="44" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <circle cx="48" cy="186" r="10" fill="#0f172a" stroke="#eab308" stroke-width="1.5"/>
+  <text x="48" y="190" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#eab308" text-anchor="middle">!</text>
+  <text x="68" y="182" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">Camera</text>
+  <text x="68" y="198" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#64748b">Video calls, photos</text>
+  <text x="472" y="190" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#eab308" text-anchor="end">Not Authorized</text>
+
+  <rect x="24" y="216" width="472" height="44" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <circle cx="48" cy="238" r="10" fill="#0f172a" stroke="#eab308" stroke-width="1.5"/>
+  <text x="48" y="242" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#eab308" text-anchor="middle">!</text>
+  <text x="68" y="234" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">Accessibility</text>
+  <text x="68" y="250" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#64748b">Automation, global shortcuts</text>
+  <text x="472" y="242" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#eab308" text-anchor="end">Not Authorized</text>
+
+  <rect x="24" y="268" width="472" height="44" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <circle cx="48" cy="290" r="10" fill="#0f172a" stroke="#22c55e" stroke-width="1.5"/>
+  <text x="48" y="294" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#22c55e" text-anchor="middle">✓</text>
+  <text x="68" y="286" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">Notifications</text>
+  <text x="68" y="302" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#64748b">Desktop notification push</text>
+  <text x="472" y="294" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#22c55e" text-anchor="end">Authorized</text>
+
+  <!-- Platform note -->
+  <rect x="24" y="332" width="472" height="72" rx="8" fill="#0f172a" stroke="#1e40af" stroke-width="1"/>
+  <text x="40" y="356" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#60a5fa">ℹ️  Platform notes</text>
+  <text x="40" y="374" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#94a3b8">macOS: Screen Recording needs an app restart after granting.</text>
+  <text x="40" y="390" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#64748b">Windows: Most permissions live under Settings → Privacy.</text>
+</svg>
\ No newline at end of file
diff --git a/static/img/user-guide/settings/settings-appearance.svg b/static/img/user-guide/settings/settings-appearance.svg
new file mode 100644
index 0000000..01aebf1
--- /dev/null
+++ b/static/img/user-guide/settings/settings-appearance.svg
@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 380" fill="none">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="520" y2="380" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1a1a2e"/>
+      <stop offset="1" stop-color="#16213e"/>
+    </linearGradient>
+    <filter id="blur1"><feGaussianBlur in="SourceGraphic" stdDeviation="2"/></filter>
+  </defs>
+  <rect width="520" height="380" rx="12" fill="url(#bg)"/>
+  <!-- Title -->
+  <text x="24" y="36" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#e2e8f0">外观设置</text>
+  <line x1="24" y1="48" x2="496" y2="48" stroke="#334155" stroke-width="1"/>
+  <!-- Theme selector -->
+  <rect x="24" y="64" width="472" height="56" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <text x="40" y="88" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">主题</text>
+  <text x="40" y="106" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#64748b">跟随系统（默认）</text>
+  <!-- Dropdown indicator -->
+  <rect x="380" y="76" width="104" height="32" rx="6" fill="#0f172a" stroke="#475569" stroke-width="1"/>
+  <text x="392" y="96" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#94a3b8">跟随系统</text>
+  <path d="M472 90 L476 96 L480 90" stroke="#64748b" stroke-width="1.5" fill="none"/>
+  <!-- Three theme previews -->
+  <rect x="24" y="136" width="472" height="100" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <text x="40" y="158" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">主题预览</text>
+  <!-- Light theme preview -->
+  <rect x="40" y="172" width="136" height="52" rx="6" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
+  <rect x="48" y="180" width="48" height="6" rx="2" fill="#e2e8f0"/>
+  <rect x="48" y="192" width="80" height="4" rx="2" fill="#cbd5e1"/>
+  <rect x="48" y="200" width="64" height="4" rx="2" fill="#e2e8f0"/>
+  <text x="108" y="216" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#64748b" text-anchor="middle">浅色</text>
+  <!-- Dark theme preview -->
+  <rect x="192" y="172" width="136" height="52" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
+  <rect x="200" y="180" width="48" height="6" rx="2" fill="#334155"/>
+  <rect x="200" y="192" width="80" height="4" rx="2" fill="#1e293b"/>
+  <rect x="200" y="200" width="64" height="4" rx="2" fill="#334155"/>
+  <text x="260" y="216" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#64748b" text-anchor="middle">暗色</text>
+  <!-- System theme preview -->
+  <rect x="344" y="172" width="136" height="52" rx="6" fill="#0f172a" stroke="#3b82f6" stroke-width="1.5"/>
+  <rect x="352" y="180" width="48" height="6" rx="2" fill="#334155"/>
+  <rect x="352" y="192" width="80" height="4" rx="2" fill="#1e293b"/>
+  <rect x="352" y="200" width="64" height="4" rx="2" fill="#3b82f6" opacity="0.6"/>
+  <text x="412" y="216" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#3b82f6" text-anchor="middle">跟随系统 ✓</text>
+  <!-- Glassmorphism section -->
+  <rect x="24" y="252" width="472" height="108" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <text x="40" y="276" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">毛玻璃效果（Glassmorphism）</text>
+  <rect x="40" y="292" width="140" height="52" rx="6" fill="#1e293b" fill-opacity="0.6" stroke="#475569" stroke-width="0.5" filter="url(#blur1)"/>
+  <text x="110" y="314" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">半透明面板</text>
+  <rect x="196" y="292" width="140" height="52" rx="6" fill="#1e293b" fill-opacity="0.6" stroke="#475569" stroke-width="0.5" filter="url(#blur1)"/>
+  <text x="266" y="314" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">背景模糊</text>
+  <rect x="352" y="292" width="140" height="52" rx="6" fill="#1e293b" fill-opacity="0.6" stroke="#60a5fa" stroke-width="0.5" filter="url(#blur1)"/>
+  <text x="422" y="314" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">柔和阴影</text>
+</svg>
\ No newline at end of file
diff --git a/static/img/user-guide/settings/settings-language.svg b/static/img/user-guide/settings/settings-language.svg
new file mode 100644
index 0000000..8f1367a
--- /dev/null
+++ b/static/img/user-guide/settings/settings-language.svg
@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 320" fill="none">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="520" y2="320" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1a1a2e"/>
+      <stop offset="1" stop-color="#16213e"/>
+    </linearGradient>
+  </defs>
+  <rect width="520" height="320" rx="12" fill="url(#bg)"/>
+  <!-- Title -->
+  <text x="24" y="36" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#e2e8f0">语言设置</text>
+  <line x1="24" y1="48" x2="496" y2="48" stroke="#334155" stroke-width="1"/>
+  <!-- Language selector -->
+  <rect x="24" y="64" width="472" height="56" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <text x="40" y="88" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">语言 / Language</text>
+  <rect x="380" y="76" width="104" height="32" rx="6" fill="#0f172a" stroke="#475569" stroke-width="1"/>
+  <text x="392" y="96" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#94a3b8">简体中文</text>
+  <path d="M472 90 L476 96 L480 90" stroke="#64748b" stroke-width="1.5" fill="none"/>
+  <!-- Language options -->
+  <rect x="24" y="136" width="472" height="80" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <text x="40" y="160" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">支持的语言</text>
+  <!-- Chinese option (selected) -->
+  <rect x="40" y="176" width="220" height="28" rx="4" fill="#0f172a" stroke="#3b82f6" stroke-width="1.5"/>
+  <text x="56" y="194" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#e2e8f0">🇨🇳  简体中文 (zh-CN)</text>
+  <text x="236" y="194" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#3b82f6">✓</text>
+  <!-- English option -->
+  <rect x="276" y="176" width="208" height="28" rx="4" fill="#0f172a" stroke="#334155" stroke-width="1"/>
+  <text x="292" y="194" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#94a3b8">🇺🇸  English (en-US)</text>
+  <!-- Info box -->
+  <rect x="24" y="232" width="472" height="72" rx="8" fill="#0f172a" stroke="#1e40af" stroke-width="1"/>
+  <text x="40" y="256" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#60a5fa">ℹ️  语言切换只影响应用 UI 文案</text>
+  <text x="40" y="276" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#94a3b8">智能体的对话语言取决于其角色设定，不受界面语言影响。</text>
+  <text x="40" y="292" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#64748b">翻译回退：缺少翻译时自动回退到简体中文。</text>
+</svg>
\ No newline at end of file
diff --git a/static/img/user-guide/settings/settings-permissions.svg b/static/img/user-guide/settings/settings-permissions.svg
new file mode 100644
index 0000000..56c9f3c
--- /dev/null
+++ b/static/img/user-guide/settings/settings-permissions.svg
@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 420" fill="none">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="520" y2="420" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1a1a2e"/>
+      <stop offset="1" stop-color="#16213e"/>
+    </linearGradient>
+  </defs>
+  <rect width="520" height="420" rx="12" fill="url(#bg)"/>
+  <!-- Title -->
+  <text x="24" y="36" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#e2e8f0">权限设置</text>
+  <line x1="24" y1="48" x2="496" y2="48" stroke="#334155" stroke-width="1"/>
+  <!-- Permission items -->
+  <rect x="24" y="60" width="472" height="44" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <circle cx="48" cy="82" r="10" fill="#0f172a" stroke="#22c55e" stroke-width="1.5"/>
+  <text x="48" y="86" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#22c55e" text-anchor="middle">✓</text>
+  <text x="68" y="78" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">屏幕录制</text>
+  <text x="68" y="94" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#64748b">截屏、屏幕共享等功能</text>
+  <text x="472" y="86" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#22c55e" text-anchor="end">已授权</text>
+
+  <rect x="24" y="112" width="472" height="44" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <circle cx="48" cy="134" r="10" fill="#0f172a" stroke="#22c55e" stroke-width="1.5"/>
+  <text x="48" y="138" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#22c55e" text-anchor="middle">✓</text>
+  <text x="68" y="130" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">麦克风</text>
+  <text x="68" y="146" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#64748b">语音输入、语音通话</text>
+  <text x="472" y="138" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#22c55e" text-anchor="end">已授权</text>
+
+  <rect x="24" y="164" width="472" height="44" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <circle cx="48" cy="186" r="10" fill="#0f172a" stroke="#eab308" stroke-width="1.5"/>
+  <text x="48" y="190" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#eab308" text-anchor="middle">!</text>
+  <text x="68" y="182" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">摄像头</text>
+  <text x="68" y="198" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#64748b">视频通话、拍照</text>
+  <text x="472" y="190" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#eab308" text-anchor="end">未授权</text>
+
+  <rect x="24" y="216" width="472" height="44" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <circle cx="48" cy="238" r="10" fill="#0f172a" stroke="#eab308" stroke-width="1.5"/>
+  <text x="48" y="242" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#eab308" text-anchor="middle">!</text>
+  <text x="68" y="234" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">辅助功能</text>
+  <text x="68" y="250" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#64748b">自动化操作、全局快捷键</text>
+  <text x="472" y="242" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#eab308" text-anchor="end">未授权</text>
+
+  <rect x="24" y="268" width="472" height="44" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <circle cx="48" cy="290" r="10" fill="#0f172a" stroke="#22c55e" stroke-width="1.5"/>
+  <text x="48" y="294" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#22c55e" text-anchor="middle">✓</text>
+  <text x="68" y="286" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#cbd5e1">通知</text>
+  <text x="68" y="302" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#64748b">桌面通知推送</text>
+  <text x="472" y="294" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#22c55e" text-anchor="end">已授权</text>
+
+  <!-- Platform note -->
+  <rect x="24" y="332" width="472" height="72" rx="8" fill="#0f172a" stroke="#1e40af" stroke-width="1"/>
+  <text x="40" y="356" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#60a5fa">ℹ️  平台差异</text>
+  <text x="40" y="374" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#94a3b8">macOS：屏幕录制授权后需重启应用生效</text>
+  <text x="40" y="390" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#64748b">Windows：大部分权限通过「设置 → 隐私」管理</text>
+</svg>
\ No newline at end of file