Windsurf에서 Curio 사용하기

Windsurf에 추가되는 기능

Curio는 Model Context Protocol(MCP) 서버를 운영합니다. Windsurf를 연결하면 Cascade 에이전트가 라이브러리를 검색하고 메타데이터를 읽으며 색상, 타이포그래피, 간격, 컴포넌트, 규칙을 포함한 전체 디자인 사양을 가져올 수 있습니다.

읽기 전용이며 OAuth로 한 번 연결하면 API 키가 필요 없습니다. 같은 연결을 Windsurf, Claude Code, Cursor, VS Code, Codex 등 MCP 클라이언트에서 사용할 수 있습니다.

Setup

1. 1

   Curio MCP 서버 추가

   Windsurf의 MCP 설정에서 URL을 https://mcp.designbycurio.com/mcp로 지정한 새 서버를 추가합니다. Windsurf 버전별 정확한 위치는 개발자 문서를 확인하세요.

2. 2

   OAuth로 로그인

   Windsurf가 브라우저에서 로그인을 엽니다. 이메일, Google 또는 GitHub로 로그인하고 승인합니다. Free에서는 무료 스타일을 사용할 수 있고 Pro 또는 Max는 전체 라이브러리를 잠금 해제합니다.

3. 3

   Cascade에서 스타일 찾기

   Windsurf의 Cascade 채팅에서 Curio를 검색하라고 요청합니다. 예를 들어 "Curio에서 깔끔한 핀테크 스타일을 검색해 줘"라고 하거나 Bauhaus 또는 Stripe를 직접 지정합니다. search_styles와 get_style로 적합한 스타일을 고릅니다.

4. 4

   해당 스타일로 제작

   Windsurf에 선택한 스타일로 컴포넌트나 페이지를 만들라고 요청합니다. get_style_spec으로 전체 사양을 가져와 정확한 토큰과 규칙으로 코드를 작성합니다.

What you get

일관된 결과: Windsurf가 생성하는 모든 컴포넌트는 하나의 기준 사양을 바탕으로 같은 모습을 유지합니다.

실재하고 뚜렷한 스타일: 흔한 기본값이 아니라 수백 가지 운동, 브랜드, 전통에서 골라 UI가 AI가 만든 듯 보이지 않게 합니다.

파일 관리 불필요: DESIGN.md를 직접 쓰거나 찾지 않아도 Windsurf가 MCP로 가져옵니다.

Example prompts

Curio에서 깔끔한 핀테크 스타일을 검색하고 그 스타일로 이 대시보드 컴포넌트를 다시 만들어 주세요.

Curio의 Memphis 스타일로 이 마케팅 페이지의 히어로 섹션을 만들어 주세요.

FAQ