워킹 레퍼런스 원작

피그마 디자인, 98% 그대로 코드가 됩니다

“시안은 이미 완벽한데, 왜 구현하면 다른 화면이 되지?” — 이 답답함 때문에 직접 만든 스킬이에요. 같은 시안을 보통 방식과 pix, 두 가지로 구현시킨 결과를 그대로 보여드릴게요.

설치는 딸깍 두 번

터미널도, 명령어 공부도 필요 없어요. 파일 하나 받아서 AI에게 건네면, 나머지 세팅은 AI가 안내해요.

1
pix 스킬 파일을 받으세요
pix.md 다운로드
2
받은 파일과 함께, 이 말을 그대로 AI에 붙여넣으세요
이 파일을 스킬로 설치해줘. 그리고 이 스킬을 쓰는 데 필요한 세팅이 있으면 하나씩 안내해줘.
3
그다음부터는 진짜 딸깍
피그마에서 구현할 화면을 우클릭 → “Copy link to selection”. 그리고 이렇게만 말하면 돼요:
/pix [복사한 피그마 링크]

Claude Code 기준으로 만들었어요. 피그마 토큰이나 MCP 연결 같은 세팅은 처음 한 번뿐이고, 그것도 AI가 안내해줘요.

이럴 때

피그마 시안이 이미 확정됐고, 비슷한 화면이 아니라 똑같은 화면이 필요할 때. 랜딩, 캠페인, 시안이 끝난 페이지요.

들어 있는 것

아이콘·이미지를 따로 뽑는 에셋 추출, 섹션마다 원본과 대조하는 Pixelmatch 자동 검증 루프, Figma API가 막히면 Chrome으로 우회하는 플랜 B. 합격선은 일치율 98%예요.

안 되는 것

마지막 2%는 사람 몫이에요. 로고와 아이콘 마무리는 눈으로 한 번 봐야 해요. HTML/CSS 기반 프로젝트에서 동작합니다.

이 스킬은 저희가 직접 만들었어요. 남의 후기 대신, 만들며 부딪힌 기록을 남깁니다.

01
MCP 코드를 그대로 복사하면 일치율 99.38%가 나오는데도 아이콘이 전멸했어요. 숫자보다 눈이 정확했죠. 그래서 pix는 에셋을 코드와 별도로 추출해요.
02
화면 전체를 한 번에 비교하면 70%에서 멈춰요. 섹션별로 나눠서 Pixelmatch를 돌리니 그제야 98%를 넘기 시작했어요.
03
Figma API가 막히면 수십 분씩 기다렸어요. 지금은 Chrome으로 바로 우회해서 대기 시간이 0이에요.

구독자 전용