디자인 시스템을 처음부터 손으로 만들던 시대가 빠르게 저물고 있다. 브런치 아티클 「AI 활용하여, 디자인시스템 만들기」가 보여주는 워크플로우는 꽤 직접적인 질문을 던진다. "참고하고 싶은 서비스의 스크린샷이 있다면, 그걸 디자인 시스템으로 바꾸는 데 얼마나 걸리는가?" 답은 놀랍도록 짧다.
왜 지금 이 워크플로우가 중요한가
디자인 시스템의 필요성은 누구나 안다. 문제는 '시작 비용'이다. 디자인 토큰 정의, 컴포넌트 명세, 레이아웃 그리드 문서화—이 과정은 시니어 디자이너가 수 주를 투입해야 겨우 초안이 나오는 작업이었다. 그래서 많은 팀이 디자인 시스템 없이 제품을 계속 키우다가 나중에 훨씬 큰 비용을 치른다. AI는 이 진입 장벽을 극적으로 낮출 수 있는 지점이 바로 여기다.
세 단계로 압축되는 프로세스
핵심 플로우는 단순하다. ① 스크린샷 → ② JSON 디자인 시스템 → ③ 시각화 대시보드. 각 단계를 구체적으로 보면:
1단계: 이미지 → 구조화된 JSON 참고하려는 서비스 화면을 캡처한 뒤, Google Stitch나 Motiff 같은 AI 툴에 붙여넣고 정밀하게 설계된 프롬프트를 입력한다. 이 프롬프트는 AI에게 단순히 UI를 묘사하는 것이 아니라 재사용 가능한 디자인 시스템을 재구성하도록 역할을 명확히 지정한다. 컬러 토큰(primary/secondary/semantic), 타이포그래피 스케일, 8pt 기반 스페이싱, 보더 래디어스, 그리고 버튼·카드·내비게이션·인풋 등 컴포넌트 명세가 JSON 하나로 출력된다.
2단계: JSON → 시각화 대시보드 추출된 JSON을 두 번째 프롬프트에 넘기면 Figma 스타일의 디자인 시스템 보드가 생성된다. 컬러 팔레트, 타이포그래피 계층, 스페이싱 스케일, 컴포넌트 상태(default·hover·active·disabled)가 격리된 형태로 시각화된다. 원본 UI 재현이 아닌 시스템 그 자체를 문서화한다는 지시가 핵심이다.
3단계: Claude Code + Figma MCP 연결
Claude Code를 쓰는 경우 흐름이 더 깊어진다. 스크린샷을 입력하면 자동으로 design-system/styles/tokens.css와 components.css가 생성되고, Figma Dev Mode MCP와 연결하면 Claude가 직접 Figma 파일로 디자인 시스템 대시보드를 밀어넣는다. 코드와 디자인 파일이 단일 워크플로우 안에서 동기화되는 구조다.
프롬프트 설계가 품질을 가른다
이 워크플로우에서 진짜 레버는 프롬프트다. 단순히 "디자인 시스템 만들어줘"가 아니라, AI의 역할(senior product designer + design system architect)을 명시하고, 추측이 아닌 보이는 패턴에서만 추론하도록 제약하며, 불확실한 값은 "assumed" 마킹을 강제하는 구조다. 이 설계 덕분에 출력 결과가 실제 Figma 변수·토큰으로 바로 연결 가능한 수준으로 나온다. 프롬프트 엔지니어링이 단순한 언어 조작이 아니라 시스템 설계의 영역임을 다시 한번 보여주는 사례다.
실무에서 어떻게 써야 하는가
이 워크플로우가 가장 빛나는 시나리오는 두 가지다. 첫째, 디자인 시스템이 없는 기존 서비스—운영 중인 화면을 캡처해서 역으로 시스템을 추출하고, 팀 내 공통 언어로 만드는 데 쓸 수 있다. 둘째, 레퍼런스 서비스를 빠르게 분석해야 할 때—공개된 디자인 시스템이 없는 경쟁사나 벤치마크 서비스의 시각적 언어를 빠르게 구조화할 수 있다.
단, 이렇게 추출된 결과물은 '초안'임을 잊으면 안 된다. AI가 스크린샷에서 추론하는 값에는 한계가 있다. 실제 코드베이스의 CSS 변수나 Figma 파일의 스타일 가이드와 다를 수 있다. 워크플로우의 가치는 제로에서 초안까지의 시간을 수 주에서 수 시간으로 압축하는 데 있고, 이후 팀의 실제 요구에 맞게 고도화하는 작업은 여전히 사람의 몫이다.
이 흐름이 열어주는 더 큰 그림
흥미로운 건 이 워크플로우가 디자인-개발 협업 방식 자체를 바꿀 가능성이다. 지금까지 디자인 시스템은 디자이너가 만들고 개발자가 구현하는 순서였다. 하지만 Claude Code + Figma MCP 연결이 성숙해지면, 개발자가 화면 스크린샷에서 CSS 토큰을 뽑고 Figma에 역으로 밀어넣는 코드 우선 디자인 시스템 흐름도 현실적으로 가능해진다. 디자인과 코드의 단방향 핸드오프가 아니라 양방향 동기화로 가는 첫 번째 실질적인 경로가 여기에 있다.
빠른 프로토타이핑 → 검증 → 고도화라는 사이클을 디자인 시스템 구축에도 그대로 적용할 수 있는 시대가 됐다. 완벽한 시스템을 오랫동안 만드는 것보다, AI로 초안을 빠르게 뽑고 실제 제품에 부딪히며 다듬는 쪽이 훨씬 현실적인 전략이다. 도구는 이미 준비됐다.