オープンソースの Framer 代替。
Framer はサイトをデザインして公開するための、ホスト型のノーコードビジュアルビルダーです。Open Design は Claude Code 向けの自己進化型デザインエージェントで、ローカルファースト・BYOK・オープンソースであり、コーディングエージェントを通じてデザインを駆動し、ポータブルなブランドをファイルとして保ちます。形は異なりますが、目標は同じ、出荷されるインターフェースです。
Open Design は、あなたがすでに使っているコーディングエージェントを囲む、オープンソースでローカルファーストなデザインレイヤーです。あなたのキー、あなたのファイル、厳選されたスキルとデザインシステムのライブラリ。
Framer はホスト型のノーコードキャンバスを、デザインされ公開されたウェブサイトに変えます。Open Design は Claude Code やその他のコーディングエージェント向けの自己進化型デザインエージェントで、ローカルファースト・BYOK・Apache-2.0 であり、エージェントを通じてデザインを駆動し、ポータブルなブランドを自分のリポジトリにファイルとして保ちます。
これは正直な比較です。Framer とは何か、なぜチームが代替を探すのか、ローカルファースト + BYOK が作業の形をどう変えるのか、機能ごとの表、誰がどちらを選ぶべきか、そしてデザインをどう移行するか。Framer が勝る点についても率直に述べています。
Framer とは
Framer はウェブサイトをデザインして公開するための、ホスト型のノーコードビジュアルビルダーです。手でレイアウトするキャンバスに、コンポーネント、CMS、AI 機能、そして 1 か所でのホスティングを備えています。マーケティングサイトを、コードを書かずにデザインから公開まで持っていくのが得意です。
クローズドソースでベンダークラウド上で動作し、サブスクリプションで課金されます。Open Design は異なる立場です。ローカルファーストでオープンソースのデザインエージェントで、自分のコーディングエージェントを向けて使います。インターフェースの生成で重なりますが、ノーコードの公開とホスティングでは重なりません。
- ベンダー: Framer — ホスト型 SaaS
- 価格: サブスクリプション(サイト単位 / プラン)
- 主な出力: 公開された、ホスト型のサイト
なぜチームは Framer の代替を探すのか
チームが Framer の先を探し始めるのは、デザインを、ベンダークラウドに存在し(そこから公開される)プロジェクトではなく、自分が所有し、すでに使っているエージェントで生成し、どこにでもデプロイできるファイルにしたいときです。
- ファイルを所有する: デザインは、ホスト型プロジェクトではなく、リポジトリ内のバージョン管理された成果物であるべきです。
- オープンソース: Apache-2.0 でセルフホスト可能。フォークし、スタジオ向けにリブランドし、あるいは CI に組み込めます。クローズドなホスト型 SaaS ではありません。
- エージェント駆動: すべてのセクションを手で作るのではなく、すでに使っているコーディングエージェントでデザインを生成・反復します。
- 1 つのホストに縛られない: 出力はファイルです。ベンダーのホスティングだけでなく、どこにでもデプロイできます。
ローカルファースト + BYOK の解説
Open Design はデスクトップアプリ、ローカルデーモン、そして Markdown のスキルとデザインシステムのカタログをあなたのマシン上で実行します。あなたのデザインはホスト型プロジェクトではなくファイルであり、あなたのブランドは、すべてのスキルが従うポータブルな DESIGN.md ファイルとしてリポジトリに存在します。
自分のエージェントキーを持ち込みます。認証情報はローカル設定または環境変数に留まり(Open Design がそれらをプロキシすることはありません)、API 費用は直接あなたに請求されます。
Open Design vs Framer の機能比較
| 機能 | Open Design | Framer |
|---|---|---|
| デザインの仕方 | コーディングエージェントにプロンプト | 手作業のノーコードビジュアルビルダー |
| ライセンス | Apache-2.0、GitHub 上のフルソース | クローズドソース、ホスト型製品 |
| ランタイム | あなたのマシン上のローカルデーモン | ベンダークラウド |
| 成果物の所有 | プロジェクトディレクトリ内のファイル | ホスト型プロジェクト |
| デザインシステム | リポジトリ内のポータブルな DESIGN.md | プロジェクトごとのスタイリング |
| ホスティング / デプロイ | デプロイはあなたが所有。バンドルされない | ホスティング込み |
| エージェント | BYOK: Claude Code、Codex、Cursor、Gemini、OpenCode、Qwen | ベンダー管理のモデル |
| セルフホスト | 可能。Node 24 が動く場所ならどこでも実行 | 不可 |
| CLI / CI | od CLI + HTTP daemon で可能 | Web UI 優先 |
Framer が勝る点: マーケティングサイトをデザインして公開し、ホスティングまで含めるノーコードビジュアルビルダーが欲しいなら、Framer はそれを最初から最後まで実現します。Open Design は代わりにデザインファーストでエージェント駆動です。
どちらを選ぶべきか
Framer を選ぶべきケース:
- サイトをデザインして公開するノーコードビジュアルビルダーが欲しい。
- ホスティングを 1 か所に含めたい。
- ファイルと BYOK よりホスト型キャンバスを好む。
Open Design を選ぶべきケース:
- デザイン成果物とブランドをバージョン管理されたファイルとして欲しい。
- 既存のコーディングエージェントで BYOK したい。
- フォーク、リブランド、CLI 組み込み、セルフホストができるオープンソースが欲しい。
- すべてのスキルが従う、ブランドごとに 1 つの DESIGN.md が欲しい。
Framer から Open Design へデザインを移す
現時点で Framer からの自動インポートはありません。一度きりのブランド抽出実行でデザインファーストに始めましょう。
- クイックスタートから Open Design をインストールします。
- Web UI を開き、気に入った Framer のサイトやスクリーンショットにエージェントを向けます。
- エージェントにブランドを DESIGN.md ファイルへ抽出するよう依頼します。
- スキルを 1 つ選び、新しいブランドに対してレンダリングします。
それ以降は、すべてのスキルが再プロンプトなしであなたのブランドでレンダリングされ、ファイルはリポジトリに残ります。
FAQ
-
01 Open Design は Framer のドロップイン代替ですか?
いいえ。Framer はホスト型のノーコードサイトビルダーで、Open Design はエージェント駆動でローカルファーストなデザインレイヤーです。両者はインターフェースの生成で重なりますが、ノーコードの公開とホスティングでは重なりません。
-
02 Open Design は Framer のようにサイトを公開できますか?
Open Design はあなたが所有するデザイン成果物とコードを生み出し、デプロイは自分で行います。オールインワンのノーコードビルダーとホスティングなら、Framer の方が適しています。
-
03 Open Design はどのエージェントを使いますか?
あなたの選択次第です。Claude Code、Codex、Cursor、Gemini、OpenCode、Qwen で BYOK できます。認証情報が私たちを通してプロキシされることはありません。
-
04 Open Design は本当にオープンソースですか?
はい。github.com/nexu-io/open-design に Apache-2.0 で公開されており、セルフホスト可能です。
-
05 Open Design は Framer と提携していますか?
いいえ。Open Design は独立したオープンソースプロジェクトです。Framer はその所有者の商標であり、これは提携関係のない比較です。
デザインファーストを、3 つのコマンドで。
リポジトリにスターを付け、デスクトップビルドを入手するか、ターミナルでインストールを実行してください。あなたの DESIGN.md システムは、最初のレンダリングからずっとリポジトリに残ります。