Claude Code와 Claude Design을 연동해서 레포를 떠나지 않고도 실제 디자인을 얻을 수 있게 만들었습니다

Claude Design이 Claude Code 단독으로 뽑아내는 것보다 훨씬 나은 UI를 만들어줌. 문제는 이 둘이 별개 제품이라는 거임. 프로젝트도 따로, 채팅도 따로, 파일도 따로 노는데 API까지 없음. 그래서 둘이 만날 일이 없으니, 내가 디자인한 걸 일일이 수동으로 내 레포에 복붙해야 했음.

이걸 해결했다. MCP 서버로 만들었고, 무료에 오픈소스임. 이걸 쓰면 Claude Code가 Claude Design이랑 바로 대화할 수 있음.

you  ->  Claude Code  ->  claude.ai/design  ->  a design
                      <-  its reply, its files  <-

실제로 써보면 그냥 원하는 걸 말하기만 하면 됨. Claude Code가 디자이너한테 브리핑하고, 답변 기다렸다가, 내용 읽고, 렌더링 된 페이지 스크린샷 찍어서 결과물 확인하고, 파일까지 작업 트리에 바로 가져옴.

가능한 기능들:

• 작업 시작: 홈 화면 템플릿, 프로젝트나 디자인 시스템 생성, 디자인 시스템을 프로젝트에 연결, 로컬 폴더나 GitHub 레포를 코드베이스로 연결, Figma .fig 파일 업로드
• 대화: 프로젝트 및 채팅 목록 확인, 활성 스레드 전환, 로컬 첨부 파일과 함께 프롬프트 전송 후 변경 사항 확인, 대화 기록 추적
• 결과 확인: 페이지 스크린샷, 특정 프로젝트와 페이지를 화면에 띄우기, 줄 번호와 함께 프로젝트 파일 grep, 파일이나 특정 줄 범위 읽기
• 작업 이동: 파일 다운로드 및 업로드 (예: 컴포넌트를 디자인 시스템으로 옮기기)
• 삭제: 프로젝트, 파일, 채팅 영구 삭제

이게 단순한 장난감을 넘어선 이유는 실제 코드베이스를 디자인 프로젝트에 붙일 수 있어서임. 엉뚱한 컴포넌트 새로 만드는 게 아니라, 네가 쓰는 진짜 컴포넌트 기반으로 디자인하거든.

개인적으로 좀 뿌듯한 디테일 두 가지가 있음. delete_project는 UUID를 안 받고 프로젝트의 정확한 현재 이름을 요구함. GitHub가 레포 삭제할 때 하는 방식이랑 똑같은데, 에이전트가 멍청하게 잘못된 단계에서 UUID를 그대로 가져와서 사고 칠까 봐 이렇게 함. 그리고 "로컬 코드 연결"은 window.showDirectoryPicker()를 쓰는데, 이건 자동화가 건드릴 수 없는 OS 네이티브 다이얼로그라 아예 갈아엎었음. 폴더를 Node에서 읽어서 페이지로 넘겨주는 방식으로 구현함.

API가 없어서 실제 브라우저를 직접 조종함. 초기 설정 단계에서 이미 쓰고 있는 크롬 프로필에서 claude.ai 쿠키만 딱 가져오고 나머지는 건드리지 않음. 세션 만료되면 로그인하는 명령어 따로 있음. 스킬도 같이 제공하니까 툴 이름 일일이 부를 필요 없이 그냥 원하는 디자인을 말하면 됨.

무료, MIT 라이선스, 링크는 첫 번째 댓글에 있음.