我没有前端设计相关的经验，请你作为前端UI设计的大师，利用Google Stich和Figma设计前端的页面，请根据我关于项目的大体设计，给出Stich的系统设计描述


您好！很高兴能以UI设计大师的身份，与您一同规划这个项目。您的设计思路非常清晰，包含了现代前端设计的核心要素。这是一个绝佳的起点。

您提到的 “Google Stitch” 是一个很有趣的叫法。在设计界，我们通常会把一套统一的设计规范、原则和可复用组件的集合称为**设计系统（Design System）**。为了方便，我们就将我们这次项目的设计系统命名为 **‘Stitch’**，寓意它将所有界面元素无缝地“缝合”在一起，形成统一、协调的用户体验。

接下来，我将为您详细描述 ‘Stitch’ 设计系统在Figma中应如何规划与设计，以便前端团队能够利用Vuetify高效地实现它。

##### **a. 色彩 (Colors)**

我们将定义一个双主题调色板，确保在明亮和暗色模式下都有出色的可读性和视觉效果。

* **主色 (Primary):**
    * `primary-light`: `#1976D2` (用于按钮、高亮、活动状态等)
    * `primary-dark`: `#64B5F6`
* **背景色 (Background):**
    * `background-light`: `#F5F5F5` (非常浅的灰色，避免纯白刺眼)
    * `background-dark`: `#121212` (经典的深邃黑)
* **表面色 (Surface):**
    * `surface-light`: `#FFFFFF` (卡片、侧边栏、应用栏的背景)
    * `surface-dark`: `#1E1E1E` (比背景稍亮的深灰色)
* **文本/图标色 (On-Color):**
    * `on-surface-light`: `#212121` (深灰色正文)
    * `on-surface-dark`: `#E0E0E0` (浅灰色正文)
    * `on-primary-light`: `#FFFFFF`
    * `on-primary-dark`: `#000000`
* **辅助色 (Accent/Error/Success):** 将为其他状态（如错误提示、成功信息）定义相应的颜色。

##### **b. 字体 (Typography)**

选择一款现代、易读的无衬线字体（如 `Inter` 或 `Roboto`）。在Figma中创建文本样式。

* `H1 - Header`: 24px, Bold (用于主内容区的标题)
* `H2 - Subheader`: 18px, Bold
* `Body 1`: 16px, Regular (正文内容)
* `Body 2`: 14px, Regular (次要信息)
* `Button`: 14px, Medium
* `Nav Item`: 16px, Medium (侧边栏菜单项)

##### **c. 间距与网格 (Spacing & Grid)**

* **基础单位:** `8px`。所有元素的内外边距、间距都应是8的倍数（如 `8, 16, 24, 32px`），形成和谐的垂直和水平韵律。
* **栅格系统:** 遵循Vuetify的**12列栅格系统**。在Figma中，我们会为主要断点（桌面、平板、手机）创建不同的布局网格（Layout Grid），以确保响应式设计是可预测的。

#### **3. 组件库 (Component Library)**

我们将把您的布局要求拆解为一系列可复用的Figma组件。关键是利用Figma的 **自动布局（Auto Layout）** 和 **变体（Variants）** 功能。

##### **a. 侧边导航栏 (Side Navigation)**

这是核心组件，我们将创建两个主要的**变体**：`Collapsed=False` 和 `Collapsed=True`。

* **完整模式 (`Collapsed=False`):**
    * **结构:** 垂直 `Auto Layout` 容器。
    * **内容:**
        * 顶部：Logo + 应用名称。
        * 中部：导航项列表。每个导航项都是一个组件，包含 `Icon + Text`，并有 `State=Active` 和 `State=Default` 两个变体。活动状态的项会有不同的背景色（`primary-light/dark`）和文本颜色。
        * 底部：主题切换器。
* **图标模式 (`Collapsed=True`):**
    * **结构:** 隐藏所有文本标签，只显示Logo图标和导航项图标。
    * **交互:** 当鼠标悬停（Hover）在图标上时，可以显示一个浮动的提示（Tooltip）来展示功能名称。

##### **b. 顶部应用栏 (Top App Bar)**

* **结构:** 水平 `Auto Layout` 容器。
* **内容:**
    * 左侧（可选）：一个汉堡菜单按钮，用于在小屏幕上控制侧边栏的显示/隐藏。
    * 右侧：可以放置用户头像、消息通知、搜索框等。

##### **c. 主内容区 (Main Content Area)**

* **结构:** 这是一个插槽（Slot）或框架（Frame）。
* **内容:**
    * **页面标题 (Header):** 一个简单的组件，包含一个 `H1` 样式的标题和一段可选的描述性文字。
    * **内容容器 (Content Container):** 实际页面内容将在这里展示，例如卡片、表格、表单等。

#### **4. Figma 实现流程与原型**

1.  **建立基础样式:** 在Figma中，首先创建并发布所有颜色样式和文本样式。
2.  **创建原子组件:** 从最小的元素开始，如按钮、图标、输入框。
3.  **组合分子组件:** 使用原子组件构建更复杂的组件，如上文描述的导航项、侧边导航栏等。大量使用 **Auto Layout** 和 **Variants** 来管理不同状态。
4.  **页面布局组装:**
    * 创建一个桌面尺寸的画板（Frame）。
    * 应用12列栅格。
    * 将“侧边导航栏”、“顶部应用栏”和“主内容区”组件实例拖入画板，并使用约束（Constraints）让它们固定在正确的位置。
5.  **创建交互原型 (Prototyping):**
    * **页面切换:** 将侧边栏的每个导航项链接到不同的页面画板，使用“智能动画”（Smart Animate）可以让内容区的切换显得平滑。
    * **侧边栏收缩:** 将“展开”侧边栏的折叠按钮链接到包含“收缩”侧边栏的页面副本，反之亦然。同样使用“智能动画”来实现平滑的过渡效果。
    * **主题切换:** 复制所有页面，并使用Figma插件（如 "Themer"）或手动方式将所有组件切换到它们的暗色变体。然后将主题切换按钮链接到对应的明/暗色页面。