sodam-ai/SoDam-Design-Kit
7 stars · Last commit 2026-09-11
Figma 디자인을 shadcn/ui 코드로 변환하고 실제 브라우저 검증(Playwright+axe-core)을 통과해야 완료로 인정하는 Claude Code 디자인 자동화 플러그인 (Phase 1~3 완료, Claude Desktop MCP 확장 지원)
README preview
# SoDam-Design-Kit Figma 디자인을 shadcn/ui 코드로 만들고, **실제 브라우저 검증(Playwright + axe-core + 3개 화면 크기)을 통과해야만 "완료"로 인정되는** Claude Code 디자인 자동화 킷입니다. [한국어(현재 문서)](./README.md) | [English](./README.en.md) > ✅ **현재 상태 (2026-09-11 기준, 실측 확인)**: **Phase 1(MVP)**과 **Phase 2(대시보드 · 화면 변경 자동 감지 · 한글 폰트 자동화)**가 공식 완료되었고, **Phase 3(고도화)도 상세페이지 · AI 생성 이력 기록 · 마케팅 이미지 생성(OG·포스터·배너·명함) · 라이선스 게이트 확장 · Claude Desktop용 MCP 확장(검증 이력 열람)까지 완료**되었습니다(남은 항목은 베타 공개 여부뿐, 사용자 결정 사항). 자동 테스트 **333개 전부 통과**, 알려진 보안 취약점 **0건**(`npm audit` 기준 — 최근 발견된 4건은 즉시 패치 완료), 간접 의존성까지 포함한 **126개 패키지 라이선스 전수 감사 완료**(카피레프트 0건). 사용 가능한 명령은 총 **5개**(`setup` · `pipeline` · `open` · `detail-page` · `marketing-asset`)이며, 전부 실제 프로젝트를 대상으로 왕복 검증(PASS 확인)까지 마쳤습니다. 자세한 이력은 [7장](#7-업데이트-내용-요약)을 참고하세요. > > ⚠️ 이 킷은 아직 **버전 0.4.1(정식 출시 전, 개발 진행 중)**입니다. 명령어 이름·동작 방식·파일 구조가 앞으로 바뀔 수 있습니다 — 바뀔 때마다 이 문서도 함께 갱신됩니다. --- ## 목차 0. [이 문서를 시작하기 전에 (용어 5분 정리)](#0-이-문서를-시작하기-전에-용어-5분-정리) 1. [이 도구는 무엇인가](#1-이-도구는-무엇인가) 2. [사전 준비물 · 필요 프로그램 (다운로드 방법 포함)](#2-사전-준비물--필요-프로그램-다운로드-방법-포함) 3. [다운로드 및 설치 방법](#3-다운로드-및-설치-방법) 4. [빠른 시작 (5분 안에 첫 성공 보기)](#4-빠른-시작-5분-안에-첫-성공-보기) 5. [실행 · 사용 · 작동 방법](#5-실행--사용--작동-방법)