시작하기

xds는 의존성으로 설치해 쓰는 패키지가 아니라 프로젝트 템플릿입니다. xds create를 실행하면 디자인 토큰과 컴포넌트 라이브러리, 그리고 선택한 각 클라이언트의 작은 앱이 저장소에 복사되며, 이후에는 직접 수정해 사용할 수 있습니다.

프로젝트 만들기

아직 배포된 xds 릴리스가 없습니다. 첫 릴리스가 나오기 전까지는 저장소를 받아 직접 빌드합니다.

git clone https://github.com/kjmin-dev/xds && cd xds
mise install
cargo install --path cli

그다음 새 프로젝트를 생성합니다.

xds create my-app

기본적으로 xds는 프로젝트 이름, 포함할 클라이언트, 컬러 테마를 차례로 묻습니다. 프롬프트를 건너뛰려면 각 옵션을 플래그로 전달하세요.

xds create my-app --name orbit --targets web-react,kotlin-compose --theme ocean

선택할 수 있는 클라이언트는 다음과 같습니다.

타깃	실행 환경	스택
`web-react`	브라우저	React 19, Vite, Tailwind v4, HeroUI v3
`desktop-gpui`	macOS	Rust, GPUI, GPUI Component
`mobile-react-native`	iOS, Android	React Native, Expo
`kotlin-compose`	Android, iOS, 데스크톱	Kotlin Multiplatform, Compose Multiplatform

실행하기

프로젝트는 mise를 사용해 도구 버전을 고정하고 작업을 실행합니다.

cd my-app
mise trust
mise install
mise run fmt
mise run check

프로젝트 이름이 반영되면서 줄 길이와 import 순서가 달라질 수 있으므로, 첫 mise run check를 실행하기 전에 mise run fmt를 한 번 먼저 실행하세요. 선택한 각 클라이언트를 시작하는 명령(예: mise run //web:dev)도 xds가 함께 출력합니다.

각 앱에는 모든 토큰과 컴포넌트를 한 화면에서 확인할 수 있는 디자인 프리뷰가 포함되어 있습니다.

디자인 바꾸기

design/tokens 아래의 토큰 파일을 수정하거나 xds theme <name>으로 컬러 테마를 변경합니다.
mise run tokens를 실행해 플랫폼별 파일을 다시 생성합니다. 토큰 형식이 잘못되었거나 색상 조합의 명암비가 기준치보다 낮으면 빌드가 실패합니다.
수정한 토큰 파일과 생성된 파일을 함께 커밋합니다.

다음에 볼 것

명령어: xds의 모든 명령어와 플래그 설명 (영문)
구조: 토큰 계층과 컴포넌트 규격 설명 (영문)
컬러: 모든 컬러 토큰의 라이트·다크 값 목록 (영문)