ナビゲーション
新着AI エージェントのための MCP サーバー

マークアップで​ CSS を​組み立てる​言語 開発者と​ AI エージェント​のために。

使い始める
npm create @master/css@2.0.0

デザインシステム

ひとつのクラス体系で、モダンなインターフェースを。

テーマ、トークン、広色域の色、レイアウト、モーションをクラスで記述できます。生成される CSS の対応関係も明確です。

テーマトークンを定義

同じマークアップで、ライトもダークも。

モードで切り替わるのはトークンの値です。クラス名は変わりません。仕切りをドラッグして、使われる値を確認してください。

トークンは、一度定義するだけ。

色、余白、角丸、文字組みを @theme に一度定義すれば、ユーティリティ、コンポーネント、モードが共通の値を参照します。

@theme {  --font-family-sans: "Inter";  --spacing-md: 1rem;   /* p-md */  --spacing-lg: 1.5rem; /* p-lg */  --radius-xl: 0.75rem; /* r-xl */  /* bg-surface-base */  --color-surface-base: light-dark(    var(--color-zinc-0),    var(--color-zinc-95)  );}

レイアウトも動きも、同じ場所に。

グリッドのスパン、レスポンシブレイアウト、アニメーション、ビュートランジションを、対象のマークアップのすぐそばに記述できます。

写真をクリックすると、トランジションを確認できます。

ネイティブ CSS のレイヤー

ユーティリティはコンポーネントより後のレイヤーにあるため、マークアップのクラスが !important なしで優先されます。

広色域の色

深い色から sRGB を超える鮮やかなアクセントまで、一貫した段階で選べる P3 パレット。

エディター

クラスが多くても、読みやすく。

言語サービスがマニフェストに基づいてクラスを補完し、ホバーで生成 CSS を表示し、コード内に色のスウォッチを示します。

矢印キーでファイル内を移動できます。

<article class="grid gap-lg p-xl b-solid b(1) b-line-divider r-2xl bg-surface-raised shadow-sm">
<header class="flex items-center justify-between gap-md">
<h3 class="text-lg font-medium fg-text-strong">Usage alerts</h3>
<a class="text-sm font-medium fg-blue-60 fg-blue-70:hover@sm" href="/settings/alerts">Manage</a>
</header>
<p class="text-sm">Email the team before a project reaches its monthly limit.</p>
<ul class="grid gap-xs p-md r-lg bg-surface-base grid-cols(2)@md">
<li class="flex items-center justify-between gap-sm text-sm">
Builds
<span class="px-xs r-md text-xs font-semibold bg-blue-60/.1 (color:#4f46e5)">80%</span>
</li>
<li class="flex items-center justify-between gap-sm text-sm">
Bandwidth
<span class="px-xs r-md text-xs font-semibold bg-surface-raised fg-text-muted">42%</span>
</li>
</ul>
</article>
fg-blue-70:hover@sm CSS
@layer theme {  :root,  :host {    --color-blue-70: oklch(46.26% .3057 266.7)  }}@layer utilities {  @media (width >= 52.125rem) {    .fg-blue-70\:hover\@sm:hover {      color: var(--color-blue-70)    }  }}
トークン --color-blue-70
入力補完30
fg-text-amber
fg-text-beryl
fg-text-blue
fg-text-body
fg-text-brown
fg-text-crimson
fg-text-cyan
fg-text-disabled

:

言語サービスを見る

レンダリング

ひとつの構文で、どの配信方式にも。

標準は静的 CSS の配信です。HTML に事前レンダリングすることも、ブラウザーで生成することもできます。クラスはそのままです。

レンダリングモードを比較
index.htmlテンプレート
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>静的レンダリング</title>
<link rel="stylesheet" href="/base.css">
<link rel="stylesheet" href="">
</head>
<body>
<article class="demo p-lg r-xl
bg-amber-10 shadow-sm">
<h1>静的レンダリング</h1>
…
</article>
<script src="/app.js"></script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>プログレッシブレンダリング</title>
<link rel="stylesheet" href="/base.css">
<style id=""
data-master-css-hydration-manifest="…">
/* … */
</style>
</head>
<body>
<article class="demo p-lg r-xl
bg-amber-10 shadow-sm">
<h1>プログレッシブレンダリング</h1>
…
</article>
<script src="/app.js"></script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ランタイムレンダリング</title>
<link rel="stylesheet" href="/base.css">
<script type="module" src="/main.js"></script>
<style id="">
/* CSSOM ↓ */
</style>
</head>
<body>
<article class="demo p-lg r-xl
bg-amber-10 shadow-sm">
<h1>ランタイムレンダリング</h1>
…
</article>
<script src="/app.js"></script>
</body>
</html>
CSSCSSOMCSSOM
/* Shared styles … */
@layer utilities {
.bg-amber-10 {
background-color: var(--color-amber-10);
}
.r-xl { border-radius: var(--radius-xl); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.p-lg { padding: var(--spacing-lg); }
}
/* Shared styles … */
@layer utilities {
.bg-amber-10 {
background-color: var(--color-amber-10);
}
.r-xl { border-radius: var(--radius-xl); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.p-lg { padding: var(--spacing-lg); }
}
/* Shared styles … */
@layer utilities {
.bg-amber-10 {
background-color: var(--color-amber-10);
}
.r-xl { border-radius: var(--radius-xl); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.p-lg { padding: var(--spacing-lg); }
}
生成済み1 rule added1 rule added
プレビューライブ
プレビューを更新しました
プレビューを更新しました
プレビューを更新しました

Scan complete class names in your source.Write the matching rules to app.css.Load the stylesheet before the page is painted.Reuse the rule already shipped in app.css.

Read the classes in the server-rendered HTML.Embed the first-load CSS in the page.Paint with the CSS that came with the HTML.Start the deferred engine for an uncovered class.

Read the page’s classes in the browser.Start the runtime and create a stylesheet.Generate and apply the rules in the browser.Insert the new rule into the browser stylesheet.

CSS サイズ

実際のドキュメントページで測定。

各ページが読み込む CSS を、非圧縮と Brotli 圧縮で比較します。Master CSS が追加するのは、そのページで使うユーティリティだけです。残りは各サイト固有のスタイルです。

ベンチマークの詳細を見る

ドキュメントページごとの CSS · 2026-11-04

  1. Master CSS
    110.4 kB
  2. Angular
    151.8 kB 1.4×
  3. Vue.js
    186.3 kB 1.7×
  4. Material UI
    277.4 kB 2.5×
  5. Bootstrap
    294 kB 2.7×
  6. Next.js
    479.9 kB 4.3×
  7. Tailwind CSS
    657.7 kB 6.0×
0200400600800 kB

リント

プロジェクトに沿ってクラスを検証。

エディターの ESLint、スクリプトの CLI、エージェントの MCP サーバーが、同じルールと修正方法でクラスを検証します。

すべてのリントルールを見る
button.html ESLint 準備完了
<button class="inline-flex (color:12px)">
Save changes
</button>

@master/css/no-invalid-classes 1:28

CLI @master/css-cli 準備完了
$ npx @master/css-cli lint --format stylish1:28error@master/css/no-invalid-classes
MCP サーバー @master/css-mcp 準備完了
→ mastercss_lint_content button.html"ruleId": "no-invalid-classes","severity": "error","loc": { "start": { "line": 1, "column": 28 } }

AI エージェント

エージェントが自分の変更を検証。

MCP サーバーがコーディングエージェントにマニフェストとリントルールを提供します。エージェントは自分の編集を検証し、修正を差分として提示できます。

MCP サーバーを設定
セッション@master/css-mcp
plan-card.html

  1. Style the plan card with our spacing and color tokens.

  2. I will look up the spacing tokens in the project manifest first.

  3. mastercss_manifest_query 12 個のトークン
    { "kind": "token", "namespace": "spacing" } spacing-4xs … spacing-5xl
  4. 編集plan-card.html+3 −3
  5. mastercss_inspect_class matched
    { "className": "bg-surface-raised" } background-color: var(--color-surface-raised)
  6. mastercss_lint_project 4 件の問題
    { "patterns": ["plan-card.html"] } 警告 4 件、うち 4 件を修正可能
  7. mastercss_preview_fixes 1 file changed
    { "patterns": ["plan-card.html"] } confirmToken "Vq3zK8…Ug6J"

  8. The fix sorts the classes and removes mt-md, which mt-sm overrides. Apply it?

  9. Apply it.

  10. mastercss_apply_preview 適用済み
    { "confirmToken": "Vq3zK8…Ug6J" } ハッシュを確認してファイルを書き込みました
  11. mastercss_lint_project 問題なし
    { "patterns": ["plan-card.html"] } 0 件の問題

  12. Applied. plan-card.html passes lint with no problems.

1<article class="grid gap-md p-lg r-xl bg-surface-raised">
2 <h3 class="mt-sm text-xl font-medium">Pro plan</h3>
3 <p class="text-sm fg-text-muted">Unlimited projects</p>
4</article>
出力 mastercss_lint_project

問題なし

plan-card.html
ハッシュを確認してファイルを書き込みましたsha256 4e0a1aab…c9c0
@master/css-mcp

ワークフロー

使い慣れたフレームワークとビルドに対応。

ひとつのプロジェクトマニフェストが、各連携、モノレポ内のアプリ、ルートの CSS を制御します。変更の影響範囲はスナップショットの比較で確認できます。

フレームワーク別の導入方法

フレームワーク連携

フレームワーク連携も CLI も同じプロジェクトマニフェストを読み込むため、ビルドとエディターの判断が一致します。

index.css

モノレポに対応

各ファイルは最も近いプロジェクトに従うため、同じクラスでもアプリごとに異なる値へ解決できます。

index.css

ルート単位のスタイル

ルートのスタイルシートは、グローバルルールを複製せずに共通のトークン、ミックスイン、カスタムメディアを使えます。

index.css
.hero { display: grid; gap: var(--spacing-5xl); @media (--md) { grid-auto-flow: column; }}
pricing.css
.plan { padding: var(--spacing-lg); @apply --raised; @media (--md) { padding: var(--spacing-5xl); }}
blog.css
.post { max-width: 42rem; padding: var(--spacing-lg); @media (--md) { @apply --raised; }}
--spacing-5xl--spacing-lg--raised--md

変更の影響をたどる

トークンを変更してスナップショットを比較すると、影響するクラス、ファイル、出力がわかります。

ひとつのクラス文字列から始めて、 デザインシステムへ育てていく。

使い始める
npm create @master/css@2.0.0