灵阙设计系统 V2.0

原创灵阙教研团队

B 基础进阶 | 约 11 分钟阅读更新于 2025-12-29

AI 导读

灵阙设计系统 V2.0 融合调研洞察，打造独特的企业级智能体平台设计语言更新日期: 2025-12-29 一、设计定位：「灵阙」品牌基因 1.1 名称寓意灵阙 = 灵（Spirit/Intelligence）+ 阙（Palace Gate/Portal）灵：智能、灵动、有灵魂的 AI 阙：门阙、宫殿入口，象征通往专业领域的门户品牌意象：通往专业智能的门户，企业级 AI 能力的殿堂 1.2...

灵阙设计系统 V2.0

融合调研洞察，打造独特的企业级智能体平台设计语言更新日期: 2025-12-29

一、设计定位：「灵阙」品牌基因

1.1 名称寓意

灵阙 = 灵（Spirit/Intelligence）+ 阙（Palace Gate/Portal）

灵：智能、灵动、有灵魂的 AI
阙：门阙、宫殿入口，象征通往专业领域的门户

品牌意象：通往专业智能的门户，企业级 AI 能力的殿堂

1.2 差异化定位

竞品	定位	灵阙差异化
Genspark	All-in-One 工作空间（工具集合）	专家驱动的交付平台（结果导向）
Manus	全自主 Agent（执行透明）	专家协作的专业交付（人机协同）
ChatGPT	通用对话助手	垂直领域专家服务

灵阙核心定位：

"专家级智能体 × 专业交付 × 企业合规"

1.3 设计关键词

维度	关键词	释义
视觉	玉石青、专业、精致	东方雅致 + 企业可信
交互	透明、可控、高效	学习 Manus 的执行透明
功能	专家、交付、模板	学习 Genspark 的工具矩阵
情感	信赖、专业、温和	企业级的安全感

二、色彩系统 V2.0

2.1 主色调：「灵阙青」

灵感来源：青玉、翡翠、东方雅致

/* 灵阙主色系 - 青玉色 */
:root {
  /* 主色 - 灵阙青 (Jade Teal) */
  --lingque-primary: #0D9488;        /* 主色：青绿色 */
  --lingque-primary-hover: #0F766E;  /* 悬停态 */
  --lingque-primary-light: #CCFBF1;  /* 浅色背景 */
  --lingque-primary-dark: #115E59;   /* 深色变体 */
  --lingque-primary-50: #F0FDFA;     /* 最浅 */
  --lingque-primary-100: #CCFBF1;
  --lingque-primary-200: #99F6E4;
  --lingque-primary-500: #14B8A6;
  --lingque-primary-600: #0D9488;    /* 主色 */
  --lingque-primary-700: #0F766E;
  --lingque-primary-900: #134E4A;    /* 最深 */

  /* 辅助色 - 暖金色（专业/高端感） */
  --lingque-gold: #D97706;           /* 金色强调 */
  --lingque-gold-light: #FEF3C7;     /* 金色浅底 */

  /* 状态色（保持原有，微调饱和度） */
  --lingque-success: #059669;        /* 成功：翠绿 */
  --lingque-warning: #D97706;        /* 警告：琥珀 */
  --lingque-danger: #DC2626;         /* 危险：朱红 */
  --lingque-info: #0891B2;           /* 信息：青蓝 */
}

2.2 色彩对比

场景	原色 (#5E6AD2 紫蓝)	新色 (#0D9488 灵阙青)	效果
主按钮	冷调科技感	温润专业感	更有东方韵味
品牌标识	Linear 同质化	独特辨识度	差异化明显
数据可视化	与图表色冲突	与图表色协调	视觉更统一

2.3 背景层级系统（优化）

:root {
  /* 背景层级 - 更温润的灰调 */
  --bg-main: #FFFFFF;              /* 主背景 */
  --bg-canvas: #FAFCFC;            /* 画布背景（微青） */
  --bg-secondary: #F5F7F7;         /* 次级背景 */
  --bg-tertiary: #EEF1F1;          /* 三级背景 */
  --bg-hover: #E5EBEB;             /* 悬停背景 */
  --bg-active: #D1DEDE;            /* 激活背景 */

  /* 特殊背景 */
  --bg-elevated: #FFFFFF;          /* 浮起卡片 */
  --bg-frosted: rgba(255,255,255,0.85); /* 毛玻璃 */
}

三、专家入口设计（学习 Genspark 12宫格）

3.1 设计方案

将现有 2x2 的专家卡片布局升级为 响应式网格：

┌─────────────────────────────────────────────────────────────┐
│                     专家中心                                 │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐           │
│  │    📊   │ │    🎬   │ │    📝   │ │    📈   │           │
│  │  演示   │ │  视频   │ │  会议   │ │  数据   │           │
│  │  文稿   │ │  创作   │ │  专家   │ │  可视化 │           │
│  │  专家   │ │  专家   │ │        │ │  专家   │           │
│  └─────────┘ └─────────┘ └─────────┘ └─────────┘           │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐           │
│  │    📋   │ │    🧮   │ │    📄   │ │    ⭐   │           │
│  │  合规   │ │  财务   │ │  文档   │ │  更多   │           │
│  │  审计   │ │  分析   │ │  生成   │ │  专家   │           │
│  │  专家   │ │  专家   │ │  专家   │ │        │           │
│  └─────────┘ └─────────┘ └─────────┘ └─────────┘           │
└─────────────────────────────────────────────────────────────┘

3.2 专家卡片设计规范

// 专家卡片设计规范
interface ExpertCardDesign {
  // 尺寸
  size: {
    compact: '120px x 120px',   // 紧凑模式
    standard: '160px x 140px', // 标准模式
    expanded: '200px x 180px', // 展开模式
  };

  // 结构
  structure: {
    icon: '48px x 48px, 居中',
    title: '14px font-semibold, 单行',
    subtitle: '12px text-secondary, 可选',
    badge: '右上角状态标签',
  };

  // 状态
  states: {
    default: 'bg-white border-transparent',
    hover: 'bg-primary-50 border-primary-200 shadow-md transform-scale-102',
    active: 'bg-primary-100 border-primary-300',
    disabled: 'opacity-50 cursor-not-allowed',
  };

  // 标签
  badges: {
    pro: '金色标签「专业版」',
    new: '青色标签「新」',
    hot: '红色标签「热门」',
    beta: '灰色标签「测试」',
  };
}

3.3 响应式断点

/* 专家网格响应式 */
.expert-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);  /* 移动端 2列 */
}

@media (min-width: 768px) {
  .expert-grid { grid-template-columns: repeat(3, 1fr); }  /* 平板 3列 */
}

@media (min-width: 1024px) {
  .expert-grid { grid-template-columns: repeat(4, 1fr); }  /* 桌面 4列 */
}

@media (min-width: 1536px) {
  .expert-grid { grid-template-columns: repeat(6, 1fr); }  /* 大屏 6列 */
}

四、执行透明化设计（学习 Manus）

4.1 灵阙执行面板

借鉴 Manus 的 "Manus's Computer"，创建 灵阙执行视窗：

┌─────────────────────────────────────────────────────────────┐
│  灵阙执行中心                                    [─][□][×]  │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  任务: 生成 AI 智能体平台产品介绍演示文稿                    │
│  专家: 演示文稿专家                                          │
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  执行步骤                                            │   │
│  │                                                      │   │
│  │  ✓ 1. 解析输入内容                        [已完成]  │   │
│  │  ✓ 2. 生成大纲结构                        [已完成]  │   │
│  │  ● 3. 设计页面布局                        [进行中]  │   │
│  │  ○ 4. 生成配图                            [等待中]  │   │
│  │  ○ 5. 整合导出                            [等待中]  │   │
│  │                                                      │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                                                      │   │
│  │           [实时预览区域]                             │   │
│  │                                                      │   │
│  │      正在设计第 3 页: 核心功能介绍                   │   │
│  │                                                      │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  ████████████░░░░░░░░░░░░░░░░░░  45%                        │
│  预计剩余: 2分钟                                             │
│                                                             │
│  [暂停执行]  [调整方向]  [查看日志]                          │
└─────────────────────────────────────────────────────────────┘

4.2 步骤状态设计

// 步骤状态组件
interface StepStatus {
  completed: {
    icon: '✓ 绿色圆圈',
    text: 'text-success',
    bg: 'bg-success-50',
  };
  running: {
    icon: '● 青色脉动圆圈',
    text: 'text-primary',
    bg: 'bg-primary-50',
    animation: 'pulse',
  };
  pending: {
    icon: '○ 灰色空心圆',
    text: 'text-tertiary',
    bg: 'bg-transparent',
  };
  error: {
    icon: '✕ 红色圆圈',
    text: 'text-danger',
    bg: 'bg-danger-50',
  };
}

4.3 进度条设计

/* 灵阙进度条 */
.lingque-progress {
  height: 8px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  overflow: hidden;
}

.lingque-progress-bar {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--lingque-primary) 0%,
    var(--lingque-primary-500) 50%,
    var(--lingque-primary) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
  transition: width 0.3s ease;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

五、模板库设计（学习 Genspark AI Slides）

5.1 模板库布局

┌─────────────────────────────────────────────────────────────┐
│  演示文稿专家                                                │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ 描述您的演示文稿主题和要求...          [📎][🎤][⤢] │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  [探索模板] [我的模板] [历史记录]                            │
│  ─────────                                                  │
│                                                             │
│  [所有风格 ▼] [所有主题 ▼] [排序: 热度 ▼]  [🔍 搜索模板]   │
│                                                             │
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐   │
│  │  +   │ │ 企业 │ │ 产品 │ │ 培训 │ │ 报告 │ │ 营销 │   │
│  │ 创建 │ │ 介绍 │ │ 发布 │ │ 课件 │ │ 汇报 │ │ 方案 │   │
│  │ 新模板│ │      │ │      │ │      │ │      │ │      │   │
│  └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘   │
│                                                             │
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐   │
│  │ 财务 │ │ 合规 │ │ 项目 │ │ 创意 │ │ 极简 │ │ 数据 │   │
│  │ 分析 │ │ 审计 │ │ 总结 │ │ 展示 │ │ 商务 │ │ 报告 │   │
│  └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘   │
└─────────────────────────────────────────────────────────────┘

5.2 模板卡片设计

interface TemplateCard {
  // 尺寸
  aspectRatio: '16:9';
  minWidth: '180px';
  maxWidth: '280px';

  // 结构
  structure: {
    preview: {
      height: '60%',
      content: '模板预览图',
      overlay: '悬浮显示操作按钮',
    },
    info: {
      height: '40%',
      title: 'font-medium text-sm',
      meta: '主题 · 使用次数',
    },
  };

  // 悬浮状态
  hoverState: {
    preview: '显示「使用此模板」按钮',
    scale: 1.02,
    shadow: 'shadow-lg',
    border: 'border-primary',
  };

  // 角标
  badges: {
    official: '官方推荐',
    popular: '热门',
    new: '新模板',
  };
}

5.3 筛选器设计

// 筛选器配置
const filterConfig = {
  styles: [
    { value: 'all', label: '所有风格' },
    { value: 'minimal', label: '极简风格' },
    { value: 'corporate', label: '企业商务' },
    { value: 'creative', label: '创意设计' },
    { value: 'data', label: '数据报告' },
  ],
  themes: [
    { value: 'all', label: '所有主题' },
    { value: 'product', label: '产品介绍' },
    { value: 'finance', label: '财务分析' },
    { value: 'compliance', label: '合规审计' },
    { value: 'training', label: '培训课件' },
    { value: 'report', label: '工作汇报' },
  ],
  sortBy: [
    { value: 'hot', label: '热度' },
    { value: 'new', label: '最新' },
    { value: 'used', label: '使用次数' },
  ],
};

六、组件设计规范

6.1 按钮系统

// 灵阙按钮变体
const buttonVariants = {
  // 主要按钮 - 灵阙青
  primary: {
    base: 'bg-lingque-primary text-white',
    hover: 'hover:bg-lingque-primary-hover',
    active: 'active:bg-lingque-primary-dark',
  },

  // 次要按钮 - 描边
  secondary: {
    base: 'bg-transparent border border-lingque-primary text-lingque-primary',
    hover: 'hover:bg-lingque-primary-50',
    active: 'active:bg-lingque-primary-100',
  },

  // 幽灵按钮 - 无边框
  ghost: {
    base: 'bg-transparent text-lingque-primary',
    hover: 'hover:bg-lingque-primary-50',
    active: 'active:bg-lingque-primary-100',
  },

  // 金色按钮 - 高级功能
  gold: {
    base: 'bg-gradient-to-r from-amber-500 to-orange-500 text-white',
    hover: 'hover:from-amber-600 hover:to-orange-600',
    shadow: 'shadow-amber-200',
  },
};

// 圆角规范
const buttonRadius = {
  default: 'rounded-lg',      // 8px
  pill: 'rounded-full',       // 全圆角
  square: 'rounded-md',       // 6px
};

6.2 卡片系统

// 灵阙卡片变体
const cardVariants = {
  // 基础卡片
  base: {
    bg: 'bg-white',
    border: 'border border-gray-100',
    shadow: 'shadow-sm',
    radius: 'rounded-xl',
  },

  // 浮起卡片
  elevated: {
    bg: 'bg-white',
    border: 'border-0',
    shadow: 'shadow-lg',
    radius: 'rounded-2xl',
  },

  // 毛玻璃卡片
  glass: {
    bg: 'bg-white/80 backdrop-blur-xl',
    border: 'border border-white/60',
    shadow: 'shadow-lg',
    radius: 'rounded-2xl',
  },

  // 交互卡片（可点击）
  interactive: {
    base: 'bg-white border border-transparent',
    hover: 'hover:border-lingque-primary-200 hover:shadow-md hover:bg-lingque-primary-50/30',
    transition: 'transition-all duration-200',
  },
};

6.3 输入框系统

// 灵阙输入框
const inputStyles = {
  // 基础样式
  base: {
    bg: 'bg-white',
    border: 'border border-gray-200',
    radius: 'rounded-xl',
    padding: 'px-4 py-3',
    text: 'text-gray-900 placeholder:text-gray-400',
  },

  // 焦点状态
  focus: {
    border: 'focus:border-lingque-primary',
    ring: 'focus:ring-2 focus:ring-lingque-primary-200',
    outline: 'focus:outline-none',
  },

  // 命令输入框（大）
  command: {
    size: 'text-base py-4',
    radius: 'rounded-2xl',
    shadow: 'shadow-lg focus:shadow-xl',
    icons: '右侧附件/语音/扩展按钮',
  },
};

七、动效系统

7.1 过渡动画

/* 灵阙动效系统 */
:root {
  /* 基础过渡 */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* 弹性过渡 */
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 平滑过渡 */
  --transition-smooth: 500ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

7.2 入场动画

// Framer Motion 预设
const motionPresets = {
  // 淡入上移
  fadeInUp: {
    initial: { opacity: 0, y: 20 },
    animate: { opacity: 1, y: 0 },
    transition: { duration: 0.4, ease: 'easeOut' },
  },

  // 缩放淡入
  scaleIn: {
    initial: { opacity: 0, scale: 0.95 },
    animate: { opacity: 1, scale: 1 },
    transition: { duration: 0.3, ease: 'easeOut' },
  },

  // 交错入场
  stagger: {
    container: { staggerChildren: 0.05 },
    item: {
      initial: { opacity: 0, y: 10 },
      animate: { opacity: 1, y: 0 },
    },
  },

  // 脉动（进行中状态）
  pulse: {
    animate: {
      scale: [1, 1.05, 1],
      opacity: [0.7, 1, 0.7],
    },
    transition: {
      duration: 2,
      repeat: Infinity,
      ease: 'easeInOut',
    },
  },
};

八、实施路线图

8.1 Phase 1: 核心视觉（本次实施）

任务	文件	优先级
更新主色调为灵阙青	`globals.css`	P0
更新 Tailwind 配置	`tailwind.config.js`	P0
优化背景层级	`globals.css`	P1
更新按钮组件	`components/ui/button.tsx`	P1

8.2 Phase 2: 专家入口重构

任务	文件	优先级
创建专家网格组件	`components/experts/ExpertGrid.tsx`	P0
重构专家卡片	`components/agents/ProfessionalAgentCard.tsx`	P0
更新 Dashboard 布局	`app/workspace/dashboard/page.tsx`	P1

8.3 Phase 3: 执行透明化

任务	文件	优先级
创建执行面板组件	`components/execution/ExecutionPanel.tsx`	P0
创建步骤列表组件	`components/execution/StepList.tsx`	P1
创建进度条组件	`components/execution/ProgressBar.tsx`	P1
集成到 Deck Studio	`DeckStudioWorkstation.tsx`	P2

8.4 Phase 4: 模板库系统

任务	文件	优先级
创建模板库布局	`components/templates/TemplateGallery.tsx`	P0
创建模板卡片	`components/templates/TemplateCard.tsx`	P0
创建筛选器	`components/templates/TemplateFilters.tsx`	P1
集成到 Deck Studio	`DeckStudioWorkstation.tsx`	P2

九、设计验收标准

9.1 视觉验收

主色调统一为灵阙青 (#0D9488)
所有交互元素有明确的悬浮/激活状态
卡片圆角统一 (8px/12px/16px)
阴影层级清晰 (sm/md/lg)
文字层级清晰 (primary/secondary/tertiary)

9.2 交互验收

专家入口响应式布局正确
执行面板步骤状态清晰
进度条动画流畅
模板筛选器功能正常
所有过渡动画自然

9.3 性能验收

LCP < 2.5s
CLS < 0.1
FID < 100ms
无控制台错误

猪哥云（四川）网络科技有限公司 | 合规网 www.hegui.com 猪哥云-数据产品部-Maurice | maurice_wen@proton.me 2025 猪哥云-灵阙企业级智能体平台