Claude와 ScreenPath 연결

무엇을 할 수 있나요

• 프로젝트 목록과 내용(화면·부품·선·묶음·디자인 규칙)을 읽습니다.
• get_layout은 브라우저 없이 캔버스 배치 규칙을 따릅니다. 다른 글꼴도 Pretendard 글 폭으로 근사하며 approx 상자는 최대 4px 차이 날 수 있습니다. 숨긴 부품은 상자가 없고, 화면 위 덮개와 이미지 내용은 포함하지 않습니다.
• 화면·부품·선·묶음·디자인 규칙을 만들고 고치고 지웁니다. 호출 하나는 브라우저에서 되돌리기 한 단계로 남습니다.
• 연결 중 브라우저에서 지금 고른 화면·부품을 읽습니다.
• 기존 앱을 불러오고, 다시 불러올 때 GUI에서 고친 내용과 합칩니다.

불러오는 중…

ScreenPath 서버는 회원의 코드 저장소를 읽지 않습니다. Claude가 회원이 준 코드를 읽고 payload로 보내는 방식입니다.

도구 무리

Claude는 연결한 범위 안에서 아래 도구를 씁니다. 도구 이름과 입력 칸 이름은 영어로 유지됩니다.

지우기 전에 버전을 남깁니다. 소유자가 무료 플랜이거나 이름 붙인 버전 상한에 도달하면 버전 없이 지워집니다. 30초 안의 연속 변경은 같은 버전을 쓸 수 있습니다.

프롬프트

Claude에서 아래 프롬프트를 고르면 필요한 도구 순서와 사용자 데이터 칸을 함께 받습니다.

• design_new_app

  새 앱: create_project → batch_edit → check_design → export_md.

• implement_app

  구현: get_project_outline → export_md → set_source_links.

• import_guide

  기존 앱 불러오기: 지원 필드·안정 키·나눠 불러오기·재불러오기 충돌 안내.

• review_screen_spec

  화면 명세 검토: 도달 가능성·로딩/빈/오류 상태·입력 검증·뒤로 가기·기기별 차이.

• review_accessibility

  접근성 검토: 대비·라벨·포커스·44px 터치 영역·움직임 줄이기.

• design_motion

  모션 설계: list_presets → 트리거·조건·전환·반응 → duration/easing → check_design.

• sync_with_code

  코드 동기화: get_code_mapping → import_diff → 충돌 선택 → import_apply → set_source_links.

• fill_states

  상태 채우기: 빈·로딩·오류 상태와 권한 없음 경로를 채우고 화면을 확인합니다.

• polish_screen

  화면 다듬기: 품질 기준대로 실제 내용·토큰·44px 누를 영역·간격·이름을 고칩니다.

• review_flow

  흐름 점검: 막다른 곳·돌아가는 길·도달 못 하는 화면·끊긴 선을 확인합니다.

• localize_app

  앱 번역: 한국어·영어로 자연스럽게 번역하고 글 길이 넘침·잘림을 확인합니다.

• make_variants

  화면 시안: 원래 화면을 유지하고 같은 목적·내용으로 배치와 위계가 다른 2~3안을 비교합니다.

• add_interactions

  상호작용 추가: 프리셋·변수 조건·선·반응을 구현하고 움직임 줄이기 대안과 흐름을 확인합니다.

리소스

프로젝트 리소스는 도구와 같은 속도 제한·플랜·범위 검사를 거쳐 읽습니다. JSON 리소스에는 프로젝트 rev가 들어갑니다. 내보내기 형식과 디자인 품질 기준 문서는 프로젝트 접근 없이 읽을 수 있습니다.

• 디자인 품질 기준

  screenpath://docs/design-quality

  실제 내용·디자인 토큰·상태 4종·44px 누를 영역·돌아가는 길 등 화면 품질 기준과 끝내기 전 확인 순서입니다.

• 내보내기 형식 문서

  screenpath://docs/export-format

  md 절 순서, JSON 최상위 키, 범위와 쪽 나눔을 설명하는 형식 문서입니다.

• 프로젝트 개요

  screenpath://projects/{projectId}

  get_project_outline의 첫 쪽 JSON입니다. 프로젝트 개요·묶음·화면·나가는 선을 담습니다.

• 화면 명세

  screenpath://projects/{projectId}/screens/{screenId}

  get_screen의 JSON입니다. 화면·부품·선·반응과 rev를 담습니다.

• 디자인 규칙

  screenpath://projects/{projectId}/design

  get_design의 JSON입니다. 디자인 토큰·CSS 변수·네이티브 토큰과 rev를 담습니다.

• 내보내기 쪽

  screenpath://projects/{projectId}/exports/{exportId}/parts/{part}

  저장된 export_md 스냅샷의 한 쪽입니다. part는 1부터 시작합니다.

Claude Code

1. 1

   Claude Code 채팅창이 아니라 터미널(셸)에 아래 명령을 붙여 넣고 실행합니다.

   터미널에 붙여 넣기

   claude mcp add --transport http --scope user screenpath https://screenpath.dev/mcp복사

2. 2

   Claude Code를 새로 엽니다. 이미 열려 있었다면 종료하고 다시 시작합니다(다시 시작하기 어렵다면 /reload-plugins).

3. 3

   Claude Code 안에서 /mcp를 입력하고 screenpath를 고른 뒤 Authenticate를 고릅니다(Enter).

   Claude Code 안에 붙여 넣기

   /mcp복사

4. 4

   브라우저가 열리면 Google로 로그인하고 동의 화면에서 허용을 누릅니다. Claude Code로 돌아와 /mcp에서 screenpath가 연결됨(connected)인지 확인합니다.

5. 5

   첫 요청을 보내 봅니다.

   Claude Code 안에 붙여 넣기

   ScreenPath에서 내 프로젝트 보여 줘복사

Claude 데스크톱·claude.ai

1. 1

   Claude 데스크톱이나 claude.ai에서 사용자 지정(Customize) › 커넥터(Connectors)를 엽니다.

2. 2

   +를 누르고 사용자 지정 커넥터 추가(Add custom connector)를 고릅니다.

3. 3

   이름에 ScreenPath, 원격 MCP 서버 URL에 아래 주소를 붙여 넣고 계속(Continue) › 추가(Add)를 누릅니다.

   커넥터 URL 칸에 붙여 넣기

   https://screenpath.dev/mcp복사

4. 4

   열리는 창에서 Google로 로그인하고 동의 화면에서 연결할 프로젝트를 고른 뒤 허용을 누릅니다.

5. 5

   대화창의 + › 커넥터에서 ScreenPath를 켜고 첫 요청을 보내 봅니다.

무료 Claude 계정은 사용자 지정 커넥터를 1개만 만들 수 있습니다.

팀·엔터프라이즈 계정은 조직 관리자가 조직 설정에서 커넥터를 추가합니다.

기존 앱 불러오기

쇼핑 앱 저장소를 예로 들면, Claude에게 "이 앱을 ScreenPath로 불러와 줘"라고 요청합니다. Claude는 import_guide를 먼저 읽고 홈 → 상품 목록 → 장바구니 → 결제 흐름을 payload로 정리합니다.

1. 1묶음과 화면을 나눠 import_app으로 불러옵니다. 선은 화면 키가 문서에 생긴 뒤 마지막에 보냅니다.
2. 2다시 불러올 때는 import_diff로 코드와 GUI의 차이를 확인하고, 충돌이 있으면 사용자가 고른 값을 Claude에게 알려 줍니다.
3. 3import_apply가 끝나면 코드에서 사라진 화면은 지우지 않고 코드에 없음으로 표시합니다.

연결 끊기와 개인정보

설정 › Claude 연결에서 연결을 끊을 수 있습니다. 연결을 끊으면 Claude는 더 이상 프로젝트에 접근할 수 없습니다.

동의 화면의 프로젝트 범위 기본값은 고른 프로젝트만입니다. 새 프로젝트 만들기 허용은 기본으로 꺼져 있습니다.

연결은 최대 180일 뒤 다시 동의해야 합니다. 그 전에 설정에서 언제든 끊을 수 있습니다.

ScreenPath는 서비스 운영을 위해 회원의 프로젝트 데이터를 AI 제공자에게 보내지 않습니다. Claude가 읽고 쓴 내용은 회원이 허용한 연결을 통해서만 전달됩니다.