클로드로 화면 만든다면 무조건 연결할 UI 디자인 MCP 5개

추석 AI 부트캠프 하루 6시간 만에
AI 기초부터 나만의
서비스까지 완성 이번 연휴를 기회로 삼으세요일정 보기 ↗

Quick Start

UI 디자인 MCP는 각 서비스가 안내하는 설정 블록을 클로드 코드의 MCP 설정에 추가해 붙입니다. 아래 다섯 개를 상황에 맞게 골라 씁니다.

1. 앱 화면 레퍼런스가 필요하면 STEP 1(Mobbin)부터 시작합니다.
2. SaaS 웹앱 플로우가 필요하면 STEP 2(Nicelydone)를 추가합니다.
3. 나머지 STEP 3~5는 설계 자동화·전환 개선·아이콘까지 넓힐 때 씁니다.

STEP 1 · 3분Mobbin MCP 로 실제 출시 앱 화면을 찾는다

이 단계에서는 클로드가 감으로 레이아웃을 짜지 않고 실제로 출시된 앱의 화면을 근거로 쓰게 만듭니다. Mobbin MCP 는 페이월·KYC 같은 화면을 포함해 실제 제품 화면 60만 개 이상에 클로드를 연결해 주기 때문입니다.

클로드 코드에 Mobbin MCP를 연결하고 싶습니다. mobbin.com/mcp의 공식 설정 블록을 그대로 내 MCP 설정 파일에 추가해 주세요.
성공하면 MCP 목록에 mobbin이 뜨는지 확인하고 결과를 알려주세요.

성공하면 MCP 목록에 mobbin 서버가 뜨고, "페이월 화면 5개 찾아줘" 같은 요청에 실제 앱 스크린샷 기반 응답이 돌아옵니다.

STEP 2 · 3분Nicelydone MCP 로 SaaS 화면·플로우를 검색한다

이 단계에서는 Linear·Stripe 같은 SaaS 웹앱의 화면·플로우·컴포넌트가 필요할 때 씁니다. Nicelydone MCP 는 실제 화면 212,600개 이상과 사용자 플로우 8,000개 이상을 도구 12개로 검색하게 해 주기 때문입니다.

nicelydone.club/mcp의 공식 설정 블록으로 Nicelydone MCP를 연결해 주세요.
성공하면 온보딩 플로우 화면을 하나 검색해서 결과를 보여주세요.

성공하면 MCP 목록에 nicelydone 서버가 뜨고, 요청한 온보딩 플로우의 화면과 레이아웃 패턴 메타데이터가 돌아옵니다.

STEP 3 · 3분Refero MCP 로 조사부터 설계까지 이어 붙인다

이 단계에서는 화면을 만들기 전에 클로드가 실제 제품 화면과 플로우를 먼저 조사하게 합니다. Refero MCP 는 화면 142,000개 이상과 플로우 12,000개 이상에 구조화된 메타데이터로 접근하게 해 주고, Refero Skill을 함께 쓰면 레퍼런스 조사 → 패턴 추출 → 타이포·컬러·간격 규칙으로 설계까지 이어지기 때문입니다.

refero.design/mcp의 공식 설정 블록으로 Refero MCP를 연결해 주세요. 첫 호출에서 브라우저 로그인을 요구하면 알려주세요.
성공하면 결제 화면 레퍼런스를 하나 조사해서 결과를 보여주세요.

성공하면 첫 호출 때 브라우저 로그인 창이 뜨고(Pro 구독 계정 필요), 로그인 후 요청한 결제 화면 레퍼런스와 패턴이 돌아옵니다.

STEP 4 · 3분Lazyweb MCP 로 A/B 테스트 근거까지 붙인다

이 단계에서는 화면 개선을 감이 아니라 실제 A/B 테스트 결과로 근거를 대게 만듭니다. Lazyweb MCP 는 설치와 토큰 발급 자체는 무료지만, 실제 데이터 도구 사용 가능 여부와 한도는 계정 플랜과 실험 배정에 따라 달라지기 때문입니다.

lazyweb.com의 설치 스크립트로 Lazyweb MCP를 연결해 주세요. 토큰 발급까지 마친 뒤 상태를 알려주세요.
성공하면 지금 만들고 있는 화면과 비슷한 A/B 테스트 사례를 하나 찾아 보여주세요.

성공하면 ~/.lazyweb/lazyweb_mcp_token 이 생성되고, 요청한 화면과 비슷한 A/B 테스트 사례와 결과가 돌아옵니다. 도구 사용이 막히면 계정 플랜이나 실험 배정 한도를 먼저 확인하세요.

STEP 5 · 2분InspoAI MCP 로 아이콘까지 한 서버에서 찾는다

이 단계에서는 화면 레퍼런스뿐 아니라 아이콘 SVG까지 같은 서버에서 받습니다. InspoAI MCP 는 웹 레퍼런스 검색(find_website_inspiration)과 아이콘 검색(search_icons)을 포함한 도구 11개를 한 서버에서 제공하기 때문입니다.

inspoai.io/mcp의 공식 안내대로 InspoAI MCP를 연결해 주세요. 계정 로그인이 필요하면 알려주세요.
성공하면 지금 만들고 있는 화면에 어울리는 아이콘을 3개 찾아 보여주세요.

성공하면 클로드 코드의 /mcp 에서 InspoAI 계정으로 로그인(Authenticate)한 뒤 연결되고, 요청한 아이콘 3개가 SVG로 돌아옵니다.

자주 막히는 곳

Nicelydone 에서 "화면 14만 개"라고 들었는데 실제로는 다릅니다. 14만 대는 Refero 의 수치(142,000+)와 혼동된 것입니다. Nicelydone 은 MCP 페이지 기준 212,600개 이상입니다.

Refero 가 검색할 때마다 DESIGN.md 파일을 만들어 준다고 들었는데 안 보입니다. MCP 페이지와 저장소 어디에도 DESIGN.md 를 자동 생성한다는 설명이 없습니다. 대신 구조화된 메타데이터와 Refero Skill 의 설계 규칙 추출을 확인하세요.

Lazyweb 이 완전 무료라고 들었는데 도구가 막힙니다. 설치와 토큰 발급은 무료지만 실제 데이터 도구 사용은 계정 플랜과 실험 배정에 따라 한도가 있습니다. 사이트의 유료 플랜(Upgrade plan)을 확인하세요.

알아 둘 한계

• Refero 의 "DESIGN.md 자동 생성"과 Lazyweb 의 "브랜드 컬러 추출"은 공식 자료로 확인되지 않는 기능입니다. 이 글에는 넣지 않았습니다.
• Mobbin·Nicelydone·Refero 는 유료 플랜(Pro 이상)이 필요합니다. InspoAI 는 무료 플랜에서 MCP 호출을 월 15회까지 쓸 수 있습니다.
• 각 서비스의 화면 개수·요금 정책은 바뀔 수 있으며, 이 글은 2026년 9월 17일 기준입니다.
• Nicelydone 의 화면 212,600개 이상·플로우 8,000개 이상(9월 17일에는 화면 199,400개 이상·플로우 12,500개 이상)과 InspoAI 의 연결 방법(클로드 코드는 계정 로그인, API 키는 Cursor·Codex)·도구 11개·무료 호출 월 15회는 2026년 10월 10일 공식 MCP 페이지 기준입니다.

FAQ

MCP 다섯 개를 다 붙여야 하나요? 아닙니다. 앱 화면이면 Mobbin, SaaS 웹앱이면 Nicelydone, 설계 규칙까지 원하면 Refero, A/B 테스트 근거가 필요하면 Lazyweb, 아이콘까지 필요하면 InspoAI 로 나눠 고르면 됩니다.

Refero 는 API 키가 필요한가요? 아닙니다. Pro 구독 계정으로 첫 호출 때 브라우저 로그인만 하면 됩니다. InspoAI 도 클로드 코드에서는 계정 로그인으로 연결하고, API 키는 Cursor·Codex 에서 쓸 때 필요합니다.

Mobbin MCP 도 API 키가 필요한가요? 아닙니다. 공식 설정 블록 하나만 추가하면 되고 별도 API 키는 필요 없습니다.

공식 참고 자료

• Mobbin 공식 — MCP
• Nicelydone 공식 — MCP
• Refero 공식 — MCP
• Refero 공식 저장소 — Refero Skill
• Lazyweb 공식 — Lazyweb
• InspoAI 공식 — MCP

각 서비스의 화면·플로우 개수, 요금 조건, 도구 목록은 위 공식 페이지와 저장소를 2026년 9월 17일에 직접 열어 대조 확인한 내용입니다. Nicelydone 의 "14만 개"와 Lazyweb 의 "완전 무료"·"브랜드 컬러 추출"은 이때 원문과 달라 이 글에서 고쳐 적었습니다. Nicelydone 의 화면·플로우 개수와 InspoAI 의 연결 방법·도구 수·무료 호출 수는 2026년 10월 10일에 다시 열어 확인해 고쳤습니다.