탐색
새 소식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