디자인 토큰과 MCP

Model Context Protocol은 AI 어시스턴트를 외부 도구와 데이터에 연결하는 개방형 표준입니다. 디자인 토큰에 적용하면 MCP 서버가 프로젝트의 최신 토큰 값을 AI 코딩 에이전트에 제공하여, 생성된 컴포넌트가 모델이 지어낸 값 대신 실제 디자인 시스템을 참조하게 됩니다.

무엇을 해결하는가

컴포넌트를 작성하는 AI 에이전트는 디자인 값을 어딘가에서 가져와야 합니다. 더 나은 수단이 없으면 학습에서 본 것을 씁니다. 흔한 Tailwind 기본값, 인기 있는 팔레트, 그럴듯한 여백.

결과물은 컴파일되고, 합리적으로 보이고, 틀렸습니다. 눈에 띄게 틀리지는 않았다는 점이 어려운 부분입니다. 여러분의 주요 색이 아니라 그에 가까운 16진수인 것이죠.

팔레트를 프롬프트에 붙여 넣으면 대화 한 번은 넘길 수 있습니다. 다음 대화로는 이어지지 않고, 팀 규모로도 확장되지 않습니다.

MCP가 바꾸는 것

Model Context Protocol은 도구와 데이터를 AI 어시스턴트에 노출하기 위한 개방형 표준입니다. Cursor나 Claude Code 같은 클라이언트가 서버에 접속하면, 작업 중에 그 도구를 호출할 수 있습니다.

디자인 시스템에서는 이것이, 프롬프트에 무엇이 담겼는지에 의존하지 않고 필요한 바로 그 순간에 에이전트가 값을 물어볼 수 있다는 뜻입니다. 전형적인 서버는 다음을 노출합니다.

토큰 조회: 색상·타이포그래피·여백·반경·그림자·모션의 현재 값
컴포넌트 조회: 지정한 컴포넌트의 명세
위반 검사: 주어진 코드 블록에서 어떤 값이 직접 박혔고 어떤 토큰이 이를 대체하는지
토큰 제안: 시스템이 정의하지 않은 값을 에이전트가 지어내는 대신 요청할 수 있는 경로

마지막 항목은 보기보다 중요합니다. 실패의 형태를 조용한 발명에서, 사람이 답할 수 있는 명시적 요청으로 바꿔 놓습니다.

어떻게 연결하는가

MCP 클라이언트는 서버 이름과 접속 방법을 담은 작은 JSON 설정을 읽습니다. Cursor에서는 프로젝트의 MCP 설정에, Claude Code에서는 CLI로 추가합니다. 인증은 보통 프로젝트 하나로 범위가 제한된 토큰입니다.

연결되고 나면 에이전트는 생성할 때마다 디자인 시스템을 참조합니다. 프롬프트마다 붙여 넣을 필요가 없습니다.

규칙 파일과 무엇이 다른가

Cursor 규칙과 비슷한 방식은 정적 텍스트를 컨텍스트에 밀어 넣습니다. 효과가 있고 해 둘 가치도 있지만, 그 텍스트는 스냅숏입니다. 토큰이 바뀌기 전까지는 맞고, 바뀐 뒤에는 자신 있게 틀립니다.

MCP 서버는 호출 시점에 읽힙니다. 토큰이 바뀌면 다음 생성은 누가 파일을 갱신하지 않아도 새 값을 봅니다.

Flash DS와의 관계

Flash DS는 여러분이 소유한 어떤 디자인 시스템에 대해서도 위 도구들을 노출하는 MCP 서버를 운영합니다. Cursor, Claude Code, 또는 범위가 제한된 토큰을 가진 모든 MCP 클라이언트에서 연결할 수 있습니다.