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