Claude Code 및 Cursor를 위한 최고의 디자인 MCP 서버

디자인 MCP 서버를 활용하면 코딩 에이전트가 Model Context Protocol을 통해 디자인을 읽고 UI 레퍼런스를 검색하며 화면을 생성할 수 있습니다. 기존 Figma 디자인이 있다면 Figma부터 시작하세요. 레퍼런스 검색에는 Mobbin을 활용하세요. 편집 가능한 프로젝트에서 새로운 모바일 앱 화면을 만들 때는 이 작업에 특화된 Sleek이 적합한 옵션입니다.

본 비교 글에서는 2026년 9월 28일 기준으로 확인된 8개 제공업체의 공식 문서에 기재된 기능과 Claude Code 및 Cursor 설정 방법을 다룹니다. 당사는 Sleek을 제공합니다. 아래 추천 목록은 직접 시험한 결과물의 품질 순위가 아니라 각 연동 기능이 수행하는 역할을 바탕으로 작성되었습니다.

디자인 MCP 서버란 무엇인가요?

디자인 MCP 서버는 디자인 제품의 도구를 AI 클라이언트에 노출합니다. 에이전트가 도구를 호출해 데이터나 이미지를 받아오므로 사용자가 모든 세부 사항을 채팅창에 일일이 복사할 필요가 없습니다. 프로토콜은 연결을 제공하며, 서버는 에이전트가 파일을 읽거나 카탈로그를 검색하거나 디자인을 변경할 수 있는지를 결정합니다.

호스팅 서버는 URL을 통해 연결됩니다. 로컬 연동은 컴퓨터에 설치된 소프트웨어에 연결됩니다. 하지만 두 명칭 모두 화면 생성 가능 여부를 직접적으로 나타내지는 않습니다. 서버를 선택하기 전에 지원되는 작업 목록을 확인하세요.

디자인 MCP 서버별 차이는 무엇인가요?

Figma는 디자인 결과물이 Figma에 있어야 할 때 유용합니다. Mobbin은 기존 제품의 레퍼런스를 제공합니다. Stitch와 Sleek은 호스팅 기반의 화면 생성 워크플로를 제공하며, Pencil과 Paper는 에이전트를 로컬 캔버스에 연결합니다. 일부 기능이 중복되므로 도구 수가 가장 많은 서버보다는 필요한 결과물과 워크플로에 맞는 서버를 선택하세요.

아래의 모든 액세스 세부 정보는 2026년 9월 기준입니다. 표 아래에 제공업체 출처와 클라이언트 설정 안내가 이어집니다.

위 표는 화면 생성과 레퍼런스 조회를 구분하여 보여줍니다. 검색 결과는 에이전트가 결제 패턴을 이해하는 데 도움을 줄 수 있지만, 이것이 앱을 위한 새로운 결제 화면이 되지는 않습니다.

Figma MCP 서버는 어떤 기능을 제공합니까?

Figma MCP는 레이아웃, 변수, 컴포넌트를 포함하여 구현에 필요한 디자인 컨텍스트를 제공합니다. 원격 서버를 사용하면 지원되는 클라이언트에서 Figma 고유 형식의 콘텐츠를 생성하고 편집할 수도 있습니다. 작업 기준이 되는 디자인 파일이 Figma이거나 Figma에 직접 결과를 입력해야 할 때 사용하세요. 데스크톱 서버는 로컬 디자인 컨텍스트를 읽는 용도로 계속 활용할 수 있습니다.

Figma 도움말 센터에 따르면 원격 액세스는 모든 플랜 및 시트에 제공되며, 데스크톱 액세스는 유료 Dev 또는 Full 시트에 제공되고, 베타 기간 동안 캔버스 쓰기는 무료입니다. 액세스가 무제한은 아닙니다. Figma의 호출 한도 페이지에 따르면 Starter 플랜은 월 최대 20회의 읽기 도구 호출이 가능하며, 유료 Dev 및 Full 시트에는 더 높은 한도가 부여됩니다.

명령어는 2026-09-28에 확인했습니다.

원격 설치 가이드에서는 다음 Claude Code 플러그인 사용을 권장합니다.

claude plugin install figma@claude-plugins-official

또는 서버만 추가할 수도 있습니다.

claude mcp add --transport http figma https://mcp.figma.com/mcp

Claude Code에서 /mcp를 열고 인증을 진행하세요. Cursor의 경우 동일한 가이드에서 에이전트 채팅에 다음 명령어를 입력하도록 안내합니다.

/add-plugin figma

데스크톱 방식을 사용하려면 Figma의 Dev Mode 검사 패널에서 MCP 서버를 활성화하세요. 데스크톱 가이드에서는 다음 Claude Code 명령어를 제공합니다.

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Cursor의 데스크톱 설정은 다음과 같습니다.

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

프레임 링크를 붙여넣고 에이전트에 구현을 요청하세요. 레이아웃이 이미 결정된 상황이라면 이것이 가장 명확한 출발점입니다. 원격 서버의 쓰기 도구를 활용하면 Figma 내에서 직접 콘텐츠를 생성해야 할 때도 적합한 선택지가 됩니다.

Google Stitch MCP 서버는 어떤 기능을 제공합니까?

Google Stitch는 Stitch 프로젝트를 다루고 텍스트로부터 화면을 생성할 수 있는 호스팅 MCP 연결을 제공합니다. 생성된 디자인은 Stitch 프로젝트에 저장됩니다. 코딩 에이전트에서 Google의 디자인 생성기를 활용하고 동일한 워크플로 내에서 화면 데이터를 불러오려는 개발자에게 적합합니다.

Stitch MCP 설정 가이드에서는 API 키 및 OAuth 인증 방식을 설명합니다. API 키 방식은 Stitch 설정에서 발급받은 키를 사용합니다. 공식 Stitch SDK 역시 원격 엔드포인트와 화면 생성, 화면 HTML 및 이미지 조회 기능을 문서화하고 있습니다.

설정 가이드의 API 키 구성을 사용한 Claude Code 명령어는 다음과 같습니다.

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

Cursor의 경우 .cursor/mcp.json 파일에 설정합니다.

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

플레이스홀더를 사용자의 키로 바꾸고 해당 파일이 버전 관리 시스템에 포함되지 않도록 주의하세요. 일괄 작업을 계획하기 전에 Stitch 계정의 현재 한도를 확인하세요. 설정 페이지는 연결 가이드입니다.

Mobbin MCP 서버는 어떤 기능을 제공합니까?

Mobbin MCP를 사용하면 에이전트가 실제 제품 인터페이스를 검색하고 화면 이미지를 받아올 수 있습니다. 아직 결정되지 않은 플로우를 설계하거나 패턴을 구현하기 전에 유용합니다. 문서화된 도구는 기존 자료를 검색하는 용도이며, 새로운 앱 디자인을 생성하지는 않습니다. 출력 결과는 다음 의사결정을 위한 참고 자료로 활용됩니다.

Mobbin 소개 문서에 따르면 OAuth 인증과 Pro, Team, Enterprise 플랜에서의 액세스를 지원합니다. 도구 목록에는 화면, 플로우, 웹사이트 섹션 검색이 포함되어 있습니다. 고해상도 이미지 URL은 30일 후 만료됩니다.

Mobbin의 Claude Code 가이드에서는 먼저 Claude Desktop이나 웹에서 검증된 커넥터를 설정하는 것을 권장합니다. 또한 CLI 전용 대안으로 다음 명령어도 안내하고 있습니다.

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

명령어를 실행한 후 /mcp를 열고 Mobbin을 선택하여 인증을 완료하세요.

Cursor의 경우 제공업체의 설정 단계에 따라 JSON 스니펫 대신 Marketplace 플러그인을 사용합니다.

1. Cursor Marketplace에서 Mobbin 플러그인을 열고 Add to Cursor를 선택합니다.
2. Add Plugin을 선택합니다.
3. Cursor에서 Customize, Installed, Mobbin 순으로 이동합니다.
4. Authenticate를 선택하고 로그인합니다.

은행 앱의 온보딩 화면처럼 구체적인 레퍼런스를 요청하세요. 생성기나 코딩 에이전트에 자체 플로우 구현을 요청하기 전에 유용한 패턴을 먼저 탐색하고 선택하는 것이 좋습니다.

Sleek MCP 서버는 어떤 기능을 제공합니까?

Sleek MCP를 사용하면 에이전트가 Sleek 프로젝트 내에서 편집 가능한 iOS 및 Android 앱 화면을 생성할 수 있습니다. 에이전트는 화면 HTML을 가져오고 이미지를 렌더링하며 검토용 프로젝트 링크를 반환할 수 있습니다. 요구사항 명세와 에이전트가 작성할 코드 사이에 모바일 앱 디자인 단계가 필요한 경우에 활용하세요.

Sleek MCP README에는 호스팅 서버, OAuth 로그인, Figma 및 코드 내보내기 기능이 문서화되어 있습니다. Sleek이 화면 세트를 한 번에 기획할 수 있도록 에이전트에 전체 앱 기획안을 한 메시지로 전달하세요. 화면 생성 시에는 워크스페이스 크레딧이 차감되며, 읽기 및 렌더링에는 크레딧이 차감되지 않습니다.

Claude Code 설정 방법:

claude mcp add --transport http sleek https://sleek.design/api/mcp

Claude Code에서 /mcp를 열고 Sleek을 선택한 뒤 브라우저 인증을 완료하세요. Cursor의 경우 단일 프로젝트는 .cursor/mcp.json, 모든 프로젝트 적용 시에는 ~/.cursor/mcp.json에 다음 설정을 추가합니다.

{
  "mcpServers": {
    "sleek": {
      "url": "https://sleek.design/api/mcp"
    }
  }
}

서버를 활성화하고 로그인하세요. README에서는 OAuth를 권장하며, API 키는 이를 지원하지 않는 클라이언트를 위한 대체 방식입니다.

무료 계정은 1회성 60 크레딧으로 API를 체험할 수 있습니다. 공개 구독 플랜 중 지속적인 API 및 에이전트 액세스에는 Starter가 아닌 Pro 또는 Team 플랜이 필요합니다. 2026년 9월 기준 Pro 플랜은 월 $69 또는 연 $360이며 월 20,000 크레딧이 제공됩니다. Figma 및 코드 내보내기는 모든 플랜에 포함되어 있으며, Free 플랜 내보내기는 잠금 해제된 화면으로 제한됩니다.

MCP README에 따르면 새 화면 생성에는 약 30 크레딧, 편집에는 5~30 크레딧이 소요됩니다. 프로젝트마다 디자인 작업을 한 번에 하나만 실행할 수 있습니다. design 호출은 최대 270초 동안 대기한 후 필요 시 실행 중 상태를 반환하므로, 에이전트는 기획안을 다시 제출하지 않고 get_design_run을 폴링해야 합니다.

Sleek은 디자인과 내보내기 가능한 UI 코드를 생성합니다. 앱의 데이터와 동작을 연결하고 React Native나 SwiftUI로 개발하는 경우 화면 코드를 변환하는 작업은 여전히 코딩 에이전트의 몫입니다. REST API 워크플로를 선호하는 경우 Claude Code UI 디자인 스킬 가이드에서 Sleek의 별도 스킬 설치 방법을 확인할 수 있습니다.

ScreensDesign MCP 서버는 어떤 역할을 하나요?

ScreensDesign MCP는 iOS 앱 리서치와 화면 생성을 하나로 결합합니다. 2026년 9월 기준 공식 MCP 페이지에 따르면 2,715개 이상의 최고 매출 앱 라이브러리, 전체 UX 플로우, 매출 신호, 그리고 해당 레퍼런스를 바탕으로 화면을 생성하는 도구를 제공합니다. 기존 모바일 패턴을 분석하며 시작하는 작업에 적합합니다.

MCP를 사용하려면 ScreensDesign Pro 플랜이 필요합니다. 호스팅 서버는 OAuth 또는 스코프 지정 API 키를 지원합니다. Claude Code의 경우 HTTP 엔드포인트를 추가하고 /mcp를 통해 인증하면 됩니다:

claude mcp add --transport http screensdesign https://api.screensdesign.com/v1/mcp

Cursor의 경우 .cursor/mcp.json에 다음 설정을 추가한 후 서버를 연결합니다:

{
  "mcpServers": {
    "screensdesign": {
      "url": "https://api.screensdesign.com/v1/mcp"
    }
  }
}

계정별 상세 설정은 제공업체의 설정 가이드를 참고하세요. 매출 신호는 레퍼런스 앱의 정보를 설명할 뿐, 화면을 그대로 복사한다고 해서 앱의 전환율이 높아진다는 것을 보장하지는 않습니다.

AIDesigner MCP 서버는 어떤 역할을 하나요?

AIDesigner MCP는 모바일이나 데스크톱 뷰포트에 맞춘 Tailwind 기반 HTML/CSS 디자인을 생성하고 다듬어 줍니다. 저장소 컨텍스트를 활용할 수 있고 결과를 자체 캔버스와 공유할 수 있습니다. 기존 프로젝트의 맥락을 반영한 인터페이스 코드를 생성하고 싶을 때 적합하며, 프로덕션 코드에 적용하기 전 출력 결과를 미리 점검하는 것이 좋습니다.

공식 설정 가이드에서는 서버 및 에이전트 지침을 구성하는 CLI를 제공합니다. Claude Code를 사용하려면 프로젝트 루트에서 다음 명령어를 실행하세요:

npx -y @aidesigner/agent-skills init

Cursor의 경우 호스트를 명시적으로 지정합니다:

npx -y @aidesigner/agent-skills init cursor

두 방식 모두 https://api.aidesigner.ai/api/v1/mcp에 연결됩니다. 클라이언트의 MCP 패널에서 OAuth 로그인을 완료하세요. 생성 기능은 계정 크레딧을 소진하므로, 여러 시안을 반복 생성하기 전에 잔여 크레딧을 먼저 확인하는 것이 좋습니다. 참고로 문서에 명시된 최종 결과물은 인터페이스 HTML이며, 완성된 네이티브 모바일 앱은 아닙니다.

Pencil MCP 서버는 어떤 기능을 제공합니까?

Pencil(현 pen.dev)은 데스크톱 앱이나 IDE 확장 기능에서 열려 있는 .pen 문서에 에이전트를 연결합니다. 사용자가 동일한 파일에서 작업하는 동안 에이전트가 해당 캔버스를 검사하고 수정할 수 있습니다. 리포지토리와 함께 디자인 문서를 유지하면서 대화형 로컬 편집 워크플로를 원하는 개발자에게 적합합니다.

AI 연동 문서에서는 앱과의 로컬 stdio 연결을 설명합니다. 설치 가이드에서는 다른 환경에서도 사용할 수 있는 URL 대신 다음과 같은 Claude Code 단계를 제시합니다.

1. pen.dev에서 .pen 문서를 엽니다.
2. Settings -> MCP로 이동하여 Claude Code CLI를 활성화합니다.
3. Claude Code를 시작하거나 재시작합니다.
4. /mcp를 실행하고 pencil이 연결되었는지 확인합니다.

Cursor의 경우 문서에 명시된 IDE 확장 기능 설치 방식을 사용하세요.

1. Extensions를 열고 pen.dev를 검색합니다.
2. 확장 기능을 설치합니다.
3. .pen 파일을 생성하거나 엽니다.

요금제 페이지에 따르면 pen.dev는 2026년 9월 기준 현재 무료입니다. 단, 코딩 에이전트의 별도 구독 비용은 포함되어 있지 않습니다. 이 MCP 워크플로를 사용하려면 문서를 계속 열어 두어야 하며, 임의로 추측한 호스팅 엔드포인트나 다른 사람의 기기에서 복사한 바이너리 경로로 대체하지 마세요.

Paper MCP 서버는 어떤 기능을 제공합니까?

Paper MCP를 사용하면 에이전트가 HTML 및 CSS로 구축된 Paper 디자인 문서를 읽고 편집할 수 있습니다. 공유 캔버스 워크플로를 지원하므로 에이전트가 디자인을 수정하고 사용자가 이를 확인한 뒤 에이전트가 그 결과를 구현 과정에 활용할 수 있습니다. 이러한 문서 작업을 수행하려면 Paper Desktop이 실행 중이어야 하고 파일이 열려 있어야 합니다.

Paper MCP 가이드에서는 다음 플러그인 설치 방법을 설명합니다. 먼저 Paper Desktop을 설치하고 실행하세요. Claude Code의 경우 다음 명령어를 실행합니다.

claude plugin marketplace add paper-design/agent-plugins && claude plugin install paper-desktop@paper

그런 다음 Claude Code를 열고 /mcp를 확인하세요. Cursor의 경우 에이전트 패널에서 다음 명령어를 실행합니다.

/add-plugin paper-desktop

서버가 표시되지 않으면 Cursor를 새로고침하세요. Paper의 이전 localhost HTTP 설정도 여전히 작동하지만, 최신 플러그인은 Paper CLI를 사용합니다. CLI는 Desktop이 닫혀 있어도 도구를 노출할 수 있지만, 문서 읽기 및 쓰기 작업에는 여전히 데스크톱 앱이 필요합니다.

Paper 요금제 페이지에 따르면 2026년 9월 기준 Free 플랜은 주당 100회, Pro 플랜은 주당 100만 회의 MCP 호출을 제공합니다. Pro 플랜 가격은 편집자당 월 $20 또는 연간 결제 시 편집자당 월 $16입니다. 도구 호출 한도는 화면 수가 아닙니다. 하나의 디자인 작업에 여러 번의 호출이 포함될 수 있습니다.

어떤 디자인 MCP 서버를 사용해야 합니까?

기존 Figma 디자인을 구현할 때는 Figma, 레퍼런스를 탐색할 때는 Mobbin, 직접 검토하고 내보낼 수 있는 프로젝트에서 모바일 화면을 생성할 때는 Sleek을 사용하세요. Stitch 역시 또 다른 호스팅 생성 옵션입니다. 로컬 캔버스에서 에이전트와 같은 디자인 문서를 편집하려면 Pencil이나 Paper를 선택하세요.

당장 해결해야 하는 작업부터 시작하세요. 팀원이 이미 Figma 프레임을 전달했다면 두 번째 생성기를 추가하는 것은 필요하지 않을 수도 있는 디자인 결정을 추가하게 됩니다. 레이아웃이 없는 상태라면 화면을 생성하기 전에 레퍼런스를 통해 화면에 포함될 요소를 결정하는 데 도움을 받을 수 있습니다. 새로운 모바일 앱 기획안이 있다면 에이전트를 Sleek에 연결하고 생성된 화면을 확인한 후 구현을 진행하세요. 무료 체험은 약 1회의 디자인 실행을 지원하며, 지속적인 이용에는 Pro 플랜이 적합합니다.

에이전트에 기획안을 전달할 때 기존 브랜드 가이드라인이 있다면 함께 제공하세요. DESIGN.md 라이브러리는 이러한 도구와 함께 활용할 수 있는 서면 디자인 지침을 제공합니다. 이는 MCP 연결과는 별개의 입력 항목입니다.

에이전트 연동 외의 다른 선택지에 대해서는 AI 모바일 앱 디자인 도구 순위 및 Claude Design 대안 제품 문서를 참조하세요.

자주 묻는 질문