Claude Desktop에 Figma 공식 커넥터와 Webflow 공식 커넥터 두 개의 MCP만 연결하고, 느슨한 프롬프트 하나로 피그마 커뮤니티 포트폴리오 템플릿을 빈 웹플로 사이트로 이식했다. 별도 맞춤 스크립트 없이 약 10분 만에 색상·크기·타이포그래피 디자인 토큰, 하드코딩 대신 토큰을 참조하는 약 30개 클래스, 여러 컴포넌트, 모든 이미지·아이콘 에셋이 자동 생성됐다. 레이어-요소 매핑이나 토큰 지정 없이 '알아서 세팅해달라'는 지시만으로 결과물이 원본에 근접했다.
그동안 피그마 디자인을 웹플로로 옮기려면 색상과 텍스트 스타일을 하나하나 다시 만들고 컴포넌트를 조립하고 모든 에셋을 재업로드하는 반복 노동이 필요했다. 저자는 이 과정을 위해 전용 도구나 커스텀 스크립트가 필요할 것으로 예상했지만, 강한 모델에 잘 설계된 MCP 도구를 붙이면 별도 제작 없이도 가능했다고 밝혔다.
실제 실행에서는 Claude Desktop에 Figma 공식 플러그인과 Webflow 공식 커넥터 두 MCP만 연결했다. 레이어를 요소에 매핑하거나 어떤 색을 토큰으로 만들지, 어떤 컴포넌트를 원하는지 지정하지 않고 '알아서 세팅해달라, 기존 텍스트는 그대로 두고, 발행은 하지 말라'는 느슨한 프롬프트만 넣었다. 10분 남짓 뒤 빈 사이트에는 색상·크기·타이포그래피를 아우르는 디자인 토큰, 하드코딩 값 대신 그 토큰을 참조하는 약 30개 클래스, 여러 웹플로 컴포넌트, 피그마 파일의 모든 이미지·아이콘이 정식 에셋으로 세팅됐고, 원본과 나란히 놓아도 상당히 근접했다.
핵심은 범용 모델과 표준 MCP 커넥터 조합만으로 이 결과가 나왔다는 점이다. 손으로 만든 부분이 없었고, 정돈된 토큰·컴포넌트 구조를 갖춘 파일일수록 자동 이식의 품질이 올라간다는 함의가 남는다.