메타 디자인 시스템 Astryx를 클로드 코드에 알려 주는 설정법

Astryx는 메타가 8년간 사내에서 쓰다 공개한 리액트 디자인 시스템이다. 컴포넌트 150여 개와 테마, 페이지 템플릿에 CLI가 딸려 있어서 코딩 에이전트도 CLI로 컴포넌트 문서를 찾아 쓴다.

1. 리액트 19 이상 프로젝트에 패키지와 테마, CLI를 설치한다.

npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
npm install -D @astryxdesign/cli

1. init을 한 번 돌린다. 컴포넌트 색인이 AGENTS.md나 CLAUDE.md에 적혀서 에이전트가 어떤 컴포넌트·템플릿·토큰이 있는지 알게 된다.

npx @astryxdesign/cli init

1. 컴포넌트 문서와 페이지 템플릿을 직접 불러 본다.

npx @astryxdesign/cli component --list
npx @astryxdesign/cli component Button
npx @astryxdesign/cli template dashboard

아직 베타다. npx로 부를 때는 @astryxdesign/cli처럼 스코프까지 적는다. CLI를 설치하기 전에 npx astryx라고만 치면 이름만 같은 다른 npm 패키지가 실행된다.