InspoAI MCP — Claude에서 화면 생성·브랜드 추출까지, 도구 전체와 연결법 (무료 월 15콜)

InspoAI MCP는 Claude 같은 AI 앱에서 짧은 설명이나 스크린샷만으로 완성된 반응형 화면(HTML + Tailwind)을 만들어 주는 원격 MCP 서버입니다. 웹사이트 레퍼런스 검색, 사이트 주소로 브랜드 색·글꼴 뽑기, 아이콘 검색, 무드보드 저장까지 한 커넥터에 들어 있습니다.
※ 이 글은 InspoAI 공식 페이지(MCP 안내·요금·GitHub)만 근거로 정리했습니다. 제가 직접 연결해 써 보지는 않았고, 공식 자료에서 확인하지 못한 부분은 ‘모름’으로 적었습니다.

개요

공식 MCP 페이지의 첫 문장은 “AI 에이전트에서 실제 UI 화면을 생성하라”입니다. Claude에게 “이런 랜딩 페이지 만들어 줘”라고 하면 InspoAI가 화면을 디자인해 자기 캔버스에 저장하고, Claude는 그 캔버스 링크와 HTML 다운로드를 돌려받는 구조입니다.

• 누구에게 맞나: 디자이너 없이 화면 시안이 필요한 개발자, 여러 화면을 빠르게 비교해 보고 싶은 기획자·1인 창업자, 내 브랜드 색을 정리해 두고 싶은 사람.
• 왜 Claude와 함께 쓰나: Claude는 코드를 잘 쓰지만 화면 디자인 자체는 결과가 들쭉날쭉할 수 있습니다. InspoAI는 “디자인 시스템을 고정하고 실제 문구·이미지를 넣어 흔한 AI 느낌을 없앤다”고 소개합니다. Claude가 대화 흐름을 맡고, 화면 생성은 InspoAI에 맡기는 분업입니다.
• 공식 페이지가 밝힌 지원 앱: Claude(웹·데스크톱·Claude Code), ChatGPT(개발자 모드), Cursor, Codex, 그리고 Streamable HTTP 방식 MCP를 지원하는 앱.

출시·업데이트 정보

• MCP 서버가 처음 공개된 날짜: 모름. 공식 블로그 목록과 MCP 페이지에서 출시일을 찾지 못했습니다.
• MCP 페이지의 경쟁 비교표에는 “경쟁사 정보는 2026년 10월 기준”이라는 각주가 붙어 있어, 페이지 자체는 최근에 손본 것으로 보입니다. 다만 이것이 기능 업데이트 날짜인지는 모릅니다.
• 변경 이력(changelog) 페이지: 찾지 못했습니다(모름).

주요 기능 — MCP 도구 전체

공식 MCP 페이지 “What your agent can do” 절에 나온 도구는 아래와 같습니다. 각 도구의 정확한 입력 파라미터 이름과 형식은 공개 페이지에 없어 모름이고, 표의 입력·결과는 페이지 설명문을 옮긴 것입니다.

도구	입력(설명 기준)	돌려주는 것
generate_ui	짧은 브리프, 또는 UI 이미지 링크(+ 바꿀 지시)	반응형 HTML(Tailwind) 화면 1~4개, 웹·iOS·태블릿, 라이트·다크. 캔버스 링크 + HTML 다운로드
edit_ui	기존 화면 + 한 줄 지시	수정본을 캔버스의 원본 옆에 저장
get_generation	진행 중인 생성 작업	완료된 결과. 조회는 무료
find_website_inspiration	업종·스타일·섹션(예: “다크 SaaS 랜딩”)	스크린샷 + 원본 크기 링크 + 실제 사이트 링크
extract_brand	실제 웹사이트 주소	로고, CSS 실사용 순으로 정렬한 색상표, 글꼴, SNS 링크
list_design_systems / get_design_system	모름	엄선된 디자인 시스템 16개를 제품에 맞게 순위 매김. CSS 변수·Tailwind 설정·W3C 디자인 토큰·코딩 에이전트용 규칙 파일로 내보내기
search_icons	아이콘 이름	Material Symbols·Iconoir·Remix 등 오픈소스 아이콘, 미리보기, SVG·PNG 다운로드
save_moodboard / get_moodboard / list_moodboards	이미지 링크, 보드 이름	InspoAI 보관함에 무드보드 저장, 보드의 색상 팔레트

• generate_ui는 스크린샷 재현도 맡습니다. 이미지 링크를 주면 레이아웃·문구·색·글꼴을 읽어 같은 팔레트로 깔끔한 화면을 다시 만들고, “우리 브랜드 색으로”, “다크로”, “iOS 버전으로” 같은 지시를 함께 줄 수 있다고 합니다.
• 생성 시간은 공식 FAQ 기준 화면 묶음당 보통 30~90초입니다.
• SVG 아이콘은 글자색을 따라가도록 만들어져 라이트·다크 모드 모두에서 보인다고 설명합니다.
• 디자인 감사(스크린샷에서 문제 지점을 짚어 주는 기능)는 InspoAI 웹 앱에만 있고 MCP에는 없다고 FAQ가 밝힙니다.

요금·조건

MCP는 도구 종류와 상관없이 요청 1건 = 1콜로 셉니다. 진행 중인 생성 확인은 무료이고, 실패한 요청은 세지 않습니다. 콜은 매월 1일(UTC)에 초기화되며, 사용량·초기화 날짜·최근 활동은 app.inspoai.io/mcp에서 볼 수 있다고 합니다.

플랜	MCP 콜(월 결제)	MCP 콜(연 결제)	요금 페이지 가격(연 결제)
Free	월 15	-	$0
Lite	월 200	월 175	월 $10(연 $120)
Freelancer	월 400	월 350	월 $18.33(연 $220)
Pro	월 700	월 650	월 $32.50(연 $390)

• 요금 페이지에는 할인 전 가격으로 $12·$22·$39가 줄을 그어 표시되고 “기간 한정 연간 25% 할인” 문구가 있습니다. 결제는 환불 불가라고 적혀 있습니다.
• MCP 페이지에는 “Lifetime 플랜은 월 700콜”이라는 문장이 있지만, 요금 페이지에서는 Lifetime 플랜을 찾지 못했습니다. 가격은 모름.
• 공식 페이지끼리 숫자가 다릅니다. MCP 페이지는 무료 “월 15콜”인데, 요금 페이지의 무료 플랜은 “하루 검색 25회, 평생 UI 생성 5회, 평생 브랜드 스캔·감사 5회”입니다. 두 한도가 따로 적용되는지, MCP 콜이 앱 한도도 차감하는지는 모름입니다. 연결 후 사용량 페이지에서 직접 확인하시는 게 안전합니다.

연결 방법

공식 페이지 기준으로 Claude·ChatGPT·Claude Code는 InspoAI 계정 로그인(OAuth), Cursor·Codex는 API 키 방식입니다. Claude 쪽은 복사할 키가 없습니다.

claude.ai / Claude 데스크톱

1. 설정(Settings) → 커넥터(Connectors) → 커스텀 커넥터 추가(Add custom connector).
2. 주소 https://app.inspoai.io/mcp 를 붙여 넣습니다.
3. InspoAI 창이 열리면 로그인하고 Allow를 누릅니다.

Claude Code

1. 터미널에서 아래 명령을 실행합니다.

claude mcp add --transport http inspoai https://app.inspoai.io/mcp

2. Claude Code 안에서 /mcp 를 입력하고 Authenticate를 고릅니다.
3. 브라우저에서 InspoAI 로그인 후 허용합니다.

연결을 끊으려면 AI 앱에서 커넥터를 지우고, app.inspoai.io/mcp의 “Keys and connected apps”에서 권한을 회수하라고 안내합니다.

활용 예시 3가지

1. 내 사이트 브랜드로 가격 페이지 시안 만들기

상황: 서비스 사이트는 있는데 가격 페이지가 없고, 기존 색·글꼴과 맞는 시안이 필요합니다.

InspoAI로 https://내사이트주소 의 브랜드를 뽑아 줘.
그 브랜드로 3단 요금제 가격 페이지를 라이트 모드로 만들고 캔버스 링크를 줘.

1. Claude가 extract_brand를 호출 → 로고, 사용 빈도순 색상표, 글꼴, SNS 링크를 받습니다.
2. 그 정보를 브리프에 담아 generate_ui를 호출 → 생성이 길어지면 get_generation으로 결과를 받아 옵니다.
3. 캔버스 링크와 HTML 다운로드 링크를 알려 줍니다.

결과물 활용: 받은 HTML(Tailwind)을 Claude에게 그대로 넘겨 내 프로젝트 템플릿 구조로 옮겨 달라고 하면 됩니다. 콜은 최소 2건(브랜드 추출 1 + 생성 1) 쓰입니다.

2. 레퍼런스 조사 → 같은 결의 랜딩 페이지

상황: 다크 톤 SaaS 랜딩을 만들고 싶은데 기준이 될 사례부터 보고 싶습니다. 공식 페이지의 예시 프롬프트를 옮긴 것입니다.

InspoAI로 다크 SaaS 랜딩 페이지 5개를 찾아서, 잘한 점을 정리해 줘.
그다음 그 스타일로 내 랜딩 페이지를 만들어 줘.

1. find_website_inspiration → 스크린샷과 원본·실제 사이트 링크가 대화에 표시됩니다.
2. Claude가 스크린샷을 보고 공통점(구성·여백·강조 방식 등)을 정리합니다.
3. generate_ui로 그 방향을 담은 화면을 만들고, 필요하면 edit_ui로 “히어로를 더 어둡게” 같은 수정을 이어 갑니다.

결과물 활용: 수정본은 원본 옆에 쌓이므로 캔버스에서 안끼리 비교한 뒤 고른 것만 HTML로 내려받습니다.

3. 디자인 시스템을 CSS 변수로 내보내기

상황: 새 프로젝트를 시작하는데 색·글자 크기 규칙을 처음부터 정하기 번거롭습니다.

어두운 톤의 가계부 앱에 맞는 InspoAI 디자인 시스템을 골라 줘.
고른 것을 CSS 변수로 내보내고, 그 시스템으로 대시보드 화면도 하나 만들어 줘.

1. list_design_systems → 16개 중 제품에 맞는 순서로 후보를 받습니다.
2. get_design_system → 고른 시스템을 CSS 변수(또는 Tailwind 설정·W3C 토큰·규칙 파일)로 받습니다. 공식 문장은 “내보낼 수 있다”까지만 적혀 있어, 이 내보내기가 MCP 응답으로 오는지 웹 앱에서 하는지는 모릅니다.
3. generate_ui를 그 시스템에 고정해 화면을 만듭니다.

결과물 활용: CSS 변수는 :root에 붙여 공통 스타일로 쓰고, 규칙 파일은 Claude Code가 이후 화면을 만들 때 참고하도록 저장소에 두면 됩니다. 내보낸 파일의 정확한 모양은 보지 못했습니다(모름).

활용 팁 5가지

1. 프롬프트에 “InspoAI로”를 넣으세요. 공식 예시 프롬프트가 모두 그렇게 시작합니다. 다른 디자인 MCP와 함께 연결했을 때 도구를 헷갈리지 않게 합니다.
2. 콜을 아끼려면 한 번에 묶으세요. generate_ui는 한 번에 최대 4화면까지 만들 수 있습니다. 무료 월 15콜이면 화면을 하나씩 따로 부르기보다 흐름 단위로 요청하는 편이 낫습니다.
3. 진행 확인은 공짜입니다. 30~90초 걸리는 생성을 기다리는 동안 get_generation 조회는 콜에 잡히지 않습니다.
4. 스크린샷은 링크로 주세요. 공식 안내는 “이미지 링크”를 넘기라고 합니다. 파일을 대화창에 바로 올리는 방식이 되는지는 모릅니다.
5. 브랜드를 먼저 고정하세요. extract_brand나 디자인 시스템으로 색·글꼴을 정한 뒤 생성하면 화면마다 톤이 흔들리는 일을 줄일 수 있습니다.

비슷한 도구와 비교

InspoAI 공식 비교표(경쟁사 정보는 각 사 문서 기준, 2026년 10월)는 “Mobbin·Refero는 남의 디자인을 보여 주고, InspoAI는 화면을 직접 만든다”고 정리합니다. 같은 시리즈의 다른 도구까지 간단히 나누면 이렇습니다.

• Mobbin MCP: 실제 iOS·안드로이드 앱 화면과 사용 흐름 검색. 화면 생성은 없음, 유료 구독 전용(InspoAI 비교표 기준).
• Refero MCP: 웹 페이지 섹션·스타일 레퍼런스, DESIGN.md 내보내기. 생성 없음, 유료(같은 표 기준).
• Nicelydone · Lazyweb: 레퍼런스 검색 계열 도구입니다. 자세한 차이는 각 소개 글을 참고해 주세요.
• InspoAI MCP: 위 도구들과 달리 화면 생성·수정·스크린샷 재현이 핵심이고, 무료 월 15콜로 시작할 수 있습니다.

주의할 점

• 남의 브랜드 자산: extract_brand는 아무 사이트나 읽을 수 있지만, 다른 회사 로고·색 조합을 그대로 내 서비스에 쓰면 상표·저작권 문제가 될 수 있습니다. 내 브랜드 정리나 분위기 참고용으로 쓰세요. 스크린샷 재현도 같습니다.
• 저장되는 데이터: 공식 FAQ에 따르면 생성한 화면은 그 화면을 만든 브리프와 함께 계정에 저장되고, 무드보드도 저장됩니다. 나머지 도구는 어떤 도구를 언제 썼는지만 기록한다고 합니다. 공개 전 기획 내용을 브리프에 넣을 때는 이 점을 감안하세요.
• 숫자 불일치: 위에서 본 무료 한도처럼, 공식 페이지마다 수치가 다릅니다. 보관 중인 레퍼런스 개수도 요금 페이지는 20만+, 오픈소스 페이지는 5만+ 화면이라고 적혀 있습니다.
• 오픈소스판과 다릅니다: GitHub의 inspoai-studio에도 MCP 서버(/api/mcp/sse)가 있다고 적혀 있지만, 이 글의 호스팅 MCP(app.inspoai.io/mcp)와 같은 도구를 주는지는 모릅니다. 라이선스도 오픈소스 페이지는 “MIT”, GitHub 저장소는 “PolyForm Noncommercial(비상업)”로 서로 다르게 적혀 있습니다.

자주 묻는 질문

API 키가 필요한가요?

Claude(웹·데스크톱)와 Claude Code는 필요 없습니다. InspoAI 계정으로 로그인하고 Allow만 누르면 됩니다. Cursor·Codex는 app.inspoai.io/mcp에서 키를 만들어 넣어야 합니다.

콜을 다 쓰면 어떻게 되나요?

공식 FAQ에 따르면 에이전트가 한도 소진을 알려 주고, 다음 달 1일(UTC) 초기화 때나 업그레이드하는 즉시 다시 쓸 수 있습니다.

한국어 브리프도 되나요?

모릅니다. 공식 예시는 모두 영어입니다. 결과 화면에 한국어 문구가 자연스럽게 들어가는지는 직접 확인이 필요합니다.

디자인 시스템은 어디서 미리 볼 수 있나요?

MCP 페이지는 16개 디자인 시스템을 “Design skills” 페이지에서 둘러볼 수 있다고 안내합니다. 다만 그 페이지는 “150개 이상의 스펙 시트”를 내세우고 있어, 16개와 어떻게 대응하는지는 모릅니다.

마무리

InspoAI MCP는 레퍼런스를 “보여 주는” 데서 멈추지 않고 Claude 대화 안에서 화면을 바로 “만들어 주는” 쪽입니다. 무료 월 15콜이면 브랜드 추출과 화면 몇 장을 시험해 보기에 충분하니, 내 사이트 주소 하나로 먼저 시작해 보세요. 공식 안내: https://www.inspoai.io/mcp