diff --git a/AGENTS.md b/AGENTS.md
index ba64788b..dfa5f6c0 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -27,8 +27,8 @@ Don't create helpers, utilities, or abstractions for one-time operations. Don't
 - 使用 pnpm 管理
 - API 接口规范：所有的 API 接口都应该定义在 web/src/apis 下面
 - Icon 应该优先从 lucide-vue-next （推荐，但是需要注意尺寸）
-- 样式使用 less，非特殊情况必须使用[base.css](web/src/assets/css/base.css) 中的颜色变量。
-- UI风格要简洁，同时要保持一致性，不要悬停位移，不要过度使用阴影以及渐变色。
+- 样式使用 less，非特殊情况必须使用 [base.css](web/src/assets/css/base.css) 中的颜色变量
+- UI 设计规范详见 [DESIGN](docs/agents/DESIGN.md)
 
 
 ### 后端开发规范
diff --git a/CLAUDE.md b/CLAUDE.md
index ba64788b..dfa5f6c0 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -27,8 +27,8 @@ Don't create helpers, utilities, or abstractions for one-time operations. Don't
 - 使用 pnpm 管理
 - API 接口规范：所有的 API 接口都应该定义在 web/src/apis 下面
 - Icon 应该优先从 lucide-vue-next （推荐，但是需要注意尺寸）
-- 样式使用 less，非特殊情况必须使用[base.css](web/src/assets/css/base.css) 中的颜色变量。
-- UI风格要简洁，同时要保持一致性，不要悬停位移，不要过度使用阴影以及渐变色。
+- 样式使用 less，非特殊情况必须使用 [base.css](web/src/assets/css/base.css) 中的颜色变量
+- UI 设计规范详见 [DESIGN](docs/agents/DESIGN.md)
 
 
 ### 后端开发规范
diff --git a/docs/agents/DESIGN.md b/docs/agents/DESIGN.md
new file mode 100644
index 00000000..c1ccd4c3
--- /dev/null
+++ b/docs/agents/DESIGN.md
@@ -0,0 +1,95 @@
+# 界面设计规范
+
+## 总览
+
+语析平台的 UI 设计致力于打造简洁、高效、一致的用户体验。设计理念以功能为核心，视觉表现为辅助，避免过度装饰，让用户专注于知识管理与 Agent 开发的核心任务。
+
+## 设计原则
+
+### 简洁
+
+- 界面元素应精简，去除不必要的视觉元素
+- 每个组件应有明确的用途，避免功能性冗余
+- 留白适度，提升可读性和操作效率
+
+### 一致性
+
+- 全局保持统一的视觉风格和交互模式
+- 颜色、字体、间距等遵循 [base.css](web/src/assets/css/base.css) 中的设计变量
+- 相似功能的组件使用相同的设计模式
+
+### 稳定性
+
+- 禁止悬停位移：交互元素在悬停时应保持位置稳定，避免视觉跳动
+- 避免过度阴影：阴影仅用于层级区分，不得用于装饰目的
+- 避免过度渐变：渐变色应谨慎使用，优先使用纯色或微弱渐变
+
+## 禁止项
+
+以下 UI 做法在本项目中明确禁止：
+
+| 禁止项 | 说明 |
+|--------|------|
+| 悬停位移 | 组件在 hover 状态下不得产生位置偏移 |
+| 过度阴影 | 禁止使用浓重阴影进行装饰，仅在必要时使用微弱阴影区分层级 |
+| 过度渐变 | 禁止使用夸张渐变，优先使用纯色或微弱渐变 |
+| 装饰性动效 | 禁止非功能性的装饰动画 |
+| 悬停放大 | 禁止 hover 时放大组件尺寸 |
+| 颜色滥用 | 禁止使用过于鲜艳或刺眼的颜色 |
+
+## 组件规范
+
+### 技术栈
+
+- 包管理器：pnpm
+- 图标库：lucide-vue-next（注意尺寸控制）
+- 样式语言：LESS
+- 样式变量：必须使用 [base.css](web/src/assets/css/base.css) 中定义的颜色变量
+
+### 开发规范
+
+1. **API 接口**：所有接口定义在 `web/src/apis` 目录下
+2. **样式复用**：优先复用现有组件和样式，避免重复定义
+3. **响应式设计**：适配不同屏幕宽度，保持布局稳定
+4. **无障碍设计**：保证基本的无障碍支持，如适当的对比度、键盘可操作等
+
+### 颜色变量
+
+必须从 `web/src/assets/css/base.css` 中获取以下变量：
+
+```less
+// 典型变量示例（实际以 base.css 为准）
+@primary-color: // 主色调
+@text-color: // 文本颜色
+@background-color: // 背景颜色
+@border-color: // 边框颜色
+// ... 其他变量
+```
+
+### 组件示例
+
+```vue
+<template>
+  <div class="my-component">
+    <LucideIcon :icon="Icons.Settings" :size="16" />
+    <span>设置</span>
+  </div>
+</template>
+
+<style lang="less" scoped>
+@import '@/assets/css/base.css';
+
+.my-component {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: @text-color;
+  // 简洁样式，无阴影、无渐变、无悬停位移
+}
+</style>
+```
+
+## 参考资料
+
+- [base.css](web/src/assets/css/base.css) - 全局样式变量
+- [前端开发规范](AGENTS.md#前端开发规范) - AGENTS.md 中的前端开发规范