MCP 서버 (AI 연동)

Atomic CSS는 AI 어시스턴트를 위한 MCP(Model Context Protocol) 서버를 제공합니다. Claude, Cursor, Windsurf 같은 AI 도구가 Atomic CSS 클래스를 프로그래밍 방식으로 조회하고 사용할 수 있습니다.

MCP란?

MCP(Model Context Protocol)는 AI 모델이 외부 도구와 데이터에 접근할 수 있게 하는 표준 프로토콜입니다. Atomic CSS MCP 서버를 연결하면 AI가 정확한 클래스명을 조회하고, CSS 속성에서 클래스를 검색하고, 유효성을 검증할 수 있습니다.

1AI에게 "flexbox 센터 정렬 해줘"라고 요청

2AI가 MCP 서버의 도구를 호출하여 정확한 클래스를 조회

3MCP 서버가 df jcc aic 등 정확한 클래스와 CSS를 반환

✓AI가 올바른 Atomic CSS 클래스로 코드 작성

설정 방법

프로젝트 또는 AI 도구에 MCP 서버를 등록합니다.

.mcp.json (프로젝트 설정)

프로젝트 루트에 .mcp.json 파일을 생성하면, 해당 프로젝트에서 AI가 자동으로 MCP 서버를 인식합니다. 팀원과 공유할 수 있어 가장 권장하는 방법입니다.

.mcp.json

{
    "mcpServers": {
        "atomic-css": {
            "type": "sse",
            "url": "https://mcp.atomiccss.dev/sse"
        }
    }
}

참고: 프로젝트 스코프 MCP 서버는 처음 사용 시 승인 프롬프트가 표시됩니다.

CLI로 추가

터미널에서 직접 MCP 서버를 등록할 수도 있습니다.

# Claude Code에서 추가
claude mcp add --transport sse atomic-css https://mcp.atomiccss.dev/sse

# 프로젝트 스코프로 추가 (.mcp.json에 저장)
claude mcp add --transport sse --scope project atomic-css https://mcp.atomiccss.dev/sse

# 유저 스코프로 추가 (모든 프로젝트에서 사용)
claude mcp add --transport sse --scope user atomic-css https://mcp.atomiccss.dev/sse

Claude Desktop

Claude Desktop 앱에서는 설정 파일에 추가합니다.

claude_desktop_config.json

{
    "mcpServers": {
        "atomic-css": {
            "type": "sse",
            "url": "https://mcp.atomiccss.dev/sse"
        }
    }
}

Cursor

Cursor에서는 Settings > MCP Servers에서 추가합니다.

{
    "name": "atomic-css",
    "url": "https://mcp.atomiccss.dev/sse"
}

설정 스코프 비교

스코프	위치	공유	용도
`project`	프로젝트 루트 .mcp.json	O (git으로 공유)	팀 공유, 프로젝트별 설정 (권장)
`local`	~/.claude.json	X	개인 설정, 현재 프로젝트만
`user`	~/.claude.json	X	모든 프로젝트에서 사용

제공 도구

MCP 서버를 연결하면 AI가 자동으로 아래 도구들을 사용합니다. 사용자가 직접 호출할 필요는 없습니다.

도구	설명
`get_guide`	Atomic CSS 전체 사용 가이드 반환 (네이밍 규칙, 단위, 미디어쿼리, 의사클래스 등)
`lookup_class`	클래스명 → CSS 출력 조회 (여러 클래스 한 번에 가능)
`search_by_css`	CSS 속성/값으로 Atomic CSS 클래스 검색
`css_to_classes`	CSS 코드를 Atomic CSS 클래스로 변환
`validate_classes`	클래스 유효성 검증 + 유사 클래스 추천
`list_classes`	카테고리별 클래스 목록 조회

팁: AI에게 처음 Atomic CSS 작업을 시킬 때 "get_guide를 먼저 호출해서 규칙을 학습해"라고 지시하면 더 정확한 클래스를 생성합니다.

공식 MCP Registry

Atomic CSS MCP 서버는 공식 MCP Registry에 등록되어 있습니다. 별도 설치 없이 URL만으로 바로 연동할 수 있습니다.

Registry ID	`io.github.Yoodaekyung/atomic-css`
상태	Active
연동 URL	`https://atomiccss.dev/mcp`

인증 불필요: 공개 API로 누구나 바로 사용 가능합니다. 설정에 URL만 추가하면 됩니다.

서버 정보

URL	`https://mcp.atomiccss.dev`
SSE 엔드포인트	`https://mcp.atomiccss.dev/sse`
프로토콜	SSE (Server-Sent Events)
인증	현재 불필요 (공개 API). 향후 보안 및 요청 제한을 위해 API 키 인증이 도입될 수 있습니다.