dembrandt/dembrandt

해결하는 문제

Dembrandt는 개발자와 디자이너가 웹사이트의 디자인 시스템(색상, 타이포그래피, 간격, 컴포넌트 포함)을 자동으로 추출하여 표준화된 디자인 토큰으로 변환할 수 있게 해줍니다. 또한 팀이 CI/CD 파이프라인에서 이러한 토큰을 강제하여 사이트의 렌더링된 스타일이 커밋된 기준선에서 벗어날 때 빌드를 실패시킴으로써 "디자인 드리프트"를 방지합니다.

작동 방식

이 도구는 Playwright를 사용하여 대상 웹사이트를 렌더링하고 DOM에서 계산된 스타일을 직접 읽습니다. 색상 사용을 분석하고, 타이포그래피를 그룹화하며, 간격 패턴을 감지하여 디자인 토큰을 생성합니다. 이러한 토큰은 W3C 디자인 토큰(DTCG), Tailwind v4 테마 또는 shadcn/ui 테마와 같은 다양한 형식으로 내보낼 수 있습니다. 또한 AI 에이전트(예: Claude 또는 Cursor)가 추출을 트리거하고 디자인 시스템을 자동으로 분석할 수 있게 해주는 MCP 서버도 포함되어 있습니다.

대상 사용자

• 프론트엔드 개발자: 기존 사이트에서 디자인 시스템을 빠르게 재생성하거나 문서화해야 하는 경우.
• UI/UX 디자이너: 경쟁사 벤치마킹 또는 WCAG 접근성 감사를 수행하는 경우.
• DevOps/플랫폼 엔지니어: CI 드리프트 게이트를 통해 배포 전반에 걸친 시각적 일관성을 보장하려는 경우.
• AI 에이전트 사용자: LLM 기반 코딩 어시스턴트에 UX 인텔리전스와 브랜드 아이덴티티 추출 기능을 부여하려는 경우.

주요 기능

• 포괄적 추출: 색상, 타이포그래피, 간격, 테두리, 그림자, 모션 및 컴포넌트 스타일을 캡처합니다.
• CI 드리프트 게이트: 현재 배포를 기준선과 비교하고 토큰이 변경되면 작업을 실패시키는 GitHub Action입니다.
• MCP 통합: Model Context Protocol에 대한 기본 지원으로 AI 에이전트가 도구로 디자인 추출을 수행할 수 있습니다.
• 다중 내보내기 형식: W3C 디자인 토큰, Tailwind CSS, shadcn/ui 및 브랜드 가이드 PDF를 지원합니다.
• 접근성 감사: 실제 DOM 쌍에 대한 내장 WCAG 2.1 대비 검사.