diff --git a/.github/readme-assets/replypier-service-flow.svg b/.github/readme-assets/replypier-service-flow.svg
new file mode 100644
index 0000000..f7e6312
--- /dev/null
+++ b/.github/readme-assets/replypier-service-flow.svg
@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 410" role="img" aria-labelledby="title desc">
+  <title id="title">ReplyPier 客服服务闭环</title>
+  <desc id="desc">AI 知识问答、人工客服接手、结束服务并评价。</desc>
+  <rect width="1440" height="410" rx="28" fill="#F5F7F2"/>
+  <text x="720" y="52" text-anchor="middle" fill="#24332D" font-family="-apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif" font-size="25" font-weight="700">一段对话，从 AI 到人工，顺畅接力</text>
+  <text x="720" y="80" text-anchor="middle" fill="#69766F" font-family="-apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif" font-size="15">保留上下文 · 按权限接待 · 服务结果可回看</text>
+
+  <g font-family="-apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif">
+    <rect x="40" y="112" width="400" height="250" rx="22" fill="#FFFFFF" stroke="#DDE5DC"/>
+    <circle cx="91" cy="171" r="31" fill="#EAF2EC"/>
+    <path d="M74 156h34a6 6 0 0 1 6 6v17a6 6 0 0 1-6 6H91l-10 8v-8h-7a6 6 0 0 1-6-6v-17a6 6 0 0 1 6-6Z" fill="#2E6A5C"/>
+    <circle cx="83" cy="171" r="2.3" fill="#FFFFFF"/>
+    <circle cx="91" cy="171" r="2.3" fill="#FFFFFF"/>
+    <circle cx="99" cy="171" r="2.3" fill="#FFFFFF"/>
+    <text x="139" y="165" fill="#24332D" font-size="21" font-weight="700">AI 知识问答</text>
+    <text x="139" y="193" fill="#69766F" font-size="14">从关联知识库中寻找答案</text>
+    <path d="M68 232h344" stroke="#E8ECE6"/>
+    <text x="68" y="275" fill="#2E6A5C" font-size="14" font-weight="600">知识来源可追溯</text>
+    <text x="68" y="302" fill="#77837C" font-size="13">资料不足时，明确反馈或转人工</text>
+
+    <rect x="520" y="112" width="400" height="250" rx="22" fill="#FFFFFF" stroke="#DDE5DC"/>
+    <circle cx="571" cy="171" r="31" fill="#F9ECE7"/>
+    <path d="M554 166v-4a17 17 0 0 1 34 0v4M554 165h5v14h-5a4 4 0 0 1-4-4v-6a4 4 0 0 1 4-4Zm34 0h-5v14h5a4 4 0 0 0 4-4v-6a4 4 0 0 0-4-4Zm-17-6a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm-12 28c2-6 8-9 12-9s10 3 12 9" fill="none" stroke="#C96F5A" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <text x="619" y="165" fill="#24332D" font-size="21" font-weight="700">人工客服接手</text>
+    <text x="619" y="193" fill="#69766F" font-size="14">在同一会话中继续服务</text>
+    <path d="M548 232h344" stroke="#E8ECE6"/>
+    <text x="548" y="275" fill="#2E6A5C" font-size="14" font-weight="600">上下文保留，授权后接待</text>
+    <text x="548" y="302" fill="#77837C" font-size="13">支持客服组、接管与转交</text>
+
+    <rect x="1000" y="112" width="400" height="250" rx="22" fill="#FFFFFF" stroke="#DDE5DC"/>
+    <circle cx="1051" cy="171" r="31" fill="#EEF1E6"/>
+    <path d="m1051 149 6.7 13.6 15 2.2-10.9 10.6 2.6 15-13.4-7-13.4 7 2.6-15-10.9-10.6 15-2.2Z" fill="#6D9678"/>
+    <text x="1099" y="165" fill="#24332D" font-size="21" font-weight="700">结束并评价</text>
+    <text x="1099" y="193" fill="#69766F" font-size="14">收集星级与文字反馈</text>
+    <path d="M1028 232h344" stroke="#E8ECE6"/>
+    <text x="1028" y="275" fill="#2E6A5C" font-size="14" font-weight="600">管理员查看服务结果</text>
+    <text x="1028" y="302" fill="#77837C" font-size="13">会话、接待人和评价连在一起</text>
+  </g>
+
+  <path d="M451 237h54m-12-9 12 9-12 9M931 237h54m-12-9 12 9-12 9" fill="none" stroke="#8BB49C" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/.github/readme-assets/replypier-widget-preview.png b/.github/readme-assets/replypier-widget-preview.png
new file mode 100644
index 0000000..517ae95
Binary files /dev/null and b/.github/readme-assets/replypier-widget-preview.png differ
diff --git a/README.md b/README.md
index 80930f3..0b82704 100644
--- a/README.md
+++ b/README.md
@@ -1,29 +1,53 @@
-# ReplyPier
+<div align="center">
+  <img src="frontend/src/assets/logo.svg" width="76" height="57" alt="ReplyPier 纸舟标志" />
+  <h1>ReplyPier</h1>
+  <p><strong>AI 先答疑，人工接得住；一段会话，服务有始有终。</strong></p>
+  <p>面向个人与公司网站的 AI 客服：连接知识库问答、人工协作与服务评价。</p>
 
-ReplyPier 是面向个人与公司网站的 AI 客服系统，支持知识库问答、AI 转人工、多客服协作与服务评价。
+  <p>
+    <a href="LICENSE"><img src="https://img.shields.io/badge/License-Apache--2.0-2E6A5C?style=flat-square&logo=apache&logoColor=white" alt="Apache 2.0 License" /></a>
+    <a href="backend/requirements.txt"><img src="https://img.shields.io/badge/Python-FastAPI-2E6A5C?style=flat-square&logo=fastapi&logoColor=white" alt="Python and FastAPI" /></a>
+    <a href="frontend/package.json"><img src="https://img.shields.io/badge/Vue_3-TypeScript-568B73?style=flat-square&logo=vue.js&logoColor=white" alt="Vue 3 and TypeScript" /></a>
+    <a href="backend/requirements.txt"><img src="https://img.shields.io/badge/Realtime-Socket.IO-386A5B?style=flat-square&logo=socketdotio&logoColor=white" alt="Socket.IO" /></a>
+    <a href="backend/requirements.txt"><img src="https://img.shields.io/badge/Database-PostgreSQL_%2B_pgvector-587A91?style=flat-square&logo=postgresql&logoColor=white" alt="PostgreSQL and pgvector" /></a>
+  </p>
 
-## 使用与开发文档
+  <p>
+    <a href="#产品预览">产品预览</a> ·
+    <a href="#核心能力">核心能力</a> ·
+    <a href="#本机使用">本机使用</a> ·
+    <a href="#技术结构">技术结构</a> ·
+    <a href="AGENT_HANDOFF.md">开发指引</a>
+  </p>
+</div>
 
-- [本机使用与启停](LOCAL_DEPLOY.md)
-- [开发与维护指引](AGENT_HANDOFF.md)
+## 产品预览
+
+工作台可以直接预览访客看到的聊天窗口。下面是内置的 Widget 对话示例：
+
+<p align="center">
+  <img src=".github/readme-assets/replypier-widget-preview.png" width="340" alt="ReplyPier 工作台中的网站客服 Widget 对话预览，使用纸舟头像展示一段示例问答" />
+</p>
+
+<p align="center"><img src=".github/readme-assets/replypier-service-flow.svg" width="100%" alt="客服服务流程：AI 知识问答、人工客服接手、结束服务并评价" /></p>
 
 ## 核心能力
 
-- 网站悬浮客服入口与嵌入式聊天窗口。
-- 基于指定知识库的 AI 问答与会话上下文。
-- 同一会话内转人工、客服接管与授权转交。
-- 管理员与人工客服角色、客服分组和会话访问控制。
-- 服务星级、文字评价、聊天记录与基础统计。
-- 可配置的 Agent、知识处理任务与工作流。
+- 💬 **知识库问答**：为 AI 客服关联知识资料，并在 Widget 中展示回答来源。
+- 🤝 **同会话转人工**：保留聊天上下文，支持客服组接待、人工接管与授权转交。
+- ⭐ **评价与回看**：收集星级和文字反馈，管理员可查看完整会话与接待情况。
+- 🔐 **多客服协作**：按角色、组织、分组和会话可见范围控制访问。
+- 🧩 **可配置 Agent 与 Widget**：管理 AI 客服、知识关联、外观和网站嵌入。
+- ⚙️ **知识任务与工作流**：处理知识导入，并编排客服消息处理步骤。
 
 ## 技术结构
 
-- 后端：Python、FastAPI、SQLAlchemy、Alembic。
-- 前端：Vue 3、TypeScript、Vite。
-- 实时通信：Socket.IO。
-- 知识检索：FastEmbed、PostgreSQL/pgvector。
-- 短期状态与事件分发：Redis。
-- AI 编排：Agno。
+- **后端**：Python、FastAPI、SQLAlchemy、Alembic。
+- **前端**：Vue 3、TypeScript、Vite。
+- **实时通信**：Socket.IO。
+- **知识检索**：FastEmbed、PostgreSQL/pgvector。
+- **短期状态与事件分发**：Redis。
+- **AI 编排**：Agno。
 
 ```text
 backend/app/       API、业务模型、Agent、知识处理与后台任务
@@ -56,4 +80,4 @@ deploy/local/      本机环境与启停脚本
 
 ## 许可与贡献
 
-许可条款见 [LICENSE](LICENSE)，声明见 [NOTICE](NOTICE)，贡献约定见 [CONTRIBUTING.md](CONTRIBUTING.md)。
+本项目使用 [Apache License 2.0](LICENSE)，声明见 [NOTICE](NOTICE)，贡献约定见 [CONTRIBUTING.md](CONTRIBUTING.md)。