Google DESIGN.md 스펙을 활용한 AI 에이전트용 디자인 시스템 저장소 designkit.sh 공개

실용적 조언

Claude Code를 사용 중이라면 .claude/skills/ 폴더에 SKILL.md를 추가하여 에이전트가 항상 디자인 가이드를 참조하게 하라.
Cursor 사용자라면 .cursor/rules/ 폴더에 .mdc 파일을 생성하여 UI 생성 규칙을 정의하라.
designkit.sh의 라이브 미리보기 기능을 활용해 실제 코드를 작성하기 전 브랜드 스타일이 어떻게 적용되는지 확인하라.

섹션별 상세

AI 에이전트의 UI 생성 시 브랜드 일관성 결여 문제가 제기됐다. Claude Code나 Cursor 같은 도구들이 프로젝트마다 서로 다른 스타일을 생성하여 브랜드 정체성을 유지하기 어렵다는 점이 핵심이다. 이를 해결하기 위해 YAML 프런트매터와 텍스트로 구성된 DESIGN.md 파일을 프로젝트에 포함시켜 에이전트가 이를 읽고 UI를 테마화하도록 유도하는 방식이 제안됐다.

designkit.sh는 60개 이상의 브랜드 디자인 키트를 제공하는 오픈 레지스트리이다. 사용자는 CLI를 통해 Stripe, Notion, Apple 등 유명 브랜드의 디자인 토큰을 npx 명령어로 즉시 설치할 수 있다. 설치 시 DESIGN.md와 SKILL.md, 그리고 CSS 변수가 담긴 tokens.css 파일이 프로젝트 구조에 맞게 자동으로 배치되어 에이전트가 즉시 인식하게 된다.

bash

npx designkit-cli add stripe
npx designkit-cli add claude
npx designkit-cli add notion

CLI를 사용하여 특정 브랜드의 디자인 시스템을 프로젝트에 즉시 추가하는 명령어 예시

에이전트와의 통합을 위해 다섯 가지 경로가 제시됐다. 특히 SKILL.md를 통한 방식은 Claude Code나 Cursor가 UI 편집 시 해당 스킬을 자동으로 검색하여 컨텍스트에 포함시키도록 설계됐다. 또한 MCP(Model Context Protocol) 서버를 지원하여 에이전트가 로컬 설치 없이도 원격 저장소에서 디자인 키트를 실시간으로 조회하고 적용할 수 있는 환경을 구축했다.

프롬프트를 통한 디자인 키트 생성 기능이 포함됐다. 사용자가 원하는 분위기를 텍스트로 설명하면 Anthropic Sonnet 모델이 이를 해석하여 완전한 DESIGN.md 파일을 생성해준다. 생성된 키트는 즉시 라이브 미리보기가 가능하며, CSS 변수 교체 방식을 통해 재빌드 없이도 사이트 전체 테마를 실시간으로 변경할 수 있는 유연성을 확보했다.

json

{
  "mcpServers": {
    "designkit": {
      "url": "https://designkit.sh/designkit/mcp/sse",
      "headers": {
        "Authorization": "Bearer dk_…"
      }
    }
  }
}

에이전트가 디자인 키트 저장소에 직접 접근할 수 있도록 설정하는 MCP 서버 구성 예시

용어 해설

디자인 마크다운 스펙(DESIGN.md): — Google Stitch에서 제안한 선언적 디자인 시스템 규격으로, YAML 프런트매터와 산문을 통해 색상, 타이포그래피, 간격 등 브랜드 가이드를 정의하여 AI 에이전트가 일관된 UI를 생성하도록 돕는 파일 형식이다.
모델 컨텍스트 프로토콜(Model Context Protocol): — AI 모델이 외부 도구나 데이터 소스에 표준화된 방식으로 접근할 수 있게 하는 프로토콜로, 이 글에서는 에이전트가 디자인 키트 저장소에서 실시간으로 스타일 가이드를 가져오는 통로로 활용된다.
스킬 마크다운(SKILL.md): — Claude Code나 Cursor와 같은 에이전트에게 특정 기능이나 지식을 명시적으로 부여하는 매니페스트 파일로, 프로젝트 내 UI 생성 시 디자인 가이드를 강제로 참조하도록 설정하는 역할을 한다.
바이브 코딩(Vibe Coding): — 엄격한 설계나 직접적인 코드 작성 대신 AI 에이전트와의 대화와 직관에 의존하여 빠르게 결과물을 만들어내는 개발 방식을 일컫는 커뮤니티 용어이다.

언급된 도구

designkit.sh추천링크

DESIGN.md 키트 오픈 레지스트리 및 생성 도구

designkit-cli추천

디자인 키트를 프로젝트에 자동 설치하는 명령줄 도구

언급된 리소스

Demodesignkit.sh Gallery

문서Google Stitch Design.md Spec