Astryx는 Meta가 사내에서 8년간 키운 디자인 시스템을 오픈소스로 낸 것입니다.(꿀통) README 기준으로 사내 13,000개 이상 앱이 쓰는 가장 큰 디자인 시스템이고, 지금은 베타버전입니다. (아니 13,000개 이상이 쓴다면서 말은 베타라니) - 0.5.5 → 0.5.6 → 0.6.0

React 19와 StyleX 위에 컴포넌트 150개, 테마, 다크 모드, 템플릿, CLI를 한 덩어리로 제공합니다. 단, 내부 스타일링은 StyleX가 할 건데, 소비자는 StyleX를 몰라도 됩니다. 미리 빌드된 CSS를 import하고 타입 있는 React 컴포넌트를 쓰면 되고, 오버라이드는 className으로 Tailwind든 CSS 모듈이든 쓰던 걸 그대로 씁니다.

"agent ready"가 뜻하는 것

README의 문장은 "API, 문서, CLI를 함께 설계해서 사람과 AI 어시스턴트가 같은 참조로 같은 방식으로 만들게 한다"입니다. 마케팅 문구가 아니라 저장소에 실제 장치가 있습니다.

• 첫째, 기계가 읽는 문서가 소스코드 바로 옆에 있다.

• 해당 문서에서는 컴포넌트마다 props·설명·예제가 세 가지 변형으로 들어 있습니다. 영문, 중문, 그리고 토큰을 아끼는 dense 버전이란 것이 있습니다. dense 변형이 있다는 것 자체가 컨텍스트 윈도우를 의식한 설계입니다. docPropLiterals.test.ts, docPropReferences.test.ts가 문서가 실재하지 않는 prop을 말하거나 값 목록을 빠뜨리면 CI에서 깨뜨립니다.

  

• 둘째, MCP 서버가 문서 사이트에 붙어 있습니다. apps/docsite/src/app/mcp/route.ts가 도구 두 개를 노출합니다.

  • search: 자연어 질의로 컴포넌트·문서 주제·템플릿을 찾고, 각 결과에 isReady와 설치 명령을 함께 줍니다.
  • get: 이름으로 정확한 문서를 가져오고, 큰 주제는 섹션만 잘라 옵니다.

에이전트가 이 서버에 연결하면 "체크박스 목록 만들어줘" 같은 요청에서 훈련 데이터의 기억이 아니라 그 버전의 실제 API를 조회해 씁니다.

• 셋째, CLI가 에이전트용 출력을 냅니다. 패키지 설명자체가 **"get agent-ready docs from the command line"**이고, search·discover·template·swizzle·init 같은 CLI 명령이 있습니다.
• 넷째, 실제로 에이전트가 잘 쓰는지를 본인들이 매일 측정합니다. 그 이름이 이제 "Vibe Test" 입니다. 에이전트에게 간단한 프롬프트를 주고 만든 코드가 컴파일되는지 채점하고, 실패들을 하나씩 분류합니다. 그 과정에서 만약 CLI 문서가 틀렸으면 문서를 고치고, API가 헷갈리게 생겼으면 API 이슈로 올리고, 에이전트가 다른 디자인 시스템 습관을 끌어온 것이면 "model variance"로 기록만 합니다. 결국엔 이렇게 AI 에 의해서 반복 관찰된 API 마찰은 하나의 추적 이슈에 쌓입니다.

실제 소비자 관점에서 보기

에이전트를 통해 쓰는 사람의 경로는 대략 이렇습니다.

npx @astryxdesign/cli init --agent claude

로 클로드 사용자들을 위한 초기 세팅을 한다.

실제로 치면 Claude.md가 만들어집니다. 에이전트가 저장소에 들어오면 그 파일을 읽고 규칙을 따릅니다.