Getting Started

PDS란

Pluto Design System(PDS)은 The Pluto 앱의 단일 UI 소스다. 토큰 · 프리미티브 · AI 친화 컴포넌트가 하나의 체계로 묶인다.

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

패키지 구성

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

설치 (앱 레포)

pnpm add @fluxloop-ai/pds-core @fluxloop-ai/pds-icons @fluxloop-ai/pds-markdown
npx shadcn add https://pds.pluto.com/r/button

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

@import "@fluxloop-ai/pds-core/styles";

현재 상태

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