インストール
/plugin marketplace add ckryptickunal/OpenDesigner
/plugin install opendesigner@opendesignerこんな人向け
AI コーディングアシスタントはすでに使っているものの、プロジェクトにはまだ統一されたビジュアルルールがない——という開発者や、小さなチームのためのものです。手元には数ページのデザイン案か断片的な口頭説明しかない一方で、コードの色・フォント・余白はページごとにバラバラに書かれている、という状況かもしれません。プロジェクト自体が一からで、まずデザインシステム一式を用意する時間を誰も取れない——という状況もあります。
これは、いま使っている AI ツールに足すアドオンです。言葉ではうまく伝えられない美の感覚を、コードがそのまま読み込めるファイルに変えることが目的なのであり、別のデザインソフトを開くためのものではありません。MIT ライセンスの無料オープンソースプロジェクトで、いまのエディタを置き換えることはなく、機能を一段足すだけ。いくつかの短い質問に答え、結果がプロジェクトディレクトリに書き込まれることを受け入れ、マージの前に自分でもう一度確かめてから試す——という人なら、まず一度動かしてみる価値はあります。別人の書いたコードをを引き継いだ直後で、まず見た目の方向性を掴みたい人も、これでひととおり全体を見渡すことができます。
3分で最初の試行を終える
まず前提条件を確認します。ローカルに Python 3.10 以上が必要です。エンジンは Python ファイルが1つだけで、依存パッケージのインストールは不要です。
第1ステップ、スキルをインストールします。推奨は Claude Code のプラグインマーケットで、会話欄に /plugin marketplace add ckryptickunal/OpenDesigner と入力して Enter を押し、続けて /plugin install opendesigner@opendesigner と入力します。
第2ステップ、インストール先を確認します。Agent Plugins に対応したツールはルートの plugin.json を読み込み、スキルを読むクライアントは .agents/skills/ ディレクトリから取得する約束になっています。プラグインマーケットを通らないクライアントでは、スキルを自分でプロジェクトの .agents/skills/ にコピーする必要があります。
第3ステップ、リスクの低いタスクを走らせます。プロジェクトを開き、会話で「Create a design system for this project.」と入力すると、短い質問が最大5つ出され、それぞれの質問には回答例と理由がついています。1つずつ確認するか書き換えてください。初回はきれいなディレクトリで実行するか、先にブランチを切っておくと、生成されたトークンが既存コードと混ざりません。
第4ステップ、副作用と確認ポイントを先に決めておきます。エンジンは結果を DESIGN.md、PRODUCT.md、opendesigner/ ディレクトリとして書き出します。トークン、各種エクスポート、オーバビューページが入っています。ディスク書き込みはリポジトリの中身を直接書き換えるので、先にブランチを作るかコミットを1つ残し、回答を確認してから書かせてください。
第5ステップ、観測できる成功サインを確認します。プロジェクトに上記の3つの成果物が現れ、セルフチェックでエラーが出ないこと——文字のコントラストを WCAG 2.2 AA で検証し、クリック領域が 24 px 以上、キーボードフォーカスが見え、動きの抑制設定への対応が済んでいること。エラーが1つでもあればビルドは止まります。
ユースケース
ケース1：新しいプロジェクトに最初のデザインシステムを敷く。プラグインを入れ終えたら、プロジェクトで先ほどの英語のトリガーを入力し、出てくる最大5つの短い質問に答えると、零零とした断片ではなくまとまったデザインシステムが得られます。1版目が完璧である必要はなく、それが追いかける問いと反復の起点になります。ここからさらに掘り下げられます。色、書体、間隔、動きという4つは、それぞれさらに1回ずつ質問して細かく詰めることができ、成果物はいつでも同じ3つのファイルとフォルダに落ちます。証拠はここまでです。公式ドキュメントは質問数の上限が5であること、詰め上げの対象がこの4つであることを明言していますが、質問数を調整できるかどうかは触れておらず、各詰めの対話形式についても説明していません。
ケース2：プラグインマーケットのないクライアントで同じスキルを再利用する。スキルをプロジェクトの .agents/skills/ ディレクトリにコピーし、いつもどおり会話でデザインシステムの生成を依頼して質問に答えると、出力とセルフチェックのルールはケース1とまったく同じです。プロジェクトにすでにトークンの命名規約がある場合は、コピーする前に2つの命名が衝突しないか確認してください。公式ドキュメントが明かしているのは、これらのクライアントがそのディレクトリからスキルを読むという事実だけで、コピー後にどう更新するかは説明していませんし、追加の依存関係や設定手順も示していません。
使用上の制限
エンジンの硬い要件は1つだけです。Python 3.10 以上で、それ以外は依存パッケージを一切インストールしません。インストール方法も公式ドキュメントが記しているものだけです。プラグインマーケットの外ではスキルを手動でコピーする必要があり、手動の経路のために公式は自動更新コマンドや検証コマンドを提供していません。実行時にプロジェクトファイルを直接書き換えるので、着手前にブランチかコミットを用意してください。組み込みのセルフチェックは硬いゲートです。コントラストが WCAG 2.2 AA に届かなければ、クリック領域が 24 px 未満なら、キーボードフォーカスが見えなければ、あるいは動きの抑制設定に対応していなければ、ビルドは止まります。修正は自動では行われないので、直してからもう一度走らせてください。5問のしくみは、質問そのものに短く答えられることが前提です。複雑な業務ルールが絡む場合、エンジンは判断を下せません。デザインシステムも最終成果物ではありません。トークンとドキュメントはリポジトリに残る一方で、既存のコンポーネントライブラリとの統合方法や、バージョン管理に含めるかどうかは公式ドキュメントに書かれていないので、ご自分で判断してください。リポジトリ: <https://github.com/ckryptickunal/OpenDesigner >.