由标记驱动的 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 即可优先应用。

.px-lgpadding-inline:var(--spacing-lg)

广色域颜色

采用一致分级的 P3 调色板，从深色基调到超出 sRGB 范围的明亮强调色。

编辑器

类字符串再密集，也能清晰阅读。

语言服务根据项目清单补全类，在悬停时显示其 CSS，并在代码中直接标示颜色。

<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>

Builds

</li>

Bandwidth

</li>

</ul>

</article>

自动补全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>

<head>

</head>

<body>

<article class="demo p-lg r-xl

bg-amber-10 shadow-sm">

…

</article>

</body>

</html>

<!doctype html>

<head>

<title>渐进式渲染</title>

<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>

</body>

</html>

<!doctype html>

<head>

<title>运行时渲染</title>

/* CSSOM ↓ */

</style>

</head>

<body>

<article class="demo p-lg r-xl

bg-amber-10 shadow-sm">

<h1>运行时渲染</h1>

…

</article>

</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); }

}

预览实时

StaticProgressiveRuntime

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

Master CSS

110.4 kB
Angular

151.8 kB 1.4×
Vue.js

186.3 kB 1.7×
Material UI

277.4 kB 2.5×
Bootstrap

294 kB 2.7×
Next.js

479.9 kB 4.3×
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

$ npx @master/css-cli lint --format stylish1:17warning@master/css/sort-classes

$ npx @master/css-cli lint --format stylish1:29warning@master/css/no-conflicting-classes

$ npx @master/css-cli lint --format stylish --rules all1:11warning@master/css/no-unapproved-raw-values

$ npx @master/css-cli lint --fix

MCP 服务器 @master/css-mcp 就绪

→ mastercss_lint_content button.html"ruleId": "no-invalid-classes","severity": "error","loc": { "start": { "line": 1, "column": 28 } }

→ mastercss_lint_content card.html"ruleId": "sort-classes","severity": "warning","loc": { "start": { "line": 1, "column": 17 } }

→ mastercss_lint_content settings.html"ruleId": "no-conflicting-classes","severity": "warning","loc": { "start": { "line": 1, "column": 29 } }

→ mastercss_lint_content alert.html · rules: all"ruleId": "no-unapproved-raw-values","severity": "warning","loc": { "start": { "line": 1, "column": 11 } }

→ mastercss_preview_fixes card.html"mode": "lint-fixes","preview": { "confirmToken": "…" }

AI 智能体

让智能体自行检查更改。

MCP 服务器向编程智能体提供项目清单与检查规则，使其能够检查自己的编辑，并以差异形式交付修复。

配置 MCP 服务器

会话@master/css-mcp

plan-card.html

Style the plan card with our spacing and color tokens.
I will look up the spacing tokens in the project manifest first.
mastercss_manifest_query 12 个令牌

→{ "kind": "token", "namespace": "spacing" } ←spacing-4xs … spacing-5xl
编辑plan-card.html+3 −3
mastercss_inspect_class matched

→{ "className": "bg-surface-raised" } ←background-color: var(--color-surface-raised)
mastercss_lint_project 4 个问题

→{ "patterns": ["plan-card.html"] } ←4 个警告，其中 4 个可修复
mastercss_preview_fixes 1 file changed

→{ "patterns": ["plan-card.html"] } ←confirmToken "Vq3zK8…Ug6J"
The fix sorts the classes and removes mt-md, which mt-sm overrides. Apply it?
Apply it.
mastercss_apply_preview 已应用

→{ "confirmToken": "Vq3zK8…Ug6J" } ←哈希匹配，文件已写入
mastercss_lint_project 未发现问题

→{ "patterns": ["plan-card.html"] } ←0 个问题
Applied. plan-card.html passes lint with no problems.