Astryx
사람과 코딩 에이전트가 같은 문서·CLI·테마를 쓰도록 설계된 Meta 오픈소스 디자인 시스템
npm install @astryxdesign/core @astryxdesign/theme-neutral && npm install -D @astryxdesign/cliMeta 내부에서 발전한 React·TypeScript 디자인 시스템을 MIT로 공개한 프로젝트입니다. 150개 이상의 접근성 중심 컴포넌트, CSS 변수 기반 브랜드 테마, 다크 모드, 템플릿과 패턴을 제공하며 소비자는 미리 빌드된 CSS와 타입 컴포넌트를 가져와 사용합니다. 선택적 CLI는 컴포넌트 문서·소스·템플릿 검색, 프로젝트 초기화, 테마 빌드, swizzle, 버전 업그레이드 codemod를 사람이든 에이전트든 같은 JSON·명령 표면에서 실행하도록 구성합니다. 현재 Beta이므로 안정 버전 사이에도 breaking change를 확인해야 합니다.
판단
이럴 때 씁니다
- React 제품에서 접근성 컴포넌트·테마·템플릿을 같은 디자인 시스템으로 운영할 때
- 사람과 코딩 에이전트가 컴포넌트 문서·템플릿·업그레이드 명령을 같은 CLI로 사용해야 할 때
- 패키지 기본값을 쓰다가 필요한 컴포넌트만 swizzle해 직접 소유하고 싶을 때
이럴 땐 쓰지 마세요
- Beta 단계의 breaking change를 수용할 수 없는 장기 지원 제품
- React가 아닌 프런트엔드 스택이나 CSS 변수 기반 테마를 쓸 수 없는 환경
- 아직 stable로 배포되지 않은 lab·charts·vega 기능이 핵심 요구사항인 경우
차별점
- 컴포넌트 API·문서·CLI를 함께 설계해 사람과 코딩 에이전트가 같은 참조와 명령을 사용합니다.
- StyleX는 라이브러리 내부 구현에 머물고 소비자는 CSS 변수·className·Tailwind·CSS Modules로 재정의할 수 있습니다.
- swizzle로 컴포넌트 소스를 프로젝트에 복사하고 테마 빌드·codemod·JSON 출력으로 자동화할 수 있습니다.
워크플로
- 010.2.0 패키지를 고정해 core·theme과 선택적 CLI를 설치합니다.
- 02공식 quick start대로 CSS와 provider를 연결하고 작은 화면에서 기본 컴포넌트를 렌더링합니다.
- 03로컬 astryx 스크립트로 문서·템플릿을 조회하고 필요한 테마·swizzle 범위를 정합니다.
- 04브라우저·RTL·다크 모드·키보드·스크린리더 회귀를 통과한 뒤 버전 업그레이드 codemod를 CI에 포함합니다.
주요 명령
| 명령 | 설명 |
|---|---|
npm run astryx -- component --list | 프로젝트에 설치된 Astryx 컴포넌트 목록을 안정적인 로컬 CLI 경로로 조회합니다. |
npm run astryx -- init | 테마와 에이전트 문서를 포함한 비대화형 프로젝트 초기화를 실행합니다. |
npm run astryx -- swizzle <component> | 선택한 컴포넌트 소스를 프로젝트로 복사해 직접 수정할 수 있게 합니다. |
npm run astryx -- upgrade | 버전별 codemod와 에이전트 문서 갱신을 실행합니다. |
함정
설치 전에 확인하세요
- 프로젝트는 현재 Beta이며 v0.2.0에도 breaking change와 CLI JSON 타입 변경이 포함됐습니다.
- @astryxdesign/lab은 npm에 배포되지 않고 charts·vega 패키지는 stable이 아닌 canary 태그만 제공합니다.
- CLI를 에이전트가 안정적으로 호출하려면 README 권장처럼 package.json 스크립트에 로컬 bin 경로를 고정하는 편이 안전합니다.
- 컴포넌트 접근성 기능이 많아도 실제 브랜드 테마와 조합한 키보드·스크린리더·RTL 검증은 애플리케이션 책임입니다.
비교
shadcn/ui가 컴포넌트 소스를 프로젝트가 소유하는 복사 방식을 기본으로 삼는다면 Astryx는 패키지 컴포넌트를 기본으로 쓰되 필요할 때 swizzle로 소스를 꺼냅니다. MUI 같은 완성형 라이브러리보다 에이전트가 읽기 쉬운 CLI·문서 계약을 전면에 두지만, 아직 Beta라 API 안정성은 더 낮습니다.
최근 변경
v0.5.1에서는 Avatar에 원형이 아닌 형태를 지정하는 shape prop을 추가하고, Card의 variant 축을 CardVariantMap 인터페이스로 테마에서 확장할 수 있게 했습니다. DateInput은 터치 환경에서 플랫폼 기본 날짜 선택기를 쓰도록 nativePicker 옵션을 추가하고, DateTimeInput에는 날짜·시간 구간이 분리된 바텀시트 선택기가 새로 생겼습니다.