Getting Started

CDS란

Codexy Design System(CDS)은 Codex 스타일의 UI 디자인 시스템이다. 토큰 · 프리미티브 · AI 친화 컴포넌트가 하나의 체계로 묶인다.

• 코드가 SSOT — Figma는 역생성으로 유지
• macOS-first, Windows-ready — Electron 37+ 대상 최적화
• AI 친화 — Claude/Cursor가 읽고 수정하기 쉬운 구조

패키지 구성

패키지	역할
@tendtoyj/cds-core	토큰(@theme), Tailwind v4 CSS entry, Pretendard, motion, utility helpers (cn/tv)
@tendtoyj/cds-ui	Radix + Tailwind 컴포넌트 (shadcn 레지스트리)
@tendtoyj/cds-icons	phosphor 래퍼 + CDS 아이콘 + 브랜드 아이콘
@tendtoyj/cds-markdown	chat 슬롯용 markdown 렌더러

설치 (앱 레포)

pnpm add --save-exact @tendtoyj/cds-core@0.2.2 @tendtoyj/cds-icons@0.2.2 @tendtoyj/cds-markdown@0.2.2
pnpm dlx shadcn@latest add https://codexy-design-system-docs.vercel.app/r/0.2.2/button.json

그다음 앱 루트 CSS 에 토큰을 연결:

@import "@tendtoyj/cds-core/styles";

현재 상태

Pre-release. 첫 공개 버전은 0.1.0. 0.x 동안은 breaking change 가 자유롭게 들어온다 — 1.0 이전에는 마이너 단위에서도 깨지는 변경이 포함될 수 있다. 컴포넌트 카탈로그는 Components, 토큰은 Foundations 에서 확인.

PDS consumer는 package와 UI source를 분리해서 옮기는 PDS → CDS 0.2.2 Migration을 따른다.