Claude Code에서 Curio 사용하기
Claude Code는 전체 인터페이스를 만들 수 있지만 그대로 두면 다른 에이전트와 같은 흔한 모습으로 수렴합니다. Curio를 연결하면 디자인 사양을 직접 쓰지 않고도 1294가지 실제 디자인 스타일 중 원하는 것을 일관되게 적용할 수 있습니다.
Claude Code에 추가되는 기능
Curio는 Model Context Protocol(MCP) 서버를 운영합니다. Claude Code를 연결하면 라이브러리를 검색하고 스타일 메타데이터를 읽으며 제작 중인 항목에 필요한 색상, 타이포그래피, 간격, 컴포넌트, 규칙을 포함한 전체 디자인 사양을 가져올 수 있습니다.
읽기 전용이며 로그인 기반입니다. OAuth로 한 번 연결하면 API 키를 관리할 필요가 없습니다. 같은 연결을 Claude Code, Cursor, VS Code, Codex 등 MCP 클라이언트에서 사용할 수 있습니다.
Setup
-
1
Curio MCP 서버 추가
Claude Code에서 https://mcp.designbycurio.com/mcp를 가리키는 MCP 서버를 추가합니다. Claude Code가 브라우저에서 OAuth 로그인 절차를 엽니다.
-
2
OAuth로 로그인
이메일, Google 또는 GitHub로 로그인하고 연결을 승인합니다. Free 계정은 무료 스타일을 사용할 수 있고 Pro 또는 Max는 전체 라이브러리를 잠금 해제합니다.
-
3
스타일 찾기
Claude Code에 Curio를 검색하라고 요청합니다. 예를 들어 "Curio에서 깔끔한 핀테크 스타일을 검색해 줘"라고 하거나 Bauhaus 또는 Stripe처럼 직접 지정합니다. search_styles와 get_style로 적합한 스타일을 고릅니다.
-
4
프로젝트에 적용
Claude Code에 해당 스타일로 만들라고 요청합니다. get_style_spec으로 전체 사양을 가져와 정확한 토큰과 규칙으로 슬라이드, 페이지 또는 컴포넌트를 생성합니다.
What you get
일관된 결과: Claude Code가 생성하는 모든 화면은 매번 다시 추측하지 않고 하나의 기준 사양을 바탕으로 하므로 같은 모습을 유지합니다.
실재하고 뚜렷한 스타일: 흔한 기본값이 아니라 수백 가지 운동, 브랜드, 전통에서 골라 결과물이 AI가 만든 듯 보이지 않게 합니다.
파일 관리 불필요: DESIGN.md를 직접 쓰거나 찾아다닐 필요 없이 Claude Code가 MCP로 실시간 가져옵니다.
Example prompts
Curio에서 따뜻한 에디토리얼 디자인 스타일을 검색하고 그 스타일로 3분기 실적을 담은 5장짜리 슬라이드 덱을 만들어 주세요.
Curio의 Bauhaus 스타일로 이 제품 랜딩 페이지의 히어로 섹션을 만들어 주세요.
FAQ
API 키가 필요한가요?
필요 없습니다. Curio의 MCP 서버는 OAuth를 사용합니다. 브라우저에서 한 번 로그인하면 Claude Code 연결이 유지되며 복사하거나 교체할 키가 없습니다.
스타일을 가져오면 비용이 드나요?
스타일의 전체 사양을 가져오면 웹사이트에서 한 번 다운로드할 때와 동일하게 할당량 1개를 사용합니다. Free 계정에는 정해진 한도가 있고 Pro와 Max는 순환 기간에 더 많은 한도를 받습니다. 검색과 메타데이터 읽기는 무료입니다.
다른 도구에서도 사용할 수 있나요?
가능합니다. 같은 MCP 엔드포인트를 Cursor, VS Code, Codex, ChatGPT 등 MCP 지원 클라이언트에서 사용할 수 있습니다. 클라이언트별 설정은 개발자 문서를 확인하세요.