Repolode
제출하기
BIAsia

BIAsia/c2d2c

Figma 디자인을 코드베이스로, 코드 상태를 다시 Figma로 옮기는 Claude Code 스킬과 스타일 시스템 거버넌스 스킬입니다.

대체할 수 있는 제품:Figma Dev Mode

GitHub에서 보기웹사이트
스타
57
포크
2
열린 이슈
0
마지막 커밋
3개월 전

어떤 프로젝트인가요?

c2d2c는 Figma와 프로덕션 코드베이스를 양방향으로 연결하는 Claude Code 스킬 3종입니다. d2c 스킬은 Figma 디자인 링크를 코드로 구현하며, 기존 컴포넌트 조사, 계획 검토, 1:1 구현, 회귀 테스트 페이지 작성, 스크린샷 승인 절차를 거쳐 자동으로 merge request를 엽니다. 반대 방향으로 작동하는 c2d 스킬은 소스 코드의 컴포넌트, 상태, 디자인 토큰을 Figma 파일로 내보냅니다.

세 번째 스킬인 ds-govern은 코드만 대상으로 합니다. border radius 같은 스타일의 사용 현황을 조사하고 단일 기준을 제안한 다음, 프로젝트 전체를 새 기준으로 마이그레이션하고 스타일이 다시 분산되는 것을 막는 CI 게이트를 추가합니다. 선택 사항인 Token Sync Figma 플러그인을 사용하면 디자이너가 수정 사항을 merge request로 만들어 코드에 반영할 수 있습니다.

npx skills add로 설치할 수 있습니다. 각 스킬은 자연어 요청으로 실행되며, 처음 실행할 때 프로젝트 설정을 저장소 루트의 C2D2C.md 파일에 저장합니다. 디자인 관련 단계에는 Figma MCP 커넥터가 필요합니다.

핵심 기능

  • 01구현 전에 재사용 가능한 컴포넌트를 조사하는 Figma-to-code 구현
  • 02컴포넌트, 상태, 디자인 토큰을 코드에서 Figma로 내보내기
  • 03단일 토큰 소스와 CI 게이트를 통한 스타일 시스템 통합
  • 04Playwright 기반 회귀 스크린샷 도구로, 전체 페이지와 섹션별 확대 화면 지원
  • 05디자이너의 수정 사항을 merge request로 코드에 반영하는 선택형 Figma 플러그인

활용 사례

  • 기존 프런트엔드 코드베이스에 Figma 디자인을 1:1로 구현
  • 코드베이스의 컴포넌트를 Figma로 내보내 디자인 검토에 활용
  • 분산된 간격, radius 또는 색상 값을 하나의 토큰 스케일로 통합

빠른 시작

  1. 1

    패키지 관리자로 스킬을 설치합니다

    npx skills add BIAsia/c2d2c
  2. 2

    Figma MCP 커넥터를 연결합니다(d2c는 읽기 액세스, c2d는 쓰기 액세스)

  3. 3

    에이전트에게 원하는 작업과 Figma 링크를 전달하고 스킬을 실행해 달라고 요청합니다. 첫 실행 시 설정이 C2D2C.md에 자동으로 구성됩니다

사용 전 알아둘 점

  • 필수 조건으로 Figma MCP 커넥터가 필요합니다.
  • README에서는 Claude Fable 5로 실행할 것을 권장하며, 이전 모델은 단계를 빠뜨리는 경향이 있다고 설명합니다.

토픽

#claude-code#figma#design-tokens#design-system#code-generation#agent-skills

자주 묻는 질문

c2d2c은(는) 무엇인가요?
Figma 디자인을 코드베이스로, 코드 상태를 다시 Figma로 옮기는 Claude Code 스킬과 스타일 시스템 거버넌스 스킬입니다. c2d2c는 Figma와 프로덕션 코드베이스를 양방향으로 연결하는 Claude Code 스킬 3종입니다. d2c 스킬은 Figma 디자인 링크를 코드로 구현하며, 기존 컴포넌트 조사, 계획 검토, 1:1 구현, 회귀 테스트 페이지 작성, 스크린샷 승인 절차를 거쳐 자동으로 merge request를 엽니다. 반대 방향으로 작동하는 c2d 스킬은 소스 코드의 컴포넌트, 상태, 디자인 토큰을 Figma 파일로 내보냅니다.
c2d2c은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
c2d2c은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
c2d2c은(는) 아직 유지보수되고 있나요?
6개월 이내 업데이트. c2d2c의 마지막 커밋은 2026년 8월 3일입니다.
c2d2c은(는) 어디에 사용할 수 있나요?
기존 프런트엔드 코드베이스에 Figma 디자인을 1:1로 구현 코드베이스의 컴포넌트를 Figma로 내보내 디자인 검토에 활용 분산된 간격, radius 또는 색상 값을 하나의 토큰 스케일로 통합
c2d2c는 어떻게 설치하나요?
패키지 관리자로 스킬을 설치합니다: npx skills add BIAsia/c2d2c Figma MCP 커넥터를 연결합니다(d2c는 읽기 액세스, c2d는 쓰기 액세스) 에이전트에게 원하는 작업과 Figma 링크를 전달하고 스킬을 실행해 달라고 요청합니다. 첫 실행 시 설정이 C2D2C.md에 자동으로 구성됩니다
c2d2c은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/BIAsia/c2d2c

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트