feimacode/open-design-agent-kit

これは何？

主な機能

• 01GitHub Copilot Chat、Claude Code、Codex、CursorなどのMCP対応エージェント内で動作します。
• 02生成するデザインに一貫性を持たせる、198種類のブランドデザインシステムを収録しています。
• 03編集可能な193点の作例をベースにするか、ブリーフから生成できます。
• 04完成前にブラウザでデザインを表示してチェックします。
• 05成果物をリポジトリ内に通常のファイルとして保存します。
• 06PDF、PNG、PowerPointにエクスポートできます。

ユースケース

• エディター内で短いプロンプトからSNS用グラフィックやポスターを作成する。
• 本番コードで構築する前に、スライドデックやランディングページのプロトタイプを作成する。
• CSVや文書から、リポジトリ内でレポート形式のレイアウトを作成する。
• 印刷用の履歴書や1ページの文書を作成し、PDFとしてエクスポートする。

クイックスタート

1. 1

   プロジェクトでワンコマンドセットアップを実行して、Claude Codeを接続します

   npx @feimacode/open-design-agent-kit init --tools claude
2. 2

   エージェントとのチャットを開き、ランディングページやポスターなど、作りたいデザインを説明します

使う前に知っておきたいこと

• !既存のコーディングエージェント内で動作するため、Claude Code、Codex、GitHub Copilot、Cursorなどが必要です。
• !npxを使ったインストール方法にはNode.jsが必要です。
• !Figmaなど、一部の連携では専用のトークンまたは公式MCPサーバーが必要です。

収録されている特集

トピック

よくある質問

open-design-agent-kit とは？

GitHub Copilot、Claude Code、Codex、Cursor内で、別のデスクトップアプリを使わずにポスターやSNS投稿、スライド、ランディングページをデザインできます。 Open Design Agent Kitは、GitHub Copilot Chat、Claude Code、Codex、Cursorなどのコーディングエージェントや、MCP対応エージェントにデザインスキル、ブランドデザインシステム、自由にアレンジできる作例を追加します。普段使っているチャットでピッチデックやランディングページ、ダッシュボード、モバイル向けプロトタイプについて説明すると、エージェント自身のモデルがファイルツールを使ってファイルを生成します。

open-design-agent-kit は無料で使えますか？ライセンスは？

open-design-agent-kit は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

open-design-agent-kit は今もメンテナンスされていますか？

活発にメンテナンス中。open-design-agent-kit の最終コミットは 2026年11月6日 です。

open-design-agent-kit は何に使えますか？

エディター内で短いプロンプトからSNS用グラフィックやポスターを作成する。 本番コードで構築する前に、スライドデックやランディングページのプロトタイプを作成する。 CSVや文書から、リポジトリ内でレポート形式のレイアウトを作成する。 印刷用の履歴書や1ページの文書を作成し、PDFとしてエクスポートする。

open-design-agent-kit のインストール方法は？

プロジェクトでワンコマンドセットアップを実行して、Claude Codeを接続します: npx @feimacode/open-design-agent-kit init --tools claude エージェントとのチャットを開き、ランディングページやポスターなど、作りたいデザインを説明します

open-design-agent-kit はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/feimacode/open-design-agent-kit