# 💡 Summary **1. 核心设计理念 (Core Design Philosophy)** - **风格定义**：请采用 **"Modern Clean Productivity" (现代极简效率)** 风格。类似于 **Notion** 或 **Linear** 的设计语言。 - **关键词**：沉浸式 (Immersive)、无干扰 (Distraction-free)、卡片化 (Card-based)、上下文相关 (Contextual)。 - **核心隐喻**：界面应当像一层“透明的玻璃”覆盖在网页之上，不要用笨重的深色边框把内容隔开。 **2. 视觉规范 (Visual Specs)** - **色彩 (Color Palette)**： - **背景**：使用大量的白色 (#FFFFFF) 或极浅的灰色 (#F9FAFB) 作为背景。 - **文字**：使用深灰色 (#374151) 替代纯黑，降低视觉疲劳。 - **强调色**：使用类似于“荧光笔”的高亮色（淡黄、淡蓝、淡紫），饱和度低，明度高。 - **阴影**：使用 **Soft Drop Shadows** (例如 Tailwind 的 `shadow-lg` 或 `shadow-xl`) 来区分悬浮层和网页背景，而不是使用粗边框。 - **圆角 (Border Radius)**： - 组件和卡片统一使用 **8px - 12px** 的圆角，保持柔和感。 - **字体 (Typography)**： - 使用系统默认的无衬线字体 (San Francisco / Inter)，强调高行高 (Line-height 1.6+)，确保在大段文字下的阅读舒适度。 **3. 交互模式 (Interaction Model)** - **触发机制 (Trigger)**： - **Floating Menu (悬浮菜单)**：当用户选中网页文本时，**立刻**在鼠标附近显示一个微型的工具条（类似 Medium 或 Notion 的选中状态），包含“高亮”、“笔记”、“生成导图”等核心动作。 - **不要**让用户每次都要去点击浏览器右上角的插件图标。 - **侧边栏 (Sidebar / Drawer)**： - 侧边栏应当是 **Overlay (覆盖式)** 或 **Push (推挤式)**。 - 侧边栏内部采用 **Timeline (时间轴)** 或 **Mind Map (思维导图)** 的布局，用连接线将笔记串联起来。 **4. 关键组件参考 (UI Component Reference)** - 如果你使用 Tailwind CSS，请参考 **Shadcn/UI** 的组件风格。 - **Buttons**：Ghost Buttons（幽灵按钮）用于次要操作，Solid Buttons（实心按钮）仅用于“生成”、“保存”等主操作。 - **Loaders**：在 AI 生成内容时，使用骨架屏 (Skeleton UI) 或流式打字机效果 (Streaming Typography)，不要只放一个旋转的圆圈。 # 🧩 Cues # 🪞Notes