チーム向け Open Design —— バージョン管理できるスキル、自社のブランドシステム、そしてアンチスロップのガードレール
Open Design を、チームのための本物のバージョン管理可能なデザインワークフローとして使う方法 —— 自分たちのスキルとブランドの DESIGN.md を作り、アンチスロップの批評ゲートを活用し、本番利用については現実的な期待を保つ。AICodeKing の分析に基づく。
このガイドは、Open Design を単なる使い捨てのプロトタイプ生成器ではなく、本物のバージョン管理可能なデザインワークフローとして使うことについてのものです。チームにとってこれを面白いものにする組み合わせはこうです——すでに使っているエージェント、ファイルベースのスキル、そしてブランドの DESIGN.md システム、さらに出力が「生成されたもの」に見えないよう抑えるアンチスロップのガードレール。本記事は AICodeKing が彼の動画で示した分析を踏まえ、現行リリースに合わせて書き直し・更新したものです。全体の解説は上の動画をご覧いただくか、文章版は以下からお読みください。
プラグインライブラリ：レジストリから直接スキルをインストールできます——anti-slop なデザインスキルも含みます。
Open Design とは？
Open Design は、ローカルファーストでオープンソースのデザインアプリで、あなたがすでに使っているコーディングエージェントに接続します。独自のモデルを同梱するのではなく、Claude Code、Codex、Cursor、Gemini、OpenCode、Qwen Code などのツールをパスから検出し、そのエージェントをデザインエンジンとして使います——どれもインストールされていなければ、Anthropic API（BYOK）にフォールバックします。ライセンスは Apache-2.0 で、コストは選んだモデルの分だけです。AICodeKing の言葉を借りれば、これは「すでに持っているエージェントを包むデザインの殻」です。
なぜ単なるチャットボックスではなく、チームのワークフローなのか
AICodeKing が高く評価する理由はこうです——これはプレビュー付きの空白のプロンプトボックスではありません。価値はすべてバージョン管理できる三つのものの組み合わせにあります：
- あなたの既存のコーディングエージェント —— エンジン、すでに支払い済み。
- ファイルベースのスキル —— 各スキルが、特定の面（SaaS のランディング、ダッシュボード、料金ページ、ドキュメント、ブログ、モバイルアプリ、デッキ）についてエージェントにルールを与えます。「いい感じのページを作って」ではなく。
DESIGN.mdブランドシステム —— 配色、タイポグラフィ、余白、レイアウト、コンポーネント、モーション、トーン、ブランドルール、アンチパターンを網羅した、プレーンな markdown のデザインシステム。
スキルとデザインシステムがファイルなので、チームは自社内部のダッシュボードスキルと自社ブランドの DESIGN.md を作り、それらを git にコミットし、Claude Code、Codex、あるいは任意のエージェントにそれらのルールに従った成果物を生成させることができます。これはバージョン管理でき、フォークでき、レビューできるデザインワークフローです——閉じたデザインチャットボックスには提供できないものです。
プラグインハブ：レジストリを閲覧し、プラグインをインポートして、チーム向けに準備します。
アンチスロップの仕組み
AICodeKing のお気に入りの部分であり、チームの出力が見せられる水準を保てる理由でもあります：Open Design は AI 生成 UI の「ばれる兆候」と戦います。プロンプトスタックは、成果物を出す前に多次元の批評（デザイン哲学、階層、実行、具体性、抑制）を走らせ、各スキルはエージェントが満たすべき P0/P1/P2 のチェックリストを同梱でき、リポジトリはよくある失敗パターンを明示的に禁じています——けばけばしい紫のグラデーション、ありふれた絵文字アイコン、左ボーダーのアクセントが付いた適当な角丸カード、偽の数値、装飾的な穴埋め。さらにディスカバリーフォーム（書き始める前に面、対象、トーン、ブランド、規模を尋ねる）と方向性ピッカー（決定論的なパレットを備えた厳選されたビジュアルの方向性）と組み合わせることで、エージェントは細部を詰めるたびに漂流するのではなく、安定した信頼できる情報源を持ちます。
インストール
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web表示されるローカル URL を開きます（ポートは動的です——ハードコードしないこと）。セットアップなしがいいですか？デスクトップアプリを open-design.ai/download から入手してください。初回起動時に、インストール済みのエージェント CLI を検出します。どれか一つを選ぶか、Anthropic BYOK オプションを使ってください。プラグインライブラリの全体は open-design.ai/plugins で閲覧できます。
チームらしさのあるデモ
AICodeKing が提案するフローは、実際の仕事にきれいに対応します：エージェントとして Codex か Claude Code を選び、スキル（SaaS ランディングまたはダッシュボード）を選び、デザインシステム（例えば Linear や Stripe——良し悪しを判断しやすい）を選びます。社内向けプロダクトのランディングページのような具体的なものをプロンプトに与え、ディスカバリーフォームを埋め、方向性を選び、走らせます。計画がストリーミングで流れ込み、エージェントがスキルと DESIGN.md を読み、実際のファイルを書きます。
HyperFrames ギャラリー：コード駆動のモーションや動画作品を、フォークしてリミックスできます。
出力はサンドボックス化されたプレビューでレンダリングされ、HTML、PDF、ZIP、Markdown（デッキ系スキルでは PPTX 形式）にエクスポートできます。デザインシステムとスキルがプロンプトスタックに留まり続けるため、詰めの作業で漂流しません——エージェントは毎ターン見た目を発明し直すのではなく、安定した参照を保ちます。
本番利用について正直であろう
AICodeKing は冷静に見ていますし、あなたもそうあるべきです：これは初期段階のプロジェクトなので、即戦力の本番デザインチームではなく、強力な出発点として扱ってください。出力の品質は、向ける先のモデルに大きく依存します——弱いモデルに良いデザインシステムを足しても、デザインの判断力は弱いままです。Claude Code は最も豊富なストリーミングを得られます。ほかの CLI は行単位でバッファされます。そしてデーモンは作業ディレクトリを伴ってエージェントを起動するため、どのスキルをインストールし、どのディレクトリを露出させるかは慎重に考えてください。手早いプロトタイプ、ランディングページ、社内ダッシュボード、デッキには本当に役立ちます。出荷する本番 UI については、生成してから、コードをレビューし、レスポンシブをテストし、詰めてください。
ヒント
- 自分のスキル + ブランド
DESIGN.mdを書いてコミットしましょう——それがチームの超能力です。 - 出力を判断するときは認識しやすいデザインシステム（Linear/Stripe）を選び、品質を評価しやすくしましょう。
- ディスカバリーフォームと方向性ピッカーを活用して、生成前に方向性を固めましょう。
- ローカルの CLI を使って、生成をすでに支払っているサブスクリプションに乗せましょう。
- 本番に向けては出力を出発点として扱い——レビューし、テストし、詰めましょう。
よくある質問
チームは自分たちのスキルとデザインシステムを作れますか？
はい——スキルはフォルダ、デザインシステムは DESIGN.md ファイルです。git にコミットすれば、接続された任意のエージェントがそれらに対して生成するので、ワークフロー全体がバージョン管理可能でフォーク可能になります。
出力が AI 生成に見えないようにしているものは何ですか？ 出力前の多次元の自己批評、スキルごとの P0/P1/P2 チェックリスト、よくあるスロップのパターン（紫のグラデーション、ありふれたアイコン、偽の数値）の明示的な禁止、それにディスカバリーフォームと方向性ピッカーです。
本番で使える状態ですか？ 初期段階ながら能力のある出発点です。プロトタイプ、ダッシュボード、ランディングページ、デッキに使ってください。本番 UI については、生成されたコードをレビューして詰めてください。
無料ですか？ アプリは Apache-2.0 のもとでオープンソースであり、ローカルで無料に動かせます。支払うのは、接続したエージェントとキーのモデル利用分だけです。
この文章ガイドは AICodeKing の分析に基づいています。上の完全な動画をご覧いただき、より多くの AI ツール深掘りのためにAICodeKing を購読してください。