diff --git a/backend/services/docsite.go b/backend/services/docsite.go
index 3649393..6e3ef5a 100644
--- a/backend/services/docsite.go
+++ b/backend/services/docsite.go
@@ -15,6 +15,7 @@ import (
 	"github.com/yuin/goldmark"
 	"github.com/yuin/goldmark/extension"
 	"github.com/yuin/goldmark/parser"
+	htmlRenderer "github.com/yuin/goldmark/renderer/html"
 )
 
 // DocsManifest docs/user-guide/manifest.json
@@ -57,7 +58,7 @@ type DocsNav struct {
 var (
 	docsManifestCache *DocsManifest
 	docsBasePath      string
-	docsMD            = goldmark.New(goldmark.WithExtensions(extension.Table), goldmark.WithParserOptions(parser.WithAutoHeadingID()))
+	docsMD            = goldmark.New(goldmark.WithExtensions(extension.Table), goldmark.WithParserOptions(parser.WithAutoHeadingID()), goldmark.WithRendererOptions(htmlRenderer.WithUnsafe()))
 	docsTOCPattern    = regexp.MustCompile(`<h([23]) id="([^"]+)"[^>]*>([^<]+)</h[23]>`)
 )
 
diff --git a/docs/assets/screenshots/alerts.png b/docs/assets/screenshots/alerts.png
new file mode 100644
index 0000000..1cd0861
Binary files /dev/null and b/docs/assets/screenshots/alerts.png differ
diff --git a/docs/assets/screenshots/analysis.png b/docs/assets/screenshots/analysis.png
new file mode 100644
index 0000000..bf97022
Binary files /dev/null and b/docs/assets/screenshots/analysis.png differ
diff --git a/docs/assets/screenshots/dashboard.png b/docs/assets/screenshots/dashboard.png
new file mode 100644
index 0000000..41824fc
Binary files /dev/null and b/docs/assets/screenshots/dashboard.png differ
diff --git a/docs/assets/screenshots/logs-query.png b/docs/assets/screenshots/logs-query.png
new file mode 100644
index 0000000..4a31a65
Binary files /dev/null and b/docs/assets/screenshots/logs-query.png differ
diff --git a/docs/assets/screenshots/settings.png b/docs/assets/screenshots/settings.png
new file mode 100644
index 0000000..e400d08
Binary files /dev/null and b/docs/assets/screenshots/settings.png differ
diff --git a/docs/assets/screenshots/wizard.png b/docs/assets/screenshots/wizard.png
new file mode 100644
index 0000000..9bee585
Binary files /dev/null and b/docs/assets/screenshots/wizard.png differ
diff --git a/docs/user-guide/README.md b/docs/user-guide/README.md
index 3598132..1e6de42 100644
--- a/docs/user-guide/README.md
+++ b/docs/user-guide/README.md
@@ -10,6 +10,17 @@ LokiStack 把 Grafana Loki 日志聚合的部署、采集、查询、分析与
 - **告警**:内置九条应用日志规则,绑定默认通道后填入飞书 Webhook 即可接收;支持冷却与风暴抑制。
 - **运维底座**:凭证加密存储、操作审计、标准 Prometheus 指标端点(/api/v1/metrics)。
 
+## 界面预览
+
+<div class="shot-grid">
+  <img src="/docs/assets/screenshots/dashboard.png" alt="仪表盘" />
+  <img src="/docs/assets/screenshots/wizard.png" alt="部署向导" />
+  <img src="/docs/assets/screenshots/logs-query.png" alt="日志查询" />
+  <img src="/docs/assets/screenshots/analysis.png" alt="日志分析" />
+  <img src="/docs/assets/screenshots/alerts.png" alt="告警通知" />
+  <img src="/docs/assets/screenshots/settings.png" alt="系统设置" />
+</div>
+
 ## 下一步
 
 阅读[快速安装](install.md),或直接进入[部署向导](wizard.md)。
diff --git a/docs/user-guide/alerts.md b/docs/user-guide/alerts.md
index d4e3276..8568e63 100644
--- a/docs/user-guide/alerts.md
+++ b/docs/user-guide/alerts.md
@@ -2,6 +2,8 @@
 
 「日志告警」页(`/alerts`)管理规则、通知通道与发送历史。
 
+![告警通知](/docs/assets/screenshots/alerts.png)
+
 ## 快速开始
 
 1. 在「通知通道」中编辑默认通道,填入飞书群机器人 Webhook 并启用。
diff --git a/docs/user-guide/analysis.md b/docs/user-guide/analysis.md
index 3cadacb..a2d0025 100644
--- a/docs/user-guide/analysis.md
+++ b/docs/user-guide/analysis.md
@@ -2,6 +2,8 @@
 
 「日志分析」页(`/analysis`,管理员)自动聚合日志指标,无需手动查询:
 
+![日志分析](/docs/assets/screenshots/analysis.png)
+
 - **统计卡**:日志总量、错误行数、告警行数、活跃应用
 - **趋势折线**:总量 / 错误 / 告警随时间分布
 - **命名空间分布**:环形图
diff --git a/docs/user-guide/query.md b/docs/user-guide/query.md
index 3c9310c..a627694 100644
--- a/docs/user-guide/query.md
+++ b/docs/user-guide/query.md
@@ -2,6 +2,8 @@
 
 「日志查询」页(`/logs`)按 LogQL 与时间范围检索日志。
 
+![日志查询](/docs/assets/screenshots/logs-query.png)
+
 ## 查询方式
 
 - **LogQL 编辑器**:语法高亮与标签/管道补全;回车执行。
diff --git a/docs/user-guide/wizard.md b/docs/user-guide/wizard.md
index 5e0f422..1c4260d 100644
--- a/docs/user-guide/wizard.md
+++ b/docs/user-guide/wizard.md
@@ -2,6 +2,8 @@
 
 部署向导(`/wizard`)三步完成 Loki 上线:环境与目标 → 存储 → 部署 Loki 与采集。
 
+![部署向导](/docs/assets/screenshots/wizard.png)
+
 ## 第一步:环境与目标
 
 - **Kubernetes 集群**:粘贴 kubeconfig,或按页面给出的 RBAC 脚本在集群执行一次后粘贴 ServiceAccount 长期 Token。平台经 API Server 操作集群,无需安装 kubectl/Helm。