Astryx - Meta가 공개한 오픈소스 디자인 시스템

• React와 StyleX 기반으로 완전한 커스터마이징과 에이전트 대응이 특징
• 접근성과 브랜드 테마 적용이 가능한 160개 이상의 React 컴포넌트를 갖추고, 다크모드, 즉시 배포 가능한 템플릿, CLI를 하나의 통합 시스템으로 제공
• Meta 내부에서 지난 8년간 성장해 가장 많이 쓰이고 규모가 가장 큰 디자인 시스템으로, 13,000개 이상의 앱을 구동하며 엔지니어/디자이너/제품 팀에 의해 다듬어짐
• 색상/간격/radius/타이포그래피 등 모든 디자인 토큰을 CSS 커스텀 속성으로 제공하는 다수의 테마 지원
• 커맨드라인 또는 MCP를 통해 프로젝트 스캐폴딩, 템플릿 탐색, 테마 생성, 에이전트용 문서 확보 가능해 AI 코딩 도구와 결합
  • AI 코딩 도구에 초기 설치 지시문을 붙여넣으면 npx astryx init 실행으로 에이전트 문서 자동 설정
• 개방된 내부 구조(Open internals): 컴포넌트가 닫힌 최상위 API에 갇히지 않고 어느 수준에서든 조합 가능하며, 필요한 빌딩 블록을 직접 export
  • swizzle 기능으로 컴포넌트 전체 소스를 프로젝트로 추출해 직접 소유 가능
• 스타일링 종속(락인) 없음: 내부적으로 StyleX로 스타일을 작성하지만 사용자에게는 드러나지 않으며, className을 통해 Tailwind/CSS modules/plain CSS로 오버라이드 가능
• 강조하지 않고 능력을 제공하는 가이드 우선(Guidance over enforcement) 원칙 - 값을 전달하면 컴포넌트가 그대로 렌더링, 디자인 의견은 문서와 예제에 포함
  • 모든 컴포넌트가 동일한 네이밍/prop/조합 규칙을 따르고 문서화되어, 사람과 AI 모두 낯선 컴포넌트 동작을 예측 가능
• CLI가 컴포넌트/토큰/템플릿/문서 레퍼런스 역할 수행
  • npx astryx component(컴포넌트 목록), npx astryx docs(문서 주제), npx astryx template --list(페이지 템플릿), npx astryx docs tokens(간격/색상/radius 참조)
• 아키텍처: 3계층 구성
  • Foundations: 타이포그래피, 색상, 레이아웃, 접근성 등 시각적 일관성의 빌딩 블록
  • Components: 완전한 TypeScript 지원의 150개 이상 재사용 UI 빌딩 블록
  • Patterns: 테이블 페이지, 상세 페이지 레이아웃, 폼 위저드, 네비게이션, 데이터 입력 플로우 등 검증된 설계 솔루션
• 콘텐츠만 넣으면 되는 프로덕션 레디 템플릿과, 라우팅/테마/컴포넌트가 연결된 완전한 예제 앱 제공
• MIT 라이선스