marvkr/better-design
Developer toolsこのページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る
Claudeコード、Cursor、Codex、GitHub Copilot、およびMCPクライアント用のAIデザインシステム - オープンソース設計MCPサーバー + Shadcn / uiレジストリ.
概要
MCP によるコーディングエージェントの設計システム、UI、UX ガイダンス、アイコン、コードレビューを提供します。 Codex、Claudeコード、Cursor、VSコード、Devin、Antigravity、および他のMCPクライアントで動作します。 エージェントのスキルを最初にインストールします。 2 つは、より良いデザインをコーディングツールに接続し、既存の設定を維持します。 セットアップ後にエージェントを再起動します。 アカウントがない場合、セットアップは無料キーを作成します。 何かが機能しない場合は、npx をよりデザインするドクターを実行してください。 各問題を修正するコマンドを印刷します。 エージェントが UI をビルドするとき、Better Design は、通常は見逃しているものを提供します。 UIコードを自分で確認するには、プロジェクトでnpxのデザインレビューを実行します。 より良いデザインを使用して、プロジェクトの設計システムで設定ページを構築し、アクセシビリティと一貫性を確認します。 あらゆる設計システムは影石のレジストリです。 Better-design.com/design-systems でそれらをブラウズし、1 つのコンポーネントをインストールします
概要（AI 翻訳）
MCP によるコーディングエージェントの設計システム、UI、UX ガイダンス、アイコン、コードレビューを提供します。
Codex、Claudeコード、Cursor、VSコード、Devin、Antigravity、および他のMCPクライアントで動作します。
ウェブサイト・ドキュメント・デザインシステム・インストールガイド
インストール
プロジェクトでこれらのコマンドを実行します。
エージェントのスキルを最初にインストールします。 2 つは、より良いデザインをコーディングツールに接続し、既存の設定を維持します。 セットアップ後にエージェントを再起動します。
アカウントがない場合、セットアップは無料キーを作成します。 何かが動作しない場合は、[npx better-design doctor]を実行します。 各問題を修正するコマンドを印刷します。
それが何をするか
エージェントが UI をビルドするとき、Better Design は、通常は見逃しているものを提供します。
| ツール | エージェントが取得する理由 |
お問い合わせ
| [find-design-system | 商品に合致する設計システム |
| [[T2] | [[T2] | [[T2] | [[T2] | [[T2] ] | [[T2] ] | [[T2] ] | [[T2] ] | [[T2] ] | [[T2] ] | [[[[T2] ] ] | [[[T2] ] ] ] | [[[T2] ] ] | [[[[T2] ] ] そのシステムのトークンとコンポーネントコード、インストール準備が整いました |
| [get-ui-principle | 階層、間隔、タイポグラフィ、深さ、動きなどのご案内 |
| [get-ux-principle | フロー、フォーム、ナビゲーション、エラー、オンボーディングのご案内 |
|【[[T5]】 | 一つのライブラリーからアイコンを貼り合わせるので、スタイルは一貫したまま |
このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。
README
Better Design
Give your coding agent design systems, UI and UX guidance, icons, and code reviews through MCP.
Works with Codex, Claude Code, Cursor, VS Code, Devin, Antigravity, and other MCP clients.
Website · Docs · Design systems · Installation guide
Install
Run these commands in your project:
npx skills add marvkr/better-design --skill better-design
npx better-design
The first installs the agent skill. The second connects Better Design to your coding tools and keeps your existing configuration. Restart your agent after setup.
If you have no account, setup creates a free key for you. If something does not work, run npx better-design doctor. It prints the command that fixes each problem.
What it does
When your agent builds UI, Better Design gives it what it usually misses:
| Tool | What your agent gets |
|---|---|
find-design-system |
A design system that fits the product you describe |
get-design-system-kit |
That system’s tokens and component code, ready to install |
get-ui-principle |
Guidance on hierarchy, spacing, typography, depth, motion and more |
get-ux-principle |
Guidance on flows, forms, navigation, errors and onboarding |
find-icons |
Icons from one library, so the style stays consistent |
get-review-rules |
Accessibility and visual-design checks to fix its own work |
To check UI code yourself, run npx better-design review in your project.
Try it
Ask your agent:
Use Better Design to build a settings page with my project’s design system, then review it for accessibility and consistency.
Install a design system with shadcn
Every design system is also a shadcn registry. Browse them at better-design.com/design-systems, then install one component:
npx shadcn@latest add https://better-design.com/registry//.json
For example, the Cashmere button:
npx shadcn@latest add https://better-design.com/registry/cashmere/button.json
Or the full Cashmere theme and components:
npx shadcn@latest add https://better-design.com/registry/cashmere/all.json
This repository
This repository holds the agent skill in skills/better-design, and component and registry sources in components/ and registry/.
The transition components come from one source, scripts/transitions-src/. After you edit it, run node scripts/generate-transitions.mjs, then run the tests:
cd tests && bun install && bun run test
License
MIT
インストール
npx skills add marvkr/better-design --skill better-design