Astryx

160개 이상의 접근성 컴포넌트, 유연한 테마 설정, 템플릿, Agent 대응 도구를 갖춘 오픈소스 React 디자인 시스템.

커뮤니티:

AI 개발자 도구 UI 및 UX 디자인 AI 앱 빌더

웹사이트 방문

Atoms - AI로 코드 없이 웹사이트·앱 제작

StoreClaw

Sponsor

온라인 판매자를 위한 자율 커머스 엔진으로, 모든 주요 전자상거래 플랫폼에서 스토어를 24시간 모니터링하고, 실행하며, 성장시킵니다. 수동 개입이 필요하지 않습니다.

개요
대안
분석

Atoms - AI로 코드 없이 웹사이트·앱 제작

제품 개요

Astryx이란 무엇인가요?

Astryx는 프로덕션에 바로 사용 가능한 React 인터페이스를 구축하기 위한 Meta의 오픈소스 디자인 시스템입니다. React 19+와 StyleX 위에 구축되었으며, 접근성을 갖춘 컴포넌트, 토큰 기반 테마 설정, 다크 모드 지원, 재사용 가능한 페이지 템플릿을 하나의 툴킷으로 결합합니다. 팀은 빠른 설정을 위해 사전 컴파일된 CSS를 도입하거나, 더 세밀한 스타일 제어를 위해 소스에서 직접 빌드할 수 있습니다. CLI와 MCP 서버는 코딩 Agent가 컴포넌트 문서, 예시, 템플릿, 디자인 시스템 컨벤션에 구조적으로 접근할 수 있게 해줍니다.

주요 기능

접근성을 갖춘 React 컴포넌트
일관된 API, 내장된 spacing, 다크 모드 지원, 재사용 가능한 인터랙션 패턴을 갖춘 160개 이상의 테마 적용 가능한 React 컴포넌트를 제공합니다.
브랜드 수준의 테마 설정
팀이 컴포넌트 구현을 다시 작성하지 않고도 토큰을 통해 색상, 타이포그래피, spacing, 모션, 컴포넌트 오버라이드를 정의할 수 있습니다.
유연한 커스터마이징 경로
컴포넌트를 그대로 사용하는 것부터 커스텀 CSS 적용, variant 확장, 컴포넌트 소스 코드 전체 eject까지 점진적인 커스터마이징을 지원합니다.
프로덕션에 바로 사용 가능한 템플릿
빈 화면이 아닌 구조화된 레이아웃으로 팀이 흔히 쓰는 제품 인터페이스를 바로 시작할 수 있도록 돕는 즉시 사용 가능한 페이지 패턴을 제공합니다.
Agent 대응 문서
간결한 Agent 컨텍스트 파일을 생성하는 CLI와, 호환 도구가 컴포넌트 문서를 검색하고 사용 예시를 가져올 수 있는 MCP 서버를 제공합니다.
이중 배포 옵션
빠른 도입을 위한 사전 컴파일된 CSS로 설치하거나, 컴포넌트 단위 스타일 최적화를 위해 TypeScript 및 StyleX 소스에서 사용할 수 있습니다.

사용 사례

내부 제품 도구 : 일관된 컨트롤, 폼, 테이블, 내비게이션 패턴으로 대시보드, 관리자 패널, 워크플로 도구, 데이터 중심 인터페이스를 구축합니다.
브랜드화된 웹 애플리케이션 : 공유되는 동작과 접근성을 유지하면서 커스텀 테마와 컴포넌트 오버라이드를 적용해 독자적인 제품 아이덴티티를 만듭니다.
빠른 제품 프로토타이핑 : 컴포넌트와 페이지 템플릿을 사용해 흔한 UI 패턴을 처음부터 다시 만들 필요 없이 제품 아이디어를 실제로 동작하는 React 인터페이스로 전환합니다.
디자인 시스템 표준화 : 여러 제품 팀에 공통된 UI 기반을 제공해 프론트엔드 작업 중복을 줄이고 애플리케이션 간 일관성을 높입니다.
AI 지원 프론트엔드 개발 : 코딩 Agent에게 버전에 맞는 컴포넌트 레퍼런스, 규칙, 예시를 제공해 생성된 UI 코드가 Astryx 컨벤션을 따르도록 합니다.
커스터마이징 가능한 엔터프라이즈 인터페이스 : 기반 시스템을 영구적으로 포크하지 않고도 복잡한 애플리케이션 인터페이스를 조직별 디자인 요구사항에 맞게 조정합니다.