# /pickit:design

PICKIT 넛지 위젯의 **비주얼 디자인**을 정의하거나 수정합니다.  
카피(텍스트) 생성이 아닌 위젯의 CSS, 레이아웃, 애니메이션, 쇼핑몰별 테마를 다룹니다.

## 언제 사용하는가

- 넛지 위젯의 시각적 디자인(색상, 폰트, 레이아웃, 모서리, 그림자)을 처음 설계할 때
- 특정 쇼핑몰 브랜드에 맞게 테마를 커스터마이징할 때
- 애니메이션(슬라이드, 페이드)이나 위젯 위치를 변경할 때
- 모바일/PC 반응형 스타일을 조정할 때

## 사용법

```
/pickit:design                    기본(default) 테마 설계
/pickit:design {shop_id}          특정 쇼핑몰 테마 설계
/pickit:design {shop_id} --review 현재 디자인 접근성/UX 리뷰
```

## 실행

`pickit-nudge-design` 스킬을 사용합니다:

<skill>pickit-nudge-design</skill>

인수로 `shop_id`가 전달된 경우 DB의 `shop_profiles` 테이블에서 해당 쇼핑몰 정보를 참고합니다.  
`--review` 플래그가 있으면 기존 CSS/renderNudge 코드를 읽고 접근성(WCAG AA) + UX 리뷰를 수행합니다.

## 출력물

1. `PICKIT_THEME` 토큰 (JS 객체) — `pickit.js`에 삽입
2. CSS 스타일 — `<style>` 태그 주입용
3. `renderNudge()` 함수 — `pickit.js` 교체용
4. `shop_profiles.design_config` JSON — DB 등록용

## 다음 단계

```
/pickit:design → 디자인 확정 → /pickit:build frontend → /pickit:debug
```