# Astryx - Meta가 공개한 오픈소스 디자인 시스템 > Clean Markdown view of GeekNews topic #31190. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=31190](https://news.hada.io/topic?id=31190) - GeekNews Markdown: [https://news.hada.io/topic/31190.md](https://news.hada.io/topic/31190.md) - Type: news - Author: [xguru](https://news.hada.io/@xguru) - Published: 2026-07-07T09:28:18+09:00 - Updated: 2026-07-07T09:28:18+09:00 - Original source: [astryx.atmeta.com](https://astryx.atmeta.com/) - Points: 12 - Comments: 0 ## Topic Body - **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 라이선스 ## Comments _No public comments on this page._