Design System Prep

---
name: design-system-prep
description: |
  사용자 브랜드 자산을 조사하고 출처가 드러나는 디자인 시스템 문서와
  Claude Design에 전달할 자료 목록을 준비합니다.
version: "1.1.3"
---

# 디자인 시스템 자료 준비

사용자의 실제 브랜드 자산을 우선한다. 결과물은 사람이 검토할 수 있는 `DESIGN.md`와 전달 안내다. 문서를 만들었다고 Claude Design에 등록되거나 게시된 것은 아니다. 실제 등록 절차는 `moai-designer:design-sync-upload`를 따른다.

## 입력과 출처

1. 사용자가 제공한 스타일 가이드, 디자인 파일, 토큰, UI 코드, 로고와 운영 화면을 확인한다. 파일과 URL은 실제로 열어 보고, 읽을 수 없으면 그 항목을 미확인으로 기록한다.
2. 각 결정에 자산 경로 또는 URL과 관찰 위치를 남긴다. 스크린샷에서 눈으로 짐작한 색과 글꼴은 추정치로 표시하며, CSS나 디자인 파일의 원본 값과 구분한다.
3. 서로 다른 자산이 충돌하면 현재 적용 중인 화면과 사용자 지정 기준을 확인한다. 우선순위를 추측하지 않는다. 브랜드 보이스와 금지 규칙도 실제 자료나 사용자의 명시적 결정에서만 가져온다.
4. 사용자가 자산 없이 특정 브랜드의 분위기만 요청하면 `design-system-library`를 영감 자료로 열람할 수 있다. 이 라이브러리의 다수 문서는 현재 공식 출처 URL이 없으므로, 그 값을 해당 브랜드의 공식·현행 토큰이나 재사용 허가로 단정하지 않는다. 사용자 브랜드에 그대로 이식하기 전에 색 대비와 사용권을 별도로 확인한다.
5. 타사 사이트와 로고는 참고 자료로만 다룬다. 자사 자산인 것처럼 문서에 포함하거나 업로드하지 않는다.

필요한 정보가 없으면 확보 가능한 자료부터 정리하고 해당 항목을 `미확정`으로 둔다. 질문 채널이 있으면 결정에 필요한 내용만 묻는다. 채널이 없으면 확인이 필요한 결정을 보고한다.

## 산출물

사용자가 지정한 위치에 `DESIGN.md`를 작성한다. 지정하지 않았다면 작업 폴더의 `design-system-prep/`를 쓴다. 다음 항목 중 자료로 확인된 것만 담는다.

| 항목 | 기록할 내용 |
|---|---|
| 출처 목록 | 확인한 파일·URL, 관찰 위치, 확인 날짜, 추정 여부 |
| 브랜드 표현 | 문체·금지 표현·로고 사용 규칙의 실제 근거 |
| 색 | 원본 색상 값, 사용 맥락, 배경과 글자색 조합 |
| 글꼴 | 글꼴 이름·굵기·크기와 라이선스 확인 상태 |
| 간격·모서리·동작 | 자산에서 확인한 값과 적용 위치 |
| 구성요소 | 실제 UI나 코드에서 확인한 패턴 |
| 미확정 사항 | 충돌한 값, 부족한 자료, 사용자 결정이 필요한 항목 |

고정된 섹션 수나 토큰 계층을 강요하지 않는다. 없는 색 단계, 다크 모드, 그라디언트, 그림자, 마스코트, 로고 변형, 카피 규칙을 자동 생성하지 않는다. 새 디자인 제안이 필요하면 관찰한 브랜드 규칙과 분리해 `제안`이라고 표시한다. 토큰 변환이 실제로 필요할 때만 `moai-designer:design-tokens-transformer`를 사용한다.

색 대비는 최종 배경과 글자색 조합에서 계산한다. WCAG AA 일반 텍스트 기준 4.5:1, 큰 텍스트 3:1을 확인하고 측정 결과를 함께 적는다. 색 이름이나 단독 HEX 값만으로 접근성을 보증하지 않는다.

`UPLOAD-GUIDE.md`에는 전달할 파일 목록, 각 파일의 목적, 민감 정보와 사용권 확인 결과, 아직 미확정인 항목을 적는다. 실제 UI에서 허용하는 자료 형태와 현재 화면을 확인하고 순서를 안내한다. 특정 업로드 순서, 분석 시간, 게시 토글의 존재를 보편적인 절차로 가정하지 않는다. Claude Design에서 직접 가져오기가 가능한 소스는 그 UI를 우선 안내한다. ChatGPT Work에서는 검토 가능한 자료를 준비하고 사용자가 Claude Design에서 이어서 적용하도록 안내한다.

## 검증과 보고

- 작성한 파일을 다시 읽어 자산 경로, 색 값, 미확정 표시가 원본과 맞는지 확인한다.
- 링크가 열리지 않았거나 디자인 파일을 직접 파싱하지 못했다면 그 한계를 명시한다.
- 결과 상태를 `자료 준비`, `Claude Design에 등록`, `결과 테스트`, `게시`로 구분한다. 실제 관찰한 단계만 완료로 보고한다.
- 원본 자산은 유지한다. 외부 업로드 전 고객 정보와 폰트·이미지 사용권을 확인한다.

## 관련 스킬

- `moai-designer:design-system-library`: 자산이 없을 때의 영감 자료
- `moai-designer:design-tokens-transformer`: 확인된 토큰의 형식 변환
- `moai-designer:design-sync-upload`: Claude Design 전달과 적용