marvkr/better-design

解決する課題

Better Designは、一般的なAI生成コードとプロフェッショナルグレードのUIとの間のギャップを埋めます。AIコーディングエージェントに対し、セマンティックCSSトークン、コンポーネントのオーバーライド、アクセシビリティ規則といった具体的なデザインコンテキストを提供することで、「AIっぽい」汎用的なレイアウトではなく、確立されたデザインシステムに従ったインターフェースの構築を可能にします。

仕組み

Claude Code、Cursor、GitHub CopilotなどのAIコーディングツールと統合するMCP (Model Context Protocol) サーバーとして機能します。以下の2つのモードで動作します。

1. デザインインテリジェンス (Design Intelligence)： エージェントに対し、アクティブなデザイン原則やレビューチェックリスト（WCAGアクセシビリティ、視覚的階層など）を提供し、自身の出力を評価・改善させます。
2. スキャフォールド (Scaffold)： 31種類の厳選されたデザインシステム（Linear、Stripe、Apple、Notionなど）のライブラリからエージェントが情報を取得できるようにします。エージェントはこれらを使用して適切なトークン、アイコンセット、コンポーネントコードを選択し、生成されたUIが特定のプロフェッショナルな美学に合致するようにします。

対象ユーザー

AIコーディングエージェントを使用してWebインターフェースを構築し、生成されるコードが本番環境に対応しており、アクセシブルで、高品質なデザイン基準と視覚的に一貫していることを保証したい開発者やデザイナー向けです。

ハイライト

• AIエージェント向けのMCP互換デザインシステムレジストリを提供。
• shadcn/uiと互換性のある31の事前構築済みデザインシステムを収録。
• アクセシビリティ (WCAG) や視覚的デザインの一貫性をチェックする自動UIレビューツールを提供。
• 自然言語プロンプトに基づいたデザインシステムのセマンティックマッチングをサポート。
• Cursor、Claude Desktop、VS Codeなどの主要なAIコーディング環境とのシームレスな統合をサポート。