Open Design Docs
实操：生成一个 Open Design 入门介绍页
按真实按钮、固定输入内容和检查标准，完成一个可预览、可继续修改的 Open Design 项目。
这篇教程带你做一个具体任务：生成一页「Open Design 入门介绍页」，然后在同一个项目里连续改 3 次。
不要临时换题，也不要自己改提示词。先完整做完一遍，你就能熟悉 Open Design 的核心流程：主页创建项目 → 等待生成 → 打开预览 → 继续提修改 → 从项目列表找回结果。
开始前，请确认 Open Design 已经配置好运行方式。如果还没有，按自己的情况看：
- 用阿里云 Token Plan、DeepSeek、GLM 等模型服务：先看 配置 Token 和选择模型，再看对应服务商教程
- 用电脑上已安装的 AI 工具：看 欢迎页操作说明 里的「本地 Coding Agent」
配置好并测试通过后，再回到本页继续。
本次任务
生成一个电脑端页面，给用户介绍 Open Design。页面需要包含：
- Open Design 是做什么的
- 适合用在哪些工作里
- 产品经理、运营人员、设计师、销售或售前分别怎么用
- 新用户如何开始
- 一个适合培训场景的结尾引导
1. 进入主页
打开 Open Design，点击左侧导航的「主页」。
进入后，你会看到中间的「你想设计什么？」输入框，左侧导航栏里「主页」处于选中状态。下面这张图是真实主页界面，后续所有练习都从这里开始。
2. 选择「原型」
在主页输入框下方找到创建类型按钮，点击「原型」。确认输入框下方出现「原型」标签，以及「风格」和「精度」设置。
本次任务要生成一个可预览的介绍页面，所以选「原型」。对照下图检查：左侧标签为「原型」，中间「自动」是风格，右侧「高保真」是精度。
3. 设置「风格」和「精度」
在「原型」标签下方设置两个选项：风格选「自动」，精度选「高保真」。
风格
风格指生成结果参考的视觉方向，比如正式、活泼、像官网还是像培训材料。选「自动」时 Open Design 会根据你的需求自行匹配，第一次练习选这个最稳。
高保真
高保真表示生成结果更接近完整页面，包含排版、颜色、模块、按钮和视觉层级。做介绍页、培训页、展示页时选「高保真」，更容易看到接近成稿的效果。
4. 输入第一段需求
点击主页的大输入框，把下面这段内容完整复制进去。
做一个面向用户的 Open Design 入门介绍页。
页面目标：让第一次接触 Open Design 的用户快速理解它能做什么，并愿意尝试用它生成页面、PPT 和视觉素材。
页面内容需要包含：
1. 开头标题和一句简短说明
2. Open Design 适合做什么
3. 三个典型使用场景：生成页面、生成 PPT、生成图片或视频素材
4. 「适合哪些用户使用」：产品经理、运营人员、设计师、销售或售前人员
5. 一段「如何开始」的操作步骤
6. 一个适合培训的结尾行动引导
风格要求：中文，清爽、可信、适合培训，不要太像对外营销广告。页面要适合电脑端预览，内容要能快速扫读。
5. 点击「运行」
点击后等待页面跳转。
6. 等待第一次生成完成
进入项目页后，页面会分成两个主要区域：
- 左侧是对话区，用来显示你的需求和 Open Design 的回复
- 右侧是工作区，用来查看「设计文件」和页面预览
等待过程中，有时 Open Design 会先弹出「快速简报」，让你补充一些具体需求，例如要做什么、目标平台、目标用户、视觉调性、品牌背景、内容规模或有无额外注意事项。
看到这种确认卡片时，按下面处理：
- 先看每一组选项是什么意思
- 选择最符合当前任务的选项
- 如果某一项不确定，可以先不选，让 Open Design 使用默认判断
- 如果有额外要求，写在「还有什么需要知道的吗？」输入框里
- 点击「发送答案」，让 Open Design 继续生成
本次入门介绍页可以选择：
| 项目 | 推荐选择 |
|---|---|
| 我们要做什么？ | 单页网页原型，或落地页 |
| 目标平台 | 桌面网页 |
| 目标用户 | 第一次接触 Open Design 的用户 |
| 视觉调性 | 清爽、可信、适合培训 |
| 品牌背景 | Open Design 入门介绍 |
| 大概需要多少内容？ | 1 个单页滚动介绍页，适合 10 分钟讲解 |
| 还有什么需要知道的吗？ | 可以不填 |
7. 打开页面预览
按顺序操作：
- 在左侧助手回复里找到「本轮产出的文件」
- 点击其中的 HTML 页面文件
- 等右侧出现预览卡片后，点击「打开」
- 看右侧工作区顶部，点击「预览」
如果左侧没看到「本轮产出的文件」，就用右侧工作区打开：
- 点击右侧的「设计文件」
- 找到类型为「HTML 页面」的文件
- 点击这个 HTML 页面文件
- 等右侧出现预览卡片后，点击「打开」
- 点击顶部的「预览」
看到生成出来的入门介绍页后，这一步完成。
打开 HTML 页面后，右侧工作区会出现「预览」工具条和页面画面。下图里的页面内容只是示例，实际练习时以你生成的入门介绍页为准。
想更详细了解右侧的「设计文件」和「预览」，可以看 项目页和预览。
已经能打开预览后，想学习右侧面板里的「桌面端」「100%」「标记」「评论」「编辑」等微调工具，可以继续看 用右侧面板微调页面。
8. 第一次检查页面
不要急着重做项目。先按下面 6 个问题检查当前页面：
- 页面标题是否在介绍 Open Design
- 开头是否明确说明这是面向培训场景的介绍页
- 页面里是否提到「页面」「PPT」「图片或视频素材」
- 页面里是否出现「产品经理」「运营人员」「设计师」「销售或售前人员」
- 页面里是否有「如何开始」的操作步骤
- 页面整体是否清爽、可信、适合培训
只要大方向正确，就在当前项目里继续修改。
9. 第一次修改：减少营销感
回到左侧对话区底部，点击输入框，把下面这段内容完整复制进去：
把页面整体改得更像培训材料，减少营销感。开头要更直接，重点放在「用户怎么使用 Open Design 完成工作」。保留当前页面结构，但让标题和说明更像培训文档。
点击输入框右侧的「发送」。
10. 第二次修改：补充适合人群
继续在左侧底部输入框操作。
把下面这段内容完整复制进去：
把「适合哪些用户使用」这个区域做得更清楚。请分成四类：产品经理、运营人员、设计师、销售或售前人员。每类用一句话说明他们可以用 Open Design 完成什么具体工作。
点击「发送」，等待完成后查看右侧「预览」。
确认页面里清楚列出了四类用户后，这一步完成。
11. 第三次修改：压缩文字方便扫读
继续在左侧底部输入框操作。
把下面这段内容完整复制进去：
把页面文字整体压缩一些，每个模块只保留最关键的信息。标题更短，段落更短，尽量用短句和列表，让第一次看的用户能快速扫读。
点击「发送」。
12. 查看「设计文件」
现在确认生成文件已经保存在项目里。
- 看右侧工作区，点击「设计文件」
- 找到类型为「HTML 页面」的文件
- 点击「打开」
- 点击「预览」
能重新打开刚才修改后的页面，就说明文件已经保存在这个项目里。
在「设计文件」里，HTML 文件会以文件条目的形式出现，可以从这里重新打开、预览或下载。
13. 从「项目」列表找回结果
现在练习找回项目。
- 看左侧导航栏，点击「项目」
- 在项目列表里找到刚才创建的项目
- 点击进入
- 确认左侧还能看到刚才的对话
- 确认右侧「设计文件」里还能打开刚才的 HTML 页面
14. 完成标准
下面 8 项全部做到，就算完成本次实操：
- 在主页看到了「你想设计什么？」
- 点击了「原型」
- 把第一段需求复制进了输入框
- 点击了右下角向上箭头「运行」
- 在项目页打开了页面「预览」
- 连续点击「发送」完成了 3 次修改
- 在「设计文件」里找到了「HTML 页面」
- 从左侧「项目」列表重新打开了这个项目
做完这次任务后，你已经掌握 Open Design 最常用的一条工作路径：先用主页创建项目，再在项目里查看结果和继续修改。
还没有公开评论。你可以提交第一个问题。