AI 产品设计调研报告

调研对象: Genspark AI、Manus AI 调研日期: 2025-12-29 目的: 学习视觉设计、交互设计、功能设计,为灵阙智能体平台优化提供参考


目录

  1. Genspark AI 调研
  2. Manus AI 调研
  3. 设计要点对比
  4. 灵阙平台优化建议
  5. 参考资料

一、Genspark AI 调研

1.1 产品概述

项目 详情
官网 https://genspark.ai
定位 All-in-One AI 工作空间
月活用户 200万+
估值 $5.3亿 (2025年2月)
融资 $1.6亿 (Seed $60M + Series A $100M)
定价 免费100积分/天,Pro $24.99/月

1.2 视觉设计分析

1.2.1 整体布局

Genspark 采用 三栏式布局:

┌──────┬─────────────────────────────────────────────┐
│      │                                             │
│ 导航 │              主内容区                        │
│ 栏   │                                             │
│      │  ┌─────────────────────────────────────┐   │
│ 60px │  │         搜索/命令输入框              │   │
│      │  └─────────────────────────────────────┘   │
│      │                                             │
│      │  ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐     │
│      │  │工具│ │工具│ │工具│ │工具│ │工具│ │...│     │
│      │  └───┘ └───┘ └───┘ └───┘ └───┘ └───┘     │
│      │                                             │
│      │  ─────────── 为你推荐 ───────────          │
│      │                                             │
│      │  ┌────┐ ┌────┐ ┌────┐ ┌────┐              │
│      │  │推荐 │ │推荐 │ │推荐 │ │推荐 │              │
│      │  │卡片 │ │卡片 │ │卡片 │ │卡片 │              │
│      │  └────┘ └────┘ └────┘ └────┘              │
└──────┴─────────────────────────────────────────────┘

1.2.2 色彩系统

/* Genspark 色彩方案 */
--color-background: #FFFFFF;      /* 纯白背景 */
--color-primary: #F59E0B;         /* 金黄色强调(Pro功能) */
--color-icon: #6B7280;            /* 中性灰(图标) */
--color-text-primary: #1F2937;    /* 深灰/黑(主文字) */
--color-text-secondary: #9CA3AF;  /* 浅灰(辅助文字) */
--color-success: #10B981;         /* 绿色(无限标签) */
--color-border: #E5E7EB;          /* 边框色 */

设计特点:

  • 极简白底:降低视觉噪音,突出内容
  • 金黄色强调:传递 "Premium/Pro" 高级感
  • 工具图标多彩:每个 AI 工具有独特配色,便于快速识别

1.2.3 卡片设计语言

工具卡片(12宫格):

  • 统一尺寸的正方形图标 (约 48x48px)
  • 底部居中文字标签
  • 部分带角标("无限" 标签,绿色/金色)
  • 悬浮态:轻微放大 + 阴影增强

推荐内容卡片:

  • 瀑布流布局(Masonry Grid)
  • 大图 + 标题的经典结构
  • 圆角 8-12px
  • 无边框,靠阴影区分层级
  • 图片比例约 16:9 或 4:3

1.2.4 AI Slides 模板库设计

┌─────────────────────────────────────────────────────────┐
│  Genspark AI 幻灯片                                      │
├─────────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────────┐   │
│  │ 请输入您的演示文稿主题和要求...        [附件][麦克风]│   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  [探索] [我的模板]                                       │
│  ───────                                                │
│  [所有样式 ▼] [所有主题 ▼] [排序方式: 热度 ▼]           │
│                                                         │
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐         │
│  │  +   │ │模板1 │ │模板2 │ │模板3 │ │模板4 │         │
│  │添加我│ │      │ │      │ │      │ │      │         │
│  │的模板│ │      │ │      │ │      │ │      │         │
│  └──────┘ └──────┘ └──────┘ └──────┘ └──────┘         │
│                                                         │
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐         │
│  │模板5 │ │模板6 │ │模板7 │ │模板8 │ │模板9 │         │
│  └──────┘ └──────┘ └──────┘ └──────┘ └──────┘         │
└─────────────────────────────────────────────────────────┘

模板卡片特点:

  • 固定宽高比 (约 16:9)
  • 悬浮显示"支持 PPTX"标签
  • 预览图展示实际 PPT 封面
  • 第一个位置留给"添加我的模板" (+号)

1.3 交互设计分析

1.3.1 核心输入体验

┌──────────────────────────────────────────────────────┐
│ 询问任何问题,创造任何事物                          [•] │
│                                                      │
│ [👤 人设] [🔑 工具]              [📎] [🎤] [⤢]    │
├──────────────────────────────────────────────────────┤
│ [Gmail] [Docs] [Drive] [Sheets] [Calendar]          │
│ Genspark 支持个性化工具                         [×] │
└──────────────────────────────────────────────────────┘

交互特点:

  1. 意图解析优先:不是简单搜索框,而是"命令中心"
  2. 多模态输入:支持文字、语音、附件
  3. 工具集成展示:下方显示已连接的服务
  4. 可扩展:支持全屏模式

1.3.2 Agent 驱动工作流

用户输入 → Super Agent 意图解析 → 任务分解 →
多 Agent 协作 (Mixture-of-Agents) → 生成结果 → 用户微调

1.3.3 导航设计

左侧垂直导航(图标式):

  • 图标 + 悬浮 Tooltip(节省空间)
  • 分组清晰:创建 / 浏览 / 存储
  • 当前页高亮

中部工具发现(12宫格):

  • 一屏展示所有核心能力
  • 渐进披露:最后一个是"所有智能体"入口
  • 状态标识:"无限"标签突出免费功能

1.4 功能设计分析

1.4.1 产品矩阵

模块 对标产品 Genspark 特色
AI Slides Gamma/Beautiful.ai 模板库 + 一句话生成 + 高级编辑
AI Sheets Airtable/Notion 一键可视化 + 事实核查
AI Docs Notion AI 深度研究 + 多源综合
AI Chat ChatGPT 无限对话 + 个性化人设
AI Images Midjourney 无限生成
AI Video Runway 视频创作
Call For Me 独创 AI 真人语音电话
AI Designer Figma AI 网站重建
剪辑天才 CapCut 视频剪辑

1.4.2 技术架构: Mixture-of-Agents

                    ┌──────────────┐
                    │ Super Agent  │
                    │  (调度中心)   │
                    └──────┬───────┘
                           │
        ┌──────────────────┼──────────────────┐
        ▼                  ▼                  ▼
   ┌─────────┐       ┌─────────┐       ┌─────────┐
   │ GPT-4.1 │       │ Claude  │       │ Gemini  │
   └─────────┘       └─────────┘       └─────────┘
        │                  │                  │
        └──────────────────┼──────────────────┘
                           ▼
                   ┌───────────────┐
                   │ 80+ 专业工具  │
                   └───────────────┘

1.4.3 核心功能亮点

  1. Call For Me: AI 真人语音打电话(使用 OpenAI Realtime API)
  2. Website Recreation: 粘贴 URL 重建网站
  3. Sparkpages: 搜索结果 → 结构化页面
  4. Deep Research: 深度调研生成专业报告
  5. 集成生态: Gmail/Calendar/Drive/Microsoft 365

二、Manus AI 调研

2.1 产品概述

项目 详情
官网 https://manus.im
定位 全自主 AI Agent
发布日期 2025年3月6日
开发公司 Monica.im (中国)
Discord社区 186,000+ 成员
定价 约 $2/任务 (ChatGPT Deep Research 的 1/10)
可用性 候补名单 < 1% 用户可用

2.2 视觉设计分析

2.2.1 整体布局

Manus 采用 双面板布局:

┌─────────────────────────────────────┬─────────────────────────────┐
│                                     │                             │
│           对话/任务面板              │      Manus's Computer       │
│                                     │       (执行视窗)             │
│  ┌─────────────────────────────┐   │                             │
│  │ 用户: 帮我调研...           │   │  ┌───────────────────────┐ │
│  └─────────────────────────────┘   │  │                       │ │
│                                     │  │   实时显示 Agent      │ │
│  ┌─────────────────────────────┐   │  │   正在操作的内容       │ │
│  │ Manus: 好的,我来执行...    │   │  │                       │ │
│  │                             │   │  │   - 浏览器操作         │ │
│  │ 步骤 1: 搜索相关信息        │   │  │   - 文件编辑          │ │
│  │ 步骤 2: 整理数据            │   │  │   - 代码执行          │ │
│  │ 步骤 3: 生成报告            │   │  │                       │ │
│  └─────────────────────────────┘   │  └───────────────────────┘ │
│                                     │                             │
│  ┌─────────────────────────────┐   │  [可介入/暂停/调整]         │
│  │ 输入您的需求...          [↵]│   │                             │
│  └─────────────────────────────┘   │                             │
└─────────────────────────────────────┴─────────────────────────────┘

2.2.2 色彩系统

/* Manus 色彩方案 (推测) */
--color-background: #FFFFFF;      /* 白色背景 */
--color-primary: #0081F2;         /* 蓝色主色(进度条等) */
--color-text-primary: #1A1A1A;    /* 黑色主文字 */
--color-text-secondary: #666666;  /* 灰色辅助文字 */
--color-accent: #10B981;          /* 绿色(成功状态) */
--color-warning: #F59E0B;         /* 橙色(警告) */

设计特点:

  • 清晰极简:英文为默认语言,界面干净
  • 蓝色主调:专业、可信赖的科技感
  • 双面板透明:核心差异化设计

2.2.3 "Manus's Computer" 特色组件

这是 Manus 最具辨识度的设计元素:

┌─────────────────────────────────────┐
│  Manus's Computer            [─][□][×]
├─────────────────────────────────────┤
│                                     │
│   ┌─────────────────────────────┐  │
│   │  🌐 正在浏览: google.com    │  │
│   │                             │  │
│   │  [搜索框]                   │  │
│   │  [搜索结果...]              │  │
│   │                             │  │
│   └─────────────────────────────┘  │
│                                     │
│   当前步骤: 搜索相关文献           │
│   已完成: 3/7 步                    │
│   ████████░░░░░░░░ 43%             │
│                                     │
│   [暂停] [调整方向] [查看详情]      │
└─────────────────────────────────────┘

设计优势:

  • 实时展示 Agent 操作过程
  • 用户可随时介入和调整
  • 解决 AI "黑盒" 信任问题
  • 支持回放历史会话

2.3 交互设计分析

2.3.1 核心交互模式

意图输入 → 任务分解展示 → 自主执行(可视化) →
用户介入点 → 结果交付 → 可下载输出

2.3.2 透明度设计

功能 描述
实时视窗 Manus's Computer 显示当前操作
步骤分解 自动将复杂任务拆解为可视步骤
进度指示 清晰的进度条和阶段标识
介入控制 用户可暂停、调整、重新引导
会话回放 支持查看历史执行过程

2.3.3 异步执行模式

  • 任务在云端后台执行
  • 无需保持浏览器打开
  • 完成后推送通知
  • 结果可下载

2.4 功能设计分析

2.4.1 技术架构: Multi-Model

┌───────────────────────────────────────────────┐
│                  Manus Agent                   │
├───────────────────────────────────────────────┤
│                                               │
│   ┌─────────────┐    ┌─────────────┐         │
│   │ Claude 3.5  │    │ Qwen (微调) │         │
│   │   Sonnet    │    │             │         │
│   └──────┬──────┘    └──────┬──────┘         │
│          │                  │                 │
│          └────────┬─────────┘                 │
│                   ▼                           │
│          ┌───────────────┐                    │
│          │  任务调度器    │                    │
│          └───────┬───────┘                    │
│                  │                            │
│    ┌─────────────┼─────────────┐              │
│    ▼             ▼             ▼              │
│ ┌──────┐    ┌──────┐    ┌──────┐             │
│ │浏览器│    │文件系统│    │代码执行│             │
│ │操作  │    │  操作  │    │  环境  │             │
│ └──────┘    └──────┘    └──────┘             │
│                                               │
└───────────────────────────────────────────────┘

2.4.2 核心功能亮点

功能 描述
Wide Research 多 Agent 并行深度调研
Design View 交互式图像创建画布 (v1.6)
Mobile Dev 移动应用端到端开发 (v1.6)
Manus Max 最强性能 Agent (v1.6)
文件系统即记忆 持久化结构化存储
系统集成 可接入企业 CRM/数据库/DevOps

2.4.3 Context Engineering 理念

Manus 的设计哲学强调 Context Engineering:

传统方式:
用户 → Prompt → LLM → 响应

Manus 方式:
用户 → 意图 → 任务分解 →
文件系统(持久化Context) → 多模型协作 →
工具调用 → 结果 → 可介入修正

关键设计:

  • 文件系统作为"外部化记忆"
  • 无限大小、持久存在
  • Agent 可自主读写

2.5 用户评价 (MIT Technology Review 测试)

测试任务 耗时 结果
记者调研 (30人) 1+ 小时 ✅ 成功(需引导)
房产搜索 <30 分钟 ✅ 优秀
创新提名 3 小时 ⚠️ 不完整

优点:

  • 界面直观
  • 推理过程清晰
  • 适应性强
  • 输出可下载

缺点:

  • 服务器过载频繁
  • 付费内容访问困难
  • 长文本性能下降

三、设计要点对比

3.1 视觉设计对比

维度 Genspark Manus
布局 三栏式(导航+主体+浮层) 双面板(对话+执行视窗)
主色调 白底 + 金黄强调 白底 + 蓝色强调
核心组件 12宫格工具入口 Manus's Computer
内容展示 瀑布流推荐卡片 步骤分解列表
图标风格 多彩渐变 简约单色

3.2 交互设计对比

维度 Genspark Manus
核心模式 一句话 → 多工具协作 意图 → 自主执行 + 可介入
透明度 中等(结果导向) 高(过程可视化)
用户控制 结果微调 全程可介入
执行方式 同步为主 异步后台
学习曲线 低(类搜索引擎) 中(理解 Agent 概念)

3.3 功能设计对比

维度 Genspark Manus
定位 All-in-One 工作空间 全自主 Agent
核心差异 Mixture-of-Agents + Call For Me 执行透明 + Context Engineering
工具数量 80+ 专业工具 浏览器/文件/代码执行
集成 Google/Microsoft 服务 企业系统 API
定价 $24.99/月 ~$2/任务

3.4 设计理念对比

Genspark 理念:
"询问任何问题,创造任何事物"
→ 工具丰富、一站式、结果导向

Manus 理念:
"Mind to Hand" (从意图到执行)
→ 自主执行、过程透明、可介入

四、灵阙平台优化建议

4.1 视觉设计优化

建议 参考来源 优先级
简化背景色 Genspark 纯白底 高
优化工具入口 Genspark 12宫格 高
添加状态标签 Genspark "无限"标签 中
模板库网格 Genspark AI Slides 高
推荐瀑布流 Genspark 首页 中

4.2 交互设计优化

建议 参考来源 优先级
执行过程可视化 Manus's Computer 高
步骤分解展示 Manus 任务分解 高
进度指示器 Manus 进度条 中
集成服务展示 Genspark 输入框下方 中
意图引导输入 Genspark 占位符文案 低

4.3 功能设计优化

建议 参考来源 优先级
模板库系统 Genspark AI Slides 高
我的模板 Genspark 保存/复用 高
筛选排序 Genspark 样式/主题/热度 中
异步执行 Manus 后台任务 中
会话回放 Manus 历史查看 低

4.4 具体实施方案

4.4.1 Deck Studio 模板库

// 建议的模板库组件结构
<TemplateGallery>
  <SearchInput placeholder="请输入您的演示文稿主题和要求..." />

  <Tabs>
    <Tab label="探索" />
    <Tab label="我的模板" />
  </Tabs>

  <Filters>
    <Select label="所有样式" options={styles} />
    <Select label="所有主题" options={themes} />
    <Select label="排序方式" options={['热度', '最新', '收藏']} />
  </Filters>

  <TemplateGrid>
    <AddTemplateCard /> {/* 第一个位置 */}
    {templates.map(t => <TemplateCard key={t.id} {...t} />)}
  </TemplateGrid>
</TemplateGallery>

4.4.2 执行过程可视化

// 建议的执行视窗组件
<ExecutionPanel>
  <Header title="Agent 执行中..." />

  <StepList>
    <Step status="completed" label="1. 分析输入内容" />
    <Step status="completed" label="2. 生成大纲结构" />
    <Step status="running" label="3. 设计页面布局" />
    <Step status="pending" label="4. 生成配图" />
    <Step status="pending" label="5. 整合导出" />
  </StepList>

  <ProgressBar value={45} />

  <PreviewWindow>
    {/* 实时预览当前操作 */}
  </PreviewWindow>

  <Controls>
    <Button variant="secondary">暂停</Button>
    <Button variant="secondary">调整</Button>
  </Controls>
</ExecutionPanel>

五、参考资料

Genspark 相关

Manus 相关


猪哥云(四川)网络科技有限公司 | 合规网 www.hegui.com 猪哥云-数据产品部-Maurice | [email protected] 2025 猪哥云-灵阙企业级智能体平台