Astryx: 150개 이상의 컴포넌트를 갖춘 메타의 오픈소스 디자인 시스템, 맞춤 설정 가능 및 AI 에이전트 대비 완료

메타가 Astryx를 오픈소스로 공개했습니다. 이 디자인 시스템은 React와 StyleX 기반으로 150개 이상의 컴포넌트를 갖추고 있습니다. 현재 베타 버전이지만, 메타 내부에서 13,000개 이상의 앱을 구동하며 8년간 엔지니어, 디자이너, 제품 팀에 의해 발전해 왔습니다.

주요 특징

• 컴포넌트 수: 150개 이상의 접근 가능하고 테마 적용이 가능한 React 컴포넌트. 기본 여백, 다크 모드, 유연한 스타일링 지원.
• CLI 및 MCP 지원: 명령줄 또는 MCP(Model Context Protocol)를 통해 프로젝트 스캐폴딩, 템플릿 탐색, 테마 생성, 에이전트 지원 문서 확인 가능.
• 커스터마이징 가능한 테마: 바로 사용 가능한 테마로 시작하여 처음부터 다시 만들지 않고도 맞춤 설정 가능.
• 프로덕션 준비 템플릿: 일반 페이지용 템플릿 제공 — 콘텐츠만 추가하면 됩니다.
• StyleX 기반: 메타의 자체 CSS-in-JS 솔루션으로, 제로 런타임 스타일링을 제공하며 역시 오픈소스입니다.

사이트에서 확인한 실용적 세부사항

랜딩 페이지는 전체 전자상거래 UI를 보여줍니다: 필터(카테고리, 위치, 태그)가 있는 재고 관리, 주문 추적과 반품을 처리하는 라이브 채팅 에이전트, 배송 방법이 있는 쇼핑 카트, 수익 대시보드. 디자인 시스템에는 Badge, Checkbox, Switch, Buttons, Cards 등 다양한 컴포넌트가 포함되어 있으며, 컴포넌트 탐색기에서 모두 확인할 수 있습니다.

CLI를 사용하여 테마를 생성하고 프로젝트를 스캐폴딩할 수 있습니다. 에이전트 통합을 위해 Astryx는 MCP 서버를 지원하여 AI 코딩 에이전트가 명령줄에서 컴포넌트를 탐색하고, 테마를 생성하며, 문서를 가져올 수 있습니다.

Astryx는 허용적 라이선스(MIT 또는 유사, 저장소 확인) 하에 오픈소스로 제공됩니다. 프로젝트는 astryx.atmeta.com에서 확인할 수 있습니다. 패키지를 설치한 후 CLI를 실행하여 시작할 수 있습니다:

npm install astryx
npx astryx init --template default
npx astryx theme generate --brand-color #3355FF
npx astryx agent setup --mcp

이 명령어들은 사이트 설명에서 유추한 것이며, 실제 구문은 다를 수 있습니다.

대상 사용자

AI 에이전트 통합을 통해 신속한 프로토타이핑과 프로덕션 사용이 가능한, 전투 테스트를 거친 디자인 시스템이 필요한 React 애플리케이션 개발자.