Open Design を支える4つのライブラリ — Skills、Systems、Templates、そして Craft
Open Design の成果物を優れたものにしている4つのコンテンツライブラリを紹介します——組み合わせ可能なスキル、可搬性のあるデザインシステム、そのまま fork できるテンプレート、そしてあまり語られない「craft」レイヤー(linter によって自動的に強制されるブランド非依存のレンダリング原則)です。AI Fusion のウォークスルーに基づいています。
なぜ Open Design の成果物は、一般的な AI デザインツールよりも見栄えがするのでしょうか?それは4つのコンテンツライブラリが連携して働いているからです——そしてそのうちの一つ、craft は、ほとんど話題に上りません。本ガイドではその4つすべてを見ていきます。AI Fusion が動画で示したウォークスルーに沿い、現行リリースに合わせて書き直し・アップデートしています。上の動画を見るか、以下の文章版をお読みください。
プラグインライブラリ:レジストリから直接スキルをインストール——安っぽさを排したデザインスキルも含まれます。
Open Design とは?
Open Design は、クローズドなクラウドデザインツールに対する、オープンソースでローカルファーストな代替です。独自の AI エージェントは同梱していません——代わりにあなたが既に持っているコーディングエージェントを検出します(Claude Code、Codex、Cursor、Gemini、OpenCode など)。あるいは自分の API キーを持ち込むこともできます(Anthropic、OpenAI、Azure、Google Gemini、さらには Ollama 経由のローカルモデルまで)。アーキテクチャは明快で、フロントエンドがローカルのデーモンと通信し、すべてがローカルの SQLite データベースに保存されるため、戻ってきたときにプロジェクトは常にそこにあります。
4つのライブラリ
1. Skills — 「どう作るか」のレイヤー
スキルはモード、シナリオ、プラットフォームごとに整理されています。各スキルは文字どおり1つのスキルファイルだけを含むフォルダです——放り込んでデーモンを再起動すれば、ピッカーに現れます。よくあるもの(SaaS ランディング、ダッシュボード、ドキュメント)に加えて、際立ったものもあります:スイス・インターナショナル調のデッキ(16 カラムグリッド、単一のアクセント、ロックされたレイアウトのバリエーション)、雑誌編集風のデッキ(インクと電子ペーパーの美学)、そしてグリッチのタイトルカードやカーソルの光跡イントロといったクリエイティブな動画スキルなどです。
2. Design systems — 「どう見えるか」のレイヤー
各デザインシステムは、完全なトークン仕様を備えた1つの markdown ファイルです:色、タイポグラフィ、余白、コンポーネント、モーション。Apple のプレミアムな余白、Airbnb の温かなコーラルで写真主導の UI、Airtable の構造化データ風の見た目、データ密度の高いアプリ向けの Ant Design——あらゆる成果物を視覚的に一貫させる、大規模で可搬性のあるライブラリです。
プラグインハブ:レジストリを閲覧し、プラグインをインポートして、チーム向けに準備します。
3. Templates — 「何かから始める」レイヤー
サンプルデータが既に入った、そのまま fork できる完成済みの成果物バンドルです。フォルダを fork し、自分のデータに差し替えて、出荷。雑誌ポスターのテンプレート(特大のセリフ見出し、2 段組の本文)や、音楽を Suno/Udio に、音声を ElevenLabs/MiniMax にルーティングするオーディオジングルのテンプレートを思い浮かべてください。
4. Craft — 「なぜ高品質なのか」のレイヤー(最も語られないもの)
これは多くのレビューが飛ばす部分です。Craft は、スキルが必要だと宣言できるブランド非依存のレンダリング原則の集合で、エージェントは関連するものを自動的にシステムプロンプトへ読み込みます:
- 法的な最低限を超えるアクセシビリティのベースライン。
- アニメーションの節度——モーションがその存在に値するのはいつか、そしてその制約。
- 色のルール、長文向けの編集的なタイポグラフィ階層、そしてフォーム検証のルール。
重要なのは、一部は linter によって自動的に強制されるという点で、それらに違反することはスタイルの好みではなくリグレッションとして扱われます。これこそが、AI デザインツールに期待するよりも成果物の品質が高い大きな理由です——基準は提案ではなく強制されているのです。
スライドデッキモード:デッキのカテゴリーを選び、サンプルを起点として fork します。
インストールして試す
open-design.ai/download からインストーラー(macOS/Windows)をダウンロードして起動します——すっきりしたインターフェース、上部のチャットエリア、カテゴリー別のすぐ使えるコミュニティオプション(prototype、live artifact、slides、image、video、hyperframes、audio)。AI Fusion は Gemini API キーを追加し、接続をテストしてから、コミュニティの live-artifact(ソーシャルメディアのマトリクストラッカーのダッシュボード)を fork します。まず全体のプランを提示し、続いてレスポンシブな結果を構築します。それはタブレット/モバイルで確認でき、テーマを変更でき、コードとして表示でき、HTML としてダウンロードできます。
ヒント
- 構造にはスキルを、スタイルにはデザインシステムを選ぶ——その組み合わせが品質のほとんどを占めます。
- 空のプロンプトからではなく、完成した何かから始めたいときはテンプレートを forkしましょう。
- craft は強制されると心得ておく——アクセシビリティ/アニメーション/タイポグラフィのベースラインは lint されており、任意ではありません。
- 現在のスキルとシステムを見るには open-design.ai/plugins を閲覧してください。
- どのモデルでも動きます——品質はライブラリが担います。手元にあるものを何でも接続してください。
よくある質問
成果物を良くしているのは実際には何ですか? 4つのライブラリです:skills(構造)、design systems(スタイル)、templates(出発点)、そして craft(レンダリング原則、その一部は linter によって自動的に強制されます)。
「craft」レイヤーとは何ですか? ブランド非依存のレンダリングルール(アクセシビリティ、アニメーションの節度、色、タイポグラフィ、フォーム検証)で、スキルがそれを選択して採用し、エージェントが自動的に読み込みます——いくつかは lint されるため、違反はリグレッションになります。
スキルやシステムの追加は簡単ですか? はい——スキルはスキルファイルを含むフォルダ、デザインシステムは1つの markdown ファイルです。放り込めば認識されます。
無料でオープンソースですか? はい——Apache-2.0、ローカルファーストです。無料で実行できます。あなたが接続したモデル/メディアの利用分だけ支払えばよいのです。
この文章によるガイドは AI Fusion のウォークスルーに基づいています。上のフル動画を見て、より多くのオープンソース AI ツールを知るために AI Fusion を登録してください。