Language简体中文
客观评价
ExodeUI vs Open Design
ExodeUI 与 Open Design：将开源 Vivi 设计工作区 (open-design.ai) 与 ExodeUI 的开放 .exode 组件格式和跨平台运行时进行比较。
已更新 2026 年 10 月
简短回答
根本的架构差异
Open Design (open-design.ai) 是一个开源、本地优先的设计工作区，可连接到 Claude Code、Codex 和 Cursor 等编码代理，从 150 多个设计系统生成 HTML 原型、登陆页面、仪表板和幻灯片。 ExodeUI 是交互式软件组件的专用设计工具和跨平台运行时：它不是生成整个静态网页，而是以开放的 .exode JSON 格式创建活动组件，其中包含状态机、弹簧物理和在 React、Vue、SwiftUI 和 Flutter 上渲染在画布上的输入。两者都支持本地人工智能代理并采用开放、免费的工作流程。 ExodeUI 不隶属于 Open Design。
并排比较
特性和功能细分
| 方面 | ExodeUI | Open Design | 优势 |
|---|---|---|---|
| 主要目的 | 交互式 UI 组件、微交互和动画 | 登陆页面、仪表板、幻灯片和营销视觉效果 | 领带 |
| 文件格式和可交付成果 | 打开.exode JSON格式（编译为.bexode） | HTML/CSS 文件、PDF、PPTX 和 zip 存档 | 领带 |
| 运行时包 | 9 个生产运行时（React、Vue、Svelte、Angular、Solid、React Native、SwiftUI、Flutter、JS） | 生成的 HTML 的标准 Web 浏览器渲染 | ExodeUI |
| 运动与物理 | 弹簧物理（刚度、阻尼、质量）、时间线和碰撞逻辑 | 静态布局或标准浏览器 CSS 转换 | ExodeUI |
| 状态机 | 具有输入、转换和节点逻辑的完整可视状态机 | 未内置（原型屏幕链接） | ExodeUI |
| 设计系统库 | 自动布局、矢量编辑器、Figma 插件导入 | 150 多个捆绑的开源设计系统和 31 种可组合技能 | Open Design |
| 人工智能代理支持 | 适用于 Claude Code、Cursor、OpenCode 的开放 MCP 服务器（100 多个工具） | 通过本地 CLI 或 BYOK 连接到 Claude Code、Codex、Kimi、Cursor | 领带 |
| 成本和开放获取 | 免费社区计划；专业人士 $29/月 | 开源自托管/BYOK；托管云计划 | 领带 |
用例 Open Design
何时选择 Open Design
- 您需要根据文本提示快速生成完整的营销登陆页面、仪表板或演示幻灯片。
- 您想要从包含 150 多个现成设计系统和 31 种技能的广泛目录中进行选择。
- 您需要一个直接连接到您自己的 LLM API 密钥 (BYOK) 的本地桌面应用程序或 CLI。
用例 ExodeUI
何时选择 ExodeUI
- 您正在设计交互式 UI 组件（按钮、切换开关、工作表、导航栏），这些组件必须在真实的 Web 和移动应用程序中运行。
- 该设计需要真正的弹簧物理、手势、速度跟踪或代码控制的状态机。
- 您需要一种开放的 JSON 格式，可以通过专用运行时库跨平台呈现。
- 您希望 AI 代理通过 MCP 操纵活动组件的几何形状、时间线和逻辑。
Open Design CLI + ExodeUI 运行时架构
BYOK 和组件运行时// 1. Open Design: Generate page layout via your local agent (BYOK)
// $ npx opendesign generate --system=tailwind --prompt="SaaS analytics dashboard"
// 2. ExodeUI: Embed physics-driven living components inside that layout
import { ExodeUICanvas } from 'exodeui';
export function InteractiveAnalyticsCard({ metricValue }) {
return (
<div className="rounded-xl border border-neutral-800 p-6 bg-neutral-900">
<ExodeUICanvas
src="/components/metric_gauge.bexode"
inputs={{ value: metricValue }}
/>
</div>
);
}使用 Open Design 进行整页布局草稿，使用 ExodeUI 进行具有弹簧物理和状态机的可交付组件。
直接回答