AI가 UI를 생성하는 속도는 이제 놀랍지 않다. 진짜 문제는 그 다음에 벌어진다. Claude가 만들어낸 화면이 Figma에 들어오는 순간, frame > frame > frame의 무명(無名) 구조만 남는다. 구조는 살아있지만 의미는 사라진다. 그리고 대부분의 AI 보조 디자인은 바로 이 지점에서 조용히 무너진다.
이 문제를 풀기 위한 출발점은 생각보다 단순하다. 컴포넌트화보다 이름 붙이기가 먼저다. dev.to의 Figma MCP 워크플로우 아티클이 반복해서 강조하는 원칙이 이것이다. 소스 마크업은 각 요소가 무엇인지 알고 있다. 그 정보를 읽어서 명세 레코드를 만들고, 그것을 기준으로 이름을 먼저 정리한 다음 컴포넌트화해야 한다. 순서를 바꾸면 렌더링 아티팩트 위에 라이브러리를 쌓는 꼴이 된다—wrapper div가 마스터로 승격되고, 레이아웃 컨테이너가 컴포넌트 안에 구워진 채로.
라이브러리는 스크린에서 수확하지 않는다. 마스터는 반드시 별도의 클린 라이브러리 섹션에서 처음부터 만들어야 한다. 스크린에서 뜯어낸 마스터에는 그 화면의 맥락이 따라붙는다—8px의 유령 패딩, 다크 캔버스 위에서만 보이던 배경색. 6개월 뒤 누군가 왜 모든 카드에 이상한 여백이 있는지 묻기 전까지 아무도 눈치채지 못한다.
그리고 여기서 MCP가 진짜 역할을 한다. 복잡한 중첩 variant, 상태가 서로 영향을 주는 구조처럼 스크립트만으로는 판단이 어려운 경우—이때 Claude를 Figma에 에이전트로 직접 연결해 컴포넌트의 실제 상태를 구성하고 스크린에 스왑하는 흐름이 성립한다. 단, 에이전트는 결과를 보지 못한다. '명령이 실행됐다'고 보고할 뿐, '화면이 맞다'는 보장은 하지 않는다. 사람이 보고, 다시 지시하는 루프는 그대로 유지된다.
한편 같은 시리즈의 다른 글은 더 근본적인 문제를 건드린다. AI 에이전트가 디자인 시스템을 '준수'하는 방식의 구조적 한계다. 에이전트는 시스템이 커버하는 영역에서는 성실하게 토큰을 사용한다. 하지만 시스템에 없는 케이스를 만나면 멈추지 않는다. 그럴듯한 이름을 가진 값을 즉석에서 만들어낸다. 그 값은 실제 토큰 옆에 나란히 놓여, 누군가 의도적으로 선택한 것처럼 읽힌다.
이 글이 소개하는 사례에서 한 빌드를 검토했더니 raw 컬러 값에 직접 바인딩된 지점이 127개였다. 전부 시각적 리뷰를 통과했다. 다크 모드로 전환하는 순간 전부 표면으로 드러났다. 결론은 명확하다. 다크 모드 전환은 기능 추가가 아니라 시스템 감사 도구다. AI 보조 변경이 있을 때마다 다른 무엇보다 먼저 테마를 뒤집어야 한다. 10초짜리 체크가 수십 개 화면의 꼼꼼한 시각 리뷰보다 더 많은 것을 잡아낸다.
이 문제의 구조적 해법은 '읽을 수 있는 시스템'과 '닫힌 시스템'의 차이에 있다. 에이전트에게 라이브러리를 readable하게 공개하면 대부분 맞는 결과를 낸다. 하지만 closed set—이 값들만 존재하고, 그 외의 값은 조용히 통과하는 대신 크게 실패하는 구조—이 되어야 비로소 감사가 가능해진다. 에이전트의 자기검토("네, 디자인 시스템을 사용했습니다")는 검증이 아니다. 허용된 값 목록과 실제 출력을 기계적으로 비교해 차이를 뽑아내는 것만이 검증이다.
이 워크플로우를 가능하게 하는 MCP의 저평가된 기능들도 살펴볼 필요가 있다. readOnlyHint, destructiveHint 같은 Tool Annotations는 에이전트가 도구를 어떻게 실행할지 판단하는 맥락을 제공한다. Structured Tool Results와 Output Schema는 컴포넌트 상태나 토큰 바인딩 결과를 구조화된 데이터로 받아 검증 파이프라인에 바로 연결할 수 있게 한다. Figma 작업처럼 오래 걸리는 배치 작업에는 Progress Reporting과 Tasks 확장이 응답 대기 대신 비동기 실행과 상태 추적을 가능하게 한다. 이것들은 도구가 '무엇을 하는지'가 아니라 '어떻게 동작하는지'를 클라이언트가 이해하도록 만드는 기능이다.
정리하면 워크플로우는 세 단계로 수렴한다. 첫째, 이름과 구조 먼저—소스 마크업 기반으로 명세를 세우고, 이름 정리 후 컴포넌트화한다. 둘째, 시스템을 닫아라—토큰 레이어 규칙을 지키고, 허용 값 집합을 기계적으로 검증할 수 있는 형태로 만든다. 셋째, 에이전트는 반복을 맡고 판단은 사람이 한다—MCP로 Claude를 Figma에 연결하되, 결과 검증은 자동화가 아닌 사람의 눈과 다크 모드 스위치로 확인한다. AI가 70~80%의 기계적 작업을 줄여주는 것은 실제다. 하지만 나머지는 여전히 사람의 몫이고, 그 경계를 명확히 설계하는 것이 이 워크플로우의 핵심이다.