Open Design

@feimacode/open-design-agent-kit-mcp

あらゆる MCP 対応コーディングエージェントに、プロ品質のデザインを。コマンドを 1 つ実行するだけで、ほかに実行するものはありません。

これはOpen Designのデザインライブラリとワークフローを、Claude Code、Codex、Cursor など、MCP に対応するあらゆるもの向けに、プレーンな stdio MCP サーバーとしてパッケージ化したものです。163 個のスキル、114 個のデザインテンプレート、152 個のブランドデザインシステム、167 個のリミックス可能なサンプルが含まれています。デッキ、ランディングページ、ダッシュボード、プロトタイプの作成をエージェントに依頼すると、生成されたようではなく、デザインされたように見えるものを、プロジェクト内に実ファイルとして作成します。

• デスクトップアプリも、デーモンも、アカウントも不要です。 エージェントが必要に応じて stdio 経由でサーバーを起動し、エージェントの終了時にサーバーも終了します。
• API キーやモデル設定は不要です。 サーバーがモデルを呼び出すことはありません。生成はエージェント自身が選択したモデルで、通常のファイル編集ツールを使って行います。サーバーはライブラリを提供し、各種情報（マニフェスト、アクティブなデザインシステム）を管理します。
• 設定は不要です。 現在のプロジェクトですぐに使えます。アクティブなデザインシステムは .open-design/config.json に保存されます。
• プレーンなファイルです。 生成されるものはすべて、リポジトリ内の通常の HTML と小さな JSON サイドカーファイルなので、差分の確認、レビュー、コミットができます。

VS Code 拡張機能と同じコアツール、同じコンテンツを、ネイティブの languageModelTools ではなく MCP 経由で利用できます。

生成例

同梱されている約 280 個のスキルとテンプレートのうち 4 つを、そのままレンダリングしたものです。

「相互のつながり、マッチ率、30 日間の推移を含む、出会い系サイトのダッシュボードをデザインしてください。」	「毎日のクエストと XP を取り入れた、習慣トラッキングアプリ。」
「スイス・インターナショナル様式の、取締役会向け戦略デッキ。」	「小紅書風のスワイプ式カードカルーセルで、5 つのヒントを紹介してください。」

それぞれ remix_open_design_example（実際のサンプルをコピーしてから変更）または prepare_open_design_brief（指示を組み立てて、ゼロから生成）から作成されています。ほかの約 276 個を確認するには、list_open_design_skills を呼び出してください。

クイックスタート

npx -y @feimacode/open-design-agent-kit-mcp

これは標準的な stdio MCP サーバーです。エージェントに登録してください。

Claude Code

claude mcp add open-design -- npx -y @feimacode/open-design-agent-kit-mcp

代わりにClaude Code プラグインをインストールすることもできます。サーバーを自動的に登録し、Open Design スキルも追加します。

その他の MCP クライアント

サーバーはMCP レジストリに io.github.feimacode/open-design として掲載されているため、これを読み込めるクライアント（VS Code の @mcp ギャラリーなど）から直接インストールできます。VS Code では、拡張機能をおすすめします。ライブプレビューと編集機能が追加されます。また、両方をインストールすると、同じツールが重複して登録されます。

Codex CLI

codex mcp add open-design -- npx -y @feimacode/open-design-agent-kit-mcp

または、~/.codex/config.toml を手動で編集します。

[mcp_servers.open-design]
command = "npx"
args = ["-y", "@feimacode/open-design-agent-kit-mcp"]

あるいは、npx @feimacode/open-design-agent-kit init --tools codex を実行して、対応するスキルも追加できます。Codex のセットアップをご覧ください。

その他すべての MCP ホスト — 汎用的な設定形式：

{
  "mcpServers": {
    "open-design": {
      "command": "npx",
      "args": ["-y", "@feimacode/open-design-agent-kit-mcp"]
    }
  }
}

ツールとプロンプト

24 個のツールを利用できます。VS Code 拡張機能と同じ内容ですが、コミュニティ共有機能は含まれません。

• カタログ： list_open_design_skills、list_open_design_design_systems、recommend_open_design_design_systems
• 生成： read_open_design_source（DOCX、PPTX、XLSX、PDF などを Markdown に変換）、prepare_open_design_brief、register_open_design_artifact、get_open_design_artifact、remix_open_design_example、add_open_design_diagram_runtime
• 方向性の検討： prepare_open_design_exploration、compare_open_design_exploration、choose_open_design_direction
• デザインシステム： set_active_design_system、create_open_design_design_system
• プロトタイプの先へ： port_open_design_artifact_to_app、prepare_open_design_component_library、pull_open_design_figma_frame、push_open_design_artifact_to_figma、publish_open_design_artifact_to_canva、publish_open_design_artifact_to_shop
• 確認とエクスポート： check_open_design_artifact（スクリーンショットと事前チェックの結果）、export_open_design_artifact（PNG/JPEG、PDF、PowerPoint、MP4/WebM/GIF、単体 HTML、サイト用フォルダー、メール用 HTML、貼り付け可能な HTML、スプレッドシートの行ごとに 1 ファイル）、adapt_open_design_artifact、create_open_design_qr_code、list_open_design_print_houses。レンダリングには Chrome、Edge、Chromium のいずれかがインストールされている必要があります。アニメーションのエクスポートには FFmpeg も必要です。
• 共有： publish_open_design_artifact（一時リンク、または独自の Netlify、Vercel、Cloudflare Pages、GitHub Pages）
• 連携： list_open_design_integrations（エージェントが接続できる Canva、Figma、Notion、Google Drive、Slack、投稿サービス）

MCP プロンプト：ワークフロー open-design-new、open-design-social-post、open-design-poster、open-design-campaign、open-design-docs、open-design-explore、open-design-publish、open-design-deck-from-source、open-design-integrations、open-design-recurring のほか、リミックス可能な各サンプルに対して 1 つずつ od-<mode>-<id> プロンプトがあります。

引数、結果、エラーについては、ツールリファレンスをご覧ください。プロンプトについては、プロンプトとコマンドをご覧ください。

設定

デフォルトでは設定不要です。サーバーはエージェントの起動ディレクトリで動作します。省略可能な環境変数（OPEN_DESIGN_WORKSPACE_ROOT、OPEN_DESIGN_OUTPUT_DIR、OPEN_DESIGN_FIGMA_TOKEN、OPEN_DESIGN_BROWSER_PATH、OPEN_DESIGN_FFMPEG_PATH、OPEN_DESIGN_SHARE_BADGE）については、設定と環境変数をご覧ください。

含まれない機能

ライブプレビュー、インラインコメント、WYSIWYG 編集、Tweaks パネルは Webview ベースのため、VS Code 専用です。これらの機能については、VS Code 拡張機能をご覧ください。このパッケージに含まれるのは、ヘッドレスのスキル／デザインシステム／アーティファクトのワークフローのみです。

詳細

ドキュメント · トラブルシューティング · すべてのガイド · ソーシャルメディアの投稿 · スライドデッキと PDF のエクスポート

ライセンス

MIT — LICENSEをご覧ください。スキル／デザインシステム／サンプルのコンテンツは、Apache-2.0 ライセンスの open-design からベンダー提供されています。