当前位置：首页 > news >正文

【AI】Manus自主产品原型设计

news 来源：原创 2025/6/26 15:18:31

记录使用Manus从零开始设计To Do List小程序的全过程，测试下Manus能不能自主完成产品原型设计工作。

需求分析准备工作

首先让AI协助完成一个产品需求说明文档。

需要设定一个产品经理的角色，让AI分析To Do List产品的整体需求。

这里我需要一个提示词优化器，生成具体的角色定位和要求，当前比较热的工具是“prompt-optimizer”，可以自己搭一个~

为了省事儿，我选了个网页版免费的工具：promptpilot

向promptpilot描述基本想法："设计一个To Do List小程序"，AI产品经理基于专业经验，分析了目标用户、使用场景、核心功能等，并生成了详细的产品需求文档。

之后进行原型设计规划，在利用promptpilot，设定一个产品原型设计师的角色，让这个AI设计师基于产品需求文档，进行更细致的原型设计规划：页面结构与导航关系、交互流程设计、视觉风格定义、组件设计规范等

有了产品需求文档和原型设计文档作为基础，最后让Manus根据这些文档自主完成具体的原型制作工作。

这种多AI协作的方式最大的优势是：每个AI都在其专业领域发挥最大作用，产品经理AI负责需求分析，设计师AI负责设计规划，Manus负责具体实现。最终的成果质量远超单一AI的输出。

通过这种方式，我们得到的核心需求包括：主界面展示任务列表；添加、完成任务功能；分类管理功能；已完成任务查看；拖拽排序、重复提醒等高级交互

Manus的优势在于它能够理解专业的产品设计语言，当我们提供详细的原型设计文档时，它能够自动规划设计步骤，高质量地完成具体的设计工作。

设计结构规划

在确认需求后，Manus开始了设计结构分析与规划工作。这个阶段主要包括：

分析原型设计结构和页面组成：确定需要设计哪些页面，以及页面之间的关系
规划设计系统：根据iOS风格确定颜色系统、字体规范和组件设计
细化交互流程：规划用户如何在不同页面间导航，以及各种交互操作

Manus创建了详细的设计系统文档，包括：

# To Do List 小程序设计系统（iOS风格）## 1. 颜色系统
- 主色：#007AFF（iOS蓝）
- 辅助色：- 绿色：#34C759（成功/完成）- 红色：#FF3B30（删除/警告）- 橙色：#FF9500（提醒/通知）- 紫色：#5856D6（分类标签）## 2. 字体规范
- 标题：17px SF Pro Text Semibold
- 正文：16px SF Pro Text Regular
- 辅助文字：14px SF Pro Text Regular
- 小标签：12px SF Pro Text Medium## 3. 组件设计
- 卡片：圆角12px，白色背景，轻微阴影
- 按钮：圆角8px，高度44px
- 输入框：圆角8px，边框颜色#C7C7CC
- 开关：标准iOS风格开关

这个设计系统文档为后续的高保真原型设计提供了统一的视觉规范，确保整个应用的一致性。

高保真原型制作

主界面（任务列表）

主界面是用户最常使用的页面，设计重点包括：

1、顶部导航栏，包含标题和添加按钮；

2、搜索框，方便用户快速查找任务；

3、任务列表，每个任务项包含复选框、任务内容、时间和分类标签；

4、底部菜单栏，用于在不同页面间切换

Manus使用HTML和CSS创建了界面，代码示例：

<div class="header"><div class="ios-header-title">今日</div><div class="add-button"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></div><div class="ios-search"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#8E8E93" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg><input type="text" placeholder="搜索任务"></div>
</div>

添加任务弹窗

添加任务弹窗是用户创建新任务的入口，设计包括：

1、任务内容输入框，带字数限制

2、分类选择器，可选择现有分类或创建新分类

3、提醒时间设置，包含日期和时间选择

4、重复提醒设置，用于创建周期性任务

分类管理页面

分类管理页面允许用户创建和编辑任务分类，设计包括：

1、分类列表，显示分类名称、颜色和任务数量

2、分类层级结构，支持父子分类关系

3、添加分类按钮，位于底部

4、编辑分类功能，可修改名称和颜色

已完成任务页面

已完成任务页面展示用户已完成的任务，设计包括：

1、按日期分组的任务列表

2、每个任务项显示完成时间和分类

3、清空已完成任务的按钮

4、空状态设计，当没有已完成任务时显示

状态展示页面

完成各个页面的设计后，为了让用户能够一次性查看所有设计页面和不同状态，Manus创建了一个全状态展示页面。这个页面采用网格布局，将所有设计页面按功能模块分类展示。

<div class="container"><div class="section"><h2 class="section-title">主界面</h2><p class="section-description">展示任务列表、添加任务按钮和底部导航栏</p><div class="screens-grid"><div class="screen-item"><iframe src="pages/main.html" class="screen-preview"></iframe><div class="screen-info"><h3 class="screen-title">主界面 - 有任务状态</h3><p class="screen-description">显示待办任务列表，包含任务内容、时间和分类标签</p></div></div><div class="screen-item"><iframe src="pages/main-empty.html" class="screen-preview"></iframe><div class="screen-info"><h3 class="screen-title">主界面 - 空状态</h3><p class="screen-description">当没有待办任务时显示的空状态提示</p></div></div></div></div><!-- 其他部分省略 -->
</div>