想快速做出一个产品原型，但不懂设计工具？本文将手把手教你用GemDesign，从零开始30分钟完成一个完整的Todo App Demo。无需设计基础，只要会打字就能上手。

---

一、什么是GemDesign？

GemDesign是一款AI原生的高保真原型设计工具。你只需要用自然语言描述需求，AI就能自动生成可交互的专业原型。

核心特点：

• 零门槛：无需学习复杂的设计软件
• 速度快：10秒生成页面，30分钟完成Demo
• 效果专业：生成高保真原型，可直接演示

适用场景：

• 快速验证产品想法
• 向领导/客户展示概念
• 开发前的原型设计

---

二、准备工作

2.1 注册账号

1. 打开浏览器，访问 https://design.gemcoder.com
2. 点击右上角"注册"按钮
3. 使用手机号或邮箱注册
4. 完成验证后即可使用

免费额度：注册即送20积分/月，基本完成本文的Demo。

2.2 了解界面

登录后，你会看到：

• 左侧：功能导航（文生界面、图生界面、应用原型等）
• 中间：工作区（显示生成的页面）
• 右侧：属性面板（调整样式、添加交互）
• 底部：AI对话输入框（用自然语言描述需求）

---

三、实战：做一个完整的Todo App

我们将做一个简单的待办事项应用，包含：

• 登录页
• 任务列表页
• 添加任务页

3.1 第一步：生成登录页

在底部的AI对话框中输入：

生成一个Todo App的登录页，包含：
- 应用Logo和名称"TodoMaster"
- 用户名输入框
- 密码输入框
- 登录按钮
- 注册账号链接
风格简洁现代，主色调为蓝色

10秒后，GemDesign生成了完整的登录页：

• Logo和标题居中显示
• 输入框样式美观
• 登录按钮醒目
• 整体风格简洁专业

3.2 第二步：生成任务列表页

继续在对话框中输入：

生成任务列表页，包含：
- 顶部标题"我的任务"
- 添加任务按钮（右上角）
- 任务列表（每个任务有复选框、任务名称、优先级标签）
- 底部导航栏（首页、添加、我的）
保持与登录页相同的蓝色主题

生成结果：

• 任务列表清晰展示
• 优先级用不同颜色标签区分
• 底部导航栏方便切换

3.3 第三步：生成添加任务页

输入：

生成添加任务页，包含：
- 顶部标题"添加新任务"
- 返回按钮
- 任务名称输入框
- 任务描述输入框
- 优先级选择（高/中/低）
- 截止日期选择器
- 保存按钮

生成结果：

• 表单布局合理
• 输入组件样式统一
• 操作按钮位置明显

3.4 第四步：设置主题风格

虽然生成的页面已经可用，但我们可以调整主题色。

操作步骤：

1. 点击右上角的"主题设置"按钮
2. 选择主色调（如#1890ff蓝色）
3. 调整圆角大小（8px）
4. 设置阴影强度（中等）

AI对话修改：

也可以在对话框中直接说：

把所有页面的主题色改成深蓝色，按钮改成圆角样式

AI会自动应用到所有页面。

3.5 第五步：添加页面交互

现在三个页面是独立的，需要添加跳转逻辑。

在对话框中输入：

设置页面交互：
1. 登录页的登录按钮点击后跳转到任务列表页
2. 任务列表页的添加按钮点击后跳转到添加任务页
3. 添加任务页的保存按钮点击后返回任务列表页
4. 添加任务页的返回按钮点击后返回任务列表页

AI自动生成交互：

• 点击登录按钮 → 跳转到任务列表
• 点击添加按钮 → 跳转到添加任务
• 点击保存 → 返回任务列表

3.6 第六步：演示和分享

演示原型：

1. 点击右上角的"演示"按钮
2. 进入演示模式
3. 可以像真实App一样点击操作
4. 体验完整的用户流程

分享给他人：

1. 点击"分享"按钮
2. 生成分享链接
3. 可以设置访问密码（可选）
4. 把链接发给同事或客户

---

四、常见问题解答

Q1：生成效果不满意怎么办？

解决方法：

• 用更详细的描述重新生成
• 使用AI对话修改功能调整
• 进入编辑模式手动微调

示例：

重新生成登录页，要求：
- Logo放在左上角
- 登录表单居中
- 添加"忘记密码"链接
- 背景使用渐变蓝色

Q2：如何修改已生成的页面？

三种方式：

1. AI对话修改：在对话框描述修改需求
2. 手动编辑：点击编辑图标，拖拽调整元素
3. 重新生成：用新的描述重新生成页面

Q3：如何导出给开发？

导出选项：

• 图片：导出PNG/JPG，插入PRD文档
• HTML：导出可交互的HTML文件
• Figma：导出到Figma继续精调
• 代码：通过MCP服务生成React/Vue代码

Q4：免费版够用吗？

免费版（20积分/月）：

• 足够完成本文的Demo
• 适合个人学习和简单项目
• 每月积分会重置

付费版：

• 基础版：25元/月（150积分）
• 专业版：45-168元/月（330-1250积分）
• 适合团队和企业使用

---

五、进阶建议

5.1 下一步学习方向

掌握更多功能：

• 图生界面：上传草图生成原型
• 应用原型：一句话生成多页面应用
• 积木库：保存复用设计元素
• 风格继承：保持多页面风格统一

5.2 推荐功能

功能	适用场景
图生界面	有手绘草图时快速数字化
应用原型	完整应用快速搭建
AI图片补全	自动生成页面所需图片
代码导出	前端开发者一键生成代码

5.3 学习资源

• 官方文档：https://docs.gemcoder.com
• 视频教程：官网提供教程与视频
• 社区交流：加入用户群交流经验

---

六、总结

通过本文，你已经学会了：

• ✅ 注册GemDesign账号
• ✅ 用自然语言生成页面
• ✅ 设置主题风格
• ✅ 添加页面交互
• ✅ 演示和分享原型

30分钟的成果：

• 一个完整的Todo App原型
• 包含3个页面（登录、列表、添加）
• 支持页面跳转交互
• 可直接演示和分享

GemDesign让原型设计变得简单。无论你是产品经理、开发者还是创业者，都可以用它快速将想法变成可视化的Demo。

立即尝试：访问 https://design.gemcoder.com，用免费额度开始你的第一个项目。

---

参考链接：

• GemDesign官网：https://design.gemcoder.com
• 用户指南文档：https://design.gemcoder.com/book/blog/