Better Design

Better Design

AI コーディングエージェント向けのデザインハーネスです。このプラグインはエージェントを Better Design MCP サーバーに接続するため、エージェントが構築するインターフェースは実際のデザインシステムを使用し、デザイン原則に従い、UI レビューチェックに合格します。

エージェントが利用できる機能

• アプリ向けのデザインシステム。 プロダクトに合ったものを見つけてプレビューし、そのコンポーネントをインストールするか、説明や独自のサイトをもとにカスタムのデザインシステムを生成できます。
• デザイン原則。 ビジュアルデザイン、UX フロー、フォーム、オンボーディング、インターフェースの文言に加え、React Native、SwiftUI、Three.js、Shopify テーマのリファレンスも利用できます。
• レビューチェック。 エージェントが構築した画面のアクセシビリティ、文言の明確さ、計測された間隔を確認できます。
• 所有できるアイコン。 アイコンセットは React コンポーネントとして返され、実行時の CDN は不要です。

このリポジトリに含まれるもの

このリポジトリには、マニフェスト、MCP サーバーのエントリ、2 つのスキルといったプラグインファイルのみが含まれています。Better Design サーバーとデザインシステムは better-design.com で実行されます。カタログは better-design.com/design-systems でご覧いただけます。

スキル	機能
build-with-better-design	ユーザーとデザインシステムを選び、インストールして、それを基盤に構築します
review-ui-with-better-design	画面のアクセシビリティ、ビジュアルデザイン、文言の明確さ、間隔をレビューします

インストール

ツール	方法
任意のターミナルエージェント、アカウント不要	npx better-design
Gemini CLI	gemini extensions install https://github.com/better-designs/better-design-plugin
Claude Code	/plugin marketplace add better-designs/better-design-plugin、続けて /plugin install better-design@better-design
Claude Code、MCP のみ	claude mcp add --transport http better-design https://better-design.com/api/mcp
任意のスキルクライアント	npx skills add better-designs/better-design-plugin
任意の MCP クライアント	リモートサーバー https://better-design.com/api/mcp を追加します

npx better-design にアカウントは不要です。Better Design をコーディングツールに接続し、少量の利用枠が付いた無料キーを作成します。利用枠がなくなると、エージェントからキーを無料アカウントに移行するための請求リンクが提示されます。

それ以外の方法では、初回接続時に Better Design のサインイン画面が開きます。無料アカウントを利用できます。

プライバシー

Better Design のプライバシーポリシーと利用規約が適用されます。サポート：[email protected]。