SoDam Design Kit

Figma 디자인을 shadcn/ui 코드로 만들고, 실제 브라우저 검증을 통과해야만 완료로 인정하는 Claude Code 디자인 자동화 플러그인

JavaScriptClaude CodeFigmaNext.jsshadcn/uiPlaywrightAccessibilityDesign Automation

README

판정서에는 성공이라고 적혀 있는데 정작 스크린샷 파일이 프로젝트 폴더 밖에 저장되는 결함을 새 세션 재현 테스트 중 발견해, 저장 위치를 항상 프로젝트 폴더 기준으로 다시 계산하도록 고쳤다.

HIGHLIGHTS

  • 01실제 브라우저 검증을 통과 못 하면 완료라고 보고하는 것 자체를 기계적으로 차단
  • 02새 컴포넌트에 색상·간격 값이 숫자로 하드코딩돼 있으면 배치 자체를 거부
  • 03모바일·태블릿·PC 3가지 화면 크기와 접근성 검사를 자동으로 통과해야 함
  • 04실패해도 최대 3회까지 자동 재시도하고, 연속 2회 실패해야 최종 실패로 확정

HOW IT WORKS

  1. 01Figma 공유 링크를 읽어 컴포넌트 매핑 정보로 기록
  2. 02매핑된 컴포넌트는 재사용하고, 없는 컴포넌트는 새로 코드로 생성
  3. 03생성한 코드를 미리보기 화면으로 띄우고 개발 서버를 자동 실행
  4. 04실제 브라우저에서 접근성 검사와 3가지 화면 크기 검사를 자동 실행
  5. 05통과하면 판정서를 남기고, 실패하면 완료 보고 자체가 막힘
  6. 06한 번 읽은 Figma 정보는 저장해두고 재사용해 무료 플랜의 월 6회 제한을 아낌
  7. 07Figma 이미지 주소는 7일 뒤 만료되므로 즉시 내려받아 로컬에 저장