맨 위 그림은 커피 주문 앱의 홈 화면 시안 하나를 두 가지 방식으로 구현한 결과예요. 왼쪽이 피그마 원본이에요. 가운데는 피그마 MCP를 연결하고 "이 디자인 구현해 줘"라고만 시킨 화면인데, 필터 아이콘과 하단 탭 아이콘이 다른 모양으로 바뀌었고 카테고리 칩 줄이 무너졌어요. 오른쪽은 같은 시안을 PIX로 구현한 화면이에요.
PIX는 워킹 레퍼런스가 4월 Threads에 올린 실험에서 시작했어요. "피그마 디자인을 99% 그대로..... 클로드 딸깍 복제...... 성공"이라는 글은 5월 30일까지 3만 4천 번 조회됐어요. 일본 개발자 Saqoosha가 Claude Code에게 구현 화면과 디자인의 픽셀 차이를 보여 주며 고치게 해, 배경 픽셀 일치율을 99.8%까지 맞췄다는 글을 보고 따라 한 실험이었어요. 워킹 레퍼런스는 이 방식을 스킬 하나로 묶어 6월 15일 PIX로 공개했어요.
PIX는 피그마 링크를 받으면 화면 구조를 읽고, 아이콘과 이미지를 코드와 따로 뽑은 뒤 화면을 코드로 지어요. 그다음 구현한 화면을 찍어 원본과 섹션마다 Pixelmatch로 비교하고, 일치율이 98%를 넘을 때까지 다른 곳을 고쳐요. 피그마 API가 요청 한도에 걸리면 Chrome에서 피그마 화면을 직접 열어 작업을 이어 가요.
