Astryx 설치하고 CLI 스크립트로 에이전트와 사람이 같은 UI 문서 쓰기
@astryxdesign/core와 theme-neutral, CLI를 설치하고 npm 스크립트를 달아, 코딩 에이전트와 사람이 `astryx component --list` 같은 같은 명령으로 컴포넌트 문서를 보게 해요.
npm → packages/core README → npm → Astryx CLI
React 19 프로젝트에서 코딩 에이전트와 함께 UI를 만들 때, 둘이 같은 컴포넌트 문서를 보고 일관되게 작업하게 하고 싶을 때 써요.
입력값
{{project_dir}}프로젝트 폴더필수- Astryx를 설치할 React 프로젝트 경로
- 예: ~/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단계, 명령 실행. CLI를 전역에도 설치 (선택)
npm
컴퓨터에 한 번 설치하면 어느 폴더에서나 `astryx`가 되고 코딩 에이전트도 Astryx를 알게 돼요. 프로젝트 안에서는 그 프로젝트의 버전이 실행돼요. 프로젝트 설치와 전역 설치를 모두 하는 것을 권장해요.
명령 npm i -g @astryxdesign/cli
- 기대 결과
- 전역에서 astryx 명령이 잡혀요.
- 확인하는 법
- `astryx docs global`로 전역 모드 설명이 나오는지 봐요.
3단계, 사람이. CSS 가져오기와 테마 프로바이더 설정
packages/core README
빌드 플러그인이나 PostCSS, Babel 설정 없이 CSS 몇 줄과 테마 프로바이더만 넣으면 돼요. Next.js, Tailwind, Vite, CDN별 방법은 @astryxdesign/core README의 Quick Start를 따라요.
- 기대 결과
- 앱이 Astryx 테마가 적용된 상태로 떠요.
- 확인하는 법
- 개발 서버를 켜고 Astryx 컴포넌트 하나를 렌더링해 스타일이 적용되는지 봐요.
4단계, 명령 실행. package.json에 astryx 스크립트 추가
npm
AI 도우미나 새 팀원이 CLI를 직접 부를 때 경로 오류가 나지 않게 스크립트를 달아요.
명령 "scripts": { "astryx": "node node_modules/@astryxdesign/cli/clients/cli/bin/astryx.mjs" }
- 기대 결과
- scripts에 astryx 항목이 생겨요.
- 확인하는 법
- `npm run astryx -- component --list`가 컴포넌트 목록을 출력하는지 확인해요.
5단계, 사람이. 에이전트와 사람이 같은 CLI로 문서 보기
Astryx 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 스크립트로 부르세요.
출처
- 1Astryxgithub.com