모델 컨텍스트 프로토콜(Model Context Protocol)인 MCP는 AI 에이전트가 데이터 소스 및 도구에 연결할 수 있게 해주는 개방형 표준입니다. 디자이너의 경우 AI 코딩 도구가 스크린샷에서 추측하는 대신 디자인 파일을 직접 읽을 수 있고 경우에 따라 디자인 자체를 만들거나 변경할 수 있음을 의미합니다.
Figma에는 AI 에이전트에 변수, 구성 요소 및 레이아웃과 같은 설계 컨텍스트를 제공하여 선택한 프레임에서 코드를 생성할 수 있는 MCP 서버가 있습니다. 또한 기본 Figma 콘텐츠를 캔버스에 다시 쓸 수도 있습니다. Figma는 이 기능이 베타 기간 동안 무료이며 사용량 기반이 될 계획이라고 설명합니다. Figma의 도움말 센터에 따르면 MCP 서버는 Starter, Professional, Education, Organization, Government 및 Enterprise 요금제에서 사용할 수 있습니다.
Penpot에는 무료 개방형 MCP 서버가 있습니다. Penpot는 이를 Claude, Cursor, Visual Studio Code 및 OpenAI Codex를 포함한 모든 MCP 클라이언트 및 모델과 함께 작동한다고 설명하며 팀은 이를 자체 서버에 배포하여 설계 데이터를 비공개로 유지할 수 있습니다.
우리가 만드는 ExodeUI에는 대화형 UI 및 애니메이션을 위한 MCP 서버가 있습니다. Claude Code, Cursor 및 기타 AI 코딩 도구는 일반 언어 프롬프트에서 상태, 스프링 물리학, 입력 및 이벤트를 포함한 애니메이션을 생성하고 편집할 수 있습니다. 그 결과 런타임 패키지가 React, Vue, Svelte, Angular, Solid, React Native, SwiftUI 및 Flutter에서 재생되는 열린 .exode 파일이 생성됩니다.
다른 도구에서는 MCP 지원이 빠르게 추가되고 있으므로 선택하기 전에 각 공급업체의 문서를 확인하세요. 예를 들어 Icons8은 아이콘 및 일러스트레이션 라이브러리를 위한 MCP 서버를 제공합니다. 이는 Lunacy 디자인 앱과 함께 유용하지만 Lunacy 파일을 편집하지는 않습니다.