AI 产品设计调研报告
原创
灵阙教研团队
S 精选 进阶 |
约 12 分钟阅读
更新于 2025-12-29 AI 导读
AI 产品设计调研报告 调研对象: Genspark AI、Manus AI 调研日期: 2025-12-29 目的: 学习视觉设计、交互设计、功能设计，为灵阙智能体平台优化提供参考 目录 Genspark AI 调研 Manus AI 调研 设计要点对比 灵阙平台优化建议 参考资料 一、Genspark AI 调研 1.1 产品概述 项目 详情 官网 https://genspark.ai...
AI 产品设计调研报告
调研对象: Genspark AI、Manus AI 调研日期: 2025-12-29 目的: 学习视觉设计、交互设计、功能设计，为灵阙智能体平台优化提供参考
目录
一、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.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 核心功能亮点
- Call For Me: AI 真人语音打电话（使用 OpenAI Realtime API）
- Website Recreation: 粘贴 URL 重建网站
- Sparkpages: 搜索结果 → 结构化页面
- Deep Research: 深度调研生成专业报告
- 集成生态: 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 相关
- OpenAI - Genspark ships no-code personal agents
- Lindy - Genspark AI 2025 features tested
- Skywork - GenSpark AI Review 2025
- Product Hunt - Genspark
- Medium - Genspark Super Agent
Manus 相关
- Manus 官网
- Manus Blog - Introducing Manus 1.6
- Manus Blog - Context Engineering
- Manus Blog - Wide Research
- MIT Technology Review - Manus AI Review
- BayTech - Manus AI Analytical Guide
- Leanware - Manus AI Agent
- arXiv - From Mind to Machine: Manus AI
猪哥云（四川）网络科技有限公司 | 合规网 www.hegui.com 猪哥云-数据产品部-Maurice | maurice_wen@proton.me 2025 猪哥云-灵阙企业级智能体平台