marvkr/better-design

これは何？

主な機能

• 01説明されたプロダクトに合うデザインシステムを検索します。
• 02デザインシステムのデザイントークンと、インストールに使えるコンポーネントコードを取得します。
• 03レイアウト、タイポグラフィ、フォーム、ナビゲーションに関するUI/UXの原則を提供します。
• 04スタイルを統一できる単一ライブラリのアイコンを提供します。
• 05UIコードに対して、アクセシビリティとビジュアルデザインのレビュー規則を実行します。

ユースケース

• AIコーディングエージェントに、一貫したデザインシステムに沿った設定ページを作らせる。
• 選んだブランドスタイルのテーマから、個別のshadcnコンポーネントをReactプロジェクトに追加する。
• コミット前に、生成されたUIコードにアクセシビリティ上の問題がないか確認する。
• エージェントが構築したインターフェース全体で、アイコンのスタイルを統一する。

クイックスタート

1. 1

   プロジェクトにエージェントスキルをインストールする

   npx skills add marvkr/better-design --skill better-design
2. 2

   Better Designをコーディングツールに接続し、エージェントを再起動する

   npx better-design
3. 3

   うまく動作しない場合は、セットアップを確認する

   npx better-design doctor

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

• !アカウントをお持ちでない場合、セットアップ時に無料のキーが作成されます。そのため、better-design.comのホスティングサービスに依存します。

収録されている特集

トピック

よくある質問

better-design とは？

コーディングエージェントにデザインシステム、UI/UXのガイダンス、アイコン、アクセシビリティのレビュー規則を提供するMCPサーバー兼shadcn/uiレジストリ。 Better Designは、Claude Code、Cursor、Codex、VS Codeなど、デザインの前提知識が不足しがちなコーディングエージェントにデザイン情報を提供するMCPサーバーです。説明されたプロダクトに合うデザインシステムの検索、そのデザインシステムのトークンやコンポーネントコードの取得、階層、余白、タイポグラフィ、フォーム、ナビゲーション、エラー処理を扱うUI/UXの原則の参照に使えるツールを提供します。

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

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

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

活発にメンテナンス中。better-design の最終コミットは 2026年10月25日 です。

better-design は何に使えますか？

AIコーディングエージェントに、一貫したデザインシステムに沿った設定ページを作らせる。 選んだブランドスタイルのテーマから、個別のshadcnコンポーネントをReactプロジェクトに追加する。 コミット前に、生成されたUIコードにアクセシビリティ上の問題がないか確認する。 エージェントが構築したインターフェース全体で、アイコンのスタイルを統一する。

better-design のインストール方法は？

プロジェクトにエージェントスキルをインストールする: npx skills add marvkr/better-design --skill better-design Better Designをコーディングツールに接続し、エージェントを再起動する: npx better-design うまく動作しない場合は、セットアップを確認する: npx better-design doctor

better-design はどこで入手できますか？

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