Sonic UIv0.6.2

Sonic UI

Figma를 원본으로 하는 React 디자인 시스템이에요. 토큰, Core 컴포넌트, AI가 읽는 디자인 규칙을 npm 패키지 하나로 배포해요.

  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • Vitest

개요

모든 사이드 프로젝트에서 같은 디자인을 쓰려고 만든 개인 디자인 시스템이에요. 디자인 규칙을 Figma와 DESIGN.md에 정해 두면, AI가 그 규칙으로 Figma 화면을 그리고 이 패키지의 컴포넌트로 코드를 짜요. Sonic Harness FE를 쓰는 프로젝트는 /sonic-harness:init에서 Y를 고르면 설치와 연결이 한 번에 끝나요.

text
Figma (원본) → DESIGN.md (규칙) → @xonic0506/sonic-ui (코드) → 실제 프로젝트

주요 특징

  • Figma Variables가 곧 CSS 변수color/bg/primary는 --sn-color-bg-primary가 되고, light·dark 테마를 함께 가져요.
  • 쓰는 쪽과 부딪히지 않는 CSS모든 클래스에 sn: 접두사를 붙이고 @layer sonic 안에 넣어 미리 빌드해요. Tailwind가 없는 프로젝트에서도 써요.
  • Base UI 위의 접근성키보드 조작, 포커스 관리, 화면 낭독기 지원이 기본으로 들어 있어요.
  • 서버 컴포넌트에서 바로 import모든 파일에 "use client"가 붙어 있고, 하위 컴포넌트는 CardHeader처럼 이름 있는 export로 내보내요.
  • AI가 읽는 규칙을 함께 배포DESIGN.md, AI-RULES.md와 임의의 값·hex 색을 막는 ESLint 규칙이 패키지에 들어 있어요.

구조

text
.
├── src/components/   Core 컴포넌트
├── src/patterns/     Pattern 승격 기준
├── scripts/          Figma 토큰 추출, CSS 빌드, 대비 검사
├── lint/             디자인 lint 규칙
├── playground/       Figma와 비교하는 화면
├── fixtures/         쓰는 쪽 예제 (Vite, Next.js)
└── DESIGN.md         디자인 규칙 (패키지에 포함)

기술 스택

  • React

    Core 컴포넌트예요. React 18.2와 19를 지원해요.

  • TypeScript

    아이콘 버튼의 aria-label처럼 지켜야 할 규칙을 props 타입으로 강제해요.

  • Vite

    라이브러리 빌드와 Figma 비교용 playground예요.

  • Tailwind CSS

    v4로 sn: 접두사 클래스를 만들고 CSS를 미리 컴파일해요.

  • Vitest

    컴포넌트 동작 테스트예요.