# Astryx 설치하고 CLI 스크립트로 에이전트와 사람이 같은 UI 문서 쓰기
id: astryx-cli-ui · 종류: 워크플로 · 상태: 검수 대기 (사람 확인 전) · 주제: 개발, 기획·디자인, 개인 생산성 · 난이도: 입문
주소: https://opencurrent.ai/w/astryx-cli-ui
주의: AI가 쓴 초안, 아직 사람 확인 전.
기준일: 2026-11-07 (원본이 바뀐 날)
원본: https://github.com/meta/astryx/blob/590d90164198f68d7eea1eddee4cb93e90b69372/README.md (meta/astryx · MIT · meta)
도구: Astryx, npm, React
평가 점수: 29/100 (확인 없음 · 검수 대기)

@astryxdesign/core와 theme-neutral, CLI를 설치하고 npm 스크립트를 달아, 코딩 에이전트와 사람이 `astryx component --list` 같은 같은 명령으로 컴포넌트 문서를 보게 해요.

언제: React 19 프로젝트에서 코딩 에이전트와 함께 UI를 만들 때, 둘이 같은 컴포넌트 문서를 보고 일관되게 작업하게 하고 싶을 때 써요.

준비물: React 19 이상 프로젝트 (react, react-dom) · Node와 npm, pnpm, yarn 중 하나

입력값 (프롬프트의 {{이름}}에 넣는다):
- {{project_dir}} 프로젝트 폴더 (필수) 예: ~/projects/my-app

단계:
1. [명령 실행 · npm] 패키지 설치 — 프로젝트 폴더에서 core, 테마, StyleX 피어 의존성을 설치하고 CLI는 개발 의존성으로 설치해요. pnpm이나 yarn을 쓰면 `pnpm add`, `yarn add`로 바꿔요.
   프롬프트:
   > npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
   > npm install -D @astryxdesign/cli
   기대 결과: package.json에 @astryxdesign/core, @astryxdesign/theme-neutral, @stylexjs/stylex와 개발 의존성 @astryxdesign/cli가 들어가요.
   확인 방법: package.json의 dependencies와 devDependencies를 열어 확인해요.
2. [명령 실행 · npm] CLI를 전역에도 설치 (선택) — 컴퓨터에 한 번 설치하면 어느 폴더에서나 `astryx`가 되고 코딩 에이전트도 Astryx를 알게 돼요. 프로젝트 안에서는 그 프로젝트의 버전이 실행돼요. 프로젝트 설치와 전역 설치를 모두 하는 것을 권장해요.
   프롬프트:
   > npm i -g @astryxdesign/cli
   기대 결과: 전역에서 astryx 명령이 잡혀요.
   확인 방법: `astryx docs global`로 전역 모드 설명이 나오는지 봐요.
3. [사람이 · packages/core README] CSS 가져오기와 테마 프로바이더 설정 — 빌드 플러그인이나 PostCSS, Babel 설정 없이 CSS 몇 줄과 테마 프로바이더만 넣으면 돼요. Next.js, Tailwind, Vite, CDN별 방법은 @astryxdesign/core README의 Quick Start를 따라요.
   기대 결과: 앱이 Astryx 테마가 적용된 상태로 떠요.
   확인 방법: 개발 서버를 켜고 Astryx 컴포넌트 하나를 렌더링해 스타일이 적용되는지 봐요.
4. [명령 실행 · npm] package.json에 astryx 스크립트 추가 — AI 도우미나 새 팀원이 CLI를 직접 부를 때 경로 오류가 나지 않게 스크립트를 달아요.
   프롬프트:
   > "scripts": {
   >   "astryx": "node node_modules/@astryxdesign/cli/clients/cli/bin/astryx.mjs"
   > }
   기대 결과: scripts에 astryx 항목이 생겨요.
   확인 방법: `npm run astryx -- component --list`가 컴포넌트 목록을 출력하는지 확인해요.
5. [사람이 · Astryx CLI] 에이전트와 사람이 같은 CLI로 문서 보기 — 에이전트에게 UI를 맡길 때 `npm run astryx -- component --list`로 컴포넌트를 찾고 그 문서를 기준으로 만들라고 안내해요. 사람도 같은 명령으로 같은 문서를 봐요. 전역 설치와 프로젝트 설치 비교는 `astryx docs global/project-global-or-both`에서 볼 수 있어요.
   기대 결과: 에이전트와 사람이 같은 CLI 문서를 기준으로 컴포넌트를 고르고 써요.
   확인 방법: 에이전트가 만든 UI가 목록에 있는 Astryx 컴포넌트로 짜였는지 코드로 확인해요.

주의:
- Astryx는 베타예요. API가 바뀔 수 있어요.
- @astryxdesign/charts와 @astryxdesign/vega는 @canary 태그로만 배포돼서 안정 버전이 없어요.
- @astryxdesign/lab은 npm에 배포되지 않아요.
- CLI 경로를 직접 부르면 에이전트가 경로 오류를 낼 수 있어요. npm 스크립트로 부르세요.

출처:
- Astryx https://github.com/meta/astryx/blob/590d90164198f68d7eea1eddee4cb93e90b69372/README.md