Open Design Docs
Open Design 是怎么工作的
面向非开发人员,用通俗方式理解 Open Design 的基本原理。
Open Design 是一个 AI 创作工作台。你不用写代码,只需要说明目标、提供资料、检查结果、继续提修改意见。
它的基本流程是:
- 你用大白话说明要做什么
- Open Design 把这次任务整理成一个项目
- 模型或 Coding Agent 根据你的需求开始处理
- 处理过程中生成页面、图片、文档、PPT 等文件
- 你在预览里查看结果
- 不满意继续说修改意见,Open Design 在同一个项目里继续调整
一句话理解
Open Design 不是聊天窗口,也不是传统原型软件。它更像:
你提出任务 -> Open Design 调用 AI 处理 -> 生成可查看的文件 -> 你检查并继续反馈 -> 文件继续被修改
所以用 Open Design 最重要的不是「会不会写代码」,而是能不能把需求说清楚,并在结果出来后给出具体反馈。
每个角色负责什么
| 角色 | 负责什么 | 怎么理解 |
|---|---|---|
| 你 | 提出目标、补充资料、判断结果 | 把目标、内容和修改意见讲清楚 |
| Open Design 界面 | 管理项目、展示文件、提供预览和设置 | 它是工作台,不是最终产物 |
| 模型 / Coding Agent | 理解需求,生成、修改、整理内容 | 它是实际干活的 AI |
| 项目 | 保存一次任务的对话、文件和结果 | 一个项目就是一次完整工作记录 |
| 设计文件 | 保存生成结果和上传资料 | 页面、图片、PPT、截图都在这里 |
| 预览 | 把生成文件展示成你能看的效果 | 优先看预览,不用看代码 |
模型
模型是负责理解和生成内容的 AI 能力,可以理解成「大脑」。不同模型擅长的事不同——有的更适合文字,有的更适合看图,有的更适合复杂推理。
文字任务用文字模型即可;需要看截图、设计稿或产品界面图时,切换到支持图片理解的模型。不用研究模型细节,记住这一条就够了。
Coding Agent
Coding Agent 是 AI 执行助手——不只是回答问题,还能创建文件、修改文件、整理项目、生成页面。Open Design 负责提供工作台界面,Coding Agent 负责把需求变成具体文件。
如果你用阿里云 Token Plan 等模型服务,可以不关心本机 Coding Agent;如果你本来在用 Claude Code、Codex、Cursor 这类工具,Open Design 也可以接入它们。
从一次页面生成看完整过程
假设你在主页输入:
做一个面向用户的 Open Design 入门培训介绍页。
包含适合人群、课程安排、学习目标和报名方式。
风格要简洁、可信,适合培训。
Open Design 大致这样工作:
| 步骤 | 系统做了什么 | 你会看到什么 |
|---|---|---|
| 创建项目 | 把这次任务保存成一个项目 | 页面跳到项目页,左侧出现对话 |
| 理解需求 | 模型判断你要做的是介绍页,不是图片或视频 | 左侧显示生成过程 |
| 生成文件 | Coding Agent 创建 HTML 页面和相关文件 | 右侧「设计文件」出现新文件 |
| 打开预览 | Open Design 把 HTML 页面展示出来 | 你能像看网页一样检查效果 |
| 继续修改 | 你提出「减少文字」「加报名流程」等反馈 | 同一个项目里的文件继续更新 |
| 导出结果 | 结果满意后下载、导出或分享 | 得到可交付的文件 |
HTML 页面
HTML 页面就是网页文件。Open Design 生成原型、介绍页、落地页时,最常见的就是 HTML 页面。
非开发用户不需要理解 HTML 代码。点「打开」然后看「预览」就行,像看普通网页一样检查内容、布局和交互。不符合预期就回左侧对话区继续改。
为什么可以连续修改
Open Design 会把同一个项目里的对话和文件放在一起。你说的需求、上传的资料、生成的文件、后续修改意见,都会成为当前项目的上下文。
上下文
上下文就是「当前项目里已经提供过的信息」——最初的任务目标、目标读者、上传的参考资料、已生成的文件、后续提出的修改要求。
上下文的作用是让 Open Design 不必每次都从零开始。只要留在同一个项目里继续发修改要求,它就能基于已有结果继续调整。主题完全变了才回主页新建项目。
这就是为什么:
- 小修改不要回主页重新运行
- 同一个页面的连续修改应该留在同一个项目里
- 上传截图后要说明「参考它的什么」,这样上下文才清楚
- 如果任务跑偏太久,重新建项目反而更干净
设计体系起什么作用
设计体系可以理解成「风格说明书」:常用什么颜色、按钮长什么样、页面气质偏正式还是活泼、卡片和导航大概怎么处理。
没有设计体系时,模型根据你的文字自行判断风格;有设计体系时,生成结果更容易保持统一。比如同样是「做一个产品介绍页」,有设计体系就更可能贴近品牌颜色和组件样式。
设计体系不会替你决定页面主题、目标读者、重点模块和文案——这些仍然需要你说明。
插件、技能、MCP 和连接器是什么
这些名字看起来像技术概念,但可以这样理解:
| 名称 | 通俗理解 | 什么时候用 |
|---|---|---|
| 插件 | 预设好的工作流程 | 需要反复做同类任务 |
| 技能 | 某种专项能力说明 | 需要让 Open Design 按固定方法处理任务 |
| MCP | 给 AI 接外部工具的标准方式 | 需要图片理解、网页读取、文件访问等额外能力 |
| 连接器 | 连接外部账号或业务系统 | 需要读取日历、文档、任务系统等外部资料 |
普通用户不需要一开始就配置这些。先完成一次生成;发现某类任务经常重复或需要连接外部资料时,再看对应说明。
为什么有时会先问你问题
有些任务信息不够清楚时,Open Design 可能不会立刻生成,而是先确认需求。这通常不是坏事——说明当前任务里有关键条件不明确,比如:
- 页面给谁看还不清楚
- 要生成网页、PPT 还是图片不明确
- 上传了截图但没说明参考布局、颜色还是内容
- 按钮点击后跳转去哪没说明
- 缺少必要资料
直接回答问题就行,回答得越具体,生成越稳定。
记住这几件事
- 首页开始新任务,项目页继续修改已有结果
- 生成结果优先从「设计文件」和「预览」查看
- 不满意不要只说「不好看」,要说明哪里不对、希望怎么改
- 上传截图或文件后,要说明它的用途
- 做同一个任务时留在同一个项目里继续
- 需要看图时,确认当前模型支持图片理解
常见误解
| 误解 | 正确理解 |
|---|---|
| Open Design 一次就应该生成完美结果 | 它更适合一轮生成、一轮检查、一轮修改 |
| 它和传统原型软件一样,要手动点按钮连线 | 主要通过文字说明交互,例如「点击报名按钮跳到报名页」 |
| 上传截图后系统自然知道怎么参考 | 需要说明参考的是布局、颜色、内容还是交互 |
| 只要选择设计体系,就不用写需求 | 设计体系管风格,业务内容仍然要你说明 |
| 看不到文件就是没生成 | 先检查「本轮产出的文件」和右侧「设计文件」,必要时刷新 |
还没有公开评论。你可以提交第一个问题。