floatboat
打开导航菜单

OpenDesign

OpenDesign 是一款开源设计工作区。你可以和 AI Agent 一起把设计需求做成可交互原型、演示文稿或动效，再预览并修改交付物。

为交互原型写一份带设计规则的任务书

先选一个用户流程和已确认的视觉规则。参考 OpenDesign 的做法，将可复用的规则与每个页面的行为分开写，并明确要交给审阅人的文件。

列出页面、失败状态、无障碍要求和已经确定的视觉规范。

复制请求，在 Floatboat 新对话中粘贴，并提供所需资料。

下载 Floatboat

带入 Floatboat 的请求

请求可预览和复制，不会从此处自动发送。

参考来源: OpenDesign
https://github.com/nexu-io/open-design

先阅读原始说明并核对当前环境与依赖。需要安装或连接新工具时，先提出方案。

我的任务:
参考 OpenDesign 如何组合 DESIGN.md 和原型模板，为三屏新手引导写任务书，包含验证失败状态。将可复用的视觉规则与单屏行为分开，标出需要我提供的素材，并列出交给开发前的检查项。

期望交付:
一份 DESIGN.md 提纲、页面状态清单和可编辑产物的交接方案。

从设计需求到可编辑的交付物

OpenDesign 将设计需求、输出模板和当前设计系统组合起来。设计系统以 DESIGN.md 为核心，记录可复用的视觉规则，也可以包含设计变量、组件和素材。做界面原型时，编程 Agent 根据这些约束生成 HTML，供团队预览和修改。

能访问文件系统的本机 Agent 可以直接写入项目文件。没有文件工具的纯 API 运行则返回一个完整的产物块。OpenDesign 也提供 MCP 服务，配置好客户端后，其他 Agent 可以按名称读取本地项目中的 CSS 变量、JSX 组件或入口 HTML。

桌面应用和自行部署方式可以使用本地项目文件。调用云模型或 OpenDesign Cloud 时，相关请求会发送到对应服务。处理未公开的方案、代码或受许可限制的素材前，先确认项目采用的执行方式。

OpenDesign 如何组织设计工作

把品牌规则、输出模板和 Agent 工作方式分开维护。同一套配色与排版规则可沿用到不同交付物，预览和验收仍按原型、演示文稿或动效各自的要求执行。

  • 设计规则可复用

    用 DESIGN.md 记录配色、字体、布局和组件规则。设计系统还可以附带设计变量和组件示例。

  • 按交付形式选择模板

    交互原型、演示文稿和动效项目使用各自的模板。根据产物选择导出形式，例如演示文稿的 PPTX 或 HyperFrames 动效的 MP4。

  • 把可编辑文件交给开发

    将本地项目文件纳入交接清单。需要跨仓库工作时，可以配置 MCP 客户端读取特定文件。

OpenDesign 的使用场景

先看审阅人需要判断什么。交互原型让开发检查状态与路径，发布演示文稿用于确认叙事顺序，动效则要核对镜头衔接与节奏。

在开发排期前跑通新手引导

把三屏引导的入口、分支、失败状态和示例文案交给 Agent。产品和工程一起预览可点击的 HTML，确认遗漏状态后再交接文件和验收标准。

让活动页面和方案演示沿用同套视觉规则

把字号层级、间距和已批准的颜色写进 DESIGN.md，再用于落地页草稿和演示文稿。分别检查两种形式里的阅读顺序，把验证过的规则留给下一批物料。

同时审阅演示内容和导出文件

先围绕需要确认的决策排好页面和证据，逐页检查讲稿。导出后在接收方使用的演示软件里打开，核对字体、断行和内容是否被裁切。

交接一段短动效的节奏

做一段用于功能亮相的 HyperFrames 草稿，检查开场、转场和最后一帧。把节奏说明和 MP4 一起交给同事，后续可以只调整一个镜头的时长。

运行 OpenDesign 前的准备

桌面版和源码运行需要不同的环境。确认平台、模型访问路径和交付格式后，用一个小任务走完预览与导出，检查接手人能否继续编辑。

  • 桌面平台

    上游列出了 macOS 和 Windows x64 安装包。目前 Linux 用户需要从源码运行。

  • 源码环境

    按官方快速入门核对 Node、pnpm 版本和启动方式。

  • Agent 与数据权限

    选用已安装的受支持编程 Agent，或配置模型端点及凭据。加入敏感内容前，检查提供商如何处理请求和文件。

相关软件项目

比较这些项目的用途、运行条件和源码许可。

OpenDesign 常见问题

DESIGN.md 在 OpenDesign 里有什么用？
它描述当前设计系统的视觉规则。设计系统还可以包含设计变量、组件、素材和来源信息。
可以使用团队现有的设计系统吗？
可以准备以自有 DESIGN.md 为核心的设计系统包。引用外部素材时，先核对各项内容的许可和来源。
本地优先意味着数据始终留在本机吗？
如果项目调用云模型或 OpenDesign Cloud，相应请求会发送到对应服务。处理敏感输入前要先核对项目选用的运行方式。
如何把界面原型交给开发？
确认预览中的交互，再交接 HTML、相关项目文件以及行为与无障碍要求。明确哪些部分还要按生产标准实现。
其他 Agent 可以读取 OpenDesign 文件吗？
上游提供 stdio MCP 服务，配置好的客户端可按名称读取本地项目文件。连接前先检查可暴露的内容和客户端权限。
有现成的 Linux 安装包吗？
上游快速入门目前指引 Linux 用户从源码运行。需要部署前，可以在 GitHub Releases 核对最新支持情况。