TL;DR

Prism System은 브랜드 입력만으로 웹·모바일·네이티브에 걸쳐 일관된 테마 토큰과 테마드 컴포넌트를 생성하는 화이트라벨 디자인 시스템 monorepo입니다. 컨트롤러에 색상·폰트·이미지·Figma를 넣으면 토큰을 재계산하고 Style Dictionary로 CSS/SCSS/Swift 출력을 재생성하며, 에이전트와 스킬 체인이 요청을 받아 온브랜드 화면을 sandbox에 비파괴적으로 생성합니다. 색상 파생은 OKLCH 기반 램프와 WCAG 대비 검사를 포함하고 브라우저 픽셀 비교까지 제공하므로 시각적 일관성과 접근성 검증이 중요한 프로젝트에 유용합니다. 로컬 실행은 Node 22 이상과 npm만 필요하고 Storybook과 검사 스크립트를 통해 결과를 빠르게 검증할 수 있습니다.

핵심 포인트

• Prism System은 단일 토큰 소스, 테마드 컴포넌트 라이브러리, 웹·iOS 빌드 파이프라인, 그리고 브랜드를 입력하면 자동으로 테마를 생성하는 컨트롤러와 에이전트 레이어를 포함하는 monorepo 구조를 취하고 있습니다. 컨트롤러는 색상, 폰트, 로고, 참고 이미지 또는 Figma 파일을 받아 packages/tokens의 토큰 소스와 resolved-hexes.json을 갱신하고 Style Dictionary를 통해 CSS/SCSS/Swift 출력물을 재생성합니다. 이 설계는 브랜드별로 코드 변경 없이 토큰만 교체해 완전한 재브랜딩을 수행하도록 설계되어 있어 여러 프로젝트에 같은 리포지토리를 포크해 재사용하기에 적합합니다.
• 토큰 파생과 색상 처리는 OKLCH 기반의 지각적 램프 생성, WCAG 대비 검사, 그리고 브라우저 기반 픽셀 검증까지 포함하는 파이프라인으로 구성되어 있습니다. tools/controller/lib/derive.mjs는 선택한 34개 토큰을 96개로 확장하며 각 파생값은 목표 대비도(contrast·ratio)를 만족하도록 계산되고 변경점은 Variables 패널에 기록됩니다. 브라우저 체크(playwright)를 통해 resolved hex와 live color-mix() 출력이 실제로 일치하는지 픽셀 레벨 검증을 수행하므로 색상 수학의 불일치를 찾아내고 수정할 수 있습니다.
• 컴포넌트 라이브러리는 shadcn/ui 기반의 @ds/ui와 React 컴포넌트, Phosphor 아이콘을 테마 토큰에 바인딩한 형태로 제공됩니다. 개발자는 저장소에서 패키지를 빌드한 뒤 Storybook을 실행하면 토큰 기초, 컬러 팔레트, 타입 스케일과 함께 컴포넌트 시트를 확인할 수 있으며, 생성된 화면은 sandbox/<run>/에 기록되어 덮어쓰지 않고 실험이 가능합니다. 에이전트·스킬 구조(107개의 스킬, 9개 에이전트, 라우터 5개)는 키워드 분류를 통해 필요한 스킬 시퀀스만 실행해 맥락을 작게 유지하면서 자동 생성 작업을 진행하도록 설계되어 있습니다.
• 실행 전 요구사항과 점검 스크립트가 명확히 정리되어 있어 로컬 검증이 수월합니다. Node 22 이상과 npm이 필요하고, Playwright가 브라우저 기반 체크를 수행하므로 npx playwright install chromium를 별도 실행하면 여섯 개의 브라우저 검사 스크립트가 활성화됩니다. 체크 스크립트는 tokens 재계산, 갤러리 바인딩, 브라우저 픽셀 비교, 컨트롤러 동작 무효성 확인, 변수 설명 일치, 대비 감사 등을 포함해 테마 생성·적용 전후의 일관성을 확보할 수 있도록 설계되어 있습니다.

벤치마크

이미지 분석