Roast My Design System

roast-my-design-system

AI エージェントがどこで UI をでっち上げるかを見つけます。

あなたの AI は UI を書けます。これは、それがあなたの UI を書くようにします。

npx roast-my-design-system@latest

UI リポジトリのルートで実行します。1 秒後、レポートが開きます。 アカウント不要。ネットワーク不要。テレメトリーなし。リポジトリ内は何も変わりません。

バージョン履歴は CHANGELOG.md にあります。

考え方

エージェントは見つけたものをコピーします。

リポジトリに答えがないところでは、でっち上げます。

これを 10 の実際のオープンソース製品で、355 のエージェントセッションにおいて、このツールありとなしでテストしました。

各セッションで追加された指摘を、このツール自身のルールで数えたもの:

タスク	モデル	時期	roast なし	roast MCP とルールをインストール	編集フック付き roast プラグイン
新しいチャートと新しいコンポーネント、4 製品、各 3 回実行	Sonnet 5	2026 年 10 月、roast 10.1	24 回中 21	未実行	24 回中 7
新しいチャートと新しいコンポーネント、4 製品、各 3 回実行	Haiku 4.5	2026 年 10 月、roast 10.1	24 回中 72	未実行	24 回中 1
パネルの追加、ダッシュボードの構築、リストの整理 (80 セッション)	Sonnet 5	2026 年 9 月	7	9	未実行
クリスマステーマ、10 製品	Sonnet 5	2026 年 9 月	28	2	未実行
新しいチャート、4 製品、各 5 回実行	Sonnet 5	2026 年 9 月	20 回中 10	未実行	20 回中 0
新しいチャート、4 製品	Haiku 4.5	2026 年 9 月	25	39	15 回中 14 回で 0
チャート、ステータスカラー、空状態、新しいコンポーネント	Haiku 4.5	2026 年 9 月	16 回中 42	16 回中 49	51 回中 3

定型作業は、ツールの有無にかかわらずシステムに沿ったままでした。何か新しいものを必要とする作業はそうではありませんでした。

エージェントは、呼ぶべきときに必ずしもツールを呼ぶわけではありません。10 月には、Sonnet は 24 セッション中 7 セッションで MCP ツールを呼び、Haiku は 24 セッション中 2 セッションでした。編集フックは頼まれなくても実行されます。それが最も数値の低い列です。

エージェントはどこででっち上げたのでしょうか。リポジトリにコピーできるものが何もなかったところです。Dub にはチャートパレットがありません。Dub 自身のチャートは 17 色をハードコードしています。チャートを求められて、Haiku はさらに 9 色をハードコードしました。10 月には、プラグインを有効にして Sonnet が残した 7 件の指摘のうち 5 件が Dub のチャート色でした。エージェントはそれらを保持し、リポジトリにチャートパレットがないと書いたコメントを残しました。

つまり、エージェントが加える乱れは、あなたのシステムの隙間を描いた地図なのです。

このツールはその地図を描きます。

Roast。Teach。Guard。

Roast はリポジトリを焙煎して、その本当のデザインシステム、その中の乱れ、そして隙間を見つけます。

Teach は生成されたルールとローカル MCP サーバーを通して、エージェントに教えます。

Guard はすべての編集をチェックし、エージェントが頼むのを覚えておかなくてもよいようにします。

ROAST   リポジトリに何があり、何が欠けているか
  ↓
TEACH   エージェントファイル内のルール、MCP 経由の回答
  ↓
GUARD   すべての編集をチェック、PR をゲート

得られるもの

あなたのエージェントはどこで推測しなければならないでしょうか？

レポートが最初に述べるのは、リポジトリにまだ答えがない箇所、つまり「ギャップが見つかりませんでした」という点です。

• ギャップを一行で
• それを証明するファイル
• それを解消する一つの手だて

今日確実に判明しているギャップが一つあります。実行によって見つかったものです。それは、チャート用パレットが存在しないリポジトリでチャートが色をハードコードしているというものです。公開リポジトリ 126 件のうち 43 件がそのような状態です。ギャップは測定された時点でリストに加わります。

ヘルススコアを上げるために今すぐできる修正

エージェントがコピーしてしまう乱れを、修正する価値の高い順に並べたものです。

• 何が見つかったか
• どこで、ファイルパスとともに
• なぜ重要か
• 何を変更すべきか
• あなたのエージェント向けの修正プロンプトを含むコピーボタン

修正し、再スキャンし、次のボタンを押します。

会議で胸を張って示せるスコア

0 から 100。実行するたびに同じ数値になります。

三つの基準に対して測定されます。デザインシステムの理想的な規範、119 件のリポジトリのベンチマークの中核となる製品リポジトリ 34 件の中央値、そして 10 の定評あるシステム（Primer、Polaris、Carbon、shadcn/ui など）です。

モノレポではパッケージごとにスコアが算出されます。packages/ui が 80 だからといって、apps/web の 40 が隠れることはもうありません。

すべての検出結果を、そのファイルパスとともに

• ハードコードされたすべての色、およびそれとほぼ同一の類似色
• スケールから外れたすべてのスペーシング値
• 重複したすべてのコンポーネント

さらに 8 種類があり、すべて What it measures に記載されています。HTML ファイル 1 つ。開いて、Slack で共有して、メールで送れます。

色使用状況バーは、リポジトリの色がどこから来ているかを示します。色の使用 100 回ごとに、何回がテーマの色を名前で参照しているか、何回が Tailwind のパレットを使っているか、何回が手書きされたはぐれ値かを示します。これを数えるために、CSS 変数、Tailwind テーマ、Sass および Less の変数、JavaScript のテーマオブジェクトを追跡します。

ヘッダーは、そのリポジトリが何で構築されているかを示します。shadcn/ui、Tailwind テーマ、MUI、Mantine、Chakra または Ant Design、そしてリポジトリが二つを使っている場合は両方のキットです。

あなたのエージェント向けのルール

あなたのリポジトリから design-system-rules.md に生成されます。

canonical components
the token file
known duplicates to avoid
spacing steps
typefaces
the kit's own vocabulary

--apply はそれらを、あなたが持つすべてのエージェントファイル（Claude、Cursor、GitHub Copilot、Windsurf）に書き込みます。また、スキャンごとに、既存のルールに古くなった参照がないかを確認します。

集計はスクリプトが行います

すべての数値は、あなたのファイルを決定論的に読み取った結果から得られます。Claude は説明文を書き、それは AI によって書かれたものとしてラベル付けされ、数値とは分けて扱われます。

実行の方法

Claude Code をヘッドレスで、それぞれ 1 つのコミットに固定した 10 件の公開製品（cal.com、Dub、Metabase、Plausible、SigNoz、trigger.dev ほか 4 件）に対して実行しました。2026 年 9 月に 259 セッション、2026 年 10 月に 96 セッションを roast 10.1 上で、Sonnet 5 と Haiku 4.5 を用いて行いました。10 月のセッションでは、チャートと新規コンポーネントのタスクを、同じコミットの Plausible、SigNoz、trigger.dev、Dub で繰り返しました。変更されたすべてのファイルは、セッションの終了時と固定コミット時点で、このツールのルールによって判定されました。検出結果は、そのセッションがそれを追加した場合にのみカウントされます。

何もレンダリングされませんでした。検出結果がゼロということは、そのコードがこれらのルールに従っているという意味です。デザインがレビューされたという意味ではありません。手法、表、限界は研究レポートに記載されており、別途公開される予定です。

ライブサンプル

ツールが出力したままのレポートを11件公開しています。すべての数値は決定論的で、すべてのパスが実在します。

• npx shadcn create、新規（ファクトリーインストール、全61コンポーネント）：新規インストールとして読みます。「スコアはあなたではなく、キットのもの」です。13色、すべてのテーマ変数が設定済みで、shadcn独自の24個の角括弧値には名前が付けられ、カウントされません。スコアなし。
• Unleash（MUI）：1,109ファイルがキットをインポートし、テーマは6,166回読み取られています。キットの100ファイルあたり4色と2つのスペーシング値がコンポーネントに直接記述されています。スコア60。
• Metabase（Mantine）：Mantineを独自にラップしたものもキットとしてカウントされるため、392ファイルではなく2,679ファイルが読み取られます。コンポーネントへの直接記述はなく、キットの100ファイルあたり2つのスペーシング値です。スコア47。
• SigNoz（Ant Design）：トークンが存在する場合に、スタイルオブジェクト内でキットの100ファイルあたり2色と7つのスペーシング値が記述されています。スコア51。
• Apache Airflow（Chakra UI）：コンポーネントに記述された色はありません。スペースの段階値がある場合、キットの100ファイルあたり4つのスペーシング値がピクセル文字列として使われています。スコア43。
• vercel/ai-chatbot（shadcnインストール）：Tailwindスケール外で[13px]のような値が71個記述されており、テーマ変数が存在する箇所では、100ファイルあたりパレット色が66色使われています。Claudeのメモを埋め込み済み。スコア80。
• excalidraw/excalidraw：スケール外のスペーシング値が78個、!important宣言が90個あります。スコア55。
• dubinc/dub：任意の角括弧値が642個、重複コンポーネントが21個あり、チャートパレットの不足が明示されています。スコア20。
• telekom/scale（Stencil）：タグから読み取られるStencilコンポーネントが95個あります。必要なのは約12個で済むところ、スケール外のスペーシング値が66個使われています。Claudeのメモを埋め込み済み。スコア55。
• magicuidesign/magicui（レジストリ）：公開するコンポーネントを対象にカウントしています。出荷するコードでは、100ファイルあたりテーマ外の色が52色使われています。ドキュメントサイトは除外し、明示しています。スコア78。
• adobe/spectrum-web-components（Lit）：色トークンが740個あり、その横にハードコードされた色が8色あります。!important宣言は37個です。スコア83。

vercel/ai-chatbotの完全版レポートです。判定では、エージェントがここで何を学ぶかに答えます。最初にギャップのセクションがあり、続いて「リポジトリがエージェントに教えること」、そしてスキャンに対するClaudeの所見が続きます。

同じレポートのライトモード版です（1つのファイルに、組み込みの切り替え機能を搭載）。

数値の根拠

• 決定論的です。 依存関係のない Node スクリプトがすべてのファイルを読み取り、実行するたびに同じ数値を返します。一般的なリポジトリなら約1秒で完了します。
• 読み取り専用です。ネットワーク通信もテレメトリーもありません。 package.json で依存関係が宣言されると、テストスイートが失敗します。リリースごとにタグ付けの前に、29個のサンプルリポジトリを対象として468件のチェックを実行します。フィクスチャとそのスナップショットは tests/ に、それぞれ個別の JSON ファイルとして保存されています。
• 測定できないものも正直に示します。 スキャンで読み取れないものは「未測定」と表示され、スコアから除外されます。
• 除外対象も正直に示します。 テスト、ストーリー、ドキュメントサイト、アートワーク、メールテンプレートは除外されます。独自の除外対象は、ファイル数とともにレポートのヘッダーに表示されます。
• 実際のベンチマークです。 公開リポジトリ119件を対象としています。React リポジトリ34件のコア群から中央値を算出し、残りはキットと Web コンポーネントの各グループに加えます。そのため、shadcn リポジトリは shadcn リポジトリと、Lit のシステムは Lit および Stencil のシステムと比較されます。ビルダーは tools/benchmark/ にあります。
• スコアリングをインポートできます。 scoreHarvest(harvest) はスコアと指標をプレーンデータとして返します。レポートと CI チェックには、同じ数値が使われます。

スキャン対象の範囲や、プラグインがマシン上で実行する処理を含む詳細は、docs/reference.md をご覧ください。

対応対象

フレームワーク

React、Next.js、Remix、Vite
Stencil、Lit、カスタム要素

キットとスタイリング

Tailwind、shadcn/ui、MUI、Mantine、Chakra UI、Ant Design
CSS Modules、Sass、Less、Emotion、styled-components、vanilla-extract、CVA、Stitches

すべてのリポジトリは、同じ方法で構築されたリポジトリと比較されます。shadcn のインストールは shadcn のインストールと、MUI、Mantine、Chakra、Ant Design を使ったプロダクトは同じキットを使ったプロダクトと、Tailwind テーマは Tailwind テーマと、Lit または Stencil のシステムはほかの Web コンポーネントシステムと、shadcn レジストリは shadcn グループと比較されます。2つのキットを使うリポジトリにはその旨が示され、ルールには両方のキット名が記載されます。

認識されますが、まだ測定されていないもの

Vue、Angular、Svelte：ヘッダーに名前が記載され、色と間隔は集計されますが、コンポーネントは測定されません。レポートにもその旨が表示されます。
HeroUI、NextUI、Radix Themes、Fluent UI、React Bootstrap、Grommet：ヘッダーに名前が記載されますが、キットのルールはありません。

すべてのコマンド

すべての機能は1回のスキャンで動作し、ディスクに保存する内容はフラグで決まります。自由に組み合わせてください。

自分で実行する

コマンド	得られるもの
npx roast-my-design-system@latest	スキャンと design-system-roast.html を生成し、ブラウザで開きます
... <path>	現在のディレクトリではなく、別のリポジトリをスキャンします
... --apply	生成されたエージェントルールを、お持ちのすべてのエージェントファイルに注入します: CLAUDE.md、AGENTS.md、.cursorrules、.cursor/rules/、.windsurfrules、.github/copilot-instructions.md の、マークされたブロック内です。再実行するとそのブロックのみが置き換えられ、ご自身のテキストは決して変更されません。
... --rules	同じルールを代わりに design-system-rules.md に書き出します。手動で貼り付ける場合に便利です
... --card	roast-card.svg: スコアと最も重大な問題を含む、共有可能な 1200x630 のカードです。純粋な SVG で、README に埋め込めます
... --sarif	GitHub コードスキャン用の design-system-roast.sarif です。CI でアップロードすると、検出事項が Security タブに表示され、ファイルに注釈が付きます
... --check	作業ツリーの変更されたファイルをデザインシステムと照合して、ターミナルで確認します。検出事項があると終了コード 1 を返すため、スクリプトに組み込めます
/roast-my-design-system:review（Claude Code 内）	同じチェックをチャットで実行します。プラグインの 2 つ目のスキルによるもので、変更された各ファイルの検出事項と修正内容が示され、その後修正が適用されてチェックが再実行されます
... --exclude lab/	フォルダーをスキャンから除外します（フラグを繰り返すか、カンマ区切りで指定します）。または、リポジトリルートの .roastignore ファイルにフォルダーを列挙します。いずれの場合もレポートのヘッダーにその旨が記載されます
... --json	スキャンの概要を JSON として stdout に出力します。スクリプトやパイプライン向けです。schemaVersion、使用されたベンチマーク、およびすべての指標が数値として含まれるため、2 回のスキャンを比較できます
... --by "Dwayne Hicks"	レポートのヘッダーに名前を記載します。誰かのために実行した場合に便利です
... --theme light / --out <file> / --no-open / --open	ライトテーマのレポート、カスタムレポートパス、ブラウザを決して開かない、常に開く

エージェント向け

コマンド	得られるもの
... --notes <file.md>	このスキャンに対するエージェントの読み取りを、レポート内に 「リポジトリがエージェントに教えること」 として埋め込みます。どの指摘が重要か、どの良好な数値が偶然か、何を最初に修正すべきか。AI が書いたものとしてラベル付けされ、測定された数値とは切り離して扱われます。Claude Code スキルはこれを自動的に書き込んで渡しますが、このフラグはどのエージェントでも使えるように用意されています
... --section "Title" <file.md>	ノートの後に続く、エージェントが書いた追加の章。同じスタイル、同じラベルで、小見出しも使用できます。繰り返し指定可能
... --hook	手動インストールした構成向けに、Claude Code プラグインが編集のたびに実行するチェックです。stdin でフックイベントを読み取り、変更されたファイルをチェックし、その編集で追加された指摘だけを JSON として出力します。常に終了コード 0 で終了します
... --stop-hook	手動インストールした構成向けに、Claude Code プラグインがエージェントのターン終了時に実行するレビューです。stdin で Stop イベントを読み取り、セッション中に変更されたファイルに新しい問題がある場合、エージェントを一度だけ差し戻すブロックを返します。--session-start は、まだコミットされていなかった作業を記録します。ROAST_STOP_REVIEW=off で無効にできます。常に終了コード 0 で終了します
... --mcp	ローカル MCP サーバーとしてのスキャンです。UI を書く際にエージェントが呼び出す 5 つのツールに加えて、最新のスキャンから最優先の修正を提供する roast-fix プロンプトがあります。詳しくは MCP 経由のライブ回答 をご覧ください
/roast-my-design-system (Claude Code 内)	フル体験です。チャット内でのローストおよびレポート内に「リポジトリがエージェントに教えること」として埋め込まれた内容、ルールの提案、そしてあなた自身の数値に対して Claude と行う修正ループ

「なぜこれが重要か」 は汎用的なもので、ツールに同梱されており、どのレポートでも同じ内容になります。「リポジトリがエージェントに教えること」 はあなたのリポジトリに対するエージェントの読み取りであり、エージェントがそれを渡した場合にのみ表示されます。

MCP によるライブ回答

レポートとルールファイルは、スキャン時点でのリポジトリの状態を記述しています。--mcp は、エージェントが作業している間も同じエンジンを動かし続けるため、質問には今のコードの状態から回答が返り、ミスはコミットされる前に検出されます。

ツール	答える質問
roast_get_context	ここで UI に触る前に何を知っておくべきか? 編集中のフォルダーによってルーティングされます
roast_find_component	これ用のコンポーネントはすでにあるか、どれが正規か? 実際の使用例を 1 つ添えて。2 つの候補が並んだ場合は、その旨と両方の名前を伝えます
roast_find_token	手元に #111111 / 13px がある。本来は何を使うべきだったか?
roast_validate	これを保存しようとしている。システムを壊すか?
roast_review	変更したファイルをレビューします。git diff を自分で読むので、コードを貼り戻す必要はありません

このループ: 作る前にコンテキスト、作っている間に検索、保存する前に検証、終える前にレビュー。

実際のやり取りの一例です。MUI 製品で 60/100 の Unleash に対して実行しました。エージェントは手元にグレーがあり、頭の中にパディングがあります:

roast_find_token #6b7280
→ Nearest token: #607d8b, 11 channel steps from #6b7280. Unless the difference is a deliberate decision, use the token.

roast_validate (first draft)
→ ✕ L5 Colour #6b7280 written onto an MUI component, and the theme has no such colour.
     Fix: Add it to the theme once (frontend/src/themes/dark-theme.ts), then read it there: color: 'text.secondary' in sx.
  ✕ L5 Pixel size p: 12px on an MUI component.
     Fix: 12px is between steps 1 (8px) and 2 (16px). Keep it with a comment, or use the nearest step in sx.

roast_validate (second draft: color: 'text.secondary', p: 1.5)
→ No measured violations found. Checked: hardcoded colours vs the token set, near-identical colour twins, off-scale spacing …

4 回の呼び出し、800 トークン未満で、新しいコンポーネントは 44 番目の色を追加するのではなくテーマを読み取ります。

チャートには独自のルールがあります。チャートには互いに異なる複数の色が必要であり、ほとんどのデザインシステムはそれらに名前を付けないからです。リポジトリがチャートパレットを保持している場合、チャートファイルに手書きされた色は、そのパレットを名指しする指摘になります。リポジトリにチャートはあるがパレットがない場合、手描きで色を塗る新しいチャートには、同じことをしている既存のチャートを名指しし、パレットを一度だけ求める警告が 1 つ出ます。その警告が、ライブのギャップレポートです。

サーバーはレポートと同じ方法でリポジトリを読み取ります。MUI、Mantine、Chakra UI、Ant Design で構築された製品では、コンテキストはテーマファイルとそのキット独自の読み取り方を名指しし、roast_find_token はスペーシングの刻みで回答し、チェックはテーマに値があるのにキットのコンポーネントに手書きされた色やピクセルサイズを指摘します。Tailwind テーマや shadcn のリポジトリでは、テーマがその種の色に名前を付けているのに text-gray-500 のようなパレットクラスを使っている場合に指摘します。トークンの生の値がコンポーネントに貼り付けられている場合はトークンの名前とともに指摘され、リポジトリにすでに広く使われている Button があるのにゼロからボタンを組んだ場合は、使うべき import 行を名指しする警告が出ます。

roast-fix プロンプトは、新しいスキャンから最上位の「どこから始めるか」の一手を、レポートのコピーボタンとバイト単位で同一の形で提供します。Claude Code では /mcp__roast__roast-fix と入力し、番号を付けると順番を飛ばせます。修正して、もう一度尋ねると、次の一手が最上位に上がっています。スキャンが進捗バーなのです。

Claude Code プラグインをインストール済みですか? サーバーはすでにあります。そうでなければ:

claude mcp add roast -- npx roast-my-design-system@latest --mcp

Claude Code、Cursor、Windsurf (現在の Devin Desktop) で検証済み。 それぞれをエンドツーエンドでテストしました: サーバーが接続され、5 つのツールすべてが一覧表示され、エディター自身のチャットで実際の回答が得られました。ローカル、読み取り専用、起動時に 1 回のスキャン、ポートなし、アカウントなし。

Cursor: プロジェクト内の .cursor/mcp.json にこれを置き (プロジェクト内なので、スキャンはディスク全体ではなく 1 つのリポジトリを見ます)、初回は Settings → Tools & MCP で roast を有効にします:

{ "mcpServers": { "roast": { "command": "npx", "args": ["roast-my-design-system", "--mcp"] } } }

Windsurf (Devin Desktop): MCP 設定はグローバル (~/.codeium/windsurf/mcp_config.json) なので、スキャンを 1 つのリポジトリに限定するためにプロジェクトフォルダーを指定します:

{ "mcpServers": { "roast": { "command": "npx", "args": ["roast-my-design-system", "--mcp", "/path/to/your/repo"] } } }

その他の MCP クライアントも同じ stdio コマンドを登録できます。

CI での利用

スキャナーは SARIF を扱えるため、GitHub コードスキャンへの組み込みは 6 行です。指摘は Security タブに表示され、ファイル自体にも注釈が付きます:

- uses: actions/checkout@v5
- run: npx roast-my-design-system@latest . --sarif --no-open
- uses: github/codeql-action/upload-sarif@v3
  with:
    sarif_file: design-system-roast.sarif

新たな乱れだけでプルリクエストを失敗させたい場合は、guard-my-design-system を使用してください。

インストール

インストール不要、Claude も不要:

npx roast-my-design-system@latest

Claude Code（推奨）:

/plugin marketplace add gregkozakiewicz/roast-my-design-system
/plugin install roast-my-design-system@roast-my-design-system

インストールされるもの: 2 つのスキル、1 つのローカル MCP サーバー、そして自動で実行される 2 つのチェックのみで、それ以外は何もありません。roast（/roast-my-design-system、または「roast my design system」）はリポジトリ全体をスキャンし、数値に対する Claude の読み解きを織り込んだレポートを書き出してから、修正点を一緒に確認していきます。review（/roast-my-design-system:review、または「review my UI changes」）は変更された箇所だけを約 1 秒でチェックします。編集チェックはエージェントがファイルを編集するたびに実行され、その編集が新たに生んだ指摘を返します。新しい問題がないファイルには何も通知されません。ターン終了時のレビューは、エージェントが完了したと判断したときに実行されます。このセッションで変更されたファイルに、エージェントが新たに生んだ問題がまだ残っている場合、終了する前に一度だけ修正のために差し戻されます。助言のみの警告で差し戻されることはなく、ある問題が差し戻されるのは 1 セッションに一度だけであり、セッション開始前にコミットされていなかった作業には手を付けません。レビューをオフにするには、Claude Code の設定で ROAST_STOP_REVIEW=off を設定します（"env": { "ROAST_STOP_REVIEW": "off" }）。

これらのコマンドでエラーが出る場合、お使いの Claude Code はプラグインマーケットプレイスより古いです。更新するか、手動の方法を使用してください:

git clone https://github.com/gregkozakiewicz/roast-my-design-system.git
cp -r roast-my-design-system/skills/roast-my-design-system roast-my-design-system/skills/review ~/.claude/skills/

（リポジトリ内で .claude/skills/ を使うと、チームと共有できます。review スキルには、その隣に roast-my-design-system フォルダーが必要です。）

OpenAI Codex CLI（同じ SKILL.md、同じフォルダー）:

git clone https://github.com/gregkozakiewicz/roast-my-design-system.git
cp -r roast-my-design-system/skills/roast-my-design-system ~/.codex/skills/

$roast-my-design-system で呼び出します。リポジトリ内で .codex/skills/ を使うと、チームと共有できます。

npx skills: npx skills add gregkozakiewicz/roast-my-design-system は、~/.agents/skills/ を読み込むエージェントで動作します。Claude Code は ~/.claude/skills/ を読み込むため、上記のいずれかの方法を推奨します。

Node 18 以上が必要です。

使い方

roast したいリポジトリで Claude Code を開き、次のように入力します:

/roast-my-design-system

守る価値のあるデザインシステムができたら、2 つ目のスキルは変更した箇所だけをチェックします:

/roast-my-design-system:review

これは git diff 内のファイルに対して --check と同じチェックを実行し、各指摘をその修正方法とともに一覧表示します。MUI、Mantine、Chakra、Ant Design、または Tailwind テーマのリポジトリでは、そのキット独自の語彙で表示されます。スコアもレポートもありません: 火曜日の午後にぴったりの小さなチェックです。Claude は「review my UI changes」や「did I break the design system」といった普通の言葉からもこれを拾い上げます。

roast の結果はチャットで得られるほか、リポジトリのルートに design-system-roast.html が生成されます。これは自己完結型のページで、以下を含みます:

• あなたの数値が理想とどれだけ離れているかから計算された ヘルススコア
• 「リポジトリがエージェントに教えていること」: スキャンに対する Claude の読み解きで、あなたが転送するファイルに埋め込まれ、Claude が書いたものとしてラベル付けされ、測定された数値とは切り離して保たれます。スコアだけでは実態より良く見えることがありますが、このセクションが共有された 85/100 を誠実に保ちます
• 3 つすべての基準とあなたを比較する統計タイル
• 1 つのファイル内にある ライト/ダークテーマの切り替え
• 使用量で重み付けされたパレットバー、グレーのランプ、スケール外のスペーシングの証拠、クリック可能なファイルパス付きの重複コンポーネントの証拠、そして最悪の違反者の台帳
• ヘルススコアを上げるために今すぐできる修正 のリスト: あなたのリポジトリ自身の数値から導かれた最大 3 つの施策で、それぞれにファイルパスの証拠が付きます
• あなたのエージェントはどこで推測を強いられるか？ がレポートの冒頭を飾ります: リポジトリにまだ答えがないギャップを、それぞれを裏付けるファイルとそれを埋める施策とともに示し、なければ「ギャップは見つかりませんでした」と表示します
• エージェントに答えを与える: design-system-rules.md がプレゼントのようにレポートの中に包まれています。開いてから、スキャンから生成されたエージェントルールをコピーまたはダウンロードしてください

roast の後、スキルは design-system-rules.md をディスクに書き込み、それをあなたの CLAUDE.md、.cursor/rules、または AGENTS.md にマージすることを提案します。

試すべき 4 つのプロンプト

Roast my design system.

How bad is my CSS? Scan this repo and show me the receipts.

MCP サーバーを接続した状態で:

Is there already a Button component in this repo, and which one should I use?

そして日常的に使うもの、UI をいくつか変更した後に:

Review my UI changes against the design system.

トラブルシューティング

• 「コマンドが見つかりません」またはプラグインがインストールされない。 Claude Code を更新してください。プラグインマーケットプレイスには新しいバージョンが必要です。手動インストールはどのバージョンでも動作します。
• 「ローストするものが何もない」またはほぼ空のレポート。 スキャンで色やスペーシングがほとんど見つかりませんでした。スタイルはおそらく別のリポジトリ、CDN、またはインストール済みパッケージにあります。スタイルを保持しているリポジトリから実行してください。
• スコアが間違っているように見える。 レポートのヘッダーを確認してください。そこにはリポジトリがどのように読み取られたか（プロダクト、ライブラリ、shadcn、キット、Tailwind テーマ）と、除外されたすべてのフォルダーが記載されています。プレイグラウンドや古いアプリが数値をぼやけさせている場合は、.roastignore または --exclude でスキャンの範囲を限定してください。
• レポートが開かなかった。 レポートはリポジトリのルートにある design-system-roast.html に書き出されます。任意のブラウザーで開いてください。サーバーは不要で、リクエストも発生しません。
• MCP サーバーが表示されない。 追加後にクライアントを再起動してください。Claude Code では、claude mcp list で接続されたかどうかを確認できます。Node 18 以降が必要です。

サポート

バグや質問は GitHub Issues へお寄せください。それ以外のことは gregkozakiewicz.com から Greg に届きます。セキュリティの問題については、SECURITY.md をご覧ください。

プライバシー

このツールは、指定したリポジトリを読み取り、その隣に出力を書き込みます。ネットワークリクエストは行わず、データも収集せず、テレメトリーもありません。MCP サーバーは同じローカルスキャンから応答します。あなたのコード、プロンプト、会話に関する情報は、作者を含め、誰にも送信されません。

測定内容

指標	理想的なデザインシステム	34 リポジトリのコアフリートの中央値	著名な 10 システムの中央値
異なる色	約 24	119	14
グレーの階調	最大 13	28	4
スケール外のスペーシング値	約 12	24	5
書体	2 から 3	3	1
スケール外の境界半径	最大 10	14	0
重複コンポーネント	0	16	9
インラインスタイルブロック	0	51	12
任意の Tailwind 値	約 20	56	0
ほぼ同一の色のペア	0	7	1
!important 宣言	0	5	3
一度もインポートされないコンポーネント	0	0	0

ベンチマークは 2026 年 10 月 3 日に再構築され（バージョン 10.0.0）、スキャン自体の収集によって集計されました。

そうです、中央値のリポジトリはすでに混沌としています。それが要点です。そこに到着したエージェントは、その混沌を忠実にコピーし、混沌が尽きたところでは自らもいくらか付け加えます。

あなたの AI は UI を書くことができます。これは、それが あなたの UI を書くことを保証します。

ライセンス

MIT。コードはフォーク、変更、再配布が自由です。著作権表示はそれに伴います。

このツールのスコア、カウント、ベンチマーク比較から独自のレポート、要約、監査を作成しますか? その中に次の一行を残してください: Built with roast-my-design-system by Greg Kozakiewicz。スキルは、スキャンからそのような文書を作成する AI エージェントにも同じことを求めます。

roast-my-design-system™ および GK マークは Greg Kozakiewicz の商標です。フォークは歓迎しますが、この名前での再公開は認められません。詳しくは brand and attribution をご覧ください。

Built and designed by Greg Kozakiewicz.