Skill 파일

PDS 스킬 파일을 AI 툴에 연결하면 Polaris Design System 기준으로 바로 답하고, "PDS"라는 말이 없어도 화면/UI를 만들어달라는 요청에 자동으로 반응해 PDS 기준의 코드를 생성해요.

스킬 파일이란?

PDS 컴포넌트 소스, 디자인 토큰 CSS, 컴포넌트별 사용 규칙과 예제를 AI가 읽기 좋은 형태로 한데 묶은 파일이에요. npm 을 쓸 수 없는 환경(사내망·온프레미스)을 위한 것으로, AI 가 동봉된 소스를 프로젝트에 복사해 PDS 컴포넌트를 그대로 씁니다. 내용은 문서 사이트와 토큰 파일에서 빌드 때 자동 생성되므로 사이트가 갱신되면 스킬도 함께 갱신돼요.

PAX 웹채팅이나 design-md MCP 가 연결된 프로젝트라면 이 파일이 필요 없어요 — 그쪽이 항상 최신 발행본을 직접 줍니다. npm 을 쓸 수 있으면 npm i @polarisoffice/pds-react 가 더 간단해요.

설치 방법

ZIP 다운로드

압축을 풀어 pds-design 폴더를 프로젝트의 .claude/skills/(또는 쓰는 AI 도구의 스킬 디렉터리)에 넣으세요. AI 가 화면을 만들 때 SKILL.md 규칙대로 src/ 를 components/pds/ 로, 토큰 CSS 를 styles/design-tokens.css 로 복사해 씁니다.

파일 구조

스킬 파일은 아래 구조로 구성되어 있어요.

pds-design/
  SKILL.md                     ← AI가 먼저 읽는 진입점 (설치·배선·조합 규칙 + 컴포넌트 카탈로그)
  references/
    button/README.md           ← 컴포넌트별 용도·사용 규칙·예제 (문서 사이트에서 생성)
    checkbox/README.md
    …                          ← src/components 폴더와 1:1
  src/
    components/button/         ← 패키지 소스 그대로 (index.tsx · style.ts · types.ts)
    components/checkbox/
    …
    tokens.ts · tokens.generated.ts · supported.ts · index.ts   ← 공용 파일 (항상 함께)
  styles/
    design-tokens.css          ← 디자인 토큰 CSS (app/layout.tsx 에서 한 번 import)
  LICENSE

활용 예시

새 화면/UI를 만들어달라고 할 때 ("PDS" 언급 없이도 자동 발동해요)

"설정 페이지 하나 만들어줘"
"이 데이터 목록 화면 디자인해줘"
"저장·취소 버튼이 있는 확인 팝업 만들어줘"

스펙을 물어볼 때

"Button 은 어떤 variant 가 있어?"
"Tabs 를 fill 로 쓰려면?"
"라운드 토큰 값 알려줘"