스크린샷 한 장으로 디자인 시스템 뽑아내는 4가지 방법

디자인 시스템 없이 버티는 서비스가 아직도 많잖아요. 만들어야 하는 건 아는데, 0에서 시작하려면 막막하고. 근데 이제 스크린샷 한 장이면 초안을 뽑아낼 수 있는 시대가 됐더라고요.

AI 시대에 디자인의 일관성을 유지하기 위한 디자인 시스템은 오히려 더 중요해졌어요. 예전엔 사람이 직접 다 만들었으니까 자연스럽게 일관성이 유지됐는데, AI가 만들기 시작하면 기준이 없으면 난장판이 되거든요. 그래서 지금, 디자인 시스템을 빠르게 세팅하는 능력이 생존 스킬이 되고 있어요.

세 가지 상황, 한 가지 해법

디자인 시스템이 필요한 케이스를 나눠보면 크게 세 가지예요. 첫째, 운영 중인 서비스인데 디자인 시스템이 아직 없는 경우. 둘째, 참조하고 싶은 서비스의 디자인 시스템이 공개되어 있지 않은 경우. 셋째, 이미 잘 만들어진 디자인 시스템을 AI 학습용으로 구조화해야 하는 경우.

공통 해법이 있어요. 만들고 싶은 서비스의 화면을 캡처한 다음, AI한테 디자인 시스템을 JSON으로 뽑아달라고 시키는 거예요. 프롬프트 하나로요. 이 프롬프트가 핵심인데, "너는 시니어 프로덕트 디자이너이자 디자인 시스템 아키텍트다. 업로드된 UI 화면을 분석해서 완전한 디자인 시스템을 추출해라"로 시작해요. 컬러 토큰, 타이포그래피, 스페이싱 스케일, 컴포넌트 시스템, 레이아웃 규칙까지 전부 JSON으로 뱉어내라는 지시사항이 꽤 촘촘하게 들어가 있어요.

그리고 한 단계 더 있어요. 뽑아낸 JSON을 가지고 Visual Design System Board를 만들라는 두 번째 프롬프트. 컬러 팔레트, 타이포 스케일, 스페이싱, 컴포넌트 예시를 Figma 스타일로 시각화해주는 거예요. 이 두 개 프롬프트만 있으면 어떤 도구에서든 같은 워크플로우를 돌릴 수 있어요.

Google Stitch — 넣으면 바로 나와요

Google Stitch(stitch.withgoogle.com)가 첫 번째 테스트 대상이었어요. 확인하고 싶은 사이트의 스크린을 캡처해서 넣고 프롬프트를 입력하면, 바로 디자인 시스템을 뽑아서 보여줘요.

결과물이 꽤 쓸 만하더라고요. 컬러, 타이포, 컴포넌트 구조가 정리되어 나와요.

뿐만 아니라 오른쪽 도구 패널의 Design System 아이콘을 통해 결과를 바로 확인할 수 있고, md 파일로 복사해서 다른 AI한테 학습시키는 것도 가능해요. (이 부분이 핵심이에요. 한 도구에서 뽑은 결과를 다른 도구에 먹이는 파이프라인.)

만들어진 디자인 시스템을 검증하기 위해 "이 디자인 시스템 기반으로 todo 앱 만들어줘"라고 시켜봤어요.

결과물이 나쁘지 않아요. 원래 서비스의 톤앤매너가 todo 앱에 꽤 자연스럽게 녹아들었거든요.

Motiff — JSON에서 비주얼 보드까지

Motiff(motiff.com)도 같은 방식이에요. 스크린 캡처 넣고 첫 번째 프롬프트로 JSON 형태의 디자인 시스템을 추출해요.

여기서 한 단계 더 나가는 게 Motiff의 장점이에요. 추출된 JSON을 가지고 두 번째 프롬프트를 넣으면 Visual Design System Board를 만들어줘요. 컬러 팔레트 스와치, 타이포 스케일, 스페이싱 시각화, 컴포넌트 예시까지 깔끔하게 정리된 보드가 나와요.

결과물을 보면, JSON 코드가 시각적인 디자인 시스템 보드로 변환돼요.

컬러 팔레트 섹션은 Primary, Secondary, Neutral, Semantic으로 나뉘어 hex 값과 함께 스와치로 표시되고요.

컴포넌트 섹션에서는 버튼, 카드, 인풋 등의 variants와 states가 정리되어 있어요.

스타일 방향성 키워드까지 시각화해주는 부분도 있더라고요. (솔직히 여기까지 해줄 줄은 몰랐어요.)

Figma Make — 익숙한 환경에서 같은 결과

Figma Make도 기본 과정은 동일해요. 스크린샷 넣고, 첫 번째 프롬프트로 JSON 추출, 두 번째 프롬프트로 디자인 시스템 대시보드 생성. 워크플로우가 완전히 같아요.

검증 차원에서 여기서도 만들어진 디자인 시스템 기반으로 todo 앱을 요청해봤는데요.

Google Stitch 결과물과 비교해보면 각 도구마다 해석하는 뉘앙스가 미묘하게 달라요. 같은 인풋에 다른 아웃풋. 여러 도구로 돌려보고 가장 맞는 걸 고르는 게 현실적인 접근법이에요.

Claude Code + Figma Dev MCP — 개발 환경에서 바로

Claude Code를 활용하는 경우는 좀 달라요. 코드 에디터 안에서 직접 디자인 시스템을 만들 수 있거든요.

스크린샷을 복사해서 Claude Code에 넣고 디자인 시스템을 요청하면, 자동으로 디자인 시스템 폴더 하위에 `components.css`와 `tokens.css` 파일이 생성돼요. JSON이 아니라 바로 사용 가능한 CSS 코드로 나온다는 점이 다른 도구들과의 차이점이에요.

여기서 Figma Dev MCP와 연결하면 Figma에 디자인 시스템 대시보드까지 만들어줘요. 연결 방법은 클로드 코드 입력창에 `claude mcp add --transport http figma https://mcp.figma.com/mcp`를 입력하고, 새 창 열어서 `/mcp` 명령 후 figma를 선택해 인증하면 돼요. 이후 figma devmode를 실행하고 `generate_figma_design`을 입력하면 클립보드에 복사하거나 피그마로 바로 넘길 수 있어요.

개발자가 코드 에디터 안에서 디자인 시스템을 추출하고, 그걸 피그마에 넣는 것까지 한 번에 되는 거예요. 디자이너한테 "디자인 시스템 좀 만들어주세요"라고 기다릴 필요가 없어졌다는 뜻이죠.

결국 속도 싸움이에요

네 가지 도구를 같은 프롬프트로 테스트해봤는데, 공통점이 있어요. 스크린샷 한 장에서 시작해서 JSON 구조의 디자인 시스템을 뽑고, 그걸 시각화하거나 코드로 만드는 과정이 몇 분이면 끝난다는 거예요.

참조하고 싶은 서비스가 있으면 다양한 도구로 시도해보고, 거기서 나온 초안을 내 서비스에 맞게 고도화하는 게 시간을 가장 효율적으로 쓰는 방법이에요. 0에서 시작하는 게 아니라, AI가 뽑아준 80%에서 나머지 20%를 다듬는 거죠. 그 20%가 진짜 디자이너의 일이고요.