UDS Claude Code Plugin v2.0

UDS(U+ Design System) 전용 Claude Code 플러그인.

설치

Claude Code에서 아래 명령어를 실행하세요:

/plugin marketplace add hjmolla/uds-plugin
/plugin install uds

Figma MCP 서버가 자동으로 구성됩니다. 최초 1회 Figma OAuth 인증이 필요합니다.

대안: 로컬 설치

git clone https://github.com/hjmolla/uds-plugin.git
claude --plugin-dir ./uds-plugin

또는 settings.json에 추가:

{
  "plugins": [{ "type": "local", "path": "/path/to/uds-plugin" }]
}

스킬 구조 (참조 가이드)

작업 유형                    참조 스킬
─────────────────────────────────────────────────────
화면 생성/패턴 확인       →  uds-screen-gen (빠른 참조)
컴포넌트 선택             →  uds-screen-gen (컴포넌트 카탈로그)
토큰 조회 (빠른)          →  uds-screen-gen (토큰 퀵 레퍼런스)
토큰 조회 (상세)          →  uds-foundation
컴포넌트 네이밍/코드      →  uds-foundation
Figma write 워크플로우    →  uds-figma-write → uds-screen-gen

커맨드

커맨드	설명
/uds:generate-screen <화면 유형>	UDS 패턴 기반 Figma 화면 생성
/uds:implement-design <Figma URL>	Figma → React 컴포넌트 변환
/uds:export-tokens <Figma URL>	Figma 변수 → W3C DTCG JSON + CSS

Marketplace 서버 설정 (관리자용)

팀 내 Marketplace 서버를 처음 구축하는 경우:

cd uds-plugin/marketplace
chmod +x setup.sh
./setup.sh

이후 marketplace/app/ 디렉토리에서 bun dev로 실행.

Docker로 배포

cd uds-plugin/marketplace
cp .env.example .env
# .env 파일에 GITHUB_TOKEN 설정
docker-compose up -d

요구사항

• Claude Code
• Figma 유료 플랜 Full/Dev 시트 (write 기능)
• Figma OAuth 인증 (최초 1회)