Design Workflow

---
name: design-workflow
description: |
  디자인 자료를 프로젝트의 브랜드 기준과 함께 읽고, 확인된 토큰과 자산을
  구현에 전달합니다. 프로젝트 설정이 있을 때만 MoAI 전용 경로를 사용합니다.
user-invocable: false
version: "1.1.3"
---

# 디자인 자료 연결

Claude Cowork와 ChatGPT Work 모두에서 사용할 수 있는 디자인 자료 정리 흐름이다. MoAI 프로젝트의 `.moai/design/` 경로와 `/moai design` 설정은 해당 프로젝트에 실제 존재할 때만 적용한다. 현재 플러그인에 포함된 `config/design.yaml`과 `rules/moai/design/constitution.md`는 프로젝트에 복사된 설정·규칙의 존재를 대신 증명하지 않는다.

## 자료 선택

1. 사용자가 제공한 화면, 디자인 파일, 토큰, 코드, 브랜드 가이드를 확인한다. 요청 목표와 사용 가능한 자료에 맞춰 경로를 고른다.
2. Claude Design 결과가 있으면 실제 내보낸 파일의 구조와 사용권을 검사한다. 특정 `manifest.json`, ZIP 구조나 버전 `1.0`이 공식 내보내기의 보편 형식이라고 가정하지 않는다. 현재 설치된 MoAI 수입기가 별도 형식을 요구하면 그 형식과 입력을 확인한 뒤에만 적용한다.
3. Figma 파일은 접근 가능한 공식 연결·권한·파일 구조를 확인한 뒤 추출한다. 동적 추출기 생성이나 인증 토큰을 기본 경로로 강제하지 않는다. 비밀 토큰 값은 문서와 산출물에 저장하지 않는다.
4. 디자인 파일이 없어도 사용자의 브랜드 자산과 브리프로 시작할 수 있다. `design-system-prep`, `design-brand-system`, `design-copywriting` 등 필요한 스킬만 사용한다.

## 프로젝트 문맥

- 프로젝트에 `.moai/project/brand/`가 있고 실제 내용이 있으면 사용자의 현재 브랜드 기준으로 읽는다. 디자인 자료와 충돌하면 출처와 차이를 제시하고 사용자 결정을 받는다.
- 프로젝트에 `.moai/config/sections/design.yaml`이 있으면 그 파일의 `design_docs` 설정을 읽는다. 없으면 자동 로드나 토큰 예산을 적용했다고 주장하지 않는다.
- `.moai/design/spec.md`, `system.md`, `research.md`가 실제로 있고 내용이 있을 때만 읽는다. `_TBD_`로 된 틀은 근거로 쓰지 않는다. 길이를 줄여야 하면 `spec` → `system` → `research` 순서로 보존하되, 읽지 않은 부분을 분명히 표시한다.
- 작업 대상 프로젝트가 MoAI 전용 예약 경로를 사용한다면 [디자인 규칙](../../rules/moai/design/constitution.md)의 현재 목록을 확인한다. 이 파일의 경로 표기가 실제 설치 구조와 다르면 사용자가 지정한 프로젝트 경로를 따른다. 사람 손으로 쓴 파일은 덮어쓰지 않는다.

## 가져오기와 안전성

받은 ZIP은 압축을 풀기 전에 엔트리 목록과 확장 후 크기를 확인한다. 절대 경로, 상위 경로 이동, 심볼릭 링크, 장치 파일, 실행 가능한 스크립트와 중첩 압축은 거부한다. 추출 대상 디렉터리 밖으로 쓰지 않는다. 이미지·SVG·폰트는 형식과 권리를 확인하고, SVG 안의 스크립트나 외부 참조를 무해하다고 가정하지 않는다. 형식이 불명확하면 원본을 보존하고 지원 가능한 자료만 별도로 다룬다.

토큰은 실제 파싱 결과를 `design-tokens-transformer`로 검증한다. 값이 빠지거나 이름이 충돌하면 임의의 브랜드 값을 생성하지 않는다. 구성요소와 카피도 제공된 자료에서 확인한 것만 추출한다.

## 산출과 검증

- 대상 프로젝트의 기존 구조를 확인하고 필요한 파일만 쓴다. 생성 경로와 원본 경로의 대응표를 남긴다.
- 원본 자산의 값과 변환된 토큰을 비교하고, 실제 실행한 파서·빌드·화면 검사만 통과로 보고한다.
- Claude Design에서 준비한 자료와 실제 업로드·적용·게시 상태를 구분한다. 업로드는 `design-sync-upload`의 현재 UI 절차를 따른다.
- 데이터나 자산을 읽지 못한 경우, 형식 미지원과 미확인 사항을 다음 작업과 함께 보고한다.

## 관련 스킬

`design-system-prep`, `design-brand-system`, `design-tokens-transformer`, `design-sync-upload`, `design-brief`.