← ガイド プレビュー: アンチスロップ・エンジン — Open Design が場当たりではなくシニアのように設計する仕組み
ガイド

アンチスロップ・エンジン — Open Design が場当たりではなくシニアのように設計する仕組み

Open Design が画一的な AI スロップを生み出さない仕組みを深掘りする — 6 層の品質防御(ディスカバリーフォーム、ブランド抽出、自己批評、チェックリスト、ブラックリスト、誠実なプレースホルダー)に加え、手元にある既存のエージェントをどうオーケストレーションするか。AI Teaches Better の解説に基づく。

AI Teaches Better 2026年5月3日 8:57 YouTube ↗

ほとんどの AI デザインツールは、画一的で妙に紫がかったグラデーションだらけの混沌を返してくる。本ガイドが解説するのは、Open Design がそうしないための仕組み — エージェントを場当たり的にではなくシニアデザイナーのように振る舞わせる多層品質システムだ。AI Teaches Betterそのウォークスルーで示した解説を踏襲し、現行リリースに合わせて書き直し・最新化した。上の動画を見るか、テキスト版として読み進めてほしい。

インストール可能なスキルが並ぶ Open Design のプラグインライブラリ。 プラグインライブラリ:レジストリから直接スキルをインストール — アンチスロップなデザインスキルも含む。

Open Design とは?

Open Design は Apache-2.0 のローカルファースト・フレームワークだ — 単一モデルに縛られた、クローズドでクラウド専用のデザインツールに対するオープンソースの回答である。決定的な違いは:独自の AI エージェントを同梱しないこと。それは見事なオーケストレーターであり、デザイン作業を手元にある既存のコーディングエージェント CLI に委譲する。起動すると、そのローカルデーモンがマシンをスキャンし、CLI を自動検出する — Claude Code、Codex、Cursor、Gemini、Copilot など — そして見つけたものを候補のデザインエンジンに変え、stdio 経由で接続する。ベンダーロックインはなし。ワンクリックでエンジンを切り替えられる。CLI が一つも入っていない?OpenAI 互換のプロキシ・フォールバックがある — 任意の base URL とキーを差し込むだけだ。

スキル × デザインシステム = 意図のある出力

2 つのライブラリが重い仕事を担う:

  • 組み合わせ可能なスキル — 成果物の構造的 DNA をエージェントに伝えるフォルダ群:SaaS ランディングページ、データダッシュボード、PM 仕様書、マルチスクリーンのモバイルアプリ。スキルを一つ選べば、それがどう作られるべきかをすでに知っている。
  • ブランドグレードのデザインシステム — トップブランド(Linear、Stripe、Vercel、Apple、Notion)から引き出した決定論的なデザインルール。構造 × スタイルが掛け合わさり、能力と見た目の組み合わせからなる膨大な空間に広がる。すべてあなたのマシン上でネイティブに動く。

特定のブランドが念頭にない?厳選されたビジュアル方向性(Editorial Monocle、Modern Minimal、Tech Utility、Brutalist、Soft Warm)にフォールバックし、決定論的な OKLCH パレットとフォントスタックを固定する — AI が雰囲気を場当たりで決める余地を取り除くのだ。

Open Design のプラグインハブ。 プラグインハブ:レジストリを閲覧し、プラグインをインポートし、チーム向けに準備する。

アンチスロップ・エンジン(6 つの層)

ここが核心だ。あなたが成果物を目にする前に、Open Design は AI Teaches Better が明快に提示する 6 層の防御を走らせる:

  1. ディスカバリーフォーム — 1 ピクセルも描く前に、トーン・オーディエンス・ブランドについて尋ね、方向性を固める。
  2. ブランド抽出 — URL を渡すと、ブランド仕様を体系的に抽出する。
  3. サイレントな自己批評 — 成果物を表に出す前に、自身の作品に対して五次元の批評を実行する。
  4. P0–P2 チェックリスト — 出力は厳格な優先度チェックリストを通過しなければならない。
  5. ハードコードされたブラックリスト — 画一的なグラデーションや、あの妙な左ボーダー角丸カードは文字どおり禁止されている。
  6. 誠実なプレースホルダー — でっち上げた「10 倍高速」のような偽の指標ではなく、グレーのブロックを使う。

その本質を捉えた言い回しがこれだ:「あれは AI が何かを設計しようとしているのではない — あれはシニアデザイナーのように振る舞うよう訓練された AI だ。」プロンプトスタックに深いファイルシステム統合が加わることこそが、出力を引き上げ、誰もがうんざりしているあの AI 臭いスロップを防ぐのだ。

サンプルのスライドデッキ付き、Open Design のスライドデッキモード。 スライドデッキモード:デッキのカテゴリを選び、サンプルを fork して出発点にする。

UI を超えて:ローカルなクリエイティブスタジオ

同じチャット画面がリッチメディアも駆動する — 画像生成(GPT Image)、短尺の映画的なテキスト・トゥ・ビデオ、hyperframes によるモーショングラフィックス、さらには音声まで — そして再現しやすいメディアプロンプトのテンプレートが用意され、白紙のキャンバスに向き合うことは決してない。

はじめに(3 ステップ)

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

ローカルデーモンが起動し、あなたの CLI エージェントを自動検出し、SQLite ストアを自動でセットアップする — 複雑な設定はゼロ。表示されるローカル URL を開くか(ポートは動的 — 決め打ちしないこと)、open-design.ai/download からデスクトップアプリを入手する。そのローカルストアのおかげで、ノート PC を閉じても、タブと生成されたファイルは離れたときのままぴったり残っている。Claude Design のエクスポート ZIP をドラッグして読み込み、ローカルで編集を続けることさえできるし、クリックでコメントできる HTML プレビューで外科手術的な修正をしたり、ワンクリックで Vercel にデプロイしたりできる。

ヒント:反復中に API のレート制限にぶつかった?Open Design は標準の環境変数を使うので、base URL を OpenAI 互換のプロキシに向ければそのまま続けられる。

ヒント

  • ディスカバリーフォームをステップゼロと考えよ — それはアンチスロップ・エンジンの第一層だ。
  • 本物のデザインシステムから始めよ(または厳選された方向性から)、そうすればエージェントが見た目を場当たりで決めることはない。
  • 自己批評とチェックリストを走らせよ — それこそが、あなたが目にする前にスロップを捕まえるものだ。
  • タスクごとにエンジンを切り替えよ — 見た目には強力なモデルを、機能には別のものを;ワンクリックで。
  • レート制限にぶつかったらプロキシの base URL を使え

よくある質問

出力が AI 生成に見えるのを実際に止めているものは何? 6 層のエンジンだ:ディスカバリーフォーム、ブランド抽出、五次元の自己批評、P0–P2 チェックリスト、スロップパターンのハードコードされたブラックリスト、そして偽の指標の代わりの誠実なプレースホルダー。

Open Design は独自のモデルを含む? いいえ — あなたのマシンにすでにあるコーディングエージェント CLI(または OpenAI 互換プロキシ)をオーケストレーションする。あなたはエンジンを持ち込み、それはデザインの規律を持ち込む。

スキルとデザインシステムをカスタマイズできる? はい — どちらもファイルだ。自分のスキルフォルダやデザインシステムを追加すれば、それが拾われる。

無料? アプリは Apache-2.0 の下でオープンソースであり、ローカルで実行するのは無料だ。あなたが接続したエージェントとプロバイダーのモデル・メディア利用分だけを支払う。


この文章版ガイドは AI Teaches Better の解説に基づいている。上の完全な動画を見て、より多くの AI アーキテクチャの分解のためにAI Teaches Better を購読してほしい。