Astryx는 Meta가 공개한 React·StyleX 기반 오픈소스 디자인 시스템이다. 150개 이상 접근성 컴포넌트, 브랜드 테마, 다크 모드, 템플릿, CLI를 하나의 시스템으로 제공한다. 2026년 7월 기준 베타 상태이며 GitHub 스타는 약 6,500개다.
무엇이 다른가
Astryx의 흥미로운 지점은 “AI 에이전트가 쓰기 쉬운 디자인 시스템”을 명시적으로 목표로 한다는 점이다. 컴포넌트 API, 문서, CLI, 명명 규칙을 사람이 읽기 쉽게 만드는 동시에 에이전트가 예측 가능한 방식으로 UI를 생성하도록 설계했다.
| 특징 | 설명 |
|---|---|
| React·StyleX 기반 | 내부 스타일은 StyleX로 작성하지만 사용자는 CSS import와 typed React component 중심으로 사용 |
| 150개 이상 컴포넌트 | 폼, 테이블, 내비게이션, 레이아웃, 데이터 입력 패턴을 제공 |
| 테마 시스템 | CSS custom property 기반으로 브랜드별 커스터마이징 |
| CLI | 컴포넌트 문서 탐색, 템플릿, 스캐폴딩, 테마 작업을 명령줄에서 수행 |
| swizzle | 필요하면 컴포넌트 소스를 프로젝트로 꺼내 직접 소유 |
기본 설치
npm install @astryxdesign/core @astryxdesign/theme-neutral
npm install -D @astryxdesign/cli{
"scripts": {
"astryx": "node node_modules/@astryxdesign/cli/bin/astryx.mjs"
}
}에이전트가 CLI를 호출할 때 전역 경로나 패키지 매니저 차이로 실패하지 않도록 package.json 스크립트에 고정하는 방식이 권장된다.
사용 대상
- 자체 디자인 시스템을 만들 여력이 없지만 대형 앱에 쓸 컴포넌트 체계가 필요한 팀
- Tailwind, CSS modules, plain CSS 등 기존 스타일링 관행을 유지하면서 컴포넌트만 도입하고 싶은 React 프로젝트
- AI 코딩 에이전트가 UI를 자주 생성하는 제품 조직
- a2ui나 ui-skills처럼 에이전트가 디자인 시스템 규칙을 따라 UI를 만들게 하려는 워크플로
한계와 주의점
Astryx는 베타 프로젝트이므로 컴포넌트 API와 패키지 구성이 바뀔 수 있다. 또한 StyleX 기반 구현을 쓰지만 소비자에게 스타일링 락인을 만들지 않는다는 방향성이므로, 기존 앱의 빌드 시스템과 CSS 우선순위를 먼저 작은 화면에서 검증하는 편이 좋다.
라이선스
MIT 라이선스로 공개되어 있다.
관련 문서
- a2ui — 에이전트가 기존 디자인 시스템으로 UI를 생성하게 만드는 표준
- ui-skills — 디자인 엔지니어와 AI 에이전트를 위한 인터페이스 스킬 디렉터리
- designlang — 웹사이트 디자인 시스템을 한 명령으로 추출하는 CLI 도구
참고 자료
- facebook/astryx — GitHub 공식 저장소
- Astryx Design System — 공식 문서