diff --git a/index.html b/index.html
index fa4ae58..fe901e8 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI 写作工坊 - 结构化生成工具</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    
+
+    <!-- 设计系统样式 -->
+    <link rel="stylesheet" href="/src/styles/design-tokens.css">
+    <link rel="stylesheet" href="/src/styles/components.css">
+    <link rel="stylesheet" href="/src/styles/utilities.css">
+
     <style>
         /* 自定义滚动条样式，适配深色主题 */
         ::-webkit-scrollbar { width: 8px; height: 8px; }
diff --git a/package-lock.json b/package-lock.json
index 2ae49c4..1685052 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.5.0",
         "dotenv": "^16.3.1",
+        "playwright": "^1.57.0",
         "vite": "^5.0.0"
       }
     },
@@ -2079,6 +2080,53 @@
         }
       }
     },
+    "node_modules/playwright": {
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.57.0.tgz",
+      "integrity": "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.57.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.57.0.tgz",
+      "integrity": "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
diff --git a/package.json b/package.json
index 6d124f9..fc3879e 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.0",
     "dotenv": "^16.3.1",
+    "playwright": "^1.57.0",
     "vite": "^5.0.0"
   }
 }
diff --git a/src/components/AnalysisPanel.vue b/src/components/AnalysisPanel.vue
index 9dd561a..cfdab8b 100644
--- a/src/components/AnalysisPanel.vue
+++ b/src/components/AnalysisPanel.vue
@@ -1,76 +1,69 @@
 <template>
-  <aside class="w-[400px] flex flex-col border-r border-slate-700 bg-slate-800 shrink-0 h-screen">
+  <aside class="analysis-panel">
     <!-- 头部 -->
-    <header class="p-4 border-b border-slate-700 flex items-center justify-between shrink-0">
-      <h1 class="font-bold text-lg text-white flex items-center gap-2">
-        <span class="text-2xl">🎯</span> 写作范式分析
+    <header class="analysis-header">
+      <h1 class="analysis-header-title">
+        <span style="font-size: var(--text-xl)">🎯</span> 写作范式分析
       </h1>
-      <span class="text-xs px-2 py-1 rounded bg-blue-900 text-blue-300 border border-blue-700">Pro版</span>
+      <span class="badge badge-primary">Pro版</span>
     </header>
 
-    <!-- 内容区 - 添加 min-h-0 确保滚动正常 -->
-    <div class="flex-1 overflow-y-auto p-4 space-y-6 min-h-0">
+    <!-- 内容区 -->
+    <div class="analysis-content">
       <!-- 写作范式库 -->
-      <section>
+      <section class="analysis-section">
         <div class="flex items-center justify-between mb-4">
-          <h3 class="text-sm font-medium text-slate-400">📚 写作范式库</h3>
-          <button 
+          <h3 class="text-sm font-medium text-secondary">📚 写作范式库</h3>
+          <button
             @click="openAddModal"
-            class="text-xs px-2 py-1 bg-green-600 text-white rounded hover:bg-green-500 transition flex items-center gap-1"
+            class="btn btn-analysis btn-success flex items-center gap-1"
           >
             <span>+</span> 新增范式
           </button>
         </div>
-        
+
         <div class="space-y-3">
-          <div 
-            v-for="paradigm in paradigms" 
+          <div
+            v-for="paradigm in paradigms"
             :key="paradigm.id"
             @click="selectParadigm(paradigm)"
-            :class="['bg-slate-700/50 rounded-lg p-4 border transition cursor-pointer', 
-              selectedParadigm?.id === paradigm.id 
-              ? 'border-blue-500 bg-blue-900/20' 
-              : 'border-slate-600 hover:border-blue-500']"
+            :class="['paradigm-card', { 'selected': selectedParadigm?.id === paradigm.id }]"
           >
-            <div class="flex justify-between items-start mb-2">
-              <h4 class="font-medium text-white flex items-center gap-2">
+            <div class="paradigm-card-header">
+              <h4 class="paradigm-card-title">
                 {{ paradigm.icon }} {{ paradigm.name }}
-                <span v-if="paradigm.isNew" class="text-[10px] px-1.5 py-0.5 rounded bg-orange-500 text-white font-bold animate-pulse">
-                  NEW
-                </span>
-                <span v-if="paradigm.isCustom" class="text-[10px] px-1.5 py-0.5 rounded bg-purple-500 text-white font-bold">
-                  自定义
-                </span>
+                <span v-if="paradigm.isNew" class="badge-new animate-pulse">NEW</span>
+                <span v-if="paradigm.isCustom" class="badge-custom">自定义</span>
               </h4>
               <div class="flex items-center gap-1">
-                <button 
+                <button
                   @click.stop="openEditModal(paradigm)"
-                  class="text-xs px-2 py-1 bg-slate-600 text-white rounded hover:bg-slate-500 transition"
+                  class="btn-action"
                   title="编辑范式"
                 >
                   ✏️
                 </button>
-                <button 
+                <button
                   v-if="paradigm.isCustom"
                   @click.stop="deleteParadigm(paradigm)"
-                  class="text-xs px-2 py-1 bg-red-600 text-white rounded hover:bg-red-500 transition"
+                  class="btn-action danger"
                   title="删除范式"
                 >
                   🗑️
                 </button>
-                <button 
+                <button
                   v-if="selectedParadigm?.id === paradigm.id"
                   @click.stop="applyParadigm(paradigm)"
-                  class="text-xs px-2 py-1 bg-blue-600 text-white rounded hover:bg-blue-500 transition"
+                  class="btn-action primary"
                 >
                   应用到写作
                 </button>
               </div>
             </div>
-            <p class="text-xs text-slate-400 mb-2">{{ paradigm.description }}</p>
+            <p class="text-xs text-muted mb-2">{{ paradigm.description }}</p>
             <div class="flex flex-wrap gap-1">
-              <span 
-                v-for="tag in paradigm.tags" 
+              <span
+                v-for="tag in paradigm.tags"
                 :key="tag"
                 :class="['text-xs px-2 py-1 rounded', paradigm.tagClass]"
               >
@@ -82,24 +75,24 @@
       </section>
 
       <!-- 范式分析工具 -->
-      <section>
-        <h3 class="text-sm font-medium text-slate-400 mb-4">🔍 范式分析工具</h3>
-        <textarea 
+      <section class="analysis-section">
+        <h3 class="text-sm font-medium text-secondary mb-4">🔍 范式分析工具</h3>
+        <textarea
           v-model="analysisText"
-          class="w-full h-32 bg-slate-900 border border-slate-700 rounded-lg p-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition placeholder-slate-600 resize-none"
+          class="analysis-textarea"
           placeholder="粘贴文章内容，分析其写作范式..."
         ></textarea>
-        <div class="mt-2 flex gap-2">
-          <button 
+        <div class="flex gap-2 mt-2">
+          <button
             @click="analyzeArticle"
             :disabled="isAnalyzing || !analysisText"
-            class="flex-1 bg-blue-600 hover:bg-blue-500 text-white py-2 rounded-lg text-sm font-medium transition disabled:opacity-50 disabled:cursor-not-allowed"
+            class="btn btn-analysis primary flex-1"
           >
             {{ isAnalyzing ? '正在分析...' : '分析文章范式' }}
           </button>
-          <button 
+          <button
             @click="clearAnalysis"
-            class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg text-sm font-medium transition"
+            class="btn btn-analysis secondary"
           >
             清空
           </button>
@@ -107,48 +100,47 @@
       </section>
 
       <!-- 分析历史 -->
-      <section v-if="analysisHistory.length > 0">
-        <h3 class="text-sm font-medium text-slate-400 mb-4">📝 分析历史</h3>
+      <section v-if="analysisHistory.length > 0" class="analysis-section">
+        <h3 class="text-sm font-medium text-secondary mb-4">📝 分析历史</h3>
         <div class="space-y-2">
-          <div 
-            v-for="(item, index) in analysisHistory" 
+          <div
+            v-for="(item, index) in analysisHistory"
             :key="index"
             @click="loadHistoryItem(item)"
-            class="bg-slate-700/30 rounded p-3 cursor-pointer hover:bg-slate-700/50 transition text-xs"
+            class="history-item"
           >
             <div class="flex justify-between items-center">
-              <span class="text-slate-300">{{ item.paradigm }}</span>
-              <span class="text-slate-500">{{ formatDate(item.timestamp) }}</span>
+              <span class="text-secondary">{{ item.paradigm }}</span>
+              <span class="text-muted">{{ formatDate(item.timestamp) }}</span>
             </div>
-            <p class="text-slate-500 mt-1 truncate">{{ item.preview }}</p>
+            <p class="text-muted mt-1 truncate">{{ item.preview }}</p>
           </div>
         </div>
       </section>
     </div>
 
     <!-- 编辑/新增范式弹窗 -->
-    <div 
+    <div
       v-if="showEditModal"
-      class="fixed inset-0 bg-black/60 flex items-center justify-center z-50"
+      class="paradigm-modal-backdrop"
       @click.self="closeEditModal"
     >
-      <div class="bg-slate-800 rounded-lg w-[500px] max-h-[80vh] overflow-y-auto border border-slate-600 shadow-xl">
-        <div class="p-4 border-b border-slate-700 flex items-center justify-between">
-          <h3 class="font-medium text-white">{{ isAddMode ? '新增写作范式' : '编辑写作范式' }}</h3>
-          <button @click="closeEditModal" class="text-slate-400 hover:text-white transition">✕</button>
+      <div class="paradigm-modal">
+        <div class="p-4 border-b border-default flex items-center justify-between">
+          <h3 class="font-medium text-primary">{{ isAddMode ? '新增写作范式' : '编辑写作范式' }}</h3>
+          <button @click="closeEditModal" class="text-muted hover:text-primary transition">✕</button>
         </div>
-        
+
         <div class="p-4 space-y-4">
           <!-- 图标选择 -->
           <div>
-            <label class="block text-sm text-slate-400 mb-2">图标</label>
-            <div class="flex gap-2 flex-wrap">
-              <button 
-                v-for="icon in iconOptions" 
+            <label class="block text-sm text-secondary mb-2">图标</label>
+            <div class="icon-selector">
+              <button
+                v-for="icon in iconOptions"
                 :key="icon"
                 @click="editForm.icon = icon"
-                :class="['w-10 h-10 rounded-lg text-xl flex items-center justify-center transition', 
-                  editForm.icon === icon ? 'bg-blue-600' : 'bg-slate-700 hover:bg-slate-600']"
+                :class="['icon-option', { 'selected': editForm.icon === icon }]"
               >
                 {{ icon }}
               </button>
@@ -157,36 +149,36 @@
 
           <!-- 名称 -->
           <div>
-            <label class="block text-sm text-slate-400 mb-2">范式名称</label>
-            <input 
+            <label class="block text-sm text-secondary mb-2">范式名称</label>
+            <input
               v-model="editForm.name"
-              class="w-full bg-slate-900 border border-slate-700 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"
+              class="analysis-input"
               placeholder="如：技术博客范式"
             />
           </div>
 
           <!-- 描述 -->
           <div>
-            <label class="block text-sm text-slate-400 mb-2">描述</label>
-            <textarea 
+            <label class="block text-sm text-secondary mb-2">描述</label>
+            <textarea
               v-model="editForm.description"
               rows="2"
-              class="w-full bg-slate-900 border border-slate-700 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition resize-none"
+              class="analysis-textarea"
               placeholder="简要描述此范式的适用场景"
             ></textarea>
           </div>
 
           <!-- 标签 -->
           <div>
-            <label class="block text-sm text-slate-400 mb-2">标签（逗号分隔）</label>
-            <input 
+            <label class="block text-sm text-secondary mb-2">标签（逗号分隔）</label>
+            <input
               v-model="editForm.tagsInput"
-              class="w-full bg-slate-900 border border-slate-700 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"
+              class="analysis-input"
               placeholder="如：问题引入,解决方案,代码示例"
             />
             <div class="flex flex-wrap gap-1 mt-2" v-if="editForm.tagsInput">
-              <span 
-                v-for="tag in editForm.tagsInput.split(',').map(t => t.trim()).filter(t => t)" 
+              <span
+                v-for="tag in editForm.tagsInput.split(',').map(t => t.trim()).filter(t => t)"
                 :key="tag"
                 :class="['text-xs px-2 py-1 rounded', editForm.tagClass]"
               >
@@ -197,14 +189,13 @@
 
           <!-- 标签颜色 -->
           <div>
-            <label class="block text-sm text-slate-400 mb-2">标签颜色</label>
+            <label class="block text-sm text-secondary mb-2">标签颜色</label>
             <div class="flex gap-2 flex-wrap">
-              <button 
-                v-for="color in colorOptions" 
+              <button
+                v-for="color in colorOptions"
                 :key="color.class"
                 @click="editForm.tagClass = color.class"
-                :class="['px-3 py-1 rounded text-xs transition', color.class, 
-                  editForm.tagClass === color.class ? 'ring-2 ring-white' : '']"
+                :class="['color-option', color.class, { 'selected': editForm.tagClass === color.class }]"
               >
                 {{ color.label }}
               </button>
@@ -212,15 +203,15 @@
           </div>
 
           <!-- ⭐ 核心字段：完整 Prompt -->
-          <div class="border-t border-slate-700 pt-4 mt-4">
-            <label class="block text-sm text-slate-400 mb-2 flex items-center gap-2">
+          <div class="border-t border-default pt-4 mt-4">
+            <label class="block text-sm text-secondary mb-2 flex items-center gap-2">
               <span>✨</span> 完整 Prompt（核心字段）
-              <span class="text-xs text-slate-500 font-normal">粘贴您的完整提示词</span>
+              <span class="text-xs text-muted font-normal">粘贴您的完整提示词</span>
             </label>
-            <textarea 
+            <textarea
               v-model="editForm.specializedPrompt"
               rows="12"
-              class="w-full bg-slate-900 border border-slate-700 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition resize-y font-mono leading-relaxed"
+              class="analysis-textarea resize-y font-mono leading-relaxed"
               placeholder="在此粘贴您的完整 Prompt...
 
 示例：
@@ -235,23 +226,23 @@
 2. 深度分析思想根源
 ..."
             ></textarea>
-            <p class="text-xs text-slate-500 mt-2">
+            <p class="text-xs text-muted mt-2">
               💡 提示：这是 AI 调用时的核心指令。完整的 Prompt 应包含角色、目标、步骤和输出格式。
             </p>
           </div>
         </div>
 
-        <div class="p-4 border-t border-slate-700 flex justify-end gap-2">
-          <button 
+        <div class="p-4 border-t border-default flex justify-end gap-2">
+          <button
             @click="closeEditModal"
-            class="px-4 py-2 bg-slate-700 text-white rounded-lg text-sm hover:bg-slate-600 transition"
+            class="btn btn-analysis secondary"
           >
             取消
           </button>
-          <button 
+          <button
             @click="saveParadigm"
             :disabled="!editForm.name"
-            class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-500 transition disabled:opacity-50 disabled:cursor-not-allowed"
+            class="btn btn-analysis primary"
           >
             {{ isAddMode ? '添加' : '保存' }}
           </button>
@@ -592,3 +583,287 @@ onMounted(() => {
   }
 })
 </script>
+
+<style scoped>
+/* ========== 使用设计令牌系统 ========== */
+
+/* 侧边栏容器 */
+.analysis-panel {
+  width: 400px;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border-default);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+  height: 100vh;
+}
+
+/* 头部 */
+.analysis-header {
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--border-default);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.analysis-header-title {
+  font-weight: var(--font-semibold);
+  font-size: var(--text-lg);
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* 内容区 */
+.analysis-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-4);
+}
+
+.analysis-section {
+  margin-bottom: var(--space-6);
+}
+
+.analysis-section:last-child {
+  margin-bottom: 0;
+}
+
+/* 范式卡片 */
+.paradigm-card {
+  background: var(--bg-elevated);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  border: 1px solid var(--border-default);
+  transition: all var(--transition-fast);
+  cursor: pointer;
+}
+
+.paradigm-card:hover {
+  border-color: var(--accent-primary);
+}
+
+.paradigm-card.selected {
+  border-color: var(--accent-primary);
+  background: var(--info-bg);
+}
+
+.paradigm-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: var(--space-2);
+}
+
+.paradigm-card-title {
+  font-weight: var(--font-medium);
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* 徽章 */
+.badge-new {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  background: var(--accent-warning);
+  color: var(--text-inverse);
+  font-weight: var(--font-semibold);
+}
+
+.badge-custom {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  background: #a855f7;
+  color: var(--text-inverse);
+  font-weight: var(--font-semibold);
+}
+
+/* 分析历史项 */
+.history-item {
+  background: var(--bg-elevated);
+  border-radius: var(--radius-md);
+  padding: var(--space-3);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.history-item:hover {
+  background: var(--bg-sunken);
+}
+
+/* 模态框 */
+.paradigm-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal-backdrop);
+}
+
+.paradigm-modal {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  width: 500px;
+  max-height: 80vh;
+  overflow-y: auto;
+  border: 1px solid var(--border-default);
+  box-shadow: var(--shadow-lg);
+}
+
+/* 图标选择器 */
+.icon-selector {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+.icon-option {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-lg);
+  font-size: var(--text-xl);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-fast);
+}
+
+.icon-option.selected {
+  background: var(--accent-primary);
+}
+
+.icon-option:not(.selected) {
+  background: var(--bg-elevated);
+}
+
+.icon-option:not(.selected):hover {
+  background: var(--bg-sunken);
+}
+
+/* 颜色选择器 */
+.color-option {
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-md);
+  font-size: var(--text-xs);
+  transition: all var(--transition-fast);
+}
+
+.color-option.selected {
+  box-shadow: 0 0 0 2px var(--text-primary);
+}
+
+/* 输入框 */
+.analysis-input {
+  width: 100%;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  padding: var(--space-3);
+  font-size: var(--text-sm);
+}
+
+.analysis-input:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 2px var(--info-bg);
+}
+
+.analysis-textarea {
+  width: 100%;
+  height: 128px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  padding: var(--space-3);
+  font-size: var(--text-sm);
+  resize: none;
+}
+
+.analysis-textarea:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 2px var(--info-bg);
+}
+
+/* 按钮 */
+.btn-analysis {
+  font-size: var(--text-xs);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+  border: none;
+  cursor: pointer;
+}
+
+.btn-analysis.primary {
+  background: var(--accent-primary);
+  color: var(--text-inverse);
+}
+
+.btn-analysis.primary:hover {
+  background: var(--accent-primary-hover);
+}
+
+.btn-analysis.secondary {
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+}
+
+.btn-analysis.secondary:hover {
+  background: var(--bg-sunken);
+}
+
+.btn-analysis:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-action {
+  font-size: var(--text-xs);
+  padding: var(--space-2);
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+}
+
+.btn-action:hover {
+  background: var(--bg-sunken);
+}
+
+.btn-action.primary {
+  background: var(--accent-primary);
+  color: var(--text-inverse);
+}
+
+.btn-action.primary:hover {
+  background: var(--accent-primary-hover);
+}
+
+.btn-action.danger {
+  background: var(--accent-danger);
+  color: var(--text-inverse);
+}
+
+.btn-action.danger:hover {
+  opacity: 0.9;
+}
+
+.btn-action.success {
+  background: var(--accent-success);
+  color: var(--text-inverse);
+}
+
+.btn-action.success:hover {
+  opacity: 0.9;
+}
+</style>
diff --git a/src/components/ComparePanel.vue b/src/components/ComparePanel.vue
index 207097e..8ac9db3 100644
--- a/src/components/ComparePanel.vue
+++ b/src/components/ComparePanel.vue
@@ -1764,4 +1764,326 @@ const runCompare = async () => {
   writing-mode: vertical-rl;
   text-orientation: mixed;
 }
+
+/* ========== 使用设计令牌系统 ========== */
+
+/* 页面容器 */
+.compare-page {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-primary);
+}
+
+/* 头部 */
+.compare-header {
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--border-default);
+  background: var(--bg-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: between;
+  flex-shrink: 0;
+}
+
+.compare-header-title {
+  font-weight: var(--font-semibold);
+  font-size: var(--text-lg);
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* 范式上下文提示条 */
+.paradigm-bar {
+  padding: var(--space-2) var(--space-4);
+  background: var(--info-bg);
+  border-bottom: 1px solid var(--accent-primary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+/* 主体内容区 */
+.compare-main {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+/* 面板区域 */
+.panel-section {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.panel-left {
+  width: 40%;
+  border-right: 1px solid var(--border-default);
+}
+
+.panel-right {
+  flex: 1;
+}
+
+/* 面板头部 */
+.panel-header {
+  padding: var(--space-3);
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-default);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.panel-title {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.panel-title-left {
+  color: var(--accent-warning);
+}
+
+.panel-title-right {
+  color: var(--accent-primary);
+}
+
+/* 段落卡片 */
+.paragraph-card {
+  padding: var(--space-3);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-default);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.paragraph-card:hover {
+  border-color: var(--accent-primary);
+}
+
+.paragraph-card-selected-left {
+  background: var(--warning-bg);
+  border-color: var(--accent-warning);
+  box-shadow: 0 0 0 2px var(--accent-warning);
+}
+
+.paragraph-card-selected-right {
+  background: var(--info-bg);
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 2px var(--accent-primary);
+}
+
+/* 底部操作区 */
+.compare-footer {
+  padding: var(--space-4);
+  background: var(--bg-secondary);
+  border-top: 1px solid var(--border-default);
+  flex-shrink: 0;
+}
+
+/* 按钮统一使用 .btn 类 */
+.btn-header {
+  font-size: var(--text-xs);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+  transition: all var(--transition-fast);
+  border: none;
+  cursor: pointer;
+}
+
+.btn-header:hover {
+  background: var(--bg-sunken);
+  color: var(--text-primary);
+}
+
+.btn-primary {
+  background: var(--accent-primary);
+  color: var(--text-inverse);
+}
+
+.btn-primary:hover {
+  background: var(--accent-primary-hover);
+}
+
+.btn-secondary {
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+}
+
+/* 视图切换器 */
+.view-toggle-group {
+  display: flex;
+  background: var(--bg-primary);
+  padding: var(--space-1);
+  border-radius: var(--radius-lg);
+  gap: var(--space-1);
+}
+
+.view-toggle-btn {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  transition: all var(--transition-fast);
+  cursor: pointer;
+  border: none;
+  background: transparent;
+}
+
+.view-toggle-btn:hover {
+  color: var(--text-primary);
+}
+
+.view-toggle-btn.active {
+  background: var(--bg-secondary);
+  color: var(--accent-primary);
+  box-shadow: var(--shadow-xs);
+}
+
+/* 输入框 */
+.panel-textarea {
+  width: 100%;
+  height: 96px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  padding: var(--space-3);
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+}
+
+.panel-textarea:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 2px var(--info-bg);
+}
+
+/* 模态框 */
+.rewrite-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal-backdrop);
+}
+
+.rewrite-modal {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  width: 900px;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow-lg);
+}
+
+.rewrite-modal-header {
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--border-default);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.rewrite-modal-body {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 300px;
+}
+
+.rewrite-modal-footer {
+  padding: var(--space-4);
+  border-top: 1px solid var(--border-default);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* 差异对比区域 */
+.diff-box {
+  background: var(--bg-primary);
+  border-radius: var(--radius-lg);
+  padding: var(--space-3);
+  border: 1px solid var(--border-default);
+}
+
+/* 差异片段样式 */
+.diff-unchanged {
+  color: var(--text-muted);
+}
+
+.diff-removed {
+  background: var(--warning-bg);
+  color: var(--accent-warning);
+  padding: 2px 4px;
+  border-radius: var(--radius-sm);
+  text-decoration: line-through;
+}
+
+.diff-added {
+  background: var(--success-bg);
+  color: var(--accent-success);
+  padding: 2px 4px;
+  border-radius: var(--radius-sm);
+}
+
+.diff-modified {
+  background: var(--warning-bg);
+  color: var(--accent-warning);
+  padding: 2px 4px;
+  border-radius: var(--radius-sm);
+}
+
+.diff-selected-left {
+  background: rgba(245, 158, 11, 0.4);
+  color: #fef3c7;
+  box-shadow: 0 0 0 2px var(--accent-warning);
+}
+
+.diff-selected-right {
+  background: rgba(96, 165, 250, 0.4);
+  color: #dbeafe;
+  box-shadow: 0 0 0 2px var(--accent-primary);
+}
+
+/* 检查结果状态 */
+.check-pass {
+  background: var(--success-bg);
+  color: var(--accent-success);
+}
+
+.check-warning {
+  background: var(--warning-bg);
+  color: var(--accent-warning);
+}
+
+.check-fail {
+  background: var(--danger-bg);
+  color: var(--accent-danger);
+}
+
+/* 徽章 */
+.badge-count {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+/* 进度指示器 */
+.progress-text {
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+}
 </style>
diff --git a/src/components/DiffAnnotationPanel.vue b/src/components/DiffAnnotationPanel.vue
index 2eab3b0..7f54d20 100644
--- a/src/components/DiffAnnotationPanel.vue
+++ b/src/components/DiffAnnotationPanel.vue
@@ -437,3 +437,309 @@ const exportToWord = async () => {
   }
 }
 </script>
+
+<style scoped>
+/* ========== 使用设计令牌系统 ========== */
+
+/* 页面容器 */
+.diff-page {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-primary);
+}
+
+/* 头部工具栏 */
+.diff-header {
+  height: 56px;
+  border-bottom: 1px solid var(--border-default);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--space-6);
+  background: var(--bg-primary);
+  flex-shrink: 0;
+}
+
+.diff-header-title {
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* 图例说明 */
+.diff-legend {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.diff-legend-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.diff-legend-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: var(--radius-md);
+}
+
+.diff-legend-dot.modified {
+  background: rgba(245, 158, 11, 0.5);
+}
+
+.diff-legend-dot.added {
+  background: rgba(34, 197, 94, 0.5);
+}
+
+.diff-legend-dot.removed {
+  background: rgba(239, 68, 68, 0.5);
+}
+
+/* 差异统计 */
+.diff-stats {
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  border-left: 1px solid var(--border-default);
+  padding-left: var(--space-4);
+}
+
+.diff-stats .modified {
+  color: var(--accent-warning);
+}
+
+.diff-stats .added {
+  color: var(--accent-success);
+}
+
+.diff-stats .removed {
+  color: var(--accent-danger);
+}
+
+/* 主内容区 */
+.diff-main {
+  flex: 1;
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* 面板区域 */
+.diff-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.diff-panel-left {
+  border-right: 1px solid var(--border-default);
+}
+
+/* 面板头部 */
+.diff-panel-header {
+  padding: var(--space-3);
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-default);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.diff-panel-title {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.diff-panel-title.left {
+  color: var(--accent-warning);
+}
+
+.diff-panel-title.right {
+  color: var(--accent-primary);
+}
+
+/* 差异显示区 */
+.diff-display {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-4);
+  background: rgba(15, 23, 42, 0.5);
+  min-height: 0;
+}
+
+.diff-content {
+  font-size: var(--text-sm);
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+/* 差异片段样式 */
+.diff-unchanged {
+  color: var(--text-secondary);
+}
+
+.diff-modified {
+  background: rgba(245, 158, 11, 0.3);
+  color: #fed7aa;
+  padding: 2px 4px;
+  border-radius: var(--radius-sm);
+}
+
+.diff-removed {
+  background: rgba(239, 68, 68, 0.3);
+  color: #fecaca;
+  padding: 2px 4px;
+  border-radius: var(--radius-sm);
+  text-decoration: line-through;
+}
+
+.diff-added {
+  background: rgba(34, 197, 94, 0.3);
+  color: #bbf7d0;
+  padding: 2px 4px;
+  border-radius: var(--radius-sm);
+}
+
+/* 空状态 */
+.diff-empty-state {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+
+.diff-empty-icon {
+  font-size: 3rem;
+  margin-bottom: var(--space-3);
+  opacity: 0.3;
+}
+
+/* 可拖动分割线 */
+.diff-resizer {
+  height: 8px;
+  background: var(--bg-elevated);
+  cursor: ns-resize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background var(--transition-fast);
+}
+
+.diff-resizer:hover {
+  background: var(--border-strong);
+}
+
+.diff-resizer-handle {
+  width: 48px;
+  height: 4px;
+  background: var(--text-muted);
+  border-radius: var(--radius-full);
+}
+
+/* 输入区 */
+.diff-input-area {
+  padding: var(--space-3);
+  border-top: 1px solid var(--border-default);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+.diff-textarea {
+  width: 100%;
+  height: 100%;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  padding: var(--space-3);
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+}
+
+.diff-textarea:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 2px var(--info-bg);
+}
+
+/* 按钮样式 */
+.btn-diff {
+  font-size: var(--text-xs);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+  border: none;
+  cursor: pointer;
+}
+
+.btn-diff-secondary {
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+}
+
+.btn-diff-secondary:hover {
+  background: var(--bg-sunken);
+  color: var(--text-primary);
+}
+
+.btn-diff-primary {
+  background: var(--accent-primary);
+  color: var(--text-inverse);
+}
+
+.btn-diff-primary:hover {
+  background: var(--accent-primary-hover);
+}
+
+.btn-diff:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 来源切换器 */
+.source-toggle {
+  display: flex;
+  background: var(--bg-primary);
+  padding: var(--space-1);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-default);
+}
+
+.source-toggle-btn {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-xs);
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+}
+
+.source-toggle-btn.active {
+  background: var(--accent-primary);
+  color: var(--text-inverse);
+}
+
+.source-toggle-btn:not(.active) {
+  color: var(--text-secondary);
+}
+
+.source-toggle-btn:not(.active):hover {
+  color: var(--text-primary);
+}
+</style>
diff --git a/src/components/DocumentsPanel.vue b/src/components/DocumentsPanel.vue
index a7a0f97..d880ec5 100644
--- a/src/components/DocumentsPanel.vue
+++ b/src/components/DocumentsPanel.vue
@@ -1,62 +1,56 @@
 <template>
-  <aside class="w-[400px] h-screen flex flex-col border-r border-slate-700 bg-slate-800 shrink-0">
+  <aside class="docs-panel">
     <!-- 头部 -->
-    <header class="p-4 border-b border-slate-700 flex items-center justify-between">
-      <h1 class="font-bold text-lg text-white flex items-center gap-2">
-        <span class="text-2xl">📂</span> 文稿管理
+    <header class="docs-header">
+      <h1 class="docs-header-title">
+        <span style="font-size: var(--text-xl)">📂</span> 文稿管理
       </h1>
-      <span class="text-xs px-2 py-1 rounded bg-blue-900 text-blue-300 border border-blue-700">Pro版</span>
+      <span class="badge badge-primary">Pro版</span>
     </header>
 
     <!-- 工具栏 -->
-    <div class="p-4 border-b border-slate-700 flex items-center justify-between">
+    <div class="docs-toolbar">
       <div class="flex gap-2">
-        <button 
-          v-for="filter in statusFilters" 
+        <button
+          v-for="filter in statusFilters"
           :key="filter.value"
           @click="currentFilter = filter.value"
-          :class="['text-xs px-2 py-1 rounded transition',
-            currentFilter === filter.value 
-              ? 'bg-blue-600 text-white' 
-              : 'bg-slate-700 text-slate-300 hover:bg-slate-600']"
+          :class="['filter-btn', { 'active': currentFilter === filter.value }]"
         >
           {{ filter.label }} ({{ getCountByStatus(filter.value) }})
         </button>
       </div>
-      <button 
+      <button
         @click="createNewDocument"
-        class="text-xs px-3 py-1.5 rounded bg-green-600 text-white hover:bg-green-500 transition"
+        class="create-btn"
       >
         + 新建文稿
       </button>
     </div>
 
     <!-- 文稿列表 -->
-    <div class="flex-1 overflow-y-auto p-4 space-y-3 min-h-0">
-      <div v-if="filteredDocuments.length === 0" class="text-center text-slate-500 py-8">
-        <span class="text-4xl block mb-2">📄</span>
+    <div class="docs-list">
+      <div v-if="filteredDocuments.length === 0" class="text-center text-muted py-8">
+        <span style="font-size: var(--text-2xl); display: block; margin-bottom: var(--space-2)">📄</span>
         <p class="text-sm">暂无文稿</p>
       </div>
-      
-      <div 
-        v-for="doc in filteredDocuments" 
+
+      <div
+        v-for="doc in filteredDocuments"
         :key="doc.id"
         @click="selectDocument(doc)"
-        :class="['p-3 rounded-lg border cursor-pointer transition',
-          selectedDocId === doc.id 
-            ? 'bg-blue-900/30 border-blue-500' 
-            : 'bg-slate-900/50 border-slate-700 hover:border-slate-500']"
+        :class="['doc-card', { 'selected': selectedDocId === doc.id }]"
       >
         <div class="flex items-start justify-between mb-2">
-          <h3 class="font-medium text-white text-sm truncate flex-1">{{ doc.title }}</h3>
-          <span :class="['text-xs px-1.5 py-0.5 rounded', statusStyles[doc.status]]">
+          <h3 class="font-medium text-primary text-sm truncate flex-1">{{ doc.title }}</h3>
+          <span :class="['status-badge', statusStyles[doc.status]]">
             {{ statusLabels[doc.status] }}
           </span>
         </div>
-        <p class="text-xs text-slate-500 line-clamp-2 mb-2">
+        <p class="text-xs text-muted line-clamp-2 mb-2">
           {{ doc.content ? doc.content.substring(0, 100) + '...' : '空白文稿' }}
         </p>
-        <div class="flex items-center justify-between text-xs text-slate-600">
+        <div class="flex items-center justify-between text-xs text-muted">
           <span>{{ doc.word_count || 0 }} 字</span>
           <span>{{ formatDate(doc.updated_at) }}</span>
         </div>
@@ -64,29 +58,29 @@
     </div>
 
     <!-- 底部操作区 -->
-    <div v-if="selectedDocId" class="p-4 border-t border-slate-700 space-y-2">
+    <div v-if="selectedDocId" class="docs-footer">
       <div class="flex gap-2">
-        <button 
+        <button
           @click="openDocument"
-          class="flex-1 text-xs py-2 rounded bg-blue-600 text-white hover:bg-blue-500 transition"
+          class="action-btn primary"
         >
           📝 编辑
         </button>
-        <button 
+        <button
           @click="duplicateDocument"
-          class="flex-1 text-xs py-2 rounded bg-slate-600 text-white hover:bg-slate-500 transition"
+          class="action-btn secondary"
         >
           📋 复制
         </button>
-        <button 
+        <button
           @click="toggleVersionPanel"
-          class="flex-1 text-xs py-2 rounded bg-cyan-600 text-white hover:bg-cyan-500 transition"
+          class="action-btn success"
         >
           🕰️ 版本
         </button>
-        <button 
+        <button
           @click="confirmDelete"
-          class="text-xs px-3 py-2 rounded bg-red-900/50 text-red-300 hover:bg-red-800/50 transition"
+          class="action-btn danger"
         >
           🗑️
         </button>
@@ -94,20 +88,20 @@
     </div>
 
     <!-- 删除确认弹窗 -->
-    <div v-if="showDeleteConfirm" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-      <div class="bg-slate-800 rounded-lg p-6 w-80 border border-slate-600">
-        <h3 class="text-lg font-bold text-white mb-4">确认删除</h3>
-        <p class="text-sm text-slate-400 mb-6">确定要删除这篇文稿吗？此操作不可恢复。</p>
-        <div class="flex gap-3">
-          <button 
+    <div v-if="showDeleteConfirm" class="confirm-modal-backdrop">
+      <div class="confirm-modal">
+        <h3 class="confirm-modal-title">确认删除</h3>
+        <p class="confirm-modal-text">确定要删除这篇文稿吗？此操作不可恢复。</p>
+        <div class="confirm-modal-actions">
+          <button
             @click="showDeleteConfirm = false"
-            class="flex-1 py-2 rounded bg-slate-600 text-white hover:bg-slate-500 transition"
+            class="action-btn secondary"
           >
             取消
           </button>
-          <button 
+          <button
             @click="deleteSelectedDocument"
-            class="flex-1 py-2 rounded bg-red-600 text-white hover:bg-red-500 transition"
+            class="action-btn danger"
           >
             删除
           </button>
@@ -154,9 +148,9 @@ const statusLabels = {
 
 // 状态样式
 const statusStyles = {
-  draft: 'bg-yellow-900/50 text-yellow-300',
-  published: 'bg-green-900/50 text-green-300',
-  archived: 'bg-slate-700 text-slate-400'
+  draft: 'draft',
+  published: 'published',
+  archived: 'archived'
 }
 
 // 筛选后的文稿
@@ -285,3 +279,221 @@ onMounted(() => {
   loadDocuments()
 })
 </script>
+
+<style scoped>
+/* ========== 使用设计令牌系统 ========== */
+
+/* 侧边栏容器 */
+.docs-panel {
+  width: 400px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border-default);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+/* 头部 */
+.docs-header {
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--border-default);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.docs-header-title {
+  font-weight: var(--font-semibold);
+  font-size: var(--text-lg);
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* 工具栏 */
+.docs-toolbar {
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--border-default);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* 筛选按钮 */
+.filter-btn {
+  font-size: var(--text-xs);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+}
+
+.filter-btn.active {
+  background: var(--accent-primary);
+  color: var(--text-inverse);
+}
+
+.filter-btn:not(.active) {
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+}
+
+.filter-btn:not(.active):hover {
+  background: var(--bg-sunken);
+  color: var(--text-primary);
+}
+
+/* 文稿列表 */
+.docs-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-4);
+}
+
+/* 文稿卡片 */
+.doc-card {
+  padding: var(--space-3);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-default);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.doc-card.selected {
+  background: var(--info-bg);
+  border-color: var(--accent-primary);
+}
+
+.doc-card:not(.selected) {
+  background: var(--bg-primary);
+}
+
+.doc-card:not(.selected):hover {
+  border-color: var(--border-strong);
+}
+
+/* 状态徽章 */
+.status-badge {
+  font-size: var(--text-xs);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+}
+
+.status-badge.draft {
+  background: var(--warning-bg);
+  color: var(--accent-warning);
+}
+
+.status-badge.published {
+  background: var(--success-bg);
+  color: var(--accent-success);
+}
+
+.status-badge.archived {
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+}
+
+/* 底部操作区 */
+.docs-footer {
+  padding: var(--space-4);
+  border-top: 1px solid var(--border-default);
+}
+
+/* 操作按钮 */
+.action-btn {
+  flex: 1;
+  font-size: var(--text-xs);
+  padding: var(--space-2);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+}
+
+.action-btn.primary {
+  background: var(--accent-primary);
+  color: var(--text-inverse);
+}
+
+.action-btn.primary:hover {
+  background: var(--accent-primary-hover);
+}
+
+.action-btn.secondary {
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+}
+
+.action-btn.secondary:hover {
+  background: var(--bg-sunken);
+}
+
+.action-btn.danger {
+  background: var(--danger-bg);
+  color: var(--accent-danger);
+}
+
+.action-btn.danger:hover {
+  background: rgba(248, 113, 113, 0.2);
+}
+
+.action-btn.success {
+  background: var(--accent-success);
+  color: var(--text-inverse);
+}
+
+.action-btn.success:hover {
+  opacity: 0.9;
+}
+
+/* 新建按钮 */
+.create-btn {
+  font-size: var(--text-xs);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  background: var(--accent-success);
+  color: var(--text-inverse);
+  transition: all var(--transition-fast);
+}
+
+.create-btn:hover {
+  background: #22c55e;
+}
+
+/* 确认弹窗 */
+.confirm-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal-backdrop);
+}
+
+.confirm-modal {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
+  width: 320px;
+  border: 1px solid var(--border-default);
+}
+
+.confirm-modal-title {
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+  margin-bottom: var(--space-4);
+}
+
+.confirm-modal-text {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  margin-bottom: var(--space-6);
+}
+
+.confirm-modal-actions {
+  display: flex;
+  gap: var(--space-3);
+}
+</style>
diff --git a/src/components/GlobalSidebar.vue b/src/components/GlobalSidebar.vue
index 251ff68..1c15394 100644
--- a/src/components/GlobalSidebar.vue
+++ b/src/components/GlobalSidebar.vue
@@ -1,56 +1,43 @@
 <template>
-  <aside class="w-16 h-screen flex flex-col items-center py-6 bg-slate-900 border-r border-slate-800 shrink-0 z-50">
+  <aside class="sidebar">
     <!-- Logo/Home -->
-    <div class="mb-8 text-2xl filter drop-shadow-[0_0_8px_rgba(59,130,246,0.5)]">
+    <div class="sidebar-logo">
       🚀
     </div>
 
     <!-- 导航项 -->
-    <nav class="flex-1 w-full flex flex-col items-center gap-4">
-      <button 
-        v-for="item in navItems" 
+    <nav class="sidebar-nav">
+      <button
+        v-for="item in navItems"
         :key="item.id"
         @click="switchPage(item.id)"
-        :class="[
-          'group relative w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300',
-          currentPage === item.id 
-            ? 'bg-blue-600 text-white shadow-[0_0_15px_rgba(37,99,235,0.4)]' 
-            : 'text-slate-500 hover:bg-slate-800 hover:text-slate-300'
-        ]"
+        :class="['nav-item', { active: currentPage === item.id }]"
         :title="item.label"
       >
-        <span class="text-xl">{{ item.icon }}</span>
-        
+        <span class="nav-icon">{{ item.icon }}</span>
+
         <!-- Tooltip -->
-        <div class="absolute left-full ml-3 px-2 py-1 bg-slate-800 text-white text-xs rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 shadow-xl border border-slate-700 pointer-events-none">
+        <div class="nav-tooltip">
           {{ item.label }}
-          <div class="absolute left-[-4px] top-1/2 -translate-y-1/2 w-2 h-2 bg-slate-800 border-l border-b border-slate-700 rotate-45"></div>
+          <div class="nav-tooltip-arrow"></div>
         </div>
 
         <!-- Active Indicator -->
-        <div 
-          v-if="currentPage === item.id"
-          class="absolute -left-0 w-1 h-6 bg-blue-400 rounded-r-full"
-        ></div>
+        <div v-if="currentPage === item.id" class="nav-indicator"></div>
       </button>
     </nav>
 
     <!-- 底部：设置 -->
-    <div class="mt-auto">
-      <button 
+    <div class="sidebar-footer">
+      <button
         @click="switchPage('settings')"
-        :class="[
-          'group relative w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300',
-          currentPage === 'settings' 
-            ? 'bg-slate-700 text-white' 
-            : 'text-slate-500 hover:bg-slate-800 hover:text-slate-300'
-        ]"
+        :class="['nav-item', { active: currentPage === 'settings' }]"
         title="设置"
       >
-        <span class="text-xl">⚙️</span>
-        <div class="absolute left-full ml-3 px-2 py-1 bg-slate-800 text-white text-xs rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 shadow-xl border border-slate-700 pointer-events-none">
+        <span class="nav-icon">⚙️</span>
+        <div class="nav-tooltip">
           设置
-          <div class="absolute left-[-4px] top-1/2 -translate-y-1/2 w-2 h-2 bg-slate-800 border-l border-b border-slate-700 rotate-45"></div>
+          <div class="nav-tooltip-arrow"></div>
         </div>
       </button>
     </div>
@@ -78,3 +65,120 @@ const switchPage = (page) => {
   appStore.setCurrentPage(page)
 }
 </script>
+
+<style scoped>
+/* 侧边栏容器 */
+.sidebar {
+  width: 64px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--space-6) 0;
+  background: var(--bg-primary);
+  border-right: 1px solid var(--border-default);
+  flex-shrink: 0;
+  z-index: 50;
+}
+
+/* Logo */
+.sidebar-logo {
+  margin-bottom: var(--space-8);
+  font-size: var(--text-2xl);
+  filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.5));
+}
+
+/* 导航区域 */
+.sidebar-nav {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+/* 导航项 */
+.nav-item {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-xl);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  transition: all var(--transition-normal);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+}
+
+.nav-item:hover {
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+}
+
+.nav-item.active {
+  background: var(--accent-primary);
+  color: var(--text-inverse);
+  box-shadow: 0 0 15px rgba(96, 165, 250, 0.4);
+}
+
+.nav-icon {
+  font-size: var(--text-xl);
+}
+
+/* Tooltip */
+.nav-tooltip {
+  position: absolute;
+  left: 100%;
+  margin-left: var(--space-3);
+  padding: var(--space-1) var(--space-2);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: var(--text-xs);
+  border-radius: var(--radius-md);
+  opacity: 0;
+  visibility: hidden;
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+  z-index: 50;
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--border-default);
+  pointer-events: none;
+}
+
+.nav-item:hover .nav-tooltip {
+  opacity: 1;
+  visibility: visible;
+}
+
+.nav-tooltip-arrow {
+  position: absolute;
+  left: -4px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 8px;
+  background: var(--bg-secondary);
+  border-left: 1px solid var(--border-default);
+  border-bottom: 1px solid var(--border-default);
+  rotate: 45deg;
+}
+
+/* 激活指示器 */
+.nav-indicator {
+  position: absolute;
+  left: 0;
+  width: 4px;
+  height: 24px;
+  background: var(--accent-primary);
+  border-radius: 0 var(--radius-full) var(--radius-full) 0;
+}
+
+/* 底部区域 */
+.sidebar-footer {
+  margin-top: auto;
+}
+</style>
diff --git a/src/components/MaterialsPanel.vue b/src/components/MaterialsPanel.vue
index ddb8857..f81858f 100644
--- a/src/components/MaterialsPanel.vue
+++ b/src/components/MaterialsPanel.vue
@@ -1,68 +1,62 @@
 <template>
-  <aside class="w-[400px] h-screen flex flex-col border-r border-slate-700 bg-slate-800 shrink-0">
+  <aside class="docs-panel">
     <!-- 头部 -->
-    <header class="p-4 border-b border-slate-700 flex items-center justify-between">
-      <h1 class="font-bold text-lg text-white flex items-center gap-2">
-        <span class="text-2xl">📚</span> 素材库
+    <header class="docs-header">
+      <h1 class="docs-header-title">
+        <span style="font-size: var(--text-xl)">📚</span> 素材库
       </h1>
-      <span class="text-xs px-2 py-1 rounded bg-blue-900 text-blue-300 border border-blue-700">Pro版</span>
+      <span class="badge badge-primary">Pro版</span>
     </header>
 
     <!-- 工具栏 -->
-    <div class="p-4 border-b border-slate-700 flex items-center justify-between">
+    <div class="docs-toolbar">
       <div class="flex gap-1 flex-wrap">
-        <button 
-          v-for="filter in typeFilters" 
+        <button
+          v-for="filter in typeFilters"
           :key="filter.value"
           @click="currentFilter = filter.value"
-          :class="['text-xs px-2 py-1 rounded transition',
-            currentFilter === filter.value 
-              ? 'bg-blue-600 text-white' 
-              : 'bg-slate-700 text-slate-300 hover:bg-slate-600']"
+          :class="['filter-btn', { 'active': currentFilter === filter.value }]"
         >
           {{ filter.icon }} {{ filter.label }}
         </button>
       </div>
-      <button 
+      <button
         @click="openAddModal"
-        class="text-xs px-3 py-1.5 rounded bg-green-600 text-white hover:bg-green-500 transition"
+        class="create-btn"
       >
         + 新增
       </button>
     </div>
 
     <!-- 素材列表 -->
-    <div class="flex-1 overflow-y-auto p-4 space-y-3 min-h-0">
-      <div v-if="filteredMaterials.length === 0" class="text-center text-slate-500 py-8">
-        <span class="text-4xl block mb-2">📄</span>
+    <div class="docs-list">
+      <div v-if="filteredMaterials.length === 0" class="text-center text-muted py-8">
+        <span style="font-size: var(--text-2xl); display: block; margin-bottom: var(--space-2)">📄</span>
         <p class="text-sm">暂无素材</p>
       </div>
-      
-      <div 
-        v-for="material in filteredMaterials" 
+
+      <div
+        v-for="material in filteredMaterials"
         :key="material.id"
         @click="selectMaterial(material)"
-        :class="['p-3 rounded-lg border cursor-pointer transition',
-          selectedId === material.id 
-            ? 'bg-blue-900/30 border-blue-500' 
-            : 'bg-slate-900/50 border-slate-700 hover:border-slate-500']"
+        :class="['doc-card', { 'selected': selectedId === material.id }]"
       >
         <div class="flex items-start justify-between mb-2">
-          <h3 class="font-medium text-white text-sm truncate flex-1">
+          <h3 class="font-medium text-primary text-sm truncate flex-1">
             {{ getTypeIcon(material.type) }} {{ material.title }}
           </h3>
-          <span v-if="material.is_default" class="text-xs px-1.5 py-0.5 rounded bg-slate-700 text-slate-400">
+          <span v-if="material.is_default" class="status-badge archived">
             预置
           </span>
         </div>
-        <p class="text-xs text-slate-500 mb-2">{{ material.source || '无来源' }}</p>
-        <div class="flex items-center justify-between text-xs text-slate-600">
+        <p class="text-xs text-muted mb-2">{{ material.source || '无来源' }}</p>
+        <div class="flex items-center justify-between text-xs text-muted">
           <span>{{ material.excerpts?.length || 0 }} 条摘录</span>
           <div class="flex gap-1">
-            <span 
-              v-for="tag in (material.tags || []).slice(0, 2)" 
+            <span
+              v-for="tag in (material.tags || []).slice(0, 2)"
               :key="tag"
-              class="px-1.5 py-0.5 rounded bg-slate-800 text-slate-500"
+              class="px-1.5 py-0.5 rounded bg-elevated text-muted"
             >
               {{ tag }}
             </span>
@@ -72,24 +66,24 @@
     </div>
 
     <!-- 底部操作区 -->
-    <div v-if="selectedId" class="p-4 border-t border-slate-700 space-y-2">
+    <div v-if="selectedId" class="docs-footer">
       <div class="flex gap-2">
-        <button 
+        <button
           @click="openEditModal"
-          class="flex-1 text-xs py-2 rounded bg-blue-600 text-white hover:bg-blue-500 transition"
+          class="action-btn primary"
         >
           ✏️ 编辑
         </button>
-        <button 
+        <button
           @click="viewExcerpts"
-          class="flex-1 text-xs py-2 rounded bg-slate-600 text-white hover:bg-slate-500 transition"
+          class="action-btn secondary"
         >
           📋 查看摘录
         </button>
-        <button 
+        <button
           v-if="!selectedMaterial?.is_default"
           @click="confirmDelete"
-          class="text-xs px-3 py-2 rounded bg-red-900/50 text-red-300 hover:bg-red-800/50 transition"
+          class="action-btn danger"
         >
           🗑️
         </button>
@@ -97,26 +91,23 @@
     </div>
 
     <!-- 新增/编辑弹窗 -->
-    <div v-if="showEditModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-      <div class="bg-slate-800 rounded-lg w-[500px] max-h-[80vh] overflow-hidden border border-slate-600 flex flex-col">
-        <div class="p-4 border-b border-slate-700 flex items-center justify-between">
-          <h3 class="text-lg font-bold text-white">{{ isAddMode ? '新增素材' : '编辑素材' }}</h3>
-          <button @click="closeEditModal" class="text-slate-400 hover:text-white">✕</button>
+    <div v-if="showEditModal" class="paradigm-modal-backdrop">
+      <div class="paradigm-modal flex flex-col" style="max-height: 80vh">
+        <div class="p-4 border-b border-default flex items-center justify-between">
+          <h3 class="text-lg font-semibold text-primary">{{ isAddMode ? '新增素材' : '编辑素材' }}</h3>
+          <button @click="closeEditModal" class="text-muted hover:text-primary">✕</button>
         </div>
-        
+
         <div class="flex-1 overflow-y-auto p-4 space-y-4">
           <!-- 素材类型 -->
           <div>
-            <label class="block text-xs text-slate-400 mb-2">素材类型</label>
+            <label class="block text-xs text-secondary mb-2">素材类型</label>
             <div class="flex flex-wrap gap-2">
-              <button 
-                v-for="type in materialTypes" 
+              <button
+                v-for="type in materialTypes"
                 :key="type.value"
                 @click="editForm.type = type.value"
-                :class="['text-xs px-3 py-1.5 rounded border transition',
-                  editForm.type === type.value 
-                    ? 'bg-blue-600 border-blue-500 text-white' 
-                    : 'bg-slate-900 border-slate-700 text-slate-300 hover:border-slate-500']"
+                :class="['filter-btn', { 'active': editForm.type === type.value }]"
               >
                 {{ type.icon }} {{ type.label }}
               </button>
@@ -125,40 +116,40 @@
 
           <!-- 标题 -->
           <div>
-            <label class="block text-xs text-slate-400 mb-2">素材标题</label>
-            <input 
+            <label class="block text-xs text-secondary mb-2">素材标题</label>
+            <input
               v-model="editForm.title"
-              class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-sm text-white outline-none focus:border-blue-500"
+              class="analysis-input"
               placeholder="如：二十届四中全会精神要点"
             >
           </div>
 
           <!-- 来源 -->
           <div>
-            <label class="block text-xs text-slate-400 mb-2">来源</label>
-            <input 
+            <label class="block text-xs text-secondary mb-2">来源</label>
+            <input
               v-model="editForm.source"
-              class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-sm text-white outline-none focus:border-blue-500"
+              class="analysis-input"
               placeholder="如：人民日报 2024-10-15"
             >
           </div>
 
           <!-- 标签 -->
           <div>
-            <label class="block text-xs text-slate-400 mb-2">标签（逗号分隔）</label>
-            <input 
+            <label class="block text-xs text-secondary mb-2">标签（逗号分隔）</label>
+            <input
               v-model="editForm.tagsInput"
-              class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-sm text-white outline-none focus:border-blue-500"
+              class="analysis-input"
               placeholder="如：全面深化改革, 制度建设"
             >
           </div>
 
           <!-- 关联维度集 -->
           <div>
-            <label class="block text-xs text-slate-400 mb-2">关联维度集</label>
-            <select 
+            <label class="block text-xs text-secondary mb-2">关联维度集</label>
+            <select
               v-model="editForm.dimensionSetId"
-              class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-sm text-white outline-none focus:border-blue-500"
+              class="analysis-input"
             >
               <option value="">不关联</option>
               <option v-for="ds in dimensionSets" :key="ds.id" :value="ds.id">
@@ -168,46 +159,46 @@
           </div>
 
           <!-- 摘录管理 -->
-          <div class="border-t border-slate-700 pt-4">
+          <div class="border-t border-default pt-4">
             <div class="flex items-center justify-between mb-3">
-              <label class="text-xs text-slate-400">可引用摘录</label>
-              <button 
+              <label class="text-xs text-secondary">可引用摘录</label>
+              <button
                 @click="addExcerpt"
-                class="text-xs text-blue-400 hover:text-blue-300"
+                class="text-xs text-accent hover:opacity-80"
               >
                 + 添加摘录
               </button>
             </div>
-            
-            <div class="space-y-3 max-h-60 overflow-y-auto">
-              <div 
-                v-for="(excerpt, index) in editForm.excerpts" 
+
+            <div class="space-y-3" style="max-height: 240px; overflow-y: auto">
+              <div
+                v-for="(excerpt, index) in editForm.excerpts"
                 :key="index"
-                class="bg-slate-900/50 rounded p-3 border border-slate-700"
+                class="bg-primary rounded p-3 border border-default"
               >
                 <div class="flex items-center justify-between mb-2">
-                  <input 
+                  <input
                     v-model="excerpt.topic"
-                    class="flex-1 bg-transparent border-b border-slate-600 text-sm text-white outline-none focus:border-blue-500 pb-1"
+                    class="flex-1 bg-transparent border-b border-default text-sm text-primary outline-none focus:border-accent pb-1"
                     placeholder="摘录主题"
                   >
-                  <button 
+                  <button
                     @click="removeExcerpt(index)"
-                    class="text-red-400 hover:text-red-300 ml-2"
+                    class="text-danger hover:opacity-80 ml-2"
                   >
                     ✕
                   </button>
                 </div>
-                <textarea 
+                <textarea
                   v-model="excerpt.content"
-                  class="w-full bg-slate-800 border border-slate-700 rounded px-2 py-1.5 text-xs text-slate-300 outline-none focus:border-blue-500 resize-none"
+                  class="w-full bg-elevated border border-default rounded px-2 py-1.5 text-xs text-secondary outline-none focus:border-accent resize-none"
                   rows="2"
                   placeholder="摘录内容..."
                 ></textarea>
                 <div class="flex items-center gap-2 mt-2">
-                  <select 
+                  <select
                     v-model="excerpt.useFor"
-                    class="text-xs bg-slate-800 border border-slate-700 rounded px-2 py-1 text-slate-300 outline-none"
+                    class="text-xs bg-elevated border border-default rounded px-2 py-1 text-secondary outline-none"
                   >
                     <option value="">通用</option>
                     <option value="positive">正面案例</option>
@@ -219,16 +210,16 @@
           </div>
         </div>
 
-        <div class="p-4 border-t border-slate-700 flex gap-3">
-          <button 
+        <div class="p-4 border-t border-default flex gap-3">
+          <button
             @click="closeEditModal"
-            class="flex-1 py-2 rounded bg-slate-600 text-white hover:bg-slate-500 transition"
+            class="flex-1 action-btn secondary"
           >
             取消
           </button>
-          <button 
+          <button
             @click="saveMaterial"
-            class="flex-1 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 transition"
+            class="flex-1 action-btn primary"
           >
             {{ isAddMode ? '添加' : '保存' }}
           </button>
@@ -237,33 +228,33 @@
     </div>
 
     <!-- 摘录查看弹窗 -->
-    <div v-if="showExcerptsModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-      <div class="bg-slate-800 rounded-lg w-[500px] max-h-[70vh] overflow-hidden border border-slate-600 flex flex-col">
-        <div class="p-4 border-b border-slate-700 flex items-center justify-between">
-          <h3 class="text-lg font-bold text-white">{{ selectedMaterial?.title }} - 摘录</h3>
-          <button @click="showExcerptsModal = false" class="text-slate-400 hover:text-white">✕</button>
+    <div v-if="showExcerptsModal" class="paradigm-modal-backdrop">
+      <div class="paradigm-modal flex flex-col" style="max-height: 70vh">
+        <div class="p-4 border-b border-default flex items-center justify-between">
+          <h3 class="text-lg font-semibold text-primary">{{ selectedMaterial?.title }} - 摘录</h3>
+          <button @click="showExcerptsModal = false" class="text-muted hover:text-primary">✕</button>
         </div>
-        
+
         <div class="flex-1 overflow-y-auto p-4 space-y-3">
-          <div 
-            v-for="(excerpt, index) in selectedMaterial?.excerpts || []" 
+          <div
+            v-for="(excerpt, index) in selectedMaterial?.excerpts || []"
             :key="index"
-            class="bg-slate-900/50 rounded p-3 border border-slate-700"
+            class="bg-primary rounded p-3 border border-default"
           >
             <div class="flex items-center justify-between mb-2">
-              <span class="font-medium text-white text-sm">{{ excerpt.topic }}</span>
-              <span 
+              <span class="font-medium text-primary text-sm">{{ excerpt.topic }}</span>
+              <span
                 v-if="excerpt.useFor"
                 :class="['text-xs px-1.5 py-0.5 rounded',
-                  excerpt.useFor === 'positive' ? 'bg-green-900/50 text-green-300' : 'bg-red-900/50 text-red-300']"
+                  excerpt.useFor === 'positive' ? 'bg-success-bg text-success' : 'bg-danger-bg text-danger']"
               >
                 {{ excerpt.useFor === 'positive' ? '正面' : '反面' }}
               </span>
             </div>
-            <p class="text-xs text-slate-400 leading-relaxed">{{ excerpt.content }}</p>
+            <p class="text-xs text-secondary leading-relaxed">{{ excerpt.content }}</p>
           </div>
-          
-          <div v-if="!selectedMaterial?.excerpts?.length" class="text-center text-slate-500 py-4">
+
+          <div v-if="!selectedMaterial?.excerpts?.length" class="text-center text-muted py-4">
             暂无摘录
           </div>
         </div>
@@ -271,20 +262,20 @@
     </div>
 
     <!-- 删除确认弹窗 -->
-    <div v-if="showDeleteConfirm" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-      <div class="bg-slate-800 rounded-lg p-6 w-80 border border-slate-600">
-        <h3 class="text-lg font-bold text-white mb-4">确认删除</h3>
-        <p class="text-sm text-slate-400 mb-6">确定要删除这条素材吗？此操作不可恢复。</p>
-        <div class="flex gap-3">
-          <button 
+    <div v-if="showDeleteConfirm" class="confirm-modal-backdrop">
+      <div class="confirm-modal">
+        <h3 class="confirm-modal-title">确认删除</h3>
+        <p class="confirm-modal-text">确定要删除这条素材吗？此操作不可恢复。</p>
+        <div class="confirm-modal-actions">
+          <button
             @click="showDeleteConfirm = false"
-            class="flex-1 py-2 rounded bg-slate-600 text-white hover:bg-slate-500 transition"
+            class="flex-1 action-btn secondary"
           >
             取消
           </button>
-          <button 
+          <button
             @click="deleteMaterial"
-            class="flex-1 py-2 rounded bg-red-600 text-white hover:bg-red-500 transition"
+            class="flex-1 action-btn danger"
           >
             删除
           </button>
@@ -496,3 +487,256 @@ onMounted(() => {
   loadMaterials()
 })
 </script>
+
+<style scoped>
+/* ========== 使用设计令牌系统 ========== */
+
+/* 侧边栏容器 */
+.docs-panel {
+  width: 400px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border-default);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+/* 头部 */
+.docs-header {
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--border-default);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.docs-header-title {
+  font-weight: var(--font-semibold);
+  font-size: var(--text-lg);
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* 工具栏 */
+.docs-toolbar {
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--border-default);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+/* 筛选按钮 */
+.filter-btn {
+  font-size: var(--text-xs);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+}
+
+.filter-btn.active {
+  background: var(--accent-primary);
+  color: var(--text-inverse);
+}
+
+.filter-btn:not(.active) {
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+}
+
+.filter-btn:not(.active):hover {
+  background: var(--bg-sunken);
+  color: var(--text-primary);
+}
+
+/* 素材列表 */
+.docs-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-4);
+}
+
+/* 素材卡片 */
+.doc-card {
+  padding: var(--space-3);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-default);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  margin-bottom: var(--space-3);
+}
+
+.doc-card.selected {
+  background: var(--info-bg);
+  border-color: var(--accent-primary);
+}
+
+.doc-card:not(.selected) {
+  background: var(--bg-primary);
+}
+
+.doc-card:not(.selected):hover {
+  border-color: var(--border-strong);
+}
+
+/* 状态徽章 */
+.status-badge {
+  font-size: var(--text-xs);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+}
+
+.status-badge.archived {
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+}
+
+/* 底部操作区 */
+.docs-footer {
+  padding: var(--space-4);
+  border-top: 1px solid var(--border-default);
+}
+
+/* 操作按钮 */
+.action-btn {
+  flex: 1;
+  font-size: var(--text-xs);
+  padding: var(--space-2);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+}
+
+.action-btn.primary {
+  background: var(--accent-primary);
+  color: var(--text-inverse);
+}
+
+.action-btn.primary:hover {
+  background: var(--accent-primary-hover);
+}
+
+.action-btn.secondary {
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+}
+
+.action-btn.secondary:hover {
+  background: var(--bg-sunken);
+}
+
+.action-btn.danger {
+  background: var(--danger-bg);
+  color: var(--accent-danger);
+}
+
+.action-btn.danger:hover {
+  background: rgba(248, 113, 113, 0.2);
+}
+
+/* 新建按钮 */
+.create-btn {
+  font-size: var(--text-xs);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  background: var(--accent-success);
+  color: var(--text-inverse);
+  transition: all var(--transition-fast);
+}
+
+.create-btn:hover {
+  background: #22c55e;
+}
+
+/* 确认弹窗 */
+.confirm-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal-backdrop);
+}
+
+.confirm-modal {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
+  width: 320px;
+  border: 1px solid var(--border-default);
+}
+
+.confirm-modal-title {
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+  margin-bottom: var(--space-4);
+}
+
+.confirm-modal-text {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  margin-bottom: var(--space-6);
+}
+
+.confirm-modal-actions {
+  display: flex;
+  gap: var(--space-3);
+}
+
+/* 范式模态框 */
+.paradigm-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal-backdrop);
+}
+
+.paradigm-modal {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  width: 500px;
+  max-height: 80vh;
+  overflow: hidden;
+  border: 1px solid var(--border-default);
+  display: flex;
+  flex-direction: column;
+}
+
+/* 输入框 */
+.analysis-input {
+  width: 100%;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  outline: none;
+  transition: border-color var(--transition-fast);
+}
+
+.analysis-input:focus {
+  border-color: var(--accent-primary);
+}
+
+/* 徽章 */
+.badge {
+  font-size: var(--text-xs);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+}
+
+.badge-primary {
+  background: var(--accent-primary);
+  color: var(--text-inverse);
+}
+</style>
diff --git a/src/components/ParadigmSelectorModal.vue b/src/components/ParadigmSelectorModal.vue
index d4a5d7e..7805db1 100644
--- a/src/components/ParadigmSelectorModal.vue
+++ b/src/components/ParadigmSelectorModal.vue
@@ -78,19 +78,29 @@
 
       <!-- 底部操作 -->
       <div class="p-4 border-t border-slate-700 bg-slate-800 flex gap-3 shrink-0">
-        <button 
-          @click="$emit('close')"
-          class="flex-1 py-2.5 rounded-lg bg-slate-700 text-slate-300 hover:bg-slate-600 transition font-medium"
+        <button
+          @click="$emit('create-custom')"
+          class="py-2.5 px-4 rounded-lg bg-purple-600 text-white hover:bg-purple-500 transition font-medium shadow-lg shadow-purple-900/20 flex items-center gap-2"
+          title="从需求文档创建自定义范式"
         >
-          取消
-        </button>
-        <button 
-          @click="confirmSelect"
-          :disabled="!selectedId"
-          class="flex-1 py-2.5 rounded-lg bg-blue-600 text-white hover:bg-blue-500 transition font-medium disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-blue-900/20"
-        >
-          确认作为对比要求
+          <span>🎯</span>
+          <span>新建范式</span>
         </button>
+        <div class="flex-1 flex gap-3">
+          <button
+            @click="$emit('close')"
+            class="flex-1 py-2.5 rounded-lg bg-slate-700 text-slate-300 hover:bg-slate-600 transition font-medium"
+          >
+            取消
+          </button>
+          <button
+            @click="confirmSelect"
+            :disabled="!selectedId"
+            class="flex-1 py-2.5 rounded-lg bg-blue-600 text-white hover:bg-blue-500 transition font-medium disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-blue-900/20"
+          >
+            确认作为对比要求
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -104,7 +114,7 @@ const props = defineProps({
   visible: Boolean
 })
 
-const emit = defineEmits(['close', 'select'])
+const emit = defineEmits(['close', 'select', 'create-custom'])
 
 // 状态
 const paradigms = ref([])
diff --git a/src/components/SettingsPanel.vue b/src/components/SettingsPanel.vue
index b0da891..65e2b87 100644
--- a/src/components/SettingsPanel.vue
+++ b/src/components/SettingsPanel.vue
@@ -1,57 +1,57 @@
 <template>
-  <aside class="w-[400px] h-screen flex flex-col border-r border-slate-700 bg-slate-800 shrink-0">
+  <aside class="docs-panel">
     <!-- 头部 -->
-    <header class="p-4 border-b border-slate-700 flex items-center justify-between">
-      <h1 class="font-bold text-lg text-white flex items-center gap-2">
-        <span class="text-2xl">⚙️</span> 设置中心
+    <header class="docs-header">
+      <h1 class="docs-header-title">
+        <span style="font-size: var(--text-xl)">⚙️</span> 设置中心
       </h1>
-      <span class="text-xs px-2 py-1 rounded bg-blue-900 text-blue-300 border border-blue-700">Pro版</span>
+      <span class="badge badge-primary">Pro版</span>
     </header>
 
     <!-- 设置内容 -->
     <div class="flex-1 overflow-y-auto p-4 space-y-6 min-h-0">
-      
+
       <!-- 数据统计 -->
-      <section class="bg-slate-900/50 rounded-lg p-4 border border-slate-700">
-        <h3 class="text-sm font-medium text-slate-300 mb-4 flex items-center gap-2">
+      <section class="settings-section">
+        <h3 class="settings-section-title">
           <span>📊</span> 数据统计
         </h3>
-        <div class="grid grid-cols-2 gap-3">
-          <div class="bg-slate-800 rounded p-3 text-center">
-            <div class="text-2xl font-bold text-blue-400">{{ stats.documents }}</div>
-            <div class="text-xs text-slate-500">文稿数量</div>
+        <div class="stats-grid">
+          <div class="stat-card">
+            <div class="stat-value blue">{{ stats.documents }}</div>
+            <div class="stat-label">文稿数量</div>
           </div>
-          <div class="bg-slate-800 rounded p-3 text-center">
-            <div class="text-2xl font-bold text-green-400">{{ stats.materials }}</div>
-            <div class="text-xs text-slate-500">素材数量</div>
+          <div class="stat-card">
+            <div class="stat-value green">{{ stats.materials }}</div>
+            <div class="stat-label">素材数量</div>
           </div>
-          <div class="bg-slate-800 rounded p-3 text-center">
-            <div class="text-2xl font-bold text-purple-400">{{ stats.paradigms }}</div>
-            <div class="text-xs text-slate-500">范式数量</div>
+          <div class="stat-card">
+            <div class="stat-value purple">{{ stats.paradigms }}</div>
+            <div class="stat-label">范式数量</div>
           </div>
-          <div class="bg-slate-800 rounded p-3 text-center">
-            <div class="text-2xl font-bold text-amber-400">{{ formatSize(stats.dbSize) }}</div>
-            <div class="text-xs text-slate-500">数据库大小</div>
+          <div class="stat-card">
+            <div class="stat-value amber">{{ formatSize(stats.dbSize) }}</div>
+            <div class="stat-label">数据库大小</div>
           </div>
         </div>
       </section>
 
       <!-- 素材库管理 -->
-      <section class="bg-slate-900/50 rounded-lg p-4 border border-slate-700">
-        <h3 class="text-sm font-medium text-slate-300 mb-4 flex items-center gap-2">
+      <section class="settings-section">
+        <h3 class="settings-section-title">
           <span>📚</span> 素材库管理
         </h3>
         <div class="space-y-3">
-          <button 
+          <button
             @click="openMaterialsEditor"
-            class="w-full text-left text-xs py-2 px-3 rounded bg-slate-800 text-slate-300 hover:bg-slate-700 transition flex items-center justify-between"
+            class="settings-btn secondary"
           >
             <span>管理素材库</span>
-            <span class="text-slate-500">{{ stats.materials }} 条</span>
+            <span class="text-muted">{{ stats.materials }} 条</span>
           </button>
-          <button 
+          <button
             @click="importMaterials"
-            class="w-full text-left text-xs py-2 px-3 rounded bg-slate-800 text-slate-300 hover:bg-slate-700 transition"
+            class="settings-btn secondary"
           >
             📥 导入素材 (JSON)
           </button>
@@ -59,26 +59,26 @@
       </section>
 
       <!-- 数据备份 -->
-      <section class="bg-slate-900/50 rounded-lg p-4 border border-slate-700">
-        <h3 class="text-sm font-medium text-slate-300 mb-4 flex items-center gap-2">
+      <section class="settings-section">
+        <h3 class="settings-section-title">
           <span>💾</span> 数据备份与恢复
         </h3>
         <div class="space-y-3">
-          <button 
+          <button
             @click="exportData"
-            class="w-full text-xs py-2.5 rounded bg-blue-600 text-white hover:bg-blue-500 transition"
+            class="settings-btn primary"
           >
             📤 导出所有数据 (JSON)
           </button>
-          <button 
+          <button
             @click="triggerImport"
-            class="w-full text-xs py-2.5 rounded bg-slate-600 text-white hover:bg-slate-500 transition"
+            class="settings-btn secondary"
           >
             📥 导入数据
           </button>
-          <input 
+          <input
             ref="importInput"
-            type="file" 
+            type="file"
             accept=".json"
             class="hidden"
             @change="handleImport"
@@ -87,20 +87,20 @@
       </section>
 
       <!-- 危险操作 -->
-      <section class="bg-red-950/30 rounded-lg p-4 border border-red-900/50">
-        <h3 class="text-sm font-medium text-red-400 mb-4 flex items-center gap-2">
+      <section class="settings-section danger-section">
+        <h3 class="settings-section-title">
           <span>⚠️</span> 危险操作
         </h3>
         <div class="space-y-3">
-          <button 
+          <button
             @click="confirmClearDocuments"
-            class="w-full text-xs py-2 rounded bg-red-900/50 text-red-300 hover:bg-red-800/50 transition"
+            class="settings-btn danger-btn"
           >
             清空所有文稿
           </button>
-          <button 
+          <button
             @click="confirmResetDatabase"
-            class="w-full text-xs py-2 rounded bg-red-900/50 text-red-300 hover:bg-red-800/50 transition"
+            class="settings-btn danger-btn"
           >
             重置数据库（恢复默认）
           </button>
@@ -108,11 +108,11 @@
       </section>
 
       <!-- 关于 -->
-      <section class="bg-slate-900/50 rounded-lg p-4 border border-slate-700">
-        <h3 class="text-sm font-medium text-slate-300 mb-3 flex items-center gap-2">
+      <section class="settings-section">
+        <h3 class="settings-section-title">
           <span>ℹ️</span> 关于
         </h3>
-        <div class="text-xs text-slate-500 space-y-1">
+        <div class="text-xs text-muted space-y-1">
           <p>AI 写作工坊 v1.0.0</p>
           <p>数据存储：浏览器 IndexedDB (SQLite)</p>
           <p>© 2026 AI Writing Workshop</p>
@@ -121,20 +121,20 @@
     </div>
 
     <!-- 确认弹窗 -->
-    <div v-if="showConfirm" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-      <div class="bg-slate-800 rounded-lg p-6 w-80 border border-slate-600">
-        <h3 class="text-lg font-bold text-white mb-4">{{ confirmTitle }}</h3>
-        <p class="text-sm text-slate-400 mb-6">{{ confirmMessage }}</p>
-        <div class="flex gap-3">
-          <button 
+    <div v-if="showConfirm" class="confirm-modal-backdrop">
+      <div class="confirm-modal">
+        <h3 class="confirm-modal-title">{{ confirmTitle }}</h3>
+        <p class="confirm-modal-text">{{ confirmMessage }}</p>
+        <div class="confirm-modal-actions">
+          <button
             @click="showConfirm = false"
-            class="flex-1 py-2 rounded bg-slate-600 text-white hover:bg-slate-500 transition"
+            class="settings-btn secondary"
           >
             取消
           </button>
-          <button 
+          <button
             @click="executeConfirmAction"
-            class="flex-1 py-2 rounded bg-red-600 text-white hover:bg-red-500 transition"
+            class="settings-btn danger-btn"
           >
             确认
           </button>
@@ -143,7 +143,7 @@
     </div>
 
     <!-- 成功提示 -->
-    <div v-if="showToast" class="fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg z-50">
+    <div v-if="showToast" class="toast">
       {{ toastMessage }}
     </div>
   </aside>
@@ -307,3 +307,190 @@ onMounted(() => {
   loadStats()
 })
 </script>
+
+<style scoped>
+/* ========== 使用设计令牌系统 ========== */
+
+/* 侧边栏容器 */
+.settings-panel {
+  width: 400px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border-default);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+/* 头部 */
+.settings-header {
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--border-default);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* 内容区 */
+.settings-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-4);
+}
+
+/* 设置区块 */
+.settings-section {
+  background: var(--bg-primary);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  border: 1px solid var(--border-default);
+  margin-bottom: var(--space-6);
+}
+
+.settings-section:last-child {
+  margin-bottom: 0;
+}
+
+.settings-section-title {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-primary);
+  margin-bottom: var(--space-4);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* 统计卡片网格 */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-3);
+}
+
+.stat-card {
+  background: var(--bg-elevated);
+  border-radius: var(--radius-md);
+  padding: var(--space-3);
+  text-align: center;
+}
+
+.stat-value {
+  font-size: var(--text-2xl);
+  font-weight: var(--font-semibold);
+  font-variant-numeric: tabular-nums;
+}
+
+.stat-value.blue { color: var(--accent-primary); }
+.stat-value.green { color: var(--accent-success); }
+.stat-value.purple { color: #a855f7; }
+.stat-value.amber { color: var(--accent-warning); }
+
+.stat-label {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+/* 设置按钮 */
+.settings-btn {
+  width: 100%;
+  text-align: left;
+  font-size: var(--text-xs);
+  padding: var(--space-3);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: none;
+  cursor: pointer;
+}
+
+.settings-btn.secondary {
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+}
+
+.settings-btn.secondary:hover {
+  background: var(--bg-sunken);
+}
+
+.settings-btn.primary {
+  background: var(--accent-primary);
+  color: var(--text-inverse);
+  text-align: center;
+}
+
+.settings-btn.primary:hover {
+  background: var(--accent-primary-hover);
+}
+
+/* 危险操作区块 */
+.danger-section {
+  background: var(--danger-bg);
+  border: 1px solid rgba(248, 113, 113, 0.5);
+}
+
+.danger-section .settings-section-title {
+  color: var(--accent-danger);
+}
+
+.danger-btn {
+  background: var(--danger-bg);
+  color: var(--accent-danger);
+}
+
+.danger-btn:hover {
+  background: rgba(248, 113, 113, 0.2);
+}
+
+/* 确认弹窗 */
+.confirm-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal-backdrop);
+}
+
+.confirm-modal {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
+  width: 320px;
+  border: 1px solid var(--border-default);
+}
+
+.confirm-modal-title {
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+  margin-bottom: var(--space-4);
+}
+
+.confirm-modal-message {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  margin-bottom: var(--space-6);
+}
+
+.confirm-modal-actions {
+  display: flex;
+  gap: var(--space-3);
+}
+
+/* Toast 提示 */
+.toast {
+  position: fixed;
+  bottom: var(--space-4);
+  right: var(--space-4);
+  background: var(--accent-success);
+  color: var(--text-inverse);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  z-index: var(--z-modal);
+}
+</style>
diff --git a/src/components/WriterPanel.vue b/src/components/WriterPanel.vue
index 98d46f5..432e79d 100644
--- a/src/components/WriterPanel.vue
+++ b/src/components/WriterPanel.vue
@@ -1,87 +1,87 @@
 <template>
-  <aside class="w-[400px] h-screen flex flex-col border-r border-slate-700 bg-slate-800 shrink-0">
+  <aside class="writer-panel">
     <!-- 头部 -->
-    <header class="p-4 border-b border-slate-700 flex items-center justify-between">
-      <h1 class="font-bold text-lg text-white flex items-center gap-2">
-        <span class="text-2xl">✍️</span> AI 写作工坊
+    <header class="writer-header">
+      <h1 class="writer-header-title">
+        <span style="font-size: var(--text-xl)">✍️</span> AI 写作工坊
       </h1>
-      <span class="text-xs px-2 py-1 rounded bg-blue-900 text-blue-300 border border-blue-700">Pro版</span>
+      <span class="badge badge-default">Pro版</span>
     </header>
 
     <!-- 内容区 -->
-    <div class="flex-1 overflow-y-auto p-4 space-y-6 min-h-0">
+    <div class="writer-content">
       <!-- 写作任务 -->
-      <section>
+      <section class="writer-section">
         <div class="flex justify-between items-center mb-2">
-          <label class="text-sm font-medium text-slate-400">1. 写作任务 (User Input)</label>
-          <div class="flex bg-slate-900 rounded p-0.5 border border-slate-700">
-            <button 
+          <label class="writer-label">1. 写作任务 (User Input)</label>
+          <div class="input-type-toggle">
+            <button
               @click="inputType = 'text'"
-              :class="['text-xs px-2 py-0.5 rounded transition', inputType === 'text' ? 'bg-slate-700 text-white' : 'text-slate-500 hover:text-slate-300']"
+              :class="['input-type-btn', { active: inputType === 'text' }]"
             >自由文本</button>
-            <button 
+            <button
               @click="inputType = 'outline'"
-              :class="['text-xs px-2 py-0.5 rounded transition', inputType === 'outline' ? 'bg-slate-700 text-white' : 'text-slate-500 hover:text-slate-300']"
+              :class="['input-type-btn', { active: inputType === 'outline' }]"
             >大纲模式</button>
           </div>
         </div>
-        
+
         <div v-if="inputType === 'text'">
-          <textarea 
-            v-model="inputTask" 
-            class="w-full h-32 bg-slate-900 border border-slate-700 rounded-lg p-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition placeholder-slate-600 resize-none"
+          <textarea
+            v-model="inputTask"
+            class="writer-textarea"
             placeholder="请输入具体的写作要求、主题、核心观点..."
           ></textarea>
           <div class="text-right mt-1">
-             <span class="text-xs text-slate-500">{{ inputTask.length }} 字</span>
+             <span class="text-xs text-muted">{{ inputTask.length }} 字</span>
           </div>
         </div>
 
         <div v-else class="space-y-2">
-          <input v-model="outlinePoints.topic" placeholder="核心主题" class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-xs outline-none focus:border-blue-500">
-          <input v-model="outlinePoints.audience" placeholder="目标受众" class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-xs outline-none focus:border-blue-500">
-          <textarea v-model="outlinePoints.keyPoints" placeholder="关键观点（每行一个）" class="w-full h-20 bg-slate-900 border border-slate-700 rounded px-3 py-2 text-xs outline-none focus:border-blue-500 resize-none"></textarea>
+          <input v-model="outlinePoints.topic" placeholder="核心主题" class="writer-input">
+          <input v-model="outlinePoints.audience" placeholder="目标受众" class="writer-input">
+          <textarea v-model="outlinePoints.keyPoints" placeholder="关键观点（每行一个）" class="writer-textarea" style="height: 80px"></textarea>
         </div>
       </section>
 
       <!-- 参考案例 -->
-      <section>
+      <section class="writer-section">
         <div class="flex justify-between items-center mb-2">
-          <label class="text-sm font-medium text-slate-400">2. 参考案例 (Style Ref)</label>
-          <button @click="showRefInput = !showRefInput" class="text-xs text-blue-400 hover:text-blue-300">
+          <label class="writer-label">2. 参考案例 (Style Ref)</label>
+          <button @click="showRefInput = !showRefInput" class="text-accent hover:opacity-80" style="font-size: var(--text-xs)">
             {{ showRefInput ? '取消' : '+ 添加案例' }}
           </button>
         </div>
 
-        <div v-if="showRefInput" class="mb-3 p-3 bg-slate-900 rounded-lg border border-blue-500/30">
-          <input v-model="newRefTitle" placeholder="案例标题" class="w-full mb-2 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs outline-none">
-          <textarea v-model="newRefContent" placeholder="粘贴优秀的参考文本..." class="w-full h-24 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs outline-none resize-none mb-2"></textarea>
-          <button @click="addReference" class="w-full bg-blue-600 hover:bg-blue-500 text-xs py-1.5 rounded text-white">确认添加</button>
+        <div v-if="showRefInput" class="mb-3 p-3 bg-primary border border-accent rounded-lg" style="border-color: var(--accent-primary)">
+          <input v-model="newRefTitle" placeholder="案例标题" class="writer-input mb-2">
+          <textarea v-model="newRefContent" placeholder="粘贴优秀的参考文本..." class="writer-textarea mb-2" style="height: 96px"></textarea>
+          <button @click="addReference" class="btn btn-primary w-full text-xs">确认添加</button>
         </div>
 
         <div class="space-y-2">
-          <div v-for="(ref, index) in references" :key="index" class="group flex flex-col bg-slate-700/50 p-2 rounded border border-slate-700 hover:border-slate-600 transition">
-            <div class="flex items-center justify-between mb-1">
-              <div class="flex items-center gap-2 overflow-hidden">
-                <span class="text-lg">📄</span>
-                <span class="text-xs font-medium text-slate-200 truncate">{{ ref.title }}</span>
+          <div v-for="(ref, index) in references" :key="index" class="ref-card">
+            <div class="ref-card-header">
+              <div class="ref-card-title">
+                <span style="font-size: var(--text-base)">📄</span>
+                <span class="ref-card-title-text">{{ ref.title }}</span>
               </div>
-              <button @click="removeReference(index)" class="text-slate-500 hover:text-red-400 opacity-0 group-hover:opacity-100 transition px-2">×</button>
+              <button @click="removeReference(index)" class="ref-remove-btn px-2">×</button>
             </div>
-            
-            <div class="pl-7">
-              <p class="text-[10px] text-slate-500 truncate mb-1.5">{{ ref.content.substring(0, 30) }}...</p>
-              
+
+            <div style="padding-left: var(--space-5)">
+              <p class="text-xs text-muted truncate mb-1">{{ ref.content.substring(0, 30) }}...</p>
+
               <!-- 风格分析结果 -->
-              <div v-if="ref.isAnalyzing" class="flex items-center gap-1 text-[10px] text-indigo-400 animate-pulse">
-                <span class="w-1 h-1 rounded-full bg-indigo-400"></span>
+              <div v-if="ref.isAnalyzing" class="flex items-center gap-1 text-xs animate-pulse" style="color: var(--accent-primary)">
+                <span style="width: 4px; height: 4px; background: var(--accent-primary); border-radius: 50%"></span>
                 正在分析风格特征...
               </div>
               <div v-else-if="ref.styleTags && ref.styleTags.length > 0" class="flex flex-wrap gap-1">
-                <span 
-                  v-for="tag in ref.styleTags" 
+                <span
+                  v-for="tag in ref.styleTags"
                   :key="tag"
-                  class="text-[10px] px-1.5 py-0.5 rounded bg-indigo-500/20 text-indigo-300 border border-indigo-500/30"
+                  class="style-tag"
                 >
                   {{ tag }}
                 </span>
@@ -92,33 +92,33 @@
       </section>
 
       <!-- 专家指令（范式预设时显示） -->
-      <section v-if="activeParadigm">
+      <section v-if="activeParadigm" class="writer-section">
         <div class="flex justify-between items-center mb-2">
-          <label class="text-sm font-medium text-amber-400 flex items-center gap-1">
+          <label class="writer-label writer-label-alt">
             ⭐ 专家指令 (Expert Guidelines)
           </label>
-          <button 
+          <button
             @click="clearParadigm"
-            class="text-[10px] text-slate-500 hover:text-red-400 transition"
+            class="text-xs text-muted hover:text-danger transition"
           >
             清除范式
           </button>
         </div>
-        <div class="bg-amber-950/20 border border-amber-500/30 rounded-lg p-3 space-y-2">
+        <div class="expert-section">
           <div class="flex items-center gap-2 mb-2">
-            <span class="text-amber-400">{{ activeParadigm.icon }}</span>
-            <span class="text-xs font-medium text-amber-300">已加载【{{ activeParadigm.name }}】专家标准</span>
+            <span class="text-accent">{{ activeParadigm.icon }}</span>
+            <span class="text-xs font-medium text-accent" style="color: var(--accent-warning)">已加载【{{ activeParadigm.name }}】专家标准</span>
           </div>
           <div class="space-y-1.5">
-            <div 
-              v-for="(guideline, idx) in expertGuidelines" 
+            <div
+              v-for="(guideline, idx) in expertGuidelines"
               :key="idx"
-              class="text-[11px] text-slate-400 flex items-start gap-2"
+              class="expert-item"
             >
-              <span class="text-amber-500/70 shrink-0">{{ idx + 1 }}.</span>
+              <span style="color: var(--accent-warning); opacity: 0.7;" class="shrink-0">{{ idx + 1 }}.</span>
               <div>
-                <span class="text-amber-300/80 font-medium">{{ guideline.title }}：</span>
-                <span class="text-slate-500">{{ guideline.description }}</span>
+                <span class="font-medium" style="color: var(--accent-warning); opacity: 0.8;">{{ guideline.title }}：</span>
+                <span class="text-secondary">{{ guideline.description }}</span>
               </div>
             </div>
           </div>
@@ -126,78 +126,77 @@
       </section>
 
       <!-- 输出规范 -->
-      <section>
-        <label class="block text-sm font-medium text-slate-400 mb-2">3. 输出规范 (Constraints)</label>
+      <section class="writer-section">
+        <label class="writer-label block mb-2">3. 输出规范 (Constraints)</label>
         <div class="flex flex-wrap gap-2 mb-3">
-          <button 
-            v-for="tag in presetTags" 
+          <button
+            v-for="tag in presetTags"
             :key="tag"
             @click="toggleTag(tag)"
-            :class="['px-2 py-1 rounded text-xs border transition', 
-              selectedTags.includes(tag) 
-              ? 'bg-blue-600/20 border-blue-500 text-blue-300' 
-              : 'bg-slate-900 border-slate-700 text-slate-500 hover:border-slate-500']"
+            :class="['tag-button', { selected: selectedTags.includes(tag) }]"
           >
             {{ tag }}
           </button>
         </div>
-        <input 
-          v-model="customConstraint" 
-          type="text" 
-          class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-xs focus:border-blue-500 outline-none"
+        <input
+          v-model="customConstraint"
+          type="text"
+          class="writer-input"
           placeholder="补充其他要求"
         >
-        
+
         <!-- 深度模式开关 -->
-        <div class="mt-4 flex items-center justify-between bg-slate-900/50 p-3 rounded border border-indigo-500/30">
+        <div class="deep-mode-toggle mt-4">
           <div class="flex flex-col">
-            <span class="text-sm font-bold text-indigo-300 flex items-center gap-1">
+            <span class="text-sm font-bold flex items-center gap-1" style="color: var(--accent-primary)">
               🧠 深度模式 (Deep Mode)
             </span>
-            <span class="text-[10px] text-slate-500">模拟人类“初稿-反思-润色”的思维链</span>
+            <span class="text-[10px] text-muted">模拟人类"初稿-反思-润色"的思维链</span>
           </div>
           <label class="relative inline-flex items-center cursor-pointer">
-            <input type="checkbox" v-model="isDeepMode" class="sr-only peer">
-            <div class="w-9 h-5 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600"></div>
+            <input type="checkbox" v-model="isDeepMode" class="hidden peer">
+            <div style="width: 36px; height: 20px; background: var(--bg-elevated); border-radius: 9999px; position: relative; transition: all var(--transition-normal);" class="peer-checked:bg-indigo-600">
+              <div style="width: 16px; height: 16px; background: white; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: all var(--transition-normal);" class="peer-checked:translate-x-4"></div>
+            </div>
           </label>
         </div>
       </section>
     </div>
 
     <!-- 底部操作区 -->
-    <footer class="p-4 bg-slate-800 border-t border-slate-700 space-y-3">
+    <footer class="writer-footer">
       <div class="flex items-center justify-between">
         <label class="flex items-center gap-2 cursor-pointer">
           <input type="checkbox" v-model="showPromptDebug" class="hidden">
-          <div class="w-8 h-4 bg-slate-900 rounded-full border border-slate-600 relative transition-colors" :class="{'bg-blue-900 border-blue-500': showPromptDebug}">
-            <div class="w-2 h-2 bg-slate-400 rounded-full absolute top-1 left-1 transition-transform" :class="{'translate-x-4 bg-blue-400': showPromptDebug}"></div>
+          <div class="toggle-switch" :class="{'active': showPromptDebug}">
+            <div class="toggle-thumb" :class="{'active': showPromptDebug}"></div>
           </div>
-          <span class="text-xs text-slate-500 select-none">预览构建的 Prompt</span>
+          <span class="text-xs text-muted select-none">预览构建的 Prompt</span>
         </label>
-        <span class="text-xs text-slate-600">deepseek</span>
+        <span class="text-xs text-muted">deepseek</span>
       </div>
 
       <!-- API配置 -->
       <div class="space-y-2">
-        <input 
-          v-model="apiUrl" 
-          type="text" 
-          class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-xs focus:border-blue-500 outline-none"
+        <input
+          v-model="apiUrl"
+          type="text"
+          class="writer-input"
           placeholder="API 地址"
         >
-        <input 
-          v-model="apiKey" 
-          type="password" 
-          class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-xs focus:border-blue-500 outline-none"
+        <input
+          v-model="apiKey"
+          type="password"
+          class="writer-input"
           placeholder="API Key"
         >
       </div>
 
-      <button 
-        @click="generateContent" 
+      <button
+        @click="generateContent"
         :disabled="!canGenerate"
-        class="w-full py-3 rounded-lg font-bold text-white shadow-lg shadow-blue-900/20 flex items-center justify-center gap-2 transition-all transform active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
-        :class="isGenerating ? 'bg-slate-700' : 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500'"
+        class="generate-button primary"
+        :class="{'generating': isGenerating}"
       >
         <span v-if="isGenerating" class="animate-spin text-lg">↻</span>
         {{ isGenerating ? '正在思考与撰写...' : '开始生成文稿' }}
@@ -276,3 +275,325 @@ const canGenerate = computed(() => {
   }
 })
 </script>
+
+<style scoped>
+/* ========== 使用设计令牌系统 ========== */
+
+/* 侧边栏容器 */
+.writer-panel {
+  width: 400px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border-default);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+/* 头部 */
+.writer-header {
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--border-default);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.writer-header-title {
+  font-weight: var(--font-semibold);
+  font-size: var(--text-lg);
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* 内容区 */
+.writer-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-4);
+}
+
+.writer-section {
+  margin-bottom: var(--space-6);
+}
+
+.writer-section:last-child {
+  margin-bottom: 0;
+}
+
+/* 标签 */
+.writer-label {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-secondary);
+  margin-bottom: var(--space-2);
+}
+
+.writer-label-alt {
+  color: var(--accent-warning);
+}
+
+/* 输入框样式 */
+.writer-textarea {
+  width: 100%;
+  height: 128px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  padding: var(--space-3);
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  transition: all var(--transition-fast);
+}
+
+.writer-textarea::placeholder {
+  color: var(--text-muted);
+}
+
+.writer-textarea:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 2px var(--info-bg);
+}
+
+.writer-input {
+  width: 100%;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  padding: var(--space-3);
+  font-size: var(--text-xs);
+  color: var(--text-primary);
+}
+
+.writer-input::placeholder {
+  color: var(--text-muted);
+}
+
+.writer-input:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+}
+
+/* 参考案例卡片 */
+.ref-card {
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-elevated);
+  padding: var(--space-2);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-default);
+  transition: all var(--transition-fast);
+}
+
+.ref-card:hover {
+  border-color: var(--border-strong);
+}
+
+.ref-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-1);
+}
+
+.ref-card-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  overflow: hidden;
+}
+
+.ref-card-title-text {
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  color: var(--text-primary);
+}
+
+.ref-remove-btn {
+  color: var(--text-muted);
+  opacity: 0;
+  transition: all var(--transition-fast);
+}
+
+.ref-card:hover .ref-remove-btn {
+  opacity: 1;
+}
+
+.ref-remove-btn:hover {
+  color: var(--accent-danger);
+}
+
+/* 风格标签 */
+.style-tag {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  background: var(--info-bg);
+  color: var(--accent-primary);
+  border: 1px solid rgba(96, 165, 250, 0.3);
+}
+
+/* 专家指令区域 */
+.expert-section {
+  background: var(--warning-bg);
+  border: 1px solid rgba(245, 158, 11, 0.3);
+  border-radius: var(--radius-lg);
+  padding: var(--space-3);
+}
+
+.expert-item {
+  font-size: 11px;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+}
+
+/* 标签按钮 */
+.tag-button {
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-md);
+  font-size: var(--text-xs);
+  border: 1px solid var(--border-default);
+  transition: all var(--transition-fast);
+  cursor: pointer;
+}
+
+.tag-button.selected {
+  background: var(--info-bg);
+  border-color: var(--accent-primary);
+  color: var(--accent-primary);
+}
+
+.tag-button:not(.selected) {
+  background: var(--bg-primary);
+  color: var(--text-muted);
+}
+
+.tag-button:not(.selected):hover {
+  border-color: var(--border-strong);
+}
+
+/* 深度模式开关 */
+.deep-mode-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--bg-primary);
+  padding: var(--space-3);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--accent-primary);
+}
+
+/* 底部操作区 */
+.writer-footer {
+  padding: var(--space-4);
+  background: var(--bg-secondary);
+  border-top: 1px solid var(--border-default);
+}
+
+/* 切换开关 */
+.toggle-switch {
+  width: 32px;
+  height: 16px;
+  background: var(--bg-primary);
+  border-radius: var(--radius-full);
+  border: 1px solid var(--border-default);
+  position: relative;
+  transition: all var(--transition-normal);
+}
+
+.toggle-switch.active {
+  background: var(--info-bg);
+  border-color: var(--accent-primary);
+}
+
+.toggle-thumb {
+  width: 10px;
+  height: 10px;
+  background: var(--text-muted);
+  border-radius: 50%;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  transition: all var(--transition-normal);
+}
+
+.toggle-thumb.active {
+  transform: translateX(16px);
+  background: var(--accent-primary);
+}
+
+/* 生成按钮 */
+.generate-button {
+  width: 100%;
+  padding: var(--space-3);
+  border-radius: var(--radius-lg);
+  font-weight: var(--font-semibold);
+  color: var(--text-inverse);
+  box-shadow: var(--shadow-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  transition: all var(--transition-normal);
+  transform: translateY(0);
+  border: none;
+  cursor: pointer;
+}
+
+.generate-button:not(:disabled):active {
+  transform: translateY(1px);
+}
+
+.generate-button.primary {
+  background: linear-gradient(135deg, var(--accent-primary), #6366f1);
+}
+
+.generate-button.primary:hover:not(:disabled) {
+  background: linear-gradient(135deg, var(--accent-primary-hover), #4f46e5);
+}
+
+.generate-button.generating {
+  background: var(--bg-elevated);
+  color: var(--text-muted);
+  cursor: wait;
+}
+
+.generate-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 切换器 */
+.input-type-toggle {
+  display: flex;
+  background: var(--bg-primary);
+  padding: var(--space-1);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-default);
+}
+
+.input-type-btn {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-xs);
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+}
+
+.input-type-btn.active {
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+}
+
+.input-type-btn:not(.active) {
+  color: var(--text-muted);
+}
+
+.input-type-btn:not(.active):hover {
+  color: var(--text-secondary);
+}
+</style>