Language日本語
客観的な評価
ExodeUI vs Open Design
ExodeUI と Open Design: オープンソースの Vibe デザイン ワークスペース (open-design.ai) と、ExodeUI のオープン .exode コンポーネント フォーマットおよびクロスプラットフォーム ランタイムを比較します。
更新 2026年10月
アーキテクチャの根本的な違い
Open Design (open-design.ai) は、Claude Code、Codex、Cursor などのコーディング エージェントに接続して、150 以上のデザイン システムから HTML プロトタイプ、ランディング ページ、ダッシュボード、スライド デッキを生成する、オープンソースのローカル ファーストのデザイン ワークスペースです。 ExodeUI は、インタラクティブ ソフトウェア コンポーネント用の専用設計ツールおよびクロスプラットフォーム ランタイムです。静的な Web ページ全体を生成するのではなく、ステート マシン、スプリング物理学、および React、Vue、SwiftUI、および Flutter にわたるキャンバス上にレンダリングされる入力を備えた、オープンな .exode JSON 形式で生きたコンポーネントを作成します。どちらもローカル AI エージェントをサポートし、オープンな無料枠のワークフローを採用しています。 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 |
| AIエージェントのサポート | Claude Code、Cursor、OpenCode 用のオープン MCP サーバー (100 以上のツール) | ローカル CLI または BYOK 経由で Claude Code、Codex、Kimi、Cursor に接続 | 同等 |
| コストとオープンアクセス | 無料のコミュニティプラン。プロフェッショナル $29/月 | オープンソースのセルフホスト型 / BYOK。ホスト型クラウドプラン | 同等 |
選ぶべきケース: Open Design
- テキスト プロンプトから完全なマーケティング ランディング ページ、ダッシュボード、またはプレゼンテーション スライド デッキを迅速に生成する必要があります。
- 150 を超える既製のデザイン システムと 31 のスキルの広範なカタログから選択したいと考えています。
- 独自の LLM API キー (BYOK) に直接接続するローカル デスクトップ アプリまたは CLI が必要です。
選ぶべきケース: ExodeUI
- あなたは、実際の Web アプリやモバイル アプリ内で実行する必要があるインタラクティブな UI コンポーネント (ボタン、トグル、シート、ナビゲーション バー) を設計しています。
- 設計には、実際のバネの物理学、ジェスチャ、速度追跡、または制御をコード化するステート マシンが必要です。
- 専用のランタイム ライブラリによってクロスプラットフォームでレンダリングできるオープンな JSON 形式が必要です。
- AI エージェントが MCP 経由で生きたコンポーネントのジオメトリ、タイムライン、ロジックを操作できるようにしたいと考えています。
// 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 を使用します。
直接の回答
よくある質問
関連ページ
生きたソフトウェアコンポーネントを今日から作る。
Design it once and ship the same file to web and mobile — no handoff, no rebuild.