디자인 언어를 골라
프롬프트로 가져간다

@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

(여기에 화면 이름과 목적을 한 줄로 적는다. 예: 예약 신청 폼 - 조건 5개를 받아 제출)

## 규칙

- DESIGN.md에 있는 색·타이포·간격·radius 토큰만 쓴다. 새 값을 만들지 않는다
- shadcn/ui 컴포넌트를 그대로 쓰고 스타일은 CSS 변수로만 덮는다. 컴포넌트 내부 파일을 고치지 않는다
- DESIGN.md의 component recipe에 있는 것은 그대로 따른다. 없는 것만 새로 조합한다
- 아이콘은 lucide-react만 쓴다. 다른 아이콘 패키지를 추가하지 않는다
- 하드코딩된 hex·rgb·임의 px 간격을 코드에 남기지 않는다

## 순서

1. 먼저 DESIGN.md에서 이 화면에 필요한 토큰과 컴포넌트 레시피를 목록으로 뽑아 보여줘
2. 내가 확인하면 그때 코드를 쓴다

바로 코드부터 쓰지 마.

@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Uber 계열로 교체한다.

## 대상

(파일 경로를 적는다. 예: app/dashboard/page.tsx, components/StatCard.tsx)

## 순서

1. 지금 코드에서 하드코딩된 색·간격·radius·폰트를 전부 찾아 `파일:줄` 목록으로 보여줘
2. 각각을 DESIGN.md의 어느 토큰으로 바꿀지 대응표를 만들어줘
3. 대응이 애매한 것은 나에게 물어봐. 임의로 정하지 마
4. 내가 승인한 뒤에 바꾼다

## 바꾸지 말 것

- 컴포넌트 구조, props, 상태 로직
- 접근성 속성(aria-*, role, tabIndex, label 연결)
- 텍스트 내용과 문안
- 데이터 흐름과 API 호출

시각 토큰만 바꾼다.

@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

1. DESIGN.md에 없는 색이 쓰인 곳 - `파일:줄`과 그 값
2. 토큰 밖의 간격 값 (4px 배수가 아니거나 스케일에 없는 값)
3. radius가 기준과 다른 곳
4. 폰트 지정이 DESIGN.md와 어긋난 곳
5. shadcn 컴포넌트 내부 파일을 수정한 흔적

## 형식

| # | 파일:줄 | 지금 값 | 있어야 할 토큰 | 심각도 |

심각도는 상(브랜드가 깨짐) · 중(일관성 손상) · 하(사소)로 나눠줘.
5번이 하나라도 있으면 맨 위에 따로 표시해줘 - 그건 업데이트 때 덮어써진다.

@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

(여기에 화면 이름과 목적을 한 줄로 적는다. 예: 예약 신청 폼 - 조건 5개를 받아 제출)

## 규칙

- DESIGN.md에 있는 색·타이포·간격·radius 토큰만 쓴다. 새 값을 만들지 않는다
- shadcn/ui 컴포넌트를 그대로 쓰고 스타일은 CSS 변수로만 덮는다. 컴포넌트 내부 파일을 고치지 않는다
- DESIGN.md의 component recipe에 있는 것은 그대로 따른다. 없는 것만 새로 조합한다
- 아이콘은 lucide-react만 쓴다. 다른 아이콘 패키지를 추가하지 않는다
- 하드코딩된 hex·rgb·임의 px 간격을 코드에 남기지 않는다

## 순서

1. 먼저 DESIGN.md에서 이 화면에 필요한 토큰과 컴포넌트 레시피를 목록으로 뽑아 보여줘
2. 내가 확인하면 그때 코드를 쓴다

바로 코드부터 쓰지 마.

@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Airbnb 계열로 교체한다.

## 대상

(파일 경로를 적는다. 예: app/dashboard/page.tsx, components/StatCard.tsx)

## 순서

1. 지금 코드에서 하드코딩된 색·간격·radius·폰트를 전부 찾아 `파일:줄` 목록으로 보여줘
2. 각각을 DESIGN.md의 어느 토큰으로 바꿀지 대응표를 만들어줘
3. 대응이 애매한 것은 나에게 물어봐. 임의로 정하지 마
4. 내가 승인한 뒤에 바꾼다

## 바꾸지 말 것

- 컴포넌트 구조, props, 상태 로직
- 접근성 속성(aria-*, role, tabIndex, label 연결)
- 텍스트 내용과 문안
- 데이터 흐름과 API 호출

시각 토큰만 바꾼다.

@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

1. DESIGN.md에 없는 색이 쓰인 곳 - `파일:줄`과 그 값
2. 토큰 밖의 간격 값 (4px 배수가 아니거나 스케일에 없는 값)
3. radius가 기준과 다른 곳
4. 폰트 지정이 DESIGN.md와 어긋난 곳
5. shadcn 컴포넌트 내부 파일을 수정한 흔적

## 형식

| # | 파일:줄 | 지금 값 | 있어야 할 토큰 | 심각도 |

심각도는 상(브랜드가 깨짐) · 중(일관성 손상) · 하(사소)로 나눠줘.
5번이 하나라도 있으면 맨 위에 따로 표시해줘 - 그건 업데이트 때 덮어써진다.

@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

(여기에 화면 이름과 목적을 한 줄로 적는다. 예: 예약 신청 폼 - 조건 5개를 받아 제출)

## 규칙

- DESIGN.md에 있는 색·타이포·간격·radius 토큰만 쓴다. 새 값을 만들지 않는다
- shadcn/ui 컴포넌트를 그대로 쓰고 스타일은 CSS 변수로만 덮는다. 컴포넌트 내부 파일을 고치지 않는다
- DESIGN.md의 component recipe에 있는 것은 그대로 따른다. 없는 것만 새로 조합한다
- 아이콘은 lucide-react만 쓴다. 다른 아이콘 패키지를 추가하지 않는다
- 하드코딩된 hex·rgb·임의 px 간격을 코드에 남기지 않는다

## 순서

1. 먼저 DESIGN.md에서 이 화면에 필요한 토큰과 컴포넌트 레시피를 목록으로 뽑아 보여줘
2. 내가 확인하면 그때 코드를 쓴다

바로 코드부터 쓰지 마.

@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Stripe 계열로 교체한다.

## 대상

(파일 경로를 적는다. 예: app/dashboard/page.tsx, components/StatCard.tsx)

## 순서

1. 지금 코드에서 하드코딩된 색·간격·radius·폰트를 전부 찾아 `파일:줄` 목록으로 보여줘
2. 각각을 DESIGN.md의 어느 토큰으로 바꿀지 대응표를 만들어줘
3. 대응이 애매한 것은 나에게 물어봐. 임의로 정하지 마
4. 내가 승인한 뒤에 바꾼다

## 바꾸지 말 것

- 컴포넌트 구조, props, 상태 로직
- 접근성 속성(aria-*, role, tabIndex, label 연결)
- 텍스트 내용과 문안
- 데이터 흐름과 API 호출

시각 토큰만 바꾼다.

@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

1. DESIGN.md에 없는 색이 쓰인 곳 - `파일:줄`과 그 값
2. 토큰 밖의 간격 값 (4px 배수가 아니거나 스케일에 없는 값)
3. radius가 기준과 다른 곳
4. 폰트 지정이 DESIGN.md와 어긋난 곳
5. shadcn 컴포넌트 내부 파일을 수정한 흔적

## 형식

| # | 파일:줄 | 지금 값 | 있어야 할 토큰 | 심각도 |

심각도는 상(브랜드가 깨짐) · 중(일관성 손상) · 하(사소)로 나눠줘.
5번이 하나라도 있으면 맨 위에 따로 표시해줘 - 그건 업데이트 때 덮어써진다.

@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

(여기에 화면 이름과 목적을 한 줄로 적는다. 예: 예약 신청 폼 - 조건 5개를 받아 제출)

## 규칙

- DESIGN.md에 있는 색·타이포·간격·radius 토큰만 쓴다. 새 값을 만들지 않는다
- shadcn/ui 컴포넌트를 그대로 쓰고 스타일은 CSS 변수로만 덮는다. 컴포넌트 내부 파일을 고치지 않는다
- DESIGN.md의 component recipe에 있는 것은 그대로 따른다. 없는 것만 새로 조합한다
- 아이콘은 lucide-react만 쓴다. 다른 아이콘 패키지를 추가하지 않는다
- 하드코딩된 hex·rgb·임의 px 간격을 코드에 남기지 않는다

## 순서

1. 먼저 DESIGN.md에서 이 화면에 필요한 토큰과 컴포넌트 레시피를 목록으로 뽑아 보여줘
2. 내가 확인하면 그때 코드를 쓴다

바로 코드부터 쓰지 마.

@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Linear 계열로 교체한다.

## 대상

(파일 경로를 적는다. 예: app/dashboard/page.tsx, components/StatCard.tsx)

## 순서

1. 지금 코드에서 하드코딩된 색·간격·radius·폰트를 전부 찾아 `파일:줄` 목록으로 보여줘
2. 각각을 DESIGN.md의 어느 토큰으로 바꿀지 대응표를 만들어줘
3. 대응이 애매한 것은 나에게 물어봐. 임의로 정하지 마
4. 내가 승인한 뒤에 바꾼다

## 바꾸지 말 것

- 컴포넌트 구조, props, 상태 로직
- 접근성 속성(aria-*, role, tabIndex, label 연결)
- 텍스트 내용과 문안
- 데이터 흐름과 API 호출

시각 토큰만 바꾼다.

@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

1. DESIGN.md에 없는 색이 쓰인 곳 - `파일:줄`과 그 값
2. 토큰 밖의 간격 값 (4px 배수가 아니거나 스케일에 없는 값)
3. radius가 기준과 다른 곳
4. 폰트 지정이 DESIGN.md와 어긋난 곳
5. shadcn 컴포넌트 내부 파일을 수정한 흔적

## 형식

| # | 파일:줄 | 지금 값 | 있어야 할 토큰 | 심각도 |

심각도는 상(브랜드가 깨짐) · 중(일관성 손상) · 하(사소)로 나눠줘.
5번이 하나라도 있으면 맨 위에 따로 표시해줘 - 그건 업데이트 때 덮어써진다.

@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

(여기에 화면 이름과 목적을 한 줄로 적는다. 예: 예약 신청 폼 - 조건 5개를 받아 제출)

## 규칙

- DESIGN.md에 있는 색·타이포·간격·radius 토큰만 쓴다. 새 값을 만들지 않는다
- shadcn/ui 컴포넌트를 그대로 쓰고 스타일은 CSS 변수로만 덮는다. 컴포넌트 내부 파일을 고치지 않는다
- DESIGN.md의 component recipe에 있는 것은 그대로 따른다. 없는 것만 새로 조합한다
- 아이콘은 lucide-react만 쓴다. 다른 아이콘 패키지를 추가하지 않는다
- 하드코딩된 hex·rgb·임의 px 간격을 코드에 남기지 않는다

## 순서

1. 먼저 DESIGN.md에서 이 화면에 필요한 토큰과 컴포넌트 레시피를 목록으로 뽑아 보여줘
2. 내가 확인하면 그때 코드를 쓴다

바로 코드부터 쓰지 마.

@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Notion 계열로 교체한다.

## 대상

(파일 경로를 적는다. 예: app/dashboard/page.tsx, components/StatCard.tsx)

## 순서

1. 지금 코드에서 하드코딩된 색·간격·radius·폰트를 전부 찾아 `파일:줄` 목록으로 보여줘
2. 각각을 DESIGN.md의 어느 토큰으로 바꿀지 대응표를 만들어줘
3. 대응이 애매한 것은 나에게 물어봐. 임의로 정하지 마
4. 내가 승인한 뒤에 바꾼다

## 바꾸지 말 것

- 컴포넌트 구조, props, 상태 로직
- 접근성 속성(aria-*, role, tabIndex, label 연결)
- 텍스트 내용과 문안
- 데이터 흐름과 API 호출

시각 토큰만 바꾼다.

@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

1. DESIGN.md에 없는 색이 쓰인 곳 - `파일:줄`과 그 값
2. 토큰 밖의 간격 값 (4px 배수가 아니거나 스케일에 없는 값)
3. radius가 기준과 다른 곳
4. 폰트 지정이 DESIGN.md와 어긋난 곳
5. shadcn 컴포넌트 내부 파일을 수정한 흔적

## 형식

| # | 파일:줄 | 지금 값 | 있어야 할 토큰 | 심각도 |

심각도는 상(브랜드가 깨짐) · 중(일관성 손상) · 하(사소)로 나눠줘.
5번이 하나라도 있으면 맨 위에 따로 표시해줘 - 그건 업데이트 때 덮어써진다.

@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

(여기에 화면 이름과 목적을 한 줄로 적는다. 예: 예약 신청 폼 - 조건 5개를 받아 제출)

## 규칙

- DESIGN.md에 있는 색·타이포·간격·radius 토큰만 쓴다. 새 값을 만들지 않는다
- shadcn/ui 컴포넌트를 그대로 쓰고 스타일은 CSS 변수로만 덮는다. 컴포넌트 내부 파일을 고치지 않는다
- DESIGN.md의 component recipe에 있는 것은 그대로 따른다. 없는 것만 새로 조합한다
- 아이콘은 lucide-react만 쓴다. 다른 아이콘 패키지를 추가하지 않는다
- 하드코딩된 hex·rgb·임의 px 간격을 코드에 남기지 않는다

## 순서

1. 먼저 DESIGN.md에서 이 화면에 필요한 토큰과 컴포넌트 레시피를 목록으로 뽑아 보여줘
2. 내가 확인하면 그때 코드를 쓴다

바로 코드부터 쓰지 마.

@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Spotify 계열로 교체한다.

## 대상

(파일 경로를 적는다. 예: app/dashboard/page.tsx, components/StatCard.tsx)

## 순서

1. 지금 코드에서 하드코딩된 색·간격·radius·폰트를 전부 찾아 `파일:줄` 목록으로 보여줘
2. 각각을 DESIGN.md의 어느 토큰으로 바꿀지 대응표를 만들어줘
3. 대응이 애매한 것은 나에게 물어봐. 임의로 정하지 마
4. 내가 승인한 뒤에 바꾼다

## 바꾸지 말 것

- 컴포넌트 구조, props, 상태 로직
- 접근성 속성(aria-*, role, tabIndex, label 연결)
- 텍스트 내용과 문안
- 데이터 흐름과 API 호출

시각 토큰만 바꾼다.

@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

1. DESIGN.md에 없는 색이 쓰인 곳 - `파일:줄`과 그 값
2. 토큰 밖의 간격 값 (4px 배수가 아니거나 스케일에 없는 값)
3. radius가 기준과 다른 곳
4. 폰트 지정이 DESIGN.md와 어긋난 곳
5. shadcn 컴포넌트 내부 파일을 수정한 흔적

## 형식

| # | 파일:줄 | 지금 값 | 있어야 할 토큰 | 심각도 |

심각도는 상(브랜드가 깨짐) · 중(일관성 손상) · 하(사소)로 나눠줘.
5번이 하나라도 있으면 맨 위에 따로 표시해줘 - 그건 업데이트 때 덮어써진다.

@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

(여기에 화면 이름과 목적을 한 줄로 적는다. 예: 예약 신청 폼 - 조건 5개를 받아 제출)

## 규칙

- DESIGN.md에 있는 색·타이포·간격·radius 토큰만 쓴다. 새 값을 만들지 않는다
- shadcn/ui 컴포넌트를 그대로 쓰고 스타일은 CSS 변수로만 덮는다. 컴포넌트 내부 파일을 고치지 않는다
- DESIGN.md의 component recipe에 있는 것은 그대로 따른다. 없는 것만 새로 조합한다
- 아이콘은 lucide-react만 쓴다. 다른 아이콘 패키지를 추가하지 않는다
- 하드코딩된 hex·rgb·임의 px 간격을 코드에 남기지 않는다

## 순서

1. 먼저 DESIGN.md에서 이 화면에 필요한 토큰과 컴포넌트 레시피를 목록으로 뽑아 보여줘
2. 내가 확인하면 그때 코드를 쓴다

바로 코드부터 쓰지 마.

@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 GitHub 계열로 교체한다.

## 대상

(파일 경로를 적는다. 예: app/dashboard/page.tsx, components/StatCard.tsx)

## 순서

1. 지금 코드에서 하드코딩된 색·간격·radius·폰트를 전부 찾아 `파일:줄` 목록으로 보여줘
2. 각각을 DESIGN.md의 어느 토큰으로 바꿀지 대응표를 만들어줘
3. 대응이 애매한 것은 나에게 물어봐. 임의로 정하지 마
4. 내가 승인한 뒤에 바꾼다

## 바꾸지 말 것

- 컴포넌트 구조, props, 상태 로직
- 접근성 속성(aria-*, role, tabIndex, label 연결)
- 텍스트 내용과 문안
- 데이터 흐름과 API 호출

시각 토큰만 바꾼다.

@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

1. DESIGN.md에 없는 색이 쓰인 곳 - `파일:줄`과 그 값
2. 토큰 밖의 간격 값 (4px 배수가 아니거나 스케일에 없는 값)
3. radius가 기준과 다른 곳
4. 폰트 지정이 DESIGN.md와 어긋난 곳
5. shadcn 컴포넌트 내부 파일을 수정한 흔적

## 형식

| # | 파일:줄 | 지금 값 | 있어야 할 토큰 | 심각도 |

심각도는 상(브랜드가 깨짐) · 중(일관성 손상) · 하(사소)로 나눠줘.
5번이 하나라도 있으면 맨 위에 따로 표시해줘 - 그건 업데이트 때 덮어써진다.

@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

(여기에 화면 이름과 목적을 한 줄로 적는다. 예: 예약 신청 폼 - 조건 5개를 받아 제출)

## 규칙

- DESIGN.md에 있는 색·타이포·간격·radius 토큰만 쓴다. 새 값을 만들지 않는다
- shadcn/ui 컴포넌트를 그대로 쓰고 스타일은 CSS 변수로만 덮는다. 컴포넌트 내부 파일을 고치지 않는다
- DESIGN.md의 component recipe에 있는 것은 그대로 따른다. 없는 것만 새로 조합한다
- 아이콘은 lucide-react만 쓴다. 다른 아이콘 패키지를 추가하지 않는다
- 하드코딩된 hex·rgb·임의 px 간격을 코드에 남기지 않는다

## 순서

1. 먼저 DESIGN.md에서 이 화면에 필요한 토큰과 컴포넌트 레시피를 목록으로 뽑아 보여줘
2. 내가 확인하면 그때 코드를 쓴다

바로 코드부터 쓰지 마.

@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Vercel 계열로 교체한다.

## 대상

(파일 경로를 적는다. 예: app/dashboard/page.tsx, components/StatCard.tsx)

## 순서

1. 지금 코드에서 하드코딩된 색·간격·radius·폰트를 전부 찾아 `파일:줄` 목록으로 보여줘
2. 각각을 DESIGN.md의 어느 토큰으로 바꿀지 대응표를 만들어줘
3. 대응이 애매한 것은 나에게 물어봐. 임의로 정하지 마
4. 내가 승인한 뒤에 바꾼다

## 바꾸지 말 것

- 컴포넌트 구조, props, 상태 로직
- 접근성 속성(aria-*, role, tabIndex, label 연결)
- 텍스트 내용과 문안
- 데이터 흐름과 API 호출

시각 토큰만 바꾼다.

@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

1. DESIGN.md에 없는 색이 쓰인 곳 - `파일:줄`과 그 값
2. 토큰 밖의 간격 값 (4px 배수가 아니거나 스케일에 없는 값)
3. radius가 기준과 다른 곳
4. 폰트 지정이 DESIGN.md와 어긋난 곳
5. shadcn 컴포넌트 내부 파일을 수정한 흔적

## 형식

| # | 파일:줄 | 지금 값 | 있어야 할 토큰 | 심각도 |

심각도는 상(브랜드가 깨짐) · 중(일관성 손상) · 하(사소)로 나눠줘.
5번이 하나라도 있으면 맨 위에 따로 표시해줘 - 그건 업데이트 때 덮어써진다.

@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

(여기에 화면 이름과 목적을 한 줄로 적는다. 예: 예약 신청 폼 - 조건 5개를 받아 제출)

## 규칙

- DESIGN.md에 있는 색·타이포·간격·radius 토큰만 쓴다. 새 값을 만들지 않는다
- shadcn/ui 컴포넌트를 그대로 쓰고 스타일은 CSS 변수로만 덮는다. 컴포넌트 내부 파일을 고치지 않는다
- DESIGN.md의 component recipe에 있는 것은 그대로 따른다. 없는 것만 새로 조합한다
- 아이콘은 lucide-react만 쓴다. 다른 아이콘 패키지를 추가하지 않는다
- 하드코딩된 hex·rgb·임의 px 간격을 코드에 남기지 않는다

## 순서

1. 먼저 DESIGN.md에서 이 화면에 필요한 토큰과 컴포넌트 레시피를 목록으로 뽑아 보여줘
2. 내가 확인하면 그때 코드를 쓴다

바로 코드부터 쓰지 마.

@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Supabase 계열로 교체한다.

## 대상

(파일 경로를 적는다. 예: app/dashboard/page.tsx, components/StatCard.tsx)

## 순서

1. 지금 코드에서 하드코딩된 색·간격·radius·폰트를 전부 찾아 `파일:줄` 목록으로 보여줘
2. 각각을 DESIGN.md의 어느 토큰으로 바꿀지 대응표를 만들어줘
3. 대응이 애매한 것은 나에게 물어봐. 임의로 정하지 마
4. 내가 승인한 뒤에 바꾼다

## 바꾸지 말 것

- 컴포넌트 구조, props, 상태 로직
- 접근성 속성(aria-*, role, tabIndex, label 연결)
- 텍스트 내용과 문안
- 데이터 흐름과 API 호출

시각 토큰만 바꾼다.

@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

1. DESIGN.md에 없는 색이 쓰인 곳 - `파일:줄`과 그 값
2. 토큰 밖의 간격 값 (4px 배수가 아니거나 스케일에 없는 값)
3. radius가 기준과 다른 곳
4. 폰트 지정이 DESIGN.md와 어긋난 곳
5. shadcn 컴포넌트 내부 파일을 수정한 흔적

## 형식

| # | 파일:줄 | 지금 값 | 있어야 할 토큰 | 심각도 |

심각도는 상(브랜드가 깨짐) · 중(일관성 손상) · 하(사소)로 나눠줘.
5번이 하나라도 있으면 맨 위에 따로 표시해줘 - 그건 업데이트 때 덮어써진다.

@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

(여기에 화면 이름과 목적을 한 줄로 적는다. 예: 예약 신청 폼 - 조건 5개를 받아 제출)

## 규칙

- DESIGN.md에 있는 색·타이포·간격·radius 토큰만 쓴다. 새 값을 만들지 않는다
- shadcn/ui 컴포넌트를 그대로 쓰고 스타일은 CSS 변수로만 덮는다. 컴포넌트 내부 파일을 고치지 않는다
- DESIGN.md의 component recipe에 있는 것은 그대로 따른다. 없는 것만 새로 조합한다
- 아이콘은 lucide-react만 쓴다. 다른 아이콘 패키지를 추가하지 않는다
- 하드코딩된 hex·rgb·임의 px 간격을 코드에 남기지 않는다

## 순서

1. 먼저 DESIGN.md에서 이 화면에 필요한 토큰과 컴포넌트 레시피를 목록으로 뽑아 보여줘
2. 내가 확인하면 그때 코드를 쓴다

바로 코드부터 쓰지 마.

@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Apple 계열로 교체한다.

## 대상

(파일 경로를 적는다. 예: app/dashboard/page.tsx, components/StatCard.tsx)

## 순서

1. 지금 코드에서 하드코딩된 색·간격·radius·폰트를 전부 찾아 `파일:줄` 목록으로 보여줘
2. 각각을 DESIGN.md의 어느 토큰으로 바꿀지 대응표를 만들어줘
3. 대응이 애매한 것은 나에게 물어봐. 임의로 정하지 마
4. 내가 승인한 뒤에 바꾼다

## 바꾸지 말 것

- 컴포넌트 구조, props, 상태 로직
- 접근성 속성(aria-*, role, tabIndex, label 연결)
- 텍스트 내용과 문안
- 데이터 흐름과 API 호출

시각 토큰만 바꾼다.

@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

1. DESIGN.md에 없는 색이 쓰인 곳 - `파일:줄`과 그 값
2. 토큰 밖의 간격 값 (4px 배수가 아니거나 스케일에 없는 값)
3. radius가 기준과 다른 곳
4. 폰트 지정이 DESIGN.md와 어긋난 곳
5. shadcn 컴포넌트 내부 파일을 수정한 흔적

## 형식

| # | 파일:줄 | 지금 값 | 있어야 할 토큰 | 심각도 |

심각도는 상(브랜드가 깨짐) · 중(일관성 손상) · 하(사소)로 나눠줘.
5번이 하나라도 있으면 맨 위에 따로 표시해줘 - 그건 업데이트 때 덮어써진다.

@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

(여기에 화면 이름과 목적을 한 줄로 적는다. 예: 예약 신청 폼 - 조건 5개를 받아 제출)

## 규칙

- DESIGN.md에 있는 색·타이포·간격·radius 토큰만 쓴다. 새 값을 만들지 않는다
- shadcn/ui 컴포넌트를 그대로 쓰고 스타일은 CSS 변수로만 덮는다. 컴포넌트 내부 파일을 고치지 않는다
- DESIGN.md의 component recipe에 있는 것은 그대로 따른다. 없는 것만 새로 조합한다
- 아이콘은 lucide-react만 쓴다. 다른 아이콘 패키지를 추가하지 않는다
- 하드코딩된 hex·rgb·임의 px 간격을 코드에 남기지 않는다

## 순서

1. 먼저 DESIGN.md에서 이 화면에 필요한 토큰과 컴포넌트 레시피를 목록으로 뽑아 보여줘
2. 내가 확인하면 그때 코드를 쓴다

바로 코드부터 쓰지 마.

@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Material 3 계열로 교체한다.

## 대상

(파일 경로를 적는다. 예: app/dashboard/page.tsx, components/StatCard.tsx)

## 순서

1. 지금 코드에서 하드코딩된 색·간격·radius·폰트를 전부 찾아 `파일:줄` 목록으로 보여줘
2. 각각을 DESIGN.md의 어느 토큰으로 바꿀지 대응표를 만들어줘
3. 대응이 애매한 것은 나에게 물어봐. 임의로 정하지 마
4. 내가 승인한 뒤에 바꾼다

## 바꾸지 말 것

- 컴포넌트 구조, props, 상태 로직
- 접근성 속성(aria-*, role, tabIndex, label 연결)
- 텍스트 내용과 문안
- 데이터 흐름과 API 호출

시각 토큰만 바꾼다.

@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

1. DESIGN.md에 없는 색이 쓰인 곳 - `파일:줄`과 그 값
2. 토큰 밖의 간격 값 (4px 배수가 아니거나 스케일에 없는 값)
3. radius가 기준과 다른 곳
4. 폰트 지정이 DESIGN.md와 어긋난 곳
5. shadcn 컴포넌트 내부 파일을 수정한 흔적

## 형식

| # | 파일:줄 | 지금 값 | 있어야 할 토큰 | 심각도 |

심각도는 상(브랜드가 깨짐) · 중(일관성 손상) · 하(사소)로 나눠줘.
5번이 하나라도 있으면 맨 위에 따로 표시해줘 - 그건 업데이트 때 덮어써진다.

@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

(여기에 화면 이름과 목적을 한 줄로 적는다. 예: 예약 신청 폼 - 조건 5개를 받아 제출)

## 규칙

- DESIGN.md에 있는 색·타이포·간격·radius 토큰만 쓴다. 새 값을 만들지 않는다
- shadcn/ui 컴포넌트를 그대로 쓰고 스타일은 CSS 변수로만 덮는다. 컴포넌트 내부 파일을 고치지 않는다
- DESIGN.md의 component recipe에 있는 것은 그대로 따른다. 없는 것만 새로 조합한다
- 아이콘은 lucide-react만 쓴다. 다른 아이콘 패키지를 추가하지 않는다
- 하드코딩된 hex·rgb·임의 px 간격을 코드에 남기지 않는다

## 순서

1. 먼저 DESIGN.md에서 이 화면에 필요한 토큰과 컴포넌트 레시피를 목록으로 뽑아 보여줘
2. 내가 확인하면 그때 코드를 쓴다

바로 코드부터 쓰지 마.

@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Neo Brutalism 계열로 교체한다.

## 대상

(파일 경로를 적는다. 예: app/dashboard/page.tsx, components/StatCard.tsx)

## 순서

1. 지금 코드에서 하드코딩된 색·간격·radius·폰트를 전부 찾아 `파일:줄` 목록으로 보여줘
2. 각각을 DESIGN.md의 어느 토큰으로 바꿀지 대응표를 만들어줘
3. 대응이 애매한 것은 나에게 물어봐. 임의로 정하지 마
4. 내가 승인한 뒤에 바꾼다

## 바꾸지 말 것

- 컴포넌트 구조, props, 상태 로직
- 접근성 속성(aria-*, role, tabIndex, label 연결)
- 텍스트 내용과 문안
- 데이터 흐름과 API 호출

시각 토큰만 바꾼다.

@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

1. DESIGN.md에 없는 색이 쓰인 곳 - `파일:줄`과 그 값
2. 토큰 밖의 간격 값 (4px 배수가 아니거나 스케일에 없는 값)
3. radius가 기준과 다른 곳
4. 폰트 지정이 DESIGN.md와 어긋난 곳
5. shadcn 컴포넌트 내부 파일을 수정한 흔적

## 형식

| # | 파일:줄 | 지금 값 | 있어야 할 토큰 | 심각도 |

심각도는 상(브랜드가 깨짐) · 중(일관성 손상) · 하(사소)로 나눠줘.
5번이 하나라도 있으면 맨 위에 따로 표시해줘 - 그건 업데이트 때 덮어써진다.