클로드 코드 × Figma MCP, 30분이면 디자인 시스템이 코드가 된다
바이브 코딩이 화두예요. 눈으로만 보다가 "한번 해봐야지" 미뤘던 사람도 슬슬 움직이기 시작했죠. 저도 세이지님의 글을 읽고 피그마 MCP × 클로드 코드를 직접 붙여봤어요. 결론부터 말씀드리면 쉬워요. 근데 쉬운 만큼, 뭘 얻을 수 있고 뭘 포기해야 하는지는 분명히 알고 시작해야 합니다.
이거 붙이면 뭐가 바뀌나
1. 디자인 시스템 그대로 코드가 나와요. 토큰과 컴포넌트가 잘 구축돼 있다면 색상·타이포·간격까지 시스템 기준으로 코드가 생성돼요. 기존엔 디자이너가 열심히 컴포넌트를 만들어놔도 개발 단계에서 "이 버튼 색이 왜 달라요?" 반복. 연결 후엔 그 간극이 눈에 띄게 줄어요.
2. 피그마 화면을 코드로 뽑아줘요. 프레임 링크를 넣으면 HTML 변환. 완성도 100%는 아니고 체감 70~80% 정도. 그런데 이게 의외로 중요해요. 개발자한테 "이런 느낌이요" 대신 "이걸 기반으로 해주세요"가 가능해지거든요. 모바일·데스크탑 두 링크를 같이 넣으면 반응형까지 한 번에.
3. 아이디어를 브라우저에서 검증해요. 기획 단계에서 "이 흐름이 맞나?" 싶을 때 피그마에서 작업 → 클로드로 HTML로 뽑으면 실제 브라우저에서 확인 가능. 피그마 프로토타입보다 실제 화면에 훨씬 가까워서, 스펙 구멍을 개발 전에 발견할 수 있어요. 이게 생각보다 큰 차이예요.
4. 반복 설명을 안 해도 돼요. CLAUDE.md에 프로젝트 컨텍스트를 한 번 정리해두면 새 세션을 열어도 클로드가 디자인 시스템 구조, 토큰 위치, 스택을 알아서 참고해요. 매번 "우리 버튼은 이렇고 색상 토큰은 저거고..." 반복할 필요가 없어요.
한 줄로 정리하면. "새로운 서비스 뚝딱"보다 기존 서비스에 새 화면을 빠르게 붙이는 게 인하우스 디자이너에겐 훨씬 현실적인 이점이에요. 이거 하나만 이해하고 시작해도 충분해요.
준비물은 유료 구독 두 개
- 클로드 데스크탑 설치 + Pro 구독 (유료)
- 피그마 데스크탑 + DEV 플랜 (유료)
- 정리된 디자인 시스템과 화면
최근에 클로드 데스크탑 서비스에 코드 기능이 추가되면서 초기 세팅이 확 쉬워졌어요. 예전엔 터미널 만지기 부담스러운 분들한테 장벽이 높았는데, 지금은 설치→로그인→클릭 몇 번이면 됩니다.
클로드 ↔ 피그마 붙이기 (5분이면 끝)
1. 설치한 클로드를 열고 로그인. 2. 좌측 코드 패널 클릭 (클로드 터미널). 3. 작업 폴더 생성. 경로는 자유, 명칭은 짧은 영문 권장.
그다음 피그마 쪽 설정 하나.
피그마 데스크톱에서 dev mode > MCP(클로드)를 허용합니다. 이거 안 하면 뒤에 명령어 입력해도 안 붙어요.
클로드 터미널에 두 줄 입력.
``` claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp ```
첫 번째는 내 컴퓨터의 피그마 데스크탑에 직접 연결. 두 번째는 Figma 공식 서버 연결 (옵션). 둘 다 걸어두는 게 안전해요.
(TIP — 연결 에러 뜨면 몇 번 다시 입력해보거나, 클로드 웹을 별도로 띄워서 과정을 복사해 채팅으로 물어보세요. 해결 방법을 친절하게 알려줍니다. 이게 바이브 코딩의 진짜 이점이기도 해요.)
클로드 데스크톱을 Cmd+Q로 완전 종료했다가 재실행. 그리고 확인 명령어.
``` claude mcp list ```
이렇게 뜨면 연결 완료. 여기까지 5분 안에 끝나요.
이제 진짜 써봅시다
프로젝트 폴더에 CLAUDE.md 파일을 만듭니다.
``` touch CLAUDE.md ```
이 파일 안 내용에 따라 클로드가 일을 해요. 그래서 뭘 어떻게 써두느냐가 제일 중요. 섬세하고 의도대로 결과가 나오게 하려면 이 파일에 투자해야 합니다. (입력 가이드는 검색하면 좋은 자료가 많아서 여기선 생략할게요.)
편집은 VS Code나 Cursor로 여는 게 일반적인데, 설치 번거로우면 파일 > 우클릭 > 다음으로 열기 > 기타 > 텍스트 편집기로도 충분해요.
디자인 시스템을 태우는 구체적인 흐름은 이래요.
1. 피그마 파일에서 플러그인 design tokens로 JSON 파일을 뽑아 클로드 폴더에 배치. 2. 클로드에게 이 디자인 시스템을 참조하도록 지시.
지시는 두 방식이 있어요. 터미널에 직접 명령어를 입력하거나, CLAUDE.md에 가이드를 박아두거나. 예시 가이드는 이런 형태.
```
Design System
기본 규칙
- 항상 dss-tokens.tokens.json 토큰 기준으로 작업
- Figma 컴포넌트 참조
- HTML 기본 스택
- 반응형 필수
리소스
- 디자인 토큰: ./dss-tokens.tokens.json
```
여기서 실용 팁 하나. 명령어를 입력하면 토큰이 소비되고, 파일에 직접 입력하면 토큰을 덜 써요. 반복되는 지시는 CLAUDE.md에 옮겨두는 게 장기적으로 이득이에요.
``` "디자인 시스템으로 가이드 웹페이지 만들어줘" ```
명령 한 줄.
결과물
좌측 네비게이션까지 갖춘 페이지가 폴더에 생성됩니다. 컴포넌트도 단순히 모양만 나오는 게 아니라 호버·프레스·입력 같은 상태까지 작동해요. 바로 사용 가능한 상태. 코드가 길수록 처리 시간이 길어지니 한 번에 너무 많은 양을 요청하지 않는 게 토큰 절약 팁이에요.
위 프로세스까지 완료하면, "로그인 페이지를 만들어줘", "커머스 메인 페이지를 만들어줘" 같은 한 줄 요청만으로도 디자인 시스템 기반의 페이지가 자동 생성됩니다.
조건을 추가하면 다음 스텝의 플로우까지 함께 만들어줘요. 피그마 아트보드 링크를 복사해 클로드에 입력한 뒤 "디자인 시스템을 참고해서 웹페이지 만들어줘"라고 요청하면, 해당 디자인을 반영한 페이지가 빠르게 구현돼요. Figma 내 디자인 컴포넌트 링크를 첨부하면 이를 기반으로 사이트 제작도 가능.
해보면 알게 되는 것
몇 번 반복하다 보면 어떤 프롬프트가 의도한 디자인을 뽑는지 감이 잡혀요. 그리고 CLAUDE.md 설정과 요청 내용이 얼마나 중요한지 체감하게 됩니다. 잘못 설계하면 토큰이 빠르게 소진되는 경험도 함께 따라오고요.
처음엔 좀 어렵게 느껴질 수 있어요. 근데 바이브 코딩이 확산되면서 사용성은 계속 개선되는 중이에요. 진입 장벽은 빠르게 낮아질 거예요.
결국 핵심은 실행 자체가 아니에요. 내가 의도한 디자인을 정확히 반영하기 위해 디자인 시스템을 어떻게 설계하고, 어떤 명령어를 쓸지. 이게 바이브 코딩 시대에 디자이너가 붙잡아야 할 진짜 역량이에요. 도구가 쉬워질수록 '뭘 만들 것인가'의 질이 결과를 가르니까요.