codexy design system
opensource2026. 5. – 현재
Codex 스타일의 UI 디자인 시스템입니다. 토큰과 컴포넌트, 문서까지 갖춰 누구나 가져다 쓸 수 있게 오픈소스로 공개했습니다.
· cds-core: 색·타이포그래피·간격·라운드·그림자·z-index·모션 7종 토큰과 Tailwind 프리셋 · cds-ui: Radix 기반 컴포넌트. 버튼부터 오버레이, AI 채팅용 컴포넌트까지 · cds-icons: Phosphor 래퍼와 자체 아이콘, 브랜드 로고 · cds-markdown: 채팅 화면에 맞춘 마크다운 렌더러
· 파운데이션, 컴포넌트, 패턴, 예제를 정리한 문서 사이트 · MIT 라이선스로 공개
프로덕트를 하나 만들 때마다 같은 버튼, 같은 색, 같은 간격을 처음부터 다시 만들고 있었습니다. 이 반복을 끝내려고 한 번 제대로 만들어 두기로 했습니다. 우리 프로덕트들이 같은 기준 위에 서고, 다른 사람도 가져다 쓸 수 있도록 공개했습니다. 이 시스템에는 한 가지 원칙이 있습니다. 디자인의 기준을 피그마가 아니라 코드에 두는 것입니다. 요즘 화면은 대부분 AI와 함께 만드는데, 에이전트가 읽는 것은 피그마가 아니라 코드이기 때문입니다. 그래서 토큰과 컴포넌트를 클로드나 커서가 그대로 읽고 고칠 수 있는 구조로 설계했습니다.
다음과 같은 구조로 만들고, 계속 넓혀 가고 있습니다. · 구조: pnpm과 Turborepo 모노레포. 토큰·아이콘·마크다운·UI 네 패키지로 분리 · 배포 이원화: 토큰과 아이콘은 npm 패키지로 잠그고, UI 컴포넌트는 shadcn 레지스트리로 배포. "복사해서 그 자리에서 고친다"는 사용 방식을 지키기 위한 선택 · 스타일: React 19, Tailwind v4, Radix 기반. Pretendard 폰트 포함, macOS 우선에 Windows(Electron)까지 지원 · 문서: fumadocs 기반 문서 사이트에 파운데이션부터 예제까지 정리 · 릴리스: Changesets로 버전과 체인지로그를 자동화. 아직 0.x라 v1.0 전까지는 구조를 계속 다듬는 중