Boss Command Center 设计方案¶
设计理念：极简科技风，用克制的视觉语言传达 AI 驱动的智能感与可信赖感。界面做减法，让用户聚焦于"下达指令"这一核心动作。
风格关键词：科技、专业、克制、高效、智能
1. 设计风格定位¶
1.1 整体风格¶
采用「深色科技风」作为主基调，搭配明亮的强调色营造智能感。界面以信息密度和效率为核心，避免过度装饰。
- 主基调：深色背景（接近黑色），营造专注氛围
- 强调色：电光蓝 + 成功绿，传递科技与可靠性
- 质感：微妙的光晕、细边框、卡片式布局
- 动效：轻盈流畅，不喧宾夺主
1.2 参考产品¶
- Linear（极简、流畅的动效）
- Vercel Dashboard（深色科技感、信息层级清晰）
- Raycast（命令行风格、高效操作）
2. 配色方案¶
2.1 主色板¶
- 背景主色：
#0A0A0F（深空黑）— 主背景、页面底色 - 背景次色：
#12121A（卡片背景）— 卡片、面板背景 - 背景三级：
#1A1A24（悬浮态、输入框）— 交互元素背景
2.2 文字色板¶
- 文字主色：
#FAFAFA（纯白）— 标题、重要信息 - 文字次色：
#A1A1AA（灰白）— 正文、描述 - 文字三级：
#71717A（中灰）— 辅助信息、占位符 - 文字禁用：
#52525B（深灰）— 禁用状态
2.3 功能色板¶
- 主强调色：
#3B82F6（电光蓝）— 主按钮、链接、高亮 - 主强调悬停：
#2563EB（深蓝）— 主按钮悬停 - 成功色：
#10B981（翠绿）— 成功状态、完成标记 - 警告色：
#F59E0B（琥珀）— 警告提示 - 错误色：
#EF4444（珊瑚红）— 错误状态、失败标记 - 信息色：
#8B5CF6（紫罗兰）— 信息提示、AI 标记
2.4 边框与分隔¶
- 边框主色：
rgba(255,255,255,0.1)— 卡片边框、分割线 - 边框强调：
rgba(59,130,246,0.5)— 选中状态、聚焦边框
3. 字体规范¶
3.1 字体栈¶
- 标题字体：
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif - 正文字体：
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif - 代码字体：
"JetBrains Mono", "Fira Code", "SF Mono", monospace
3.2 字号层级¶
- Hero 标题： 48px / font-weight: 700 / line-height: 1.1
- H1： 36px / font-weight: 700 / line-height: 1.2
- H2： 28px / font-weight: 600 / line-height: 1.3
- H3： 20px / font-weight: 600 / line-height: 1.4
- 正文大： 18px / font-weight: 400 / line-height: 1.6
- 正文： 16px / font-weight: 400 / line-height: 1.6
- 小字： 14px / font-weight: 400 / line-height: 1.5
- 微字： 12px / font-weight: 500 / line-height: 1.4 / letter-spacing: 0.05em
4. 信息架构¶
4.1 页面结构¶
首页 (Landing Page)
├── 导航栏 (Navigation)
│ ├── Logo + 产品名
│ ├── 核心功能链接
│ └── 入口按钮 (开始使用)
├── Hero 区域
│ ├── 主标题：一句话价值主张
│ ├── 副标题：产品描述
│ └── 主 CTA 按钮
├── 核心功能展示 (3-4 个卡片)
├── 口令示例区
├── 工作流程展示
└── 页脚
├── 产品链接
├── 联系方式
└── 版权信息
4.2 核心功能模块¶
- 意图识别引擎 — 展示 8 类口令识别能力
- 任务路由中枢 — Agent 调度与状态追踪
- 交付物管理 — 飞书文档自动创建
- 实时状态汇报 — 进度推送与阻塞上报
5. 页面设计框架¶
5.1 导航栏¶
布局：固定顶部，全宽，高度 64px 组件： - 左侧：Logo（电光蓝图标 + 白色文字"Boss Command Center"） - 中部：核心链接（功能、文档、关于） - 右侧：主 CTA 按钮（"开始使用"，电光蓝背景）
交互：
- 滚动时背景增加毛玻璃效果（backdrop-blur-md）
- 链接悬停：文字变亮 + 下划线动画
5.2 Hero 区域¶
布局：全宽，垂直居中，min-height: 80vh 背景：深空黑 + 微妙的光晕渐变（右上角淡蓝色光晕）
组件： - 主标题："一句话，任务启动" - 副标题："自然语言驱动的 AI 任务路由系统。老板只需描述需求，系统自动解析意图、路由到专业 Agent 执行。" - 主 CTA：大按钮（"开始使用"，电光蓝，带发光效果） - 次要 CTA：文字链接（"查看文档"）
动效： - 页面加载时标题淡入上移（duration: 0.6s, ease-out） - 背景光晕缓慢呼吸动画（scale: 1.0 → 1.1, duration: 8s, infinite）
5.3 核心功能展示¶
布局：三列网格（桌面），单列堆叠（移动端）
卡片样式：
- 背景：#12121A
- 边框：1px solid rgba(255,255,255,0.1)
- 圆角：12px
- 内边距：32px
- 悬停：边框变亮 + 微微上移（translateY: -4px）
每张卡片包含： - 图标（48px，电光蓝/翠绿/紫罗兰） - 标题（H3） - 描述（正文，灰白）
5.4 口令示例区¶
布局：左侧展示示例口令，右侧展示解析结果 样式： - 输入框样式：代码风格，等宽字体 - 解析结果：标签 + 参数卡片 - 使用电光蓝高亮识别出的关键参数
示例口令：
5.5 工作流程展示¶
布局：水平时间线（桌面），垂直堆叠（移动端） 步骤： 1. 口令输入 → 2. 意图识别 → 3. Agent 匹配 → 4. 任务执行 → 5. 交付物产出
样式： - 步骤节点：圆形，电光蓝边框 - 完成步骤：填充翠绿 - 连接线：渐变（电光蓝 → 翠绿）
5.6 页脚¶
布局：简洁单行或双行布局 内容： - 左侧：Logo + 版权 - 右侧：链接（文档、GitHub、联系）
6. 响应式适配方案¶
6.1 断点定义¶
- 桌面：≥1280px — 完整三列布局
- 平板：768px - 1279px — 双列或单列，字号微调
- 移动：<768px — 单列堆叠，导航收起
6.2 适配策略¶
- 导航栏：移动端汉堡菜单
- Hero：字号缩小 20%，按钮全宽
- 功能卡片：单列堆叠，间距缩小
- 工作流程：垂直时间线
7. 交互细节¶
7.1 按钮状态¶
- 默认：电光蓝背景，白字，圆角 8px
- 悬停：深蓝背景，微微上移
- 按下：scale(0.98)
- 禁用：灰色背景，文字变浅
7.2 卡片交互¶
- 悬停：边框亮度 +20%，translateY(-4px)，box-shadow 增强
- 过渡：all 0.2s ease-out
7.3 输入框样式¶
- 背景：
#1A1A24 - 边框：1px solid rgba(255,255,255,0.1)
- 聚焦：边框变为电光蓝
- 圆角：8px
8. 技术实现备注¶
- 使用 Tailwind CSS 进行样式开发
- 深色模式为唯一主题，无需切换
- 图标使用 Lucide React 或 SVG
- 动画使用 CSS transitions，避免复杂 JS 动画
设计方案 v1.0 | 2026-03-07