cdbridge — 클로드디자인 브리지 완성
개요
Claude Design(클로드디자인) React standalone
.html 아티팩트에서 computed 스타일·토큰·인벤토리를 추출하고, 크라우니 서비스에 배치하기 위한 가이드를 생성하는 CLI 도구.
완성 파일
| 파일 | 역할 |
|---|
/Users/ef/crowny-cdbridge/cdbridge.sh | CLI 진입점 (extract/place) |
/Users/ef/crowny-cdbridge/cdp-extract.js | CDP WebSocket 클라이언트 (ws 없이 Node net으로 구현) |
/Users/ef/crowny-cdbridge/cdplace.sh | 배치 가이드 + 토큰 리맵 생성기 |
/Users/ef/crowny-cdbridge/브리지.한선 | 한선씨 동반본 (추출 규칙·토큰 역추출·분류 로직) |
/Users/ef/crowny-cdbridge/README.md | 워크플로우 문서 |
핵심 구현 포인트
- CDP WebSocket 핸드셰이크: Node 내장
net + http 만으로 구현
- RFC 6455: client→server 프레임은 반드시 마스킹 필요 (
0x80 | len)
- 함정: background_page 탭에 연결하면 소켓이 즉시 닫힘 →
type=="page" 필터 필수
- computed 스타일 추출:
Runtime.evaluate + 브라우저 내 getComputedStyle 직렬화
- 40+ CSS 변수, 36 요소, 섹션 트리, 색상 팔레트, 폰트 패밀리 추출
- 한선씨 함정 해결:
-
글자(s, i) = 2인수 (3인수 아님)
-
포함() = index 반환 (-1 아님 = 없음),
>= 0 으로 비교
- 전역 변수는 이를 참조하는 함수보다
반드시 먼저 선언
-
맵생성()은 런타임 버그 있음 → 배열 기반 카운터로 대체
검증 결과
- 디자인 시스템 HTML: 40 CSS변수, 36 computed요소, 16색상 추출 성공
- 런칭 티저 HTML: 15색상, 4폰트 추출 (React 애니메이션 앱 = DOM 요소 적음)
- 브리지.한선 컴파일 + 실행: 전 항목 PASS
잔여 이슈
- 애니메이션 앱(티저)처럼
position:fixed 전체화면 React 앱은 DOM 요소가 적음 → 추출물도 적음. 해결: JavaScript로 useState 등 런타임 상태 탐색 추가 가능
cdplace.sh 섹션 순서: 의미적 태그(section, header 등)가 없는 div-only 앱에서는 섹션 목록 비어있음 → div 클래스명 패턴 매칭 추가됨