diff --git a/packages/ui/README.md b/packages/ui/README.md
index e2df651ed4..880ef82b11 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -2,54 +2,87 @@
 
 Cherry Studio UI 组件库 - 为 Cherry Studio 设计的 React 组件集合
 
-## 特性
+## ✨ 特性
 
-- 🎨 基于 Tailwind CSS 的现代化设计
-- 📦 支持 ESM 和 CJS 格式
-- 🔷 完整的 TypeScript 支持
-- 🚀 可以作为 npm 包发布
-- 🔧 开箱即用的常用 hooks 和工具函数
+- 🎨 **设计系统**: 完整的 CherryStudio 设计令牌（17种颜色 × 11个色阶 + 语义化主题）
+- 🌓 **Dark Mode**: 开箱即用的深色模式支持
+- 🚀 **Tailwind v4**: 基于最新 Tailwind CSS v4 构建
+- 📦 **灵活导入**: 3种样式导入方式，满足不同使用场景
+- 🔷 **TypeScript**: 完整的类型定义和智能提示
+- 🎯 **零冲突**: CSS 变量隔离，不覆盖用户主题
 
-## 安装
+---
+
+## 🚀 快速开始
+
+### 安装
 
 ```bash
-# 安装组件库
 npm install @cherrystudio/ui
-
-# 安装必需的 peer dependencies
+# peer dependencies
 npm install @heroui/react framer-motion react react-dom tailwindcss
 ```
 
-## 配置
+### 三种使用方式
 
-### 1. Tailwind CSS v4 配置
+根据你的需求选择一种：
 
-本组件库使用 Tailwind CSS v4，配置方式已改变。在你的主 CSS 文件（如 `src/styles/tailwind.css`）中：
+#### 方式 1：完整主题（推荐给主包）
 
 ```css
+/* app.css */
+@import '@cherrystudio/ui/styles/theme.css';
+```
+
+- ✅ 使用标准 Tailwind 类名（`bg-primary`、`bg-red-500`）
+- ✅ 所有颜色使用设计师定义的值
+- ⚠️ 会覆盖 Tailwind 默认颜色
+
+```tsx
+<Button className="bg-primary text-red-500 p-md">
+  {/* bg-primary → CherryStudio 品牌色（lime-500） */}
+  {/* text-red-500 → 设计师定义的红色 */}
+  {/* p-md → 2.5rem（设计师定义） */}
+</Button>
+```
+
+#### 方式 2：仅变量（推荐给 npm 用户）
+
+```css
+/* app.css */
 @import 'tailwindcss';
+@import '@cherrystudio/ui/styles/index.css';
+```
 
-/* 必须扫描组件库文件以提取类名 */
-@source '../node_modules/@cherrystudio/ui/dist/**/*.{js,mjs}';
+- ✅ 不覆盖你的 Tailwind 主题
+- ✅ 通过 CSS 变量使用（`var(--cs-primary)`）
+- ✅ 你的 `bg-red-500` 不受影响
 
-/* 你的应用源文件 */
-@source './src/**/*.{js,ts,jsx,tsx}';
+```tsx
+<button style={{ backgroundColor: 'var(--cs-primary)' }}>
+  {/* 使用 CherryStudio 品牌色 */}
+</button>
 
-/*
- * 如果你的应用直接使用 HeroUI 组件，需要添加：
- * @source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
- * @plugin '@heroui/react/plugin';
- */
+<div className="bg-red-500">
+  {/* 使用你自己的红色，不受影响 */}
+</div>
+```
 
-/* 自定义主题配置（可选） */
+#### 方式 3：选择性覆盖
+
+```css
+/* app.css */
+@import 'tailwindcss';
+@import '@cherrystudio/ui/styles/tokens.css';
+
+/* 只使用部分设计系统 */
 @theme {
-  /* 你的主题扩展 */
+  --color-primary: var(--cs-primary);  /* 用 CS 的主色 */
+  --color-red-500: oklch(...);         /* 用自己的红色 */
 }
 ```
 
-注意：Tailwind CSS v4 不再使用 `tailwind.config.js` 文件，所有配置都在 CSS 中完成。
-
-### 2. Provider 配置
+### Provider 配置
 
 在你的 App 根组件中添加 HeroUI Provider：
 
diff --git a/packages/ui/components.json b/packages/ui/components.json
index 693dcaf364..b5c2f24eff 100644
--- a/packages/ui/components.json
+++ b/packages/ui/components.json
@@ -13,7 +13,7 @@
   "tailwind": {
     "baseColor": "zinc",
     "config": "",
-    "css": "src/styles/globals.css",
+    "css": "src/styles/theme.css",
     "cssVariables": true,
     "prefix": ""
   },
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 8ebc28aabf..543a72df86 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -125,9 +125,10 @@
       "require": "./dist/utils/index.js",
       "default": "./dist/utils/index.js"
     },
-    "./styles/design-tokens.css": "./src/styles/design-tokens.css",
+    "./styles": "./src/styles/index.css",
+    "./styles/tokens.css": "./src/styles/tokens.css",
     "./styles/theme.css": "./src/styles/theme.css",
-    "./styles/globals.css": "./src/styles/globals.css"
+    "./styles/index.css": "./src/styles/index.css"
   },
   "packageManager": "yarn@4.9.1"
 }
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
deleted file mode 100644
index 8b879c1a96..0000000000
--- a/packages/ui/src/styles/globals.css
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * CherryStudio Globals CSS
- *
- * 主包专用：完整样式 + Tailwind 覆盖
- * - 引入 theme.css（包含所有 cs-* 前缀类）
- * - 覆盖 Tailwind 标准命名（bg-primary 等）
- */
-
-@import 'tailwindcss';
-@import 'tw-animate-css';
-@import './theme.css'; /* 已包含 design-tokens.css 和所有 cs-* 工具类 */
-
-@custom-variant dark (&:is(.dark *));
-
-/* ==================== */
-/* 覆盖 Tailwind 标准命名（仅主包使用） */
-/* 注意：cs-* 前缀类已由 theme.css 提供，此处不重复定义 */
-/* ==================== */
-
-@theme {
-  /* ==================== */
-  /* 语义化颜色（覆盖 Tailwind 标准命名） */
-  /* ==================== */
-  --color-primary: var(--cs-primary);
-  --color-primary-foreground: var(--cs-white);
-  --color-destructive: var(--cs-destructive);
-  --color-destructive-foreground: var(--cs-white);
-  --color-background: var(--cs-background);
-  --color-foreground: var(--cs-foreground);
-  --color-card: var(--cs-card);
-  --color-card-foreground: var(--cs-foreground);
-  --color-popover: var(--cs-popover);
-  --color-popover-foreground: var(--cs-foreground);
-  --color-secondary: var(--cs-secondary);
-  --color-secondary-foreground: var(--cs-foreground);
-  --color-muted: var(--cs-muted);
-  --color-muted-foreground: var(--cs-foreground-secondary);
-  --color-accent: var(--cs-accent);
-  --color-accent-foreground: var(--cs-foreground);
-  --color-border: var(--cs-border);
-  --color-input: var(--cs-border);
-  --color-ring: var(--cs-ring);
-
-  /* 图表颜色 */
-  --color-chart-1: var(--cs-blue-500);
-  --color-chart-2: var(--cs-emerald-500);
-  --color-chart-3: var(--cs-purple-500);
-  --color-chart-4: var(--cs-amber-500);
-  --color-chart-5: var(--cs-orange-500);
-
-  /* 侧边栏 */
-  --color-sidebar: var(--cs-sidebar);
-  --color-sidebar-foreground: var(--cs-foreground);
-  --color-sidebar-primary: var(--cs-primary);
-  --color-sidebar-primary-foreground: var(--cs-white);
-  --color-sidebar-accent: var(--cs-sidebar-accent);
-  --color-sidebar-accent-foreground: var(--cs-foreground);
-  --color-sidebar-border: var(--cs-border);
-  --color-sidebar-ring: var(--cs-ring);
-
-  /* ==================== */
-  /* Primitive 颜色（标准命名，覆盖 Tailwind） */
-  /* ==================== */
-
-  /* Red */
-  --color-red-50: var(--cs-red-50);
-  --color-red-100: var(--cs-red-100);
-  --color-red-200: var(--cs-red-200);
-  --color-red-300: var(--cs-red-300);
-  --color-red-400: var(--cs-red-400);
-  --color-red-500: var(--cs-red-500);
-  --color-red-600: var(--cs-red-600);
-  --color-red-700: var(--cs-red-700);
-  --color-red-800: var(--cs-red-800);
-  --color-red-900: var(--cs-red-900);
-  --color-red-950: var(--cs-red-950);
-
-  /* Lime */
-  --color-lime-50: var(--cs-lime-50);
-  --color-lime-100: var(--cs-lime-100);
-  --color-lime-200: var(--cs-lime-200);
-  --color-lime-300: var(--cs-lime-300);
-  --color-lime-400: var(--cs-lime-400);
-  --color-lime-500: var(--cs-lime-500);
-  --color-lime-600: var(--cs-lime-600);
-  --color-lime-700: var(--cs-lime-700);
-  --color-lime-800: var(--cs-lime-800);
-  --color-lime-900: var(--cs-lime-900);
-  --color-lime-950: var(--cs-lime-950);
-
-  /* Green */
-  --color-green-500: var(--cs-green-500);
-
-  /* Amber */
-  --color-amber-500: var(--cs-amber-500);
-
-  /* Blue */
-  --color-blue-500: var(--cs-blue-500);
-
-  /* Emerald */
-  --color-emerald-500: var(--cs-emerald-500);
-
-  /* Purple */
-  --color-purple-500: var(--cs-purple-500);
-
-  /* Orange */
-  --color-orange-500: var(--cs-orange-500);
-
-  /* Zinc */
-  --color-zinc-50: var(--cs-zinc-50);
-  --color-zinc-500: var(--cs-zinc-500);
-  --color-zinc-900: var(--cs-zinc-900);
-
-  /* 其他常用颜色 */
-  --color-slate-500: var(--cs-slate-500);
-  --color-gray-500: var(--cs-gray-500);
-  --color-black: var(--cs-black);
-  --color-white: var(--cs-white);
-
-  /* ==================== */
-  /* Spacing & Radius（标准命名，覆盖 Tailwind） */
-  /* ==================== */
-
-  --spacing-xs: var(--cs-size-xs);
-  --spacing-sm: var(--cs-size-sm);
-  --spacing-md: var(--cs-size-md);
-  --spacing-lg: var(--cs-size-lg);
-  --spacing-xl: var(--cs-size-xl);
-  --spacing-2xl: var(--cs-size-2xl);
-
-  --radius-xs: var(--cs-radius-xs);
-  --radius-sm: var(--cs-radius-sm);
-  --radius-md: var(--cs-radius-md);
-  --radius-lg: var(--cs-radius-lg);
-  --radius-xl: var(--cs-radius-xl);
-  --radius-2xl: var(--cs-radius-2xl);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css
new file mode 100644
index 0000000000..781a250804
--- /dev/null
+++ b/packages/ui/src/styles/index.css
@@ -0,0 +1,24 @@
+/**
+ * CherryStudio Styles - npm 包入口
+ *
+ * 用途：仅导出 CSS 变量，不生成工具类，不覆盖用户主题
+ * 使用场景：
+ * - npm 用户想使用设计系统的变量，但不想覆盖 Tailwind 默认主题
+ * - 可以通过 var(--cs-primary) 等方式使用
+ * - 不会生成 bg-primary 等工具类（用户自己的 bg-primary 不受影响）
+ *
+ * 示例：
+ * ```css
+ * @import '@cherrystudio/ui/styles/index.css';
+ *
+ * .my-button {
+ *   background: var(--cs-primary);     // 使用 CS 的品牌色
+ *   padding: var(--cs-size-md);        // 使用 CS 的间距
+ * }
+ * ```
+ *
+ * 如果想要完整的主题覆盖（生成 bg-primary 等类），请导入：
+ * @import '@cherrystudio/ui/styles/theme.css';
+ */
+
+@import './tokens.css';
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 5c8bfc50f1..c182607c99 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -1,241 +1,433 @@
 /**
- * CherryStudio Theme - 生成 cs-* 前缀工具类
+ * CherryStudio Theme - Tailwind CSS 主题配置
  *
- * 用途：
- * - npm 包用户安全导入（不覆盖用户的标准 Tailwind 命名）
- * - UI 库组件内部使用（确保自包含）
+ * 用途：映射设计师的设计系统（--cs-*）到 Tailwind 标准命名
+ * 使用场景：
+ * - 主包：完全使用设计系统
+ * - npm 用户：可选择导入，会覆盖 Tailwind 默认主题
  *
- * 生成的工具类示例：
- * - bg-cs-primary, text-cs-primary
- * - bg-cs-destructive, border-cs-destructive
- * - p-cs-md, gap-cs-lg, m-cs-xs
- * - rounded-cs-md, rounded-cs-lg
+ * 生成的工具类：bg-primary, bg-red-500, p-md 等（无前缀）
  */
 
-@import './design-tokens.css';
+@import 'tailwindcss';
+@import './tokens.css';
+
+@custom-variant dark (&:is(.dark *));
 
 @theme {
   /* ==================== */
-  /* 语义化颜色（生成 bg-cs-primary 等） */
+  /* 语义化颜色（覆盖 Tailwind 标准命名） */
   /* ==================== */
+  --color-primary: var(--cs-primary);
+  --color-primary-foreground: var(--cs-white);
 
-  --color-cs-primary: var(--cs-primary);
-  --color-cs-destructive: var(--cs-destructive);
-  --color-cs-success: var(--cs-success);
-  --color-cs-warning: var(--cs-warning);
+  --color-destructive: var(--cs-destructive);
+  --color-destructive-foreground: var(--cs-white);
 
-  --color-cs-background: var(--cs-background);
-  --color-cs-foreground: var(--cs-foreground);
-  --color-cs-foreground-secondary: var(--cs-foreground-secondary);
-  --color-cs-foreground-muted: var(--cs-foreground-muted);
+  --color-success: var(--cs-success);
+  --color-success-foreground: var(--cs-white);
 
-  --color-cs-border: var(--cs-border);
-  --color-cs-border-hover: var(--cs-border-hover);
-  --color-cs-border-active: var(--cs-border-active);
-  --color-cs-ring: var(--cs-ring);
+  --color-warning: var(--cs-warning);
+  --color-warning-foreground: var(--cs-black);
 
-  --color-cs-card: var(--cs-card);
-  --color-cs-popover: var(--cs-popover);
-  --color-cs-sidebar: var(--cs-sidebar);
+  --color-background: var(--cs-background);
+  --color-foreground: var(--cs-foreground);
 
-  --color-cs-secondary: var(--cs-secondary);
-  --color-cs-muted: var(--cs-muted);
-  --color-cs-accent: var(--cs-accent);
-  --color-cs-sidebar-accent: var(--cs-sidebar-accent);
+  --color-card: var(--cs-card);
+  --color-card-foreground: var(--cs-foreground);
+
+  --color-popover: var(--cs-popover);
+  --color-popover-foreground: var(--cs-foreground);
+
+  --color-secondary: var(--cs-secondary);
+  --color-secondary-foreground: var(--cs-foreground);
+
+  --color-muted: var(--cs-muted);
+  --color-muted-foreground: var(--cs-foreground-secondary);
+
+  --color-accent: var(--cs-accent);
+  --color-accent-foreground: var(--cs-foreground);
+
+  --color-border: var(--cs-border);
+  --color-input: var(--cs-border);
+  --color-ring: var(--cs-ring);
+
+  /* 侧边栏 */
+  --color-sidebar: var(--cs-sidebar);
+  --color-sidebar-foreground: var(--cs-foreground);
+  --color-sidebar-primary: var(--cs-primary);
+  --color-sidebar-primary-foreground: var(--cs-white);
+  --color-sidebar-accent: var(--cs-sidebar-accent);
+  --color-sidebar-accent-foreground: var(--cs-foreground);
+  --color-sidebar-border: var(--cs-border);
+  --color-sidebar-ring: var(--cs-ring);
+
+  /* 图表颜色 */
+  --color-chart-1: var(--cs-blue-500);
+  --color-chart-2: var(--cs-emerald-500);
+  --color-chart-3: var(--cs-purple-500);
+  --color-chart-4: var(--cs-amber-500);
+  --color-chart-5: var(--cs-orange-500);
 
   /* ==================== */
-  /* Primitive 颜色（完整色阶） */
+  /* Primitive 颜色（覆盖 Tailwind 默认色板） */
   /* ==================== */
 
   /* Neutral */
-  --color-cs-neutral-50: var(--cs-neutral-50);
-  --color-cs-neutral-100: var(--cs-neutral-100);
-  --color-cs-neutral-200: var(--cs-neutral-200);
-  --color-cs-neutral-300: var(--cs-neutral-300);
-  --color-cs-neutral-400: var(--cs-neutral-400);
-  --color-cs-neutral-500: var(--cs-neutral-500);
-  --color-cs-neutral-600: var(--cs-neutral-600);
-  --color-cs-neutral-700: var(--cs-neutral-700);
-  --color-cs-neutral-800: var(--cs-neutral-800);
-  --color-cs-neutral-900: var(--cs-neutral-900);
-  --color-cs-neutral-950: var(--cs-neutral-950);
+  --color-neutral-50: var(--cs-neutral-50);
+  --color-neutral-100: var(--cs-neutral-100);
+  --color-neutral-200: var(--cs-neutral-200);
+  --color-neutral-300: var(--cs-neutral-300);
+  --color-neutral-400: var(--cs-neutral-400);
+  --color-neutral-500: var(--cs-neutral-500);
+  --color-neutral-600: var(--cs-neutral-600);
+  --color-neutral-700: var(--cs-neutral-700);
+  --color-neutral-800: var(--cs-neutral-800);
+  --color-neutral-900: var(--cs-neutral-900);
+  --color-neutral-950: var(--cs-neutral-950);
+
+  /* Stone */
+  --color-stone-50: var(--cs-stone-50);
+  --color-stone-100: var(--cs-stone-100);
+  --color-stone-200: var(--cs-stone-200);
+  --color-stone-300: var(--cs-stone-300);
+  --color-stone-400: var(--cs-stone-400);
+  --color-stone-500: var(--cs-stone-500);
+  --color-stone-600: var(--cs-stone-600);
+  --color-stone-700: var(--cs-stone-700);
+  --color-stone-800: var(--cs-stone-800);
+  --color-stone-900: var(--cs-stone-900);
+  --color-stone-950: var(--cs-stone-950);
 
   /* Zinc */
-  --color-cs-zinc-50: var(--cs-zinc-50);
-  --color-cs-zinc-100: var(--cs-zinc-100);
-  --color-cs-zinc-200: var(--cs-zinc-200);
-  --color-cs-zinc-300: var(--cs-zinc-300);
-  --color-cs-zinc-400: var(--cs-zinc-400);
-  --color-cs-zinc-500: var(--cs-zinc-500);
-  --color-cs-zinc-600: var(--cs-zinc-600);
-  --color-cs-zinc-700: var(--cs-zinc-700);
-  --color-cs-zinc-800: var(--cs-zinc-800);
-  --color-cs-zinc-900: var(--cs-zinc-900);
-  --color-cs-zinc-950: var(--cs-zinc-950);
+  --color-zinc-50: var(--cs-zinc-50);
+  --color-zinc-100: var(--cs-zinc-100);
+  --color-zinc-200: var(--cs-zinc-200);
+  --color-zinc-300: var(--cs-zinc-300);
+  --color-zinc-400: var(--cs-zinc-400);
+  --color-zinc-500: var(--cs-zinc-500);
+  --color-zinc-600: var(--cs-zinc-600);
+  --color-zinc-700: var(--cs-zinc-700);
+  --color-zinc-800: var(--cs-zinc-800);
+  --color-zinc-900: var(--cs-zinc-900);
+  --color-zinc-950: var(--cs-zinc-950);
+
+  /* Slate */
+  --color-slate-50: var(--cs-slate-50);
+  --color-slate-100: var(--cs-slate-100);
+  --color-slate-200: var(--cs-slate-200);
+  --color-slate-300: var(--cs-slate-300);
+  --color-slate-400: var(--cs-slate-400);
+  --color-slate-500: var(--cs-slate-500);
+  --color-slate-600: var(--cs-slate-600);
+  --color-slate-700: var(--cs-slate-700);
+  --color-slate-800: var(--cs-slate-800);
+  --color-slate-900: var(--cs-slate-900);
+  --color-slate-950: var(--cs-slate-950);
+
+  /* Gray */
+  --color-gray-50: var(--cs-gray-50);
+  --color-gray-100: var(--cs-gray-100);
+  --color-gray-200: var(--cs-gray-200);
+  --color-gray-300: var(--cs-gray-300);
+  --color-gray-400: var(--cs-gray-400);
+  --color-gray-500: var(--cs-gray-500);
+  --color-gray-600: var(--cs-gray-600);
+  --color-gray-700: var(--cs-gray-700);
+  --color-gray-800: var(--cs-gray-800);
+  --color-gray-900: var(--cs-gray-900);
+  --color-gray-950: var(--cs-gray-950);
 
   /* Red */
-  --color-cs-red-50: var(--cs-red-50);
-  --color-cs-red-100: var(--cs-red-100);
-  --color-cs-red-200: var(--cs-red-200);
-  --color-cs-red-300: var(--cs-red-300);
-  --color-cs-red-400: var(--cs-red-400);
-  --color-cs-red-500: var(--cs-red-500);
-  --color-cs-red-600: var(--cs-red-600);
-  --color-cs-red-700: var(--cs-red-700);
-  --color-cs-red-800: var(--cs-red-800);
-  --color-cs-red-900: var(--cs-red-900);
-  --color-cs-red-950: var(--cs-red-950);
-
-  /* Lime (品牌主色) */
-  --color-cs-lime-50: var(--cs-lime-50);
-  --color-cs-lime-100: var(--cs-lime-100);
-  --color-cs-lime-200: var(--cs-lime-200);
-  --color-cs-lime-300: var(--cs-lime-300);
-  --color-cs-lime-400: var(--cs-lime-400);
-  --color-cs-lime-500: var(--cs-lime-500);
-  --color-cs-lime-600: var(--cs-lime-600);
-  --color-cs-lime-700: var(--cs-lime-700);
-  --color-cs-lime-800: var(--cs-lime-800);
-  --color-cs-lime-900: var(--cs-lime-900);
-  --color-cs-lime-950: var(--cs-lime-950);
-
-  /* Green */
-  --color-cs-green-50: var(--cs-green-50);
-  --color-cs-green-100: var(--cs-green-100);
-  --color-cs-green-200: var(--cs-green-200);
-  --color-cs-green-300: var(--cs-green-300);
-  --color-cs-green-400: var(--cs-green-400);
-  --color-cs-green-500: var(--cs-green-500);
-  --color-cs-green-600: var(--cs-green-600);
-  --color-cs-green-700: var(--cs-green-700);
-  --color-cs-green-800: var(--cs-green-800);
-  --color-cs-green-900: var(--cs-green-900);
-  --color-cs-green-950: var(--cs-green-950);
-
-  /* Amber */
-  --color-cs-amber-50: var(--cs-amber-50);
-  --color-cs-amber-100: var(--cs-amber-100);
-  --color-cs-amber-200: var(--cs-amber-200);
-  --color-cs-amber-300: var(--cs-amber-300);
-  --color-cs-amber-400: var(--cs-amber-400);
-  --color-cs-amber-500: var(--cs-amber-500);
-  --color-cs-amber-600: var(--cs-amber-600);
-  --color-cs-amber-700: var(--cs-amber-700);
-  --color-cs-amber-800: var(--cs-amber-800);
-  --color-cs-amber-900: var(--cs-amber-900);
-  --color-cs-amber-950: var(--cs-amber-950);
-
-  /* Blue */
-  --color-cs-blue-50: var(--cs-blue-50);
-  --color-cs-blue-100: var(--cs-blue-100);
-  --color-cs-blue-200: var(--cs-blue-200);
-  --color-cs-blue-300: var(--cs-blue-300);
-  --color-cs-blue-400: var(--cs-blue-400);
-  --color-cs-blue-500: var(--cs-blue-500);
-  --color-cs-blue-600: var(--cs-blue-600);
-  --color-cs-blue-700: var(--cs-blue-700);
-  --color-cs-blue-800: var(--cs-blue-800);
-  --color-cs-blue-900: var(--cs-blue-900);
-  --color-cs-blue-950: var(--cs-blue-950);
-
-  /* Emerald */
-  --color-cs-emerald-50: var(--cs-emerald-50);
-  --color-cs-emerald-100: var(--cs-emerald-100);
-  --color-cs-emerald-200: var(--cs-emerald-200);
-  --color-cs-emerald-300: var(--cs-emerald-300);
-  --color-cs-emerald-400: var(--cs-emerald-400);
-  --color-cs-emerald-500: var(--cs-emerald-500);
-  --color-cs-emerald-600: var(--cs-emerald-600);
-  --color-cs-emerald-700: var(--cs-emerald-700);
-  --color-cs-emerald-800: var(--cs-emerald-800);
-  --color-cs-emerald-900: var(--cs-emerald-900);
-  --color-cs-emerald-950: var(--cs-emerald-950);
-
-  /* Purple */
-  --color-cs-purple-50: var(--cs-purple-50);
-  --color-cs-purple-100: var(--cs-purple-100);
-  --color-cs-purple-200: var(--cs-purple-200);
-  --color-cs-purple-300: var(--cs-purple-300);
-  --color-cs-purple-400: var(--cs-purple-400);
-  --color-cs-purple-500: var(--cs-purple-500);
-  --color-cs-purple-600: var(--cs-purple-600);
-  --color-cs-purple-700: var(--cs-purple-700);
-  --color-cs-purple-800: var(--cs-purple-800);
-  --color-cs-purple-900: var(--cs-purple-900);
-  --color-cs-purple-950: var(--cs-purple-950);
+  --color-red-50: var(--cs-red-50);
+  --color-red-100: var(--cs-red-100);
+  --color-red-200: var(--cs-red-200);
+  --color-red-300: var(--cs-red-300);
+  --color-red-400: var(--cs-red-400);
+  --color-red-500: var(--cs-red-500);
+  --color-red-600: var(--cs-red-600);
+  --color-red-700: var(--cs-red-700);
+  --color-red-800: var(--cs-red-800);
+  --color-red-900: var(--cs-red-900);
+  --color-red-950: var(--cs-red-950);
 
   /* Orange */
-  --color-cs-orange-50: var(--cs-orange-50);
-  --color-cs-orange-100: var(--cs-orange-100);
-  --color-cs-orange-200: var(--cs-orange-200);
-  --color-cs-orange-300: var(--cs-orange-300);
-  --color-cs-orange-400: var(--cs-orange-400);
-  --color-cs-orange-500: var(--cs-orange-500);
-  --color-cs-orange-600: var(--cs-orange-600);
-  --color-cs-orange-700: var(--cs-orange-700);
-  --color-cs-orange-800: var(--cs-orange-800);
-  --color-cs-orange-900: var(--cs-orange-900);
-  --color-cs-orange-950: var(--cs-orange-950);
+  --color-orange-50: var(--cs-orange-50);
+  --color-orange-100: var(--cs-orange-100);
+  --color-orange-200: var(--cs-orange-200);
+  --color-orange-300: var(--cs-orange-300);
+  --color-orange-400: var(--cs-orange-400);
+  --color-orange-500: var(--cs-orange-500);
+  --color-orange-600: var(--cs-orange-600);
+  --color-orange-700: var(--cs-orange-700);
+  --color-orange-800: var(--cs-orange-800);
+  --color-orange-900: var(--cs-orange-900);
+  --color-orange-950: var(--cs-orange-950);
 
-  /* 其他颜色（按需添加） */
-  --color-cs-slate-500: var(--cs-slate-500);
-  --color-cs-gray-500: var(--cs-gray-500);
-  --color-cs-indigo-500: var(--cs-indigo-500);
-  --color-cs-violet-500: var(--cs-violet-500);
-  --color-cs-cyan-500: var(--cs-cyan-500);
-  --color-cs-sky-500: var(--cs-sky-500);
-  --color-cs-teal-500: var(--cs-teal-500);
-  --color-cs-fuchsia-500: var(--cs-fuchsia-500);
-  --color-cs-pink-500: var(--cs-pink-500);
-  --color-cs-rose-500: var(--cs-rose-500);
-  --color-cs-yellow-500: var(--cs-yellow-500);
+  /* Amber */
+  --color-amber-50: var(--cs-amber-50);
+  --color-amber-100: var(--cs-amber-100);
+  --color-amber-200: var(--cs-amber-200);
+  --color-amber-300: var(--cs-amber-300);
+  --color-amber-400: var(--cs-amber-400);
+  --color-amber-500: var(--cs-amber-500);
+  --color-amber-600: var(--cs-amber-600);
+  --color-amber-700: var(--cs-amber-700);
+  --color-amber-800: var(--cs-amber-800);
+  --color-amber-900: var(--cs-amber-900);
+  --color-amber-950: var(--cs-amber-950);
+
+  /* Yellow */
+  --color-yellow-50: var(--cs-yellow-50);
+  --color-yellow-100: var(--cs-yellow-100);
+  --color-yellow-200: var(--cs-yellow-200);
+  --color-yellow-300: var(--cs-yellow-300);
+  --color-yellow-400: var(--cs-yellow-400);
+  --color-yellow-500: var(--cs-yellow-500);
+  --color-yellow-600: var(--cs-yellow-600);
+  --color-yellow-700: var(--cs-yellow-700);
+  --color-yellow-800: var(--cs-yellow-800);
+  --color-yellow-900: var(--cs-yellow-900);
+  --color-yellow-950: var(--cs-yellow-950);
+
+  /* Lime (品牌主色) */
+  --color-lime-50: var(--cs-lime-50);
+  --color-lime-100: var(--cs-lime-100);
+  --color-lime-200: var(--cs-lime-200);
+  --color-lime-300: var(--cs-lime-300);
+  --color-lime-400: var(--cs-lime-400);
+  --color-lime-500: var(--cs-lime-500);
+  --color-lime-600: var(--cs-lime-600);
+  --color-lime-700: var(--cs-lime-700);
+  --color-lime-800: var(--cs-lime-800);
+  --color-lime-900: var(--cs-lime-900);
+  --color-lime-950: var(--cs-lime-950);
+
+  /* Green */
+  --color-green-50: var(--cs-green-50);
+  --color-green-100: var(--cs-green-100);
+  --color-green-200: var(--cs-green-200);
+  --color-green-300: var(--cs-green-300);
+  --color-green-400: var(--cs-green-400);
+  --color-green-500: var(--cs-green-500);
+  --color-green-600: var(--cs-green-600);
+  --color-green-700: var(--cs-green-700);
+  --color-green-800: var(--cs-green-800);
+  --color-green-900: var(--cs-green-900);
+  --color-green-950: var(--cs-green-950);
+
+  /* Emerald */
+  --color-emerald-50: var(--cs-emerald-50);
+  --color-emerald-100: var(--cs-emerald-100);
+  --color-emerald-200: var(--cs-emerald-200);
+  --color-emerald-300: var(--cs-emerald-300);
+  --color-emerald-400: var(--cs-emerald-400);
+  --color-emerald-500: var(--cs-emerald-500);
+  --color-emerald-600: var(--cs-emerald-600);
+  --color-emerald-700: var(--cs-emerald-700);
+  --color-emerald-800: var(--cs-emerald-800);
+  --color-emerald-900: var(--cs-emerald-900);
+  --color-emerald-950: var(--cs-emerald-950);
+
+  /* Teal */
+  --color-teal-50: var(--cs-teal-50);
+  --color-teal-100: var(--cs-teal-100);
+  --color-teal-200: var(--cs-teal-200);
+  --color-teal-300: var(--cs-teal-300);
+  --color-teal-400: var(--cs-teal-400);
+  --color-teal-500: var(--cs-teal-500);
+  --color-teal-600: var(--cs-teal-600);
+  --color-teal-700: var(--cs-teal-700);
+  --color-teal-800: var(--cs-teal-800);
+  --color-teal-900: var(--cs-teal-900);
+  --color-teal-950: var(--cs-teal-950);
+
+  /* Cyan */
+  --color-cyan-50: var(--cs-cyan-50);
+  --color-cyan-100: var(--cs-cyan-100);
+  --color-cyan-200: var(--cs-cyan-200);
+  --color-cyan-300: var(--cs-cyan-300);
+  --color-cyan-400: var(--cs-cyan-400);
+  --color-cyan-500: var(--cs-cyan-500);
+  --color-cyan-600: var(--cs-cyan-600);
+  --color-cyan-700: var(--cs-cyan-700);
+  --color-cyan-800: var(--cs-cyan-800);
+  --color-cyan-900: var(--cs-cyan-900);
+  --color-cyan-950: var(--cs-cyan-950);
+
+  /* Sky */
+  --color-sky-50: var(--cs-sky-50);
+  --color-sky-100: var(--cs-sky-100);
+  --color-sky-200: var(--cs-sky-200);
+  --color-sky-300: var(--cs-sky-300);
+  --color-sky-400: var(--cs-sky-400);
+  --color-sky-500: var(--cs-sky-500);
+  --color-sky-600: var(--cs-sky-600);
+  --color-sky-700: var(--cs-sky-700);
+  --color-sky-800: var(--cs-sky-800);
+  --color-sky-900: var(--cs-sky-900);
+  --color-sky-950: var(--cs-sky-950);
+
+  /* Blue */
+  --color-blue-50: var(--cs-blue-50);
+  --color-blue-100: var(--cs-blue-100);
+  --color-blue-200: var(--cs-blue-200);
+  --color-blue-300: var(--cs-blue-300);
+  --color-blue-400: var(--cs-blue-400);
+  --color-blue-500: var(--cs-blue-500);
+  --color-blue-600: var(--cs-blue-600);
+  --color-blue-700: var(--cs-blue-700);
+  --color-blue-800: var(--cs-blue-800);
+  --color-blue-900: var(--cs-blue-900);
+  --color-blue-950: var(--cs-blue-950);
+
+  /* Indigo */
+  --color-indigo-50: var(--cs-indigo-50);
+  --color-indigo-100: var(--cs-indigo-100);
+  --color-indigo-200: var(--cs-indigo-200);
+  --color-indigo-300: var(--cs-indigo-300);
+  --color-indigo-400: var(--cs-indigo-400);
+  --color-indigo-500: var(--cs-indigo-500);
+  --color-indigo-600: var(--cs-indigo-600);
+  --color-indigo-700: var(--cs-indigo-700);
+  --color-indigo-800: var(--cs-indigo-800);
+  --color-indigo-900: var(--cs-indigo-900);
+  --color-indigo-950: var(--cs-indigo-950);
+
+  /* Violet */
+  --color-violet-50: var(--cs-violet-50);
+  --color-violet-100: var(--cs-violet-100);
+  --color-violet-200: var(--cs-violet-200);
+  --color-violet-300: var(--cs-violet-300);
+  --color-violet-400: var(--cs-violet-400);
+  --color-violet-500: var(--cs-violet-500);
+  --color-violet-600: var(--cs-violet-600);
+  --color-violet-700: var(--cs-violet-700);
+  --color-violet-800: var(--cs-violet-800);
+  --color-violet-900: var(--cs-violet-900);
+  --color-violet-950: var(--cs-violet-950);
+
+  /* Purple */
+  --color-purple-50: var(--cs-purple-50);
+  --color-purple-100: var(--cs-purple-100);
+  --color-purple-200: var(--cs-purple-200);
+  --color-purple-300: var(--cs-purple-300);
+  --color-purple-400: var(--cs-purple-400);
+  --color-purple-500: var(--cs-purple-500);
+  --color-purple-600: var(--cs-purple-600);
+  --color-purple-700: var(--cs-purple-700);
+  --color-purple-800: var(--cs-purple-800);
+  --color-purple-900: var(--cs-purple-900);
+  --color-purple-950: var(--cs-purple-950);
+
+  /* Fuchsia */
+  --color-fuchsia-50: var(--cs-fuchsia-50);
+  --color-fuchsia-100: var(--cs-fuchsia-100);
+  --color-fuchsia-200: var(--cs-fuchsia-200);
+  --color-fuchsia-300: var(--cs-fuchsia-300);
+  --color-fuchsia-400: var(--cs-fuchsia-400);
+  --color-fuchsia-500: var(--cs-fuchsia-500);
+  --color-fuchsia-600: var(--cs-fuchsia-600);
+  --color-fuchsia-700: var(--cs-fuchsia-700);
+  --color-fuchsia-800: var(--cs-fuchsia-800);
+  --color-fuchsia-900: var(--cs-fuchsia-900);
+  --color-fuchsia-950: var(--cs-fuchsia-950);
+
+  /* Pink */
+  --color-pink-50: var(--cs-pink-50);
+  --color-pink-100: var(--cs-pink-100);
+  --color-pink-200: var(--cs-pink-200);
+  --color-pink-300: var(--cs-pink-300);
+  --color-pink-400: var(--cs-pink-400);
+  --color-pink-500: var(--cs-pink-500);
+  --color-pink-600: var(--cs-pink-600);
+  --color-pink-700: var(--cs-pink-700);
+  --color-pink-800: var(--cs-pink-800);
+  --color-pink-900: var(--cs-pink-900);
+  --color-pink-950: var(--cs-pink-950);
+
+  /* Rose */
+  --color-rose-50: var(--cs-rose-50);
+  --color-rose-100: var(--cs-rose-100);
+  --color-rose-200: var(--cs-rose-200);
+  --color-rose-300: var(--cs-rose-300);
+  --color-rose-400: var(--cs-rose-400);
+  --color-rose-500: var(--cs-rose-500);
+  --color-rose-600: var(--cs-rose-600);
+  --color-rose-700: var(--cs-rose-700);
+  --color-rose-800: var(--cs-rose-800);
+  --color-rose-900: var(--cs-rose-900);
+  --color-rose-950: var(--cs-rose-950);
 
   /* Black & White */
-  --color-cs-black: var(--cs-black);
-  --color-cs-white: var(--cs-white);
+  --color-black: var(--cs-black);
+  --color-white: var(--cs-white);
 
   /* ==================== */
-  /* Spacing（生成 p-cs-md, gap-cs-lg 等） */
+  /* Spacing & Sizing（自定义尺寸，额外扩展） */
   /* ==================== */
 
-  --spacing-cs-5xs: var(--cs-size-5xs);
-  --spacing-cs-4xs: var(--cs-size-4xs);
-  --spacing-cs-3xs: var(--cs-size-3xs);
-  --spacing-cs-2xs: var(--cs-size-2xs);
-  --spacing-cs-xs: var(--cs-size-xs);
-  --spacing-cs-sm: var(--cs-size-sm);
-  --spacing-cs-md: var(--cs-size-md);
-  --spacing-cs-lg: var(--cs-size-lg);
-  --spacing-cs-xl: var(--cs-size-xl);
-  --spacing-cs-2xl: var(--cs-size-2xl);
-  --spacing-cs-3xl: var(--cs-size-3xl);
-  --spacing-cs-4xl: var(--cs-size-4xl);
-  --spacing-cs-5xl: var(--cs-size-5xl);
-  --spacing-cs-6xl: var(--cs-size-6xl);
-  --spacing-cs-7xl: var(--cs-size-7xl);
-  --spacing-cs-8xl: var(--cs-size-8xl);
+  --spacing-5xs: var(--cs-size-5xs);
+  --spacing-4xs: var(--cs-size-4xs);
+  --spacing-3xs: var(--cs-size-3xs);
+  --spacing-2xs: var(--cs-size-2xs);
+  --spacing-xs: var(--cs-size-xs);
+  --spacing-sm: var(--cs-size-sm);
+  --spacing-md: var(--cs-size-md);
+  --spacing-lg: var(--cs-size-lg);
+  --spacing-xl: var(--cs-size-xl);
+  --spacing-2xl: var(--cs-size-2xl);
+  --spacing-3xl: var(--cs-size-3xl);
+  --spacing-4xl: var(--cs-size-4xl);
+  --spacing-5xl: var(--cs-size-5xl);
+  --spacing-6xl: var(--cs-size-6xl);
+  --spacing-7xl: var(--cs-size-7xl);
+  --spacing-8xl: var(--cs-size-8xl);
 
   /* ==================== */
-  /* Border Radius（生成 rounded-cs-md 等） */
+  /* Border Radius（自定义圆角，额外扩展） */
   /* ==================== */
 
-  --radius-cs-4xs: var(--cs-radius-4xs);
-  --radius-cs-3xs: var(--cs-radius-3xs);
-  --radius-cs-2xs: var(--cs-radius-2xs);
-  --radius-cs-xs: var(--cs-radius-xs);
-  --radius-cs-sm: var(--cs-radius-sm);
-  --radius-cs-md: var(--cs-radius-md);
-  --radius-cs-lg: var(--cs-radius-lg);
-  --radius-cs-xl: var(--cs-radius-xl);
-  --radius-cs-2xl: var(--cs-radius-2xl);
-  --radius-cs-3xl: var(--cs-radius-3xl);
-  --radius-cs-round: var(--cs-radius-round);
-
-  /* ==================== */
-  /* Border Width（生成 border-cs-md 等） */
-  /* ==================== */
-
-  --border-width-cs-sm: var(--cs-border-width-sm);
-  --border-width-cs-md: var(--cs-border-width-md);
-  --border-width-cs-lg: var(--cs-border-width-lg);
+  --radius-4xs: var(--cs-radius-4xs);
+  --radius-3xs: var(--cs-radius-3xs);
+  --radius-2xs: var(--cs-radius-2xs);
+  --radius-xs: var(--cs-radius-xs);
+  --radius-sm: var(--cs-radius-sm);
+  --radius-md: var(--cs-radius-md);
+  --radius-lg: var(--cs-radius-lg);
+  --radius-xl: var(--cs-radius-xl);
+  --radius-2xl: var(--cs-radius-2xl);
+  --radius-3xl: var(--cs-radius-3xl);
+  --radius-round: var(--cs-radius-round);
+}
+
+/* ==================== */
+/* Dark Mode 覆盖 */
+/* ==================== */
+
+@theme dark {
+  --color-background: var(--cs-background);
+  --color-foreground: var(--cs-foreground);
+  --color-card: var(--cs-card);
+  --color-popover: var(--cs-popover);
+  --color-border: var(--cs-border);
+  --color-input: var(--cs-border);
+  --color-secondary: var(--cs-secondary);
+  --color-muted: var(--cs-muted);
+  --color-accent: var(--cs-accent);
+  --color-sidebar: var(--cs-sidebar);
+  --color-sidebar-accent: var(--cs-sidebar-accent);
+}
+
+/* ==================== */
+/* Base Styles（可选） */
+/* ==================== */
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }
diff --git a/packages/ui/src/styles/design-tokens.css b/packages/ui/src/styles/tokens.css
similarity index 98%
rename from packages/ui/src/styles/design-tokens.css
rename to packages/ui/src/styles/tokens.css
index c664f3a955..89574ca520 100644
--- a/packages/ui/src/styles/design-tokens.css
+++ b/packages/ui/src/styles/tokens.css
@@ -411,16 +411,16 @@
   /* Border Radius */
   /* ==================== */
 
-  --cs-radius-4xs: 0.25rem; /* 4px */
-  --cs-radius-3xs: 0.5rem; /* 8px */
-  --cs-radius-2xs: 0.75rem; /* 12px */
-  --cs-radius-xs: 1rem; /* 16px */
-  --cs-radius-sm: 1.5rem; /* 24px */
-  --cs-radius-md: 2rem; /* 32px */
+  --cs-radius-4xs: 4px; /* 4px */
+  --cs-radius-3xs: 8px; /* 8px */
+  --cs-radius-2xs: 12px; /* 12px */
+  --cs-radius-xs: 16px; /* 16px */
+  --cs-radius-sm: 24px; /* 24px */
+  --cs-radius-md: 32px; /* 32px */
   --cs-radius-lg: 2.5rem; /* 40px */
-  --cs-radius-xl: 3rem; /* 48px */
-  --cs-radius-2xl: 3.5rem; /* 56px */
-  --cs-radius-3xl: 4rem; /* 64px */
+  --cs-radius-xl: 48px; /* 48px */
+  --cs-radius-2xl: 56px; /* 56px */
+  --cs-radius-3xl: 64px; /* 64px */
   --cs-radius-round: 999px; /* 保持 px，因为是特殊值 */
 
   /* Border Width */
diff --git a/src/renderer/src/assets/styles/index.css b/src/renderer/src/assets/styles/index.css
index 1f03a6671d..321fa5fc5e 100644
--- a/src/renderer/src/assets/styles/index.css
+++ b/src/renderer/src/assets/styles/index.css
@@ -1,7 +1,6 @@
 @import './color.css';
 @import './font.css';
 @import './markdown.css';
-@import './ant.css';
 @import './scrollbar.css';
 @import './container.css';
 @import './animation.css';
diff --git a/src/renderer/src/assets/styles/tailwind.css b/src/renderer/src/assets/styles/tailwind.css
index 81b9ff93f7..2b90f9d0fb 100644
--- a/src/renderer/src/assets/styles/tailwind.css
+++ b/src/renderer/src/assets/styles/tailwind.css
@@ -1,10 +1,10 @@
-@import 'tailwindcss' source('../../../../renderer');
+@import '../../../../../packages/ui/src/styles/theme.css';
 @import 'tw-animate-css';
 
+/* TODO heroui 迁移完成后即可删除 */
 /* heroui */
-@plugin '../../hero.ts';
-@source '../../../../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
-@source '../../../../../packages/ui/src/**/*.{js,ts,jsx,tsx}';
+/* @plugin '../../hero.ts'; */
+/* @source '../../../../../packages/ui/src*.{js,ts,jsx,tsx}'; */
 
 @custom-variant dark (&:is(.dark *));
 
@@ -21,117 +21,24 @@
 4. Put the new custom utility class into the utilities layer.
 */
 
+/* 应用特定的原始变量 */
 :root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
   --icon: #00000099;
 }
 
 .dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
   --icon: #ffffff99;
 }
 
+/* 应用特定的变量和动画（不与 UI 库冲突） */
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
+  /* Icon 颜色 - 应用特定变量 */
+  --color-icon: var(--icon);
+
+  /* 跑马灯动画 - 应用特定 */
   --animate-marquee: marquee var(--duration) infinite linear;
   --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
-  --color-icon: var(--icon);
+
   @keyframes marquee {
     from {
       transform: translateX(0);
diff --git a/src/renderer/src/components/ErrorBoundary.tsx b/src/renderer/src/components/ErrorBoundary.tsx
index 28ece64f38..cd3b36ec2b 100644
--- a/src/renderer/src/components/ErrorBoundary.tsx
+++ b/src/renderer/src/components/ErrorBoundary.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@heroui/button'
+import { Button } from '@cherrystudio/ui'
 import { formatErrorMessage } from '@renderer/utils/error'
 import { Alert, Space } from 'antd'
 import type { ComponentType, ReactNode } from 'react'
diff --git a/src/renderer/src/pages/home/Messages/Blocks/ErrorBlock.tsx b/src/renderer/src/pages/home/Messages/Blocks/ErrorBlock.tsx
index a891a003cb..fb12b8bfc7 100644
--- a/src/renderer/src/pages/home/Messages/Blocks/ErrorBlock.tsx
+++ b/src/renderer/src/pages/home/Messages/Blocks/ErrorBlock.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@heroui/button'
+import { Button } from '@cherrystudio/ui'
 import CodeViewer from '@renderer/components/CodeViewer'
 import { useCodeStyle } from '@renderer/context/CodeStyleProvider'
 import { useTimer } from '@renderer/hooks/useTimer'