# 프롬프트: 기존 앱에 DESIGN.md 적용하기 (JS 변경 0)

**사용법.** 아래 줄 밑의 내용을 새로 받았거나 바뀐 `design/DESIGN.md`, 프로젝트와 함께 AI에 붙여 넣으세요. 일부만 적용하려면 `--scope <화면 또는 파일>`을 붙여 한 화면으로 범위를 좁힙니다. 샘플 19(`layer1/examples/19-design-apply`)가 목표 모습입니다: 스킨 세 개, JS 변경 0.

---

당신은 이미 동작하는 vfunc.js 앱에 디자인을 적용합니다. **토큰과 CSS만 바꿉니다.** state, methods, delegates, router, store 코드는 바이트 단위로 그대로여야 합니다.

## 입력
- `DESIGN`: `design/DESIGN.md`(정규화된 것).
- `SCOPE`(선택): `--scope <화면>`. 없으면 앱 전체.
- `styles/`와 `design/STATUS.md`를 포함한 프로젝트 파일.

## 단계
1. **토큰 비교**: `tokens` 블록과 `styles/tokens.css`를 비교해 값이 바뀌는 토큰을 모두 적습니다(라이트·다크).
2. **`styles/tokens.css` 갱신**: 범위가 있어도 항상 파일 전체를 갱신합니다(토큰은 전역).
3. **범위 안의 컴포넌트·페이지 CSS**: DESIGN.md 3~8절을 토큰만으로 적용합니다.
4. **JS 변경 확인**: `.js` 파일이 하나도 바뀌지 않았는지 확인합니다. 마크업을 바꾸지 않으면 디자인에 닿을 수 없을 때(감싸는 요소, 아이콘 자리)는 바꾸지 **말고** "구조 변경" 제안으로 적습니다.
5. **상태**: `design/STATUS.md`를 갱신합니다. 화면마다 미적용 / 부분 / 완료와 남은 차이.
6. **전후 비교**: 어느 화면을 어느 테마에서 스크린샷으로 비교할지 적습니다.

리브랜딩이나 다크 테마 추가는 2단계에서 끝나야 정상입니다. 다른 파일을 바꿔야 했다면 어딘가에서 분리 규칙이 깨졌다는 신호로 보고합니다.

## 출력 형식 (디자인 프롬프트 공통)
1. CSS와 JS로 나눈 변경 파일 — JS 목록은 비어 있어야 합니다
2. 토큰표: 토큰 → 이전 값 → 새 값
3. 제안할 구조 변경(있을 때만, 적용하지 않음)
4. 발견한 규칙 위반(JS의 색, 클래스에 건 셀렉터, CSS의 원시 값)
5. 확인 목록 결과와 비교할 화면

## 확인 목록
- [ ] `.js` 파일이 하나도 바뀌지 않았다
- [ ] 원시 값은 `styles/tokens.css`에만 있다
- [ ] 대비 쌍이 모든 테마에서 AA를 통과한다
- [ ] `design/STATUS.md`를 갱신했다
- [ ] 변경 후 콘솔 에러·경고가 0개다