Stitch 로 만든 디자인 시스템을 MCP 로 붙이면, 클로드가 색·간격·타입 스케일을 읽어서 짓습니다. 짐작하지 않습니다.
Stitch 는 Google 제품입니다 — 우리가 만든 것이 아니고 제휴 관계도 없습니다. 우리가 만든 것은 안내 스킬뿐입니다.
클로드는 아무 말 없이 전처럼 짐작해서 짓습니다.
「붙였는데 안 바뀐다」는 말의 대부분이 이 자리이고, 조용해서 사람이 못 잡습니다.
그래서 기계가 잽니다 — --check 가 이 컴퓨터에서 다섯 칸을 실제로 재 줍니다.
이 설치기가 도는 최소 판이다. 낮으면 깔리는 듯하다 실행에서 죽는다.
어떻게 재나 process.versions.node 를 읽어 잰다
Stitch MCP 는 클로드 코드에 붙이는 것이다. 클로드 코드가 없으면 붙일 데가 없다.
어떻게 재나 claude --version 을 불러 본다. 못 부르면 「없다」가 아니라 「못 쟀다」다
가장 많이 막히는 자리다. 등록이 안 돼 있으면 클로드는 디자인을 못 본다 — 그런데 아무 에러도 안 난다. 그냥 전처럼 짐작해서 짓는다.
어떻게 재나 claude mcp list 에 stitch 가 있는지 본다
MCP 등록 명령에 본인 키가 들어간다. ★AI Studio 가 아니라 Stitch 자체 설정에서 받는다 — 여기서 헤매는 사람이 많다.
어떻게 재나 재지 않는다. 받는 자리를 정확히 말해 준다. ★우리가 키를 대신 받지 않는다
MCP 를 붙여도 Stitch 쪽에 프로젝트가 없으면 가져올 게 없다. 「붙였는데 안 바뀐다」의 절반이 이 자리다.
어떻게 재나 현재 폴더에 내보낸 토큰/설정 흔적이 있는지 본다. 없으면 「아직 없다」고만 한다
못 잰 칸은 「없다」가 아니라 「못 쟀다」고 말합니다. 그 둘은 다른 이야기입니다.
https://stitch.withgoogle.com 에 들어가 만들고 싶은 앱을 영어로 적습니다(공식 FAQ 「available in English to users 18+」). 참고 이미지를 같이 넣을 수 있습니다. 나오는 것은 그림 몇 장이 아니라 UI 시스템 한 벌입니다.
Stitch 화면 우상단 프로필 → Stitch settings → API key → Create key
만든 키는 그 자리에서 복사해 두세요. 다시 보여 주지 않습니다. 이 키는 당신 것입니다 — 우리가 받지도, 보지도, 대신 넣지도 않습니다.
claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: <본인 키>" -s user확인은 claude mcp list — 목록에 stitch 가 보여야 합니다.
Stitch 쪽에서 따로 내보낼 것은 없습니다 — MCP 로 붙이면 클로드가 내 Stitch 프로젝트를 직접 읽고 고칩니다. 공식 FAQ 는 이것을 「한 방향 내보내기가 아니라 두 방향 연결」이라고 적습니다. Figma 내보내기 · HTML 코드 내보내기도 따로 됩니다.
「화면 연결하고, 애니메이션 넣고, 반응형으로 정리해 줘.」
이제 클로드는 짐작하지 않고 프로젝트에서 색·타이포·토큰을 읽어 옵니다.
색을 그때그때 고른다
간격이 화면마다 다르다
버튼이 세 종류가 된다
토큰에서 색을 읽는다
간격 스케일이 하나다
버튼이 한 벌로 나온다
안내 스킬을 ~/.claude/skills/stitch-guide 에 깝니다.
깔기 전에 --check 로 먼저 재 볼 수 있습니다.
터미널을 따로 열지 않아도 됩니다. 클로드 코드 안에서 둘 중 하나면 됩니다.
! 붙이기 — 제일 확실합니다
!npx --yes reborn-stitch! 까지 함께 붙여넣으세요. 클로드를 거치지 않고 곧장 설치가 돕니다.--yes 도 빼지 마세요 — 이게 없으면 «받아도 되나요?» 하고 묻는 자리에서
아무 말 없이 멈춥니다.reborn-stitch 설치해줘npx --yes reborn-stitchcmd 라고 친 뒤 엔터.
맥 — command+스페이스 누르고 터미널 엔터.~/.claude/skills)에 깔립니다.
여기서는 ! 를 빼세요.먼저 컴퓨터에 Node.js 가 있어야 합니다. 없으면 위 명령이 아예 안 뜁니다 —
nodejs.org 에서 큰 초록 버튼을 누르고
계속 «다음»만 누르시면 됩니다(3분). 클로드 코드를 쓰고 계시면 이미 있습니다.
클로드가 “실행하지 않겠습니다”라고 하면 1번을 쓰세요.
이제 막 나온 설치기라 클로드가 낯선 것으로 보고 막는 것이고, 그 판단 자체는 옳습니다.
! 를 붙이면 클로드에게 부탁하지 않고 바로 돌아갑니다.
폰이나 브라우저의 클로드 화면에서는 안 됩니다 — 그 창은 인터넷 저쪽의 임시 서버라
깔아도 내 컴퓨터에 남지 않습니다. 내 컴퓨터의 클로드 코드나 터미널에서 해 주세요.
깐 뒤 클로드 코드를 다시 열면 「스티치 붙여줘」로 부를 수 있습니다.
재 본 적 없는 숫자를 옮기는 것이 가장 흔한 거짓말입니다. 아래는 조건과 한계 — 공식 원문으로 확인한 것만 적고, 숫자가 없는 것은 비워 둡니다.