Design Handoff Reader

---
name: design-handoff-reader
description: |
  사용자가 제공한 Claude Design 핸드오프 파일·폴더·링크를 읽고 구현에 필요한 디자인 결정과 미확인 사항을 정리합니다.
  "핸드오프 분석해줘", "디자인 파일 읽어줘", "구현 지시 정리해줘" 같은 요청에 사용하세요.
  파일 형식과 내용은 실제 받은 자료에서 확인합니다.
version: "1.1.3"
---

# 디자인 핸드오프 읽기

[Claude Design 공식 안내](https://support.claude.com/en/articles/14604416-get-started-with-claude-design)는 디자인을 Claude Code로 넘기는 기능을 설명한다. 이 스킬은 사용자가 실제로 제공한 핸드오프 자료를 분석한다. 특정 ZIP 구조, README, `tokens.json`, `components.json`, `chat-history.md`가 공식적으로 항상 포함된다고 가정하지 않는다.

## 입력 확인

1. 파일·폴더·링크가 실제 접근 가능한지 확인하고 목록을 기록한다. 접근되지 않는 링크를 읽었다고 말하지 않는다.
2. README나 안내 문서가 있으면 의도와 파일 관계를 먼저 읽는다. 없으면 실제 디자인 파일, 코드, 자산의 역할을 확인한다.
3. JSON·CSS·HTML·이미지 등 존재하는 자료에서 색·서체·간격·컴포넌트·레이아웃·상태·인터랙션을 추출한다. 이미지만 있으면 코드 구조나 동작을 추정으로 표시한다.
4. 채팅 기록이나 결정 메모가 있으면 사용자가 명시한 결정과 이유를 출처와 함께 정리한다. 없으면 디자인 의도를 상상해 채우지 않는다.
5. 기존 코드베이스와 매핑하려면 해당 프로젝트 파일을 실제로 읽는다. 보지 않은 컴포넌트와 일치한다고 말하지 않는다.

## 결과

```markdown
# 디자인 핸드오프 분석

## 확인한 입력
- 접근한 파일·링크: [실제 목록]
- 열지 못한 자료: [이유]

## 구현에 필요한 결정
- 화면·상태·반응형·자산: [파일 근거]
- 브랜드 토큰과 컴포넌트: [원본 값과 위치]

## 미확인 사항
- 동작·콘텐츠·접근성·권한: [확인할 질문]

## 구현 지시 초안
[현재 프로젝트의 프레임워크·컴포넌트·브랜드 규칙을 반영한 짧은 지시]
```

구현 지시는 Claude Code나 ChatGPT Work에서 사용할 수 있는 중립적인 문장으로 쓴다. 특정 호스트 전용 명령은 사용자가 그 호스트를 선택했고 실제 기능을 확인한 경우에만 넣는다. 분석이 끝났다는 사실은 코드 구현·빌드·디자인 동기화 완료를 뜻하지 않는다. 원본 번들과 파일은 보존하고, 추출한 값과 추정값을 구분한다.