快速开始

创建页面原型

什么是页面原型

页面原型是指界面上只能同时展示、设计一个高保真页面原型的设计模式，适用于复杂系统设计、需求明确的产品设计、高精度原型交付。你需要手动创建页面，配置页面间的跳转关系

跟着下面的步骤，设计一个可以进行页面间互相跳转的高保真原型吧

1. 点击新建页面原型按钮，创建一个空白应用

---

2. 双击进入应用，准备设计页面，空白应用默认自带一个空白页面，你可以通过文字描述、图片参考、图片复刻三种方式直接开始设计页面

---

3. 点击新建页面按钮，任选以上三种方式，设计应用中的其他页面

---

4. 配置页面间跳转，这里直接以设计好的"服装官网首页"和"配饰页面"为例，如需要点击"配饰"页面上的首页菜单，跳转回"服装官网首页"
   1. 进入编辑状态
   2. 选中一个页面元素，如"首页"菜单
   3. 点击工具条上的跳转配置图标
   4. 选择跳转页面/填写超链接
   5. 配置跳转的目标页面-服装官网首页
   6. 点击保存即可

到这里，你已经学会了如何使用GemDesign设计一个高保真原型了

方式一：文生界面

直接输入文字描述，生成对应界面

1. 选择文生界面选项
2. 输入页面描述，如"设计一个简约风格的服装官网首页"
3. 点击生成，等待一段时间让AI完成页面设计即可

方式二：参考图片

通过上传参考图+文字描述，让AI参考图片进行生成

1. 选择文生界面选项
2. 上传界面参考图，提供三个可选项参考：布局结构、颜色样式、文案内容；可截取方式一中的服装官网作为参考图
3. 输入页面需求，如"设计一个配饰页面"
4. 点击生成

方式三：图片复刻

1. 选择图片复刻选项
2. 上传复刻图，使用方式一种生成的官网首页截图
3. 点击生成

图片复刻使用专有界面复刻AI模型，更专注于对图片中的界面进行1:1复刻还原

---

创建应用原型项目

什么是应用原型

应用原型采用"全程对话"模式。你只需负责输入需求，AI 自主决策创建页面并配置全站跳转逻辑。 特点： 极速构建，但结构控制力较弱，适合轻量级应用或 Demo 演示。

1. 点击新建应用原型按钮，创建一个空白应用

---

2. 双击进入应用，准备设计第一个页面，空白应用默认自带一个空白页面，你可以通过文字描述、上传图片进行设计，如"设计一个极简风格的服装网站"

3. 每次生成后，AI会在下方给出 一个待生成列表（包括新增页面、修改页面等需求），你可以手动勾选，继续生成，这样就不需要自己手动输入需求了。

如果待生成列表中的需求无法满足你的要求，你可以忽略待生成列表， 动在输入框中输入需求并生成 。

通过不断输入需求，完成一整个应用的设计。

---

创建页面原型-无限画布应用

什么是页面原型-无限画布模式

我们在页面原型基础上做了改进，采用类Figma的画布形态，支持绝对定位布局，开放了组件的属性配置功能，更符合传统设计方式

1. 点击新建页面原型-无限画布按钮，配置应用类型、页面宽高，创建一个空白页面原型-无限画布

---

2. 双击进入应用，准备设计第一个页面，空白应用默认自带一个空白页面，你可以通过文字描述、上传图片进行设计。下方图片为初次进入新建无限画布的状态

生成内容组成

1.页面名称，由AI自动生成

2.页面内容，由AI分析需求自动生成

3.页面中的默认隐藏对象，如隐藏弹窗等对象放置在页面内容右侧

3. 双击可进入编辑模式，通过右侧属性面板修改样式和交互，详细介绍请前往页面原型-无限画布章节

---

4. 每次生成后，AI会在下方给出 一个待生成列表（包括新增页面、修改页面等需求），你可以手动勾选，继续生成，这样就不需要自己手动输入需求了。

如果你想要通过聊天方式修改某个页面内容，请一定要先

1. 选中目标内容
2. 输入修改需求

---

三种模式对比

	页面原型	页面原型-无限画布	应用原型
适合人群	产品经理、项目经理	设计师、产品经理、项目经理	销售、售前、创意发起者
适用场景	复杂系统	复杂系统	产品演示demo
页面布局	自动	自动 + 绝对定位	自动
编辑能力	基础	进阶	基础
页面规划	手动规划	AI规划	AI规划
画布模式	单页面模式	无限画布	单页面模式

*页面规划说明：

1. 手动规划：需要用户手动创建新页面
2. AI规划：AI自动分析需求，创建所要的页面

*画布模式说明：

1. 单页面模式：预览区域只有一个画布，只显示一个页面
2. 无限画布：类似Figma等传统设计软件的画布模式，所有页面可展示在一个画布中