Cosmos Guide · Design

내 폰 안의 세계를
컴포넌트로 뜯는다

매일 쓰는 앱을 10가지 유형으로 나누고, 유형마다 반드시 들어가는 컴포넌트 5개와 그 5개가 번호로 박힌 목업을 붙였습니다. 목업의 동그란 번호가 오른쪽 컴포넌트 목록과 1:1로 대응합니다.

유형 분류는 내 폰의 IT 세계 전수 조사 과제의 원본 10유형입니다. 컴포넌트 5개는 그 유형이 성립하려면 반드시 있어야 하는 것으로 골랐고, 목업은 유형마다 어울리는 브랜드 디자인 언어를 입혀 그렸습니다.
오늘의 추천장바구니34
전체무료배송세일신상3
코튼 오버셔츠
59,00032%39,900원2
1
워시드 데님
78,00018%63,900원
5
01
쇼핑/결제
물건을 보고 산다
쿠팡 · 무신사 · 배민 · 올리브영 · 마켓컬리
서울 · 2박
8월
월화수목금토일
11121314151617
1
인원
−2+
2
이 가격 객실 2개 남음3
2박 · 성인 2256,000
세금·수수료25,600
총액281,600원
4
5
02
예약/캘린더
보고 예약한다
야놀자 · 여기어때 · 아고다 · 네이버캘린더
동네주민
매너온도 38.4° · 거래 12회
1
판매중2
아이패드 에어 5세대
광진구 화양동 · 1.2km3
420,000원
380,000
4
03
마켓/P2P
사람끼리 사고판다
당근마켓 · 번개장터 · 중고나라
지도1
멀티캠퍼스 세종대
도착지 입력
2
일반3분12,400원3
블랙7분21,000원
도착 예정 09:42 · 예상 12,400원4
5
04
위치/배차
위치 기반으로 보낸다
카카오T · 따릉이 · 타다 · 우버 · 배달의민족
오늘의 추천
깊은 밤의 재즈
42곡 · 2시간 38분
1
이어 듣기4
2
Weightless
Marconi Union
♥5
05
피드/소비
콘텐츠를 본다/듣는다
넷플릭스 · 멜론 · 유튜브 뮤직 · 스포티파이
128게시물 2.4천팔로워
5
haneol· 2시간
♥ 342💬 28↗ 공유저장2
1
designer_k
3
06
피드/소셜
콘텐츠를 만들고 공유한다
유튜브 · 인스타그램 · 틱톡
디자인팀14:22
시안 확인 부탁드려요
31
김한얼어제
네 확인했습니다
시안 확인 부탁드려요
지금 볼게요읽음 14:234
2
메시지 입력＋3
이 방 알림5
07
메시지
대화한다
카카오톡 · 라인 · 슬랙
회고1
8월 4주
8월 3주
스펙
3
8월 4주 회고
배포 전 체크리스트를 위키로 옮겼다.2
스테이징 QA 통과
릴리스 노트 초안
이 항목 담당자 확인 필요4
링크가 있는 모든 사용자 · 보기 가능5
08
협업 도구
같이 일한다
노션 · 피그마 · 구글독스
주계좌
2,847,300원
1
8월 25일
스타벅스−5,800
급여+3,200,000
2
이체 금액
150,000원
3
생체 인증으로 확인4
5
09
금융
돈을 관리한다
신한은행 · 우리은행 · 미래에셋증권 · 토스
8,240걸음
1
2
3
12일 연속 기록 중4
이번 주 평균7,820
목표 달성5 / 7일
5
10
기록/모니터링
나를 기록한다
건강앱 · 만보기 · 캐시워크 · 캘린더

Uber

검정과 흰색의 극단 대비. 모서리를 거의 세우고 그림자를 쓰지 않는다. 굵은 산세리프, 버튼은 꽉 찬 사각형.

1
원본에서 DESIGN.md 받기

shadcn.io/design에서 Download DESIGN.md 또는 Copy markdown을 누릅니다. 색·타이포·간격·컴포넌트 레시피가 한 파일에 들어 있습니다.

shadcn.io/design 열기 →
2
프로젝트 루트에 저장

파일 이름을 DESIGN.md로 해서 프로젝트 맨 위에 둡니다. 에이전트가 @DESIGN.md로 참조합니다.

3
아래 프롬프트를 붙여넣기

상황에 맞는 것을 골라 복사해 Claude Code · Cursor · Copilot에 붙여넣습니다. 괄호 안은 자기 화면 이름으로 바꿉니다.

느낌 미리보기
지금 어디로 갈까요
멀티캠퍼스 세종대
도착지 입력
UberX
4인 · 3분
12,400원
Comfort
4인 · 6분
16,800원
XL
6인 · 9분
21,000원
공통 컴포넌트
신규대기보관

이 미리보기는 브랜드 성격을 잡아본 스케치입니다. 정확한 토큰과 33종 안팎의 컴포넌트 레시피는 1단계에서 받는 원본 DESIGN.md에 있습니다.

적용 프롬프트 세 가지 상황
1적용새 화면을 이 디자인 언어로 만든다
@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

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

## 규칙

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

## 순서

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

바로 코드부터 쓰지 마.
2전환이미 만든 화면을 이 언어로 갈아끼운다
@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Uber 계열로 교체한다.

## 대상

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

## 순서

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

## 바꾸지 말 것

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

시각 토큰만 바꾼다.
3점검지켜졌는지 검사한다
@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

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

## 형식

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

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

Airbnb

단 하나의 색(Rausch #ff385c)을 33개 컴포넌트 중 3개에서만 쓴다. 14px 라운드가 기본. 사진과 여백이 무게를 지고 타이포는 굵지 않다.

1
원본에서 DESIGN.md 받기

shadcn.io/design에서 Download DESIGN.md 또는 Copy markdown을 누릅니다. 색·타이포·간격·컴포넌트 레시피가 한 파일에 들어 있습니다.

shadcn.io/design 열기 →
2
프로젝트 루트에 저장

파일 이름을 DESIGN.md로 해서 프로젝트 맨 위에 둡니다. 에이전트가 @DESIGN.md로 참조합니다.

3
아래 프롬프트를 붙여넣기

상황에 맞는 것을 골라 복사해 Claude Code · Cursor · Copilot에 붙여넣습니다. 괄호 안은 자기 화면 이름으로 바꿉니다.

느낌 미리보기
사진
한강 뷰 아파트 전체
서울 광진구 · 2인 · 침실 1
4.92★
₩128,000 / 박
슈퍼호스트무료 주차와이파이
공통 컴포넌트
신규대기보관

이 미리보기는 브랜드 성격을 잡아본 스케치입니다. 정확한 토큰과 33종 안팎의 컴포넌트 레시피는 1단계에서 받는 원본 DESIGN.md에 있습니다.

적용 프롬프트 세 가지 상황
1적용새 화면을 이 디자인 언어로 만든다
@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

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

## 규칙

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

## 순서

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

바로 코드부터 쓰지 마.
2전환이미 만든 화면을 이 언어로 갈아끼운다
@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Airbnb 계열로 교체한다.

## 대상

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

## 순서

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

## 바꾸지 말 것

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

시각 토큰만 바꾼다.
3점검지켜졌는지 검사한다
@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

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

## 형식

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

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

Stripe

남보라 프라이머리와 짙은 네이비 본문. 그림자가 두 겹으로 얕게 깔린다. 여백이 넓고 표는 촘촘하다.

1
원본에서 DESIGN.md 받기

shadcn.io/design에서 Download DESIGN.md 또는 Copy markdown을 누릅니다. 색·타이포·간격·컴포넌트 레시피가 한 파일에 들어 있습니다.

shadcn.io/design 열기 →
2
프로젝트 루트에 저장

파일 이름을 DESIGN.md로 해서 프로젝트 맨 위에 둡니다. 에이전트가 @DESIGN.md로 참조합니다.

3
아래 프롬프트를 붙여넣기

상황에 맞는 것을 골라 복사해 Claude Code · Cursor · Copilot에 붙여넣습니다. 괄호 안은 자기 화면 이름으로 바꿉니다.

느낌 미리보기
₩49,000월 구독
4242 4242 4242 4242
04 / 28
•••
결제 정보는 암호화되어 전송됩니다
공통 컴포넌트
신규대기보관

이 미리보기는 브랜드 성격을 잡아본 스케치입니다. 정확한 토큰과 33종 안팎의 컴포넌트 레시피는 1단계에서 받는 원본 DESIGN.md에 있습니다.

적용 프롬프트 세 가지 상황
1적용새 화면을 이 디자인 언어로 만든다
@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

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

## 규칙

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

## 순서

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

바로 코드부터 쓰지 마.
2전환이미 만든 화면을 이 언어로 갈아끼운다
@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Stripe 계열로 교체한다.

## 대상

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

## 순서

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

## 바꾸지 말 것

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

시각 토큰만 바꾼다.
3점검지켜졌는지 검사한다
@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

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

## 형식

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

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

Linear

거의 검정에 가까운 배경. 인디고 하나만 강조. 선은 가늘고 폰트 굵기는 중간값을 쓴다. 애니메이션이 빠르다.

1
원본에서 DESIGN.md 받기

shadcn.io/design에서 Download DESIGN.md 또는 Copy markdown을 누릅니다. 색·타이포·간격·컴포넌트 레시피가 한 파일에 들어 있습니다.

shadcn.io/design 열기 →
2
프로젝트 루트에 저장

파일 이름을 DESIGN.md로 해서 프로젝트 맨 위에 둡니다. 에이전트가 @DESIGN.md로 참조합니다.

3
아래 프롬프트를 붙여넣기

상황에 맞는 것을 골라 복사해 Claude Code · Cursor · Copilot에 붙여넣습니다. 괄호 안은 자기 화면 이름으로 바꿉니다.

느낌 미리보기
진행 중 8백로그 24완료
ENG-241폼 제출 시 중복 요청 차단bug
ENG-238대시보드 초기 로딩 2초 단축perf
ENG-235빈 상태 문구 정리ui
ENG-230토큰 만료 시 재로그인 안내auth
공통 컴포넌트
신규대기보관

이 미리보기는 브랜드 성격을 잡아본 스케치입니다. 정확한 토큰과 33종 안팎의 컴포넌트 레시피는 1단계에서 받는 원본 DESIGN.md에 있습니다.

적용 프롬프트 세 가지 상황
1적용새 화면을 이 디자인 언어로 만든다
@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

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

## 규칙

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

## 순서

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

바로 코드부터 쓰지 마.
2전환이미 만든 화면을 이 언어로 갈아끼운다
@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Linear 계열로 교체한다.

## 대상

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

## 순서

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

## 바꾸지 말 것

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

시각 토큰만 바꾼다.
3점검지켜졌는지 검사한다
@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

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

## 형식

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

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

Notion

따뜻한 회갈색 본문에 살짝 크림빛 배경. 장식이 거의 없고 라운드가 작다. 텍스트가 주인공.

1
원본에서 DESIGN.md 받기

shadcn.io/design에서 Download DESIGN.md 또는 Copy markdown을 누릅니다. 색·타이포·간격·컴포넌트 레시피가 한 파일에 들어 있습니다.

shadcn.io/design 열기 →
2
프로젝트 루트에 저장

파일 이름을 DESIGN.md로 해서 프로젝트 맨 위에 둡니다. 에이전트가 @DESIGN.md로 참조합니다.

3
아래 프롬프트를 붙여넣기

상황에 맞는 것을 골라 복사해 Claude Code · Cursor · Copilot에 붙여넣습니다. 괄호 안은 자기 화면 이름으로 바꿉니다.

느낌 미리보기
이번 주 회고
💡
배포 전 체크리스트를 팀 위키로 옮겼습니다.
스테이징 QA 통과
릴리스 노트 초안
고객 공지 문안 검토
롤백 절차 점검
/ 를 눌러 블록 추가
공통 컴포넌트
신규대기보관

이 미리보기는 브랜드 성격을 잡아본 스케치입니다. 정확한 토큰과 33종 안팎의 컴포넌트 레시피는 1단계에서 받는 원본 DESIGN.md에 있습니다.

적용 프롬프트 세 가지 상황
1적용새 화면을 이 디자인 언어로 만든다
@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

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

## 규칙

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

## 순서

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

바로 코드부터 쓰지 마.
2전환이미 만든 화면을 이 언어로 갈아끼운다
@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Notion 계열로 교체한다.

## 대상

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

## 순서

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

## 바꾸지 말 것

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

시각 토큰만 바꾼다.
3점검지켜졌는지 검사한다
@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

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

## 형식

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

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

Spotify

완전한 알약 버튼. 형광 녹색 하나. 카드가 배경보다 살짝 밝고 hover에서 더 밝아진다.

1
원본에서 DESIGN.md 받기

shadcn.io/design에서 Download DESIGN.md 또는 Copy markdown을 누릅니다. 색·타이포·간격·컴포넌트 레시피가 한 파일에 들어 있습니다.

shadcn.io/design 열기 →
2
프로젝트 루트에 저장

파일 이름을 DESIGN.md로 해서 프로젝트 맨 위에 둡니다. 에이전트가 @DESIGN.md로 참조합니다.

3
아래 프롬프트를 붙여넣기

상황에 맞는 것을 골라 복사해 Claude Code · Cursor · Copilot에 붙여넣습니다. 괄호 안은 자기 화면 이름으로 바꿉니다.

느낌 미리보기
플레이리스트
집중할 때
42곡 · 2시간 38분
1WeightlessMarconi Union8:08
2An EndingBrian Eno4:20
3Nuvole BiancheLudovico5:57
공통 컴포넌트
신규대기보관

이 미리보기는 브랜드 성격을 잡아본 스케치입니다. 정확한 토큰과 33종 안팎의 컴포넌트 레시피는 1단계에서 받는 원본 DESIGN.md에 있습니다.

적용 프롬프트 세 가지 상황
1적용새 화면을 이 디자인 언어로 만든다
@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

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

## 규칙

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

## 순서

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

바로 코드부터 쓰지 마.
2전환이미 만든 화면을 이 언어로 갈아끼운다
@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Spotify 계열로 교체한다.

## 대상

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

## 순서

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

## 바꾸지 말 것

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

시각 토큰만 바꾼다.
3점검지켜졌는지 검사한다
@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

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

## 형식

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

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

GitHub

녹색 확정 버튼과 파란 링크. 회색 톤이 촘촘하게 나뉘고 테두리가 항상 보인다. 정보 밀도가 높다.

1
원본에서 DESIGN.md 받기

shadcn.io/design에서 Download DESIGN.md 또는 Copy markdown을 누릅니다. 색·타이포·간격·컴포넌트 레시피가 한 파일에 들어 있습니다.

shadcn.io/design 열기 →
2
프로젝트 루트에 저장

파일 이름을 DESIGN.md로 해서 프로젝트 맨 위에 둡니다. 에이전트가 @DESIGN.md로 참조합니다.

3
아래 프롬프트를 붙여넣기

상황에 맞는 것을 골라 복사해 Claude Code · Cursor · Copilot에 붙여넣습니다. 괄호 안은 자기 화면 이름으로 바꿉니다.

느낌 미리보기
Open
폼 제출 중복 요청 차단
#241 · haneol이 main에 병합 요청 · 2시간 전
+128−34 3개 파일
모든 검사 통과 · 3개 성공
리뷰 승인됨 · 1명
공통 컴포넌트
신규대기보관

이 미리보기는 브랜드 성격을 잡아본 스케치입니다. 정확한 토큰과 33종 안팎의 컴포넌트 레시피는 1단계에서 받는 원본 DESIGN.md에 있습니다.

적용 프롬프트 세 가지 상황
1적용새 화면을 이 디자인 언어로 만든다
@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

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

## 규칙

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

## 순서

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

바로 코드부터 쓰지 마.
2전환이미 만든 화면을 이 언어로 갈아끼운다
@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 GitHub 계열로 교체한다.

## 대상

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

## 순서

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

## 바꾸지 말 것

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

시각 토큰만 바꾼다.
3점검지켜졌는지 검사한다
@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

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

## 형식

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

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

Vercel

검정 배경에 흰 버튼. 색을 거의 쓰지 않고 대비로만 위계를 만든다. 자간이 좁다.

1
원본에서 DESIGN.md 받기

shadcn.io/design에서 Download DESIGN.md 또는 Copy markdown을 누릅니다. 색·타이포·간격·컴포넌트 레시피가 한 파일에 들어 있습니다.

shadcn.io/design 열기 →
2
프로젝트 루트에 저장

파일 이름을 DESIGN.md로 해서 프로젝트 맨 위에 둡니다. 에이전트가 @DESIGN.md로 참조합니다.

3
아래 프롬프트를 붙여넣기

상황에 맞는 것을 골라 복사해 Claude Code · Cursor · Copilot에 붙여넣습니다. 괄호 안은 자기 화면 이름으로 바꿉니다.

느낌 미리보기
cosmos-guide.com
Production
상태Ready
커밋d17a8a5
빌드18초
지역Global · 300+ 엣지
공통 컴포넌트
신규대기보관

이 미리보기는 브랜드 성격을 잡아본 스케치입니다. 정확한 토큰과 33종 안팎의 컴포넌트 레시피는 1단계에서 받는 원본 DESIGN.md에 있습니다.

적용 프롬프트 세 가지 상황
1적용새 화면을 이 디자인 언어로 만든다
@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

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

## 규칙

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

## 순서

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

바로 코드부터 쓰지 마.
2전환이미 만든 화면을 이 언어로 갈아끼운다
@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Vercel 계열로 교체한다.

## 대상

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

## 순서

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

## 바꾸지 말 것

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

시각 토큰만 바꾼다.
3점검지켜졌는지 검사한다
@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

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

## 형식

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

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

Supabase

짙은 회색 다크에 민트 그린. 개발자 문서 톤이라 코드 블록이 자주 등장한다.

1
원본에서 DESIGN.md 받기

shadcn.io/design에서 Download DESIGN.md 또는 Copy markdown을 누릅니다. 색·타이포·간격·컴포넌트 레시피가 한 파일에 들어 있습니다.

shadcn.io/design 열기 →
2
프로젝트 루트에 저장

파일 이름을 DESIGN.md로 해서 프로젝트 맨 위에 둡니다. 에이전트가 @DESIGN.md로 참조합니다.

3
아래 프롬프트를 붙여넣기

상황에 맞는 것을 골라 복사해 Claude Code · Cursor · Copilot에 붙여넣습니다. 괄호 안은 자기 화면 이름으로 바꿉니다.

느낌 미리보기
select * from bookings limit 3;
idregionpeoplestatus
1강남2confirmed
2홍대4pending
3종로2confirmed
3 rows · 12ms
공통 컴포넌트
신규대기보관

이 미리보기는 브랜드 성격을 잡아본 스케치입니다. 정확한 토큰과 33종 안팎의 컴포넌트 레시피는 1단계에서 받는 원본 DESIGN.md에 있습니다.

적용 프롬프트 세 가지 상황
1적용새 화면을 이 디자인 언어로 만든다
@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

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

## 규칙

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

## 순서

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

바로 코드부터 쓰지 마.
2전환이미 만든 화면을 이 언어로 갈아끼운다
@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Supabase 계열로 교체한다.

## 대상

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

## 순서

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

## 바꾸지 말 것

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

시각 토큰만 바꾼다.
3점검지켜졌는지 검사한다
@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

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

## 형식

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

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

Apple

회색 시스템 배경 위에 흰 카드. 라운드가 크고 파란색이 유일한 조작 신호. 자간이 촘촘하다.

1
원본에서 DESIGN.md 받기

shadcn.io/design에서 Download DESIGN.md 또는 Copy markdown을 누릅니다. 색·타이포·간격·컴포넌트 레시피가 한 파일에 들어 있습니다.

shadcn.io/design 열기 →
2
프로젝트 루트에 저장

파일 이름을 DESIGN.md로 해서 프로젝트 맨 위에 둡니다. 에이전트가 @DESIGN.md로 참조합니다.

3
아래 프롬프트를 붙여넣기

상황에 맞는 것을 골라 복사해 Claude Code · Cursor · Copilot에 붙여넣습니다. 괄호 안은 자기 화면 이름으로 바꿉니다.

느낌 미리보기
알림
푸시 알림
이메일 요약
야간 방해 금지
화면
텍스트 크기보통 ›
다크 모드시스템 ›
공통 컴포넌트
신규대기보관

이 미리보기는 브랜드 성격을 잡아본 스케치입니다. 정확한 토큰과 33종 안팎의 컴포넌트 레시피는 1단계에서 받는 원본 DESIGN.md에 있습니다.

적용 프롬프트 세 가지 상황
1적용새 화면을 이 디자인 언어로 만든다
@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

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

## 규칙

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

## 순서

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

바로 코드부터 쓰지 마.
2전환이미 만든 화면을 이 언어로 갈아끼운다
@DESIGN.md 를 기준으로 아래 화면의 시각 언어를 Apple 계열로 교체한다.

## 대상

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

## 순서

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

## 바꾸지 말 것

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

시각 토큰만 바꾼다.
3점검지켜졌는지 검사한다
@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

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

## 형식

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

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

Material 3

보라 계열 토널 팔레트. 라운드가 매우 크고 버튼은 알약에 가깝다. 상태 레이어가 있다.

1
원본에서 DESIGN.md 받기

shadcn 테마 레지스트리에서 Download DESIGN.md 또는 Copy markdown을 누릅니다. 색·타이포·간격·컴포넌트 레시피가 한 파일에 들어 있습니다.

shadcn 테마 레지스트리 열기 →
2
프로젝트 루트에 저장

파일 이름을 DESIGN.md로 해서 프로젝트 맨 위에 둡니다. 에이전트가 @DESIGN.md로 참조합니다.

3
아래 프롬프트를 붙여넣기

상황에 맞는 것을 골라 복사해 Claude Code · Cursor · Copilot에 붙여넣습니다. 괄호 안은 자기 화면 이름으로 바꿉니다.

느낌 미리보기
전체진행완료보관
이번 주 작업
4건 중 3건 완료
디자인 리뷰
오늘 15:00
배포 점검
내일
공통 컴포넌트
신규대기보관

이 미리보기는 브랜드 성격을 잡아본 스케치입니다. 정확한 토큰과 33종 안팎의 컴포넌트 레시피는 1단계에서 받는 원본 DESIGN.md에 있습니다.

적용 프롬프트 세 가지 상황
1적용새 화면을 이 디자인 언어로 만든다
@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

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

## 규칙

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

## 순서

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

바로 코드부터 쓰지 마.
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 호출

시각 토큰만 바꾼다.
3점검지켜졌는지 검사한다
@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

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

## 형식

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

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

Neo Brutalism

검정 3px 테두리와 오프셋 그림자. 원색을 그대로 쓰고 라운드는 0. 눌리면 그림자가 사라진다.

1
원본에서 DESIGN.md 받기

shadcn 테마 레지스트리에서 Download DESIGN.md 또는 Copy markdown을 누릅니다. 색·타이포·간격·컴포넌트 레시피가 한 파일에 들어 있습니다.

shadcn 테마 레지스트리 열기 →
2
프로젝트 루트에 저장

파일 이름을 DESIGN.md로 해서 프로젝트 맨 위에 둡니다. 에이전트가 @DESIGN.md로 참조합니다.

3
아래 프롬프트를 붙여넣기

상황에 맞는 것을 골라 복사해 Claude Code · Cursor · Copilot에 붙여넣습니다. 괄호 안은 자기 화면 이름으로 바꿉니다.

느낌 미리보기
새 프로젝트
무료 체험
0원/ 14일
프로젝트 3개
팀원 2명
기본 지원
인기신규
공통 컴포넌트
신규대기보관

이 미리보기는 브랜드 성격을 잡아본 스케치입니다. 정확한 토큰과 33종 안팎의 컴포넌트 레시피는 1단계에서 받는 원본 DESIGN.md에 있습니다.

적용 프롬프트 세 가지 상황
1적용새 화면을 이 디자인 언어로 만든다
@DESIGN.md 를 이 프로젝트의 디자인 정본으로 삼는다.

## 만들 것

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

## 규칙

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

## 순서

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

바로 코드부터 쓰지 마.
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 호출

시각 토큰만 바꾼다.
3점검지켜졌는지 검사한다
@DESIGN.md 기준으로 지금 코드를 검사한다. 고치지는 말고 목록만 만들어줘.

## 찾을 것

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

## 형식

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

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

쇼핑/결제

물건을 보고 산다

내 폰의 앱 · 쿠팡 · 무신사 · 배민 · 올리브영 · 마켓컬리

어울리는 디자인 언어 · Airbnb

상품 사진이 화면을 지배하고 UI는 물러선다. 카드 라운드가 크고 강조색은 가격과 CTA에만 쓴다.

목업 번호가 오른쪽 컴포넌트와 1:1
오늘의 추천장바구니34
전체무료배송세일신상3
코튼 오버셔츠
59,00032%39,900원2
1
워시드 데님
78,00018%63,900원
5

Airbnb 디자인 언어를 입힌 쇼핑/결제 화면입니다. 동그란 번호를 오른쪽 목록과 짝지어 보세요.

핵심 컴포넌트 5
1
상품 카드
사진 + 이름 + 가격을 한 덩어리로 묶는다. 그리드에서 반복되는 최소 단위
토큰 · 이미지 비율 고정, radius, 카드 간격
2
가격 블록
할인율 · 원가 취소선 · 판매가를 한 줄에 쌓는다. 화면에서 가장 굵은 숫자
토큰 · 강조색, 큰 타이포 굵기, 취소선 색
3
필터·정렬 바
조건을 좁힌다. 가로 스크롤 칩 또는 상단 고정 바
토큰 · 칩 radius, 선택 상태 배경
4
장바구니 버튼
담은 개수를 숫자 배지로 이고 다닌다. 헤더 우측 고정
토큰 · 배지 배경, 아이콘 크기
5
구매 CTA
하단에 고정되어 스크롤과 무관하게 항상 보인다
토큰 · primary 색, 버튼 높이, 고정 바 그림자
이 유형 만들기 프롬프트 컴포넌트 5개가 박힌 지시문
@DESIGN.md 를 디자인 정본으로 삼고, **쇼핑/결제** 유형의 화면을 만든다.

## 이 유형이 하는 일

물건을 보고 산다. 대표 서비스 = 쿠팡 · 무신사 · 배민 · 올리브영 · 마켓컬리

## 반드시 들어가는 컴포넌트 5개

1. **상품 카드** - 사진 + 이름 + 가격을 한 덩어리로 묶는다. 그리드에서 반복되는 최소 단위
2. **가격 블록** - 할인율 · 원가 취소선 · 판매가를 한 줄에 쌓는다. 화면에서 가장 굵은 숫자
3. **필터·정렬 바** - 조건을 좁힌다. 가로 스크롤 칩 또는 상단 고정 바
4. **장바구니 버튼** - 담은 개수를 숫자 배지로 이고 다닌다. 헤더 우측 고정
5. **구매 CTA** - 하단에 고정되어 스크롤과 무관하게 항상 보인다

다섯 개가 다 있어야 이 유형의 화면이다. 하나라도 빠지면 무엇이 빠졌는지 먼저 말해줘.

## 컴포넌트별로 DESIGN.md에서 찾아 쓸 토큰

- 상품 카드: 이미지 비율 고정, radius, 카드 간격
- 가격 블록: 강조색, 큰 타이포 굵기, 취소선 색
- 필터·정렬 바: 칩 radius, 선택 상태 배경
- 장바구니 버튼: 배지 배경, 아이콘 크기
- 구매 CTA: primary 색, 버튼 높이, 고정 바 그림자

## 규칙

- shadcn/ui 프리미티브를 그대로 쓰고 스타일은 DESIGN.md 토큰으로만 덮는다
- 위 5개 각각에 주석으로 번호를 남긴다 (`{/* 1. 상품 카드 */}` 형태). 설계서와 코드를 대조할 수 있게
- DESIGN.md에 없는 색·간격·radius를 만들지 않는다
- 모바일 우선. 폭 375px에서 먼저 성립해야 한다

## 순서

1. 컴포넌트 5개 각각에 어떤 shadcn 프리미티브와 어떤 토큰을 쓸지 표로 먼저 보여줘
2. 내가 확인하면 코드를 쓴다
유형 02

예약/캘린더

보고 예약한다

내 폰의 앱 · 야놀자 · 여기어때 · 아고다 · 네이버캘린더

어울리는 디자인 언어 · Apple

날짜와 인원 같은 값을 고르는 화면이라 시스템 컨트롤 톤이 맞는다. 큰 라운드와 회색 배경 위 흰 카드.

목업 번호가 오른쪽 컴포넌트와 1:1
서울 · 2박
8월
월화수목금토일
11121314151617
1
인원
−2+
2
이 가격 객실 2개 남음3
2박 · 성인 2256,000
세금·수수료25,600
총액281,600원
4
5

Apple 디자인 언어를 입힌 예약/캘린더 화면입니다. 동그란 번호를 오른쪽 목록과 짝지어 보세요.

핵심 컴포넌트 5
1
날짜 선택기
체크인·체크아웃을 범위로 고른다. 불가일은 흐리게
토큰 · 선택 범위 배경, 비활성 색
2
인원·옵션 스테퍼
성인 · 아동 · 객실 수를 +/- 로 조절한다
토큰 · 버튼 radius, 비활성 상태
3
가용성 표시
남은 객실 · 품절 · 마감 임박을 알린다. 결정 압력을 만드는 자리
토큰 · 경고색, 배지 스타일
4
요약 카드
기간 · 인원 · 총액을 접어서 보여준다. 스크롤해도 따라온다
토큰 · 카드 배경, 구분선, 합계 타이포
5
예약 확정 CTA
돌이키기 어려운 행동이라 한 번 더 확인을 받는다
토큰 · primary 색, 확인 다이얼로그
이 유형 만들기 프롬프트 컴포넌트 5개가 박힌 지시문
@DESIGN.md 를 디자인 정본으로 삼고, **예약/캘린더** 유형의 화면을 만든다.

## 이 유형이 하는 일

보고 예약한다. 대표 서비스 = 야놀자 · 여기어때 · 아고다 · 네이버캘린더

## 반드시 들어가는 컴포넌트 5개

1. **날짜 선택기** - 체크인·체크아웃을 범위로 고른다. 불가일은 흐리게
2. **인원·옵션 스테퍼** - 성인 · 아동 · 객실 수를 +/- 로 조절한다
3. **가용성 표시** - 남은 객실 · 품절 · 마감 임박을 알린다. 결정 압력을 만드는 자리
4. **요약 카드** - 기간 · 인원 · 총액을 접어서 보여준다. 스크롤해도 따라온다
5. **예약 확정 CTA** - 돌이키기 어려운 행동이라 한 번 더 확인을 받는다

다섯 개가 다 있어야 이 유형의 화면이다. 하나라도 빠지면 무엇이 빠졌는지 먼저 말해줘.

## 컴포넌트별로 DESIGN.md에서 찾아 쓸 토큰

- 날짜 선택기: 선택 범위 배경, 비활성 색
- 인원·옵션 스테퍼: 버튼 radius, 비활성 상태
- 가용성 표시: 경고색, 배지 스타일
- 요약 카드: 카드 배경, 구분선, 합계 타이포
- 예약 확정 CTA: primary 색, 확인 다이얼로그

## 규칙

- shadcn/ui 프리미티브를 그대로 쓰고 스타일은 DESIGN.md 토큰으로만 덮는다
- 위 5개 각각에 주석으로 번호를 남긴다 (`{/* 1. 상품 카드 */}` 형태). 설계서와 코드를 대조할 수 있게
- DESIGN.md에 없는 색·간격·radius를 만들지 않는다
- 모바일 우선. 폭 375px에서 먼저 성립해야 한다

## 순서

1. 컴포넌트 5개 각각에 어떤 shadcn 프리미티브와 어떤 토큰을 쓸지 표로 먼저 보여줘
2. 내가 확인하면 코드를 쓴다
유형 03

마켓/P2P

사람끼리 사고판다

내 폰의 앱 · 당근마켓 · 번개장터 · 중고나라

어울리는 디자인 언어 · GitHub

신뢰 신호와 상태 배지가 화면의 중심이다. 정보 밀도가 높고 테두리가 항상 보인다.

목업 번호가 오른쪽 컴포넌트와 1:1
동네주민
매너온도 38.4° · 거래 12회
1
판매중2
아이패드 에어 5세대
광진구 화양동 · 1.2km3
420,000원
380,000
4

GitHub 디자인 언어를 입힌 마켓/P2P 화면입니다. 동그란 번호를 오른쪽 목록과 짝지어 보세요.

핵심 컴포넌트 5
1
판매자 프로필
신뢰도를 숫자로 보여준다. 매너온도 · 거래 횟수 · 응답률
토큰 · 아바타 크기, 지표 색 단계
2
거래 상태 배지
판매중 · 예약중 · 거래완료. 상태가 바뀌면 화면 전체 톤이 바뀐다
토큰 · 상태별 배경색 3종
3
위치·거리
동네 이름과 거리를 붙인다. 이 유형에만 있는 축
토큰 · muted 색, 아이콘 정렬
4
가격 제안 입력
정가가 아니라 협상이 전제다. 제안 금액을 넣는다
토큰 · 입력 높이, 숫자 정렬
5
채팅 진입
거래는 대화로 시작된다. 하단 고정 바에 채팅 버튼
토큰 · 보조 버튼, 고정 바 높이
이 유형 만들기 프롬프트 컴포넌트 5개가 박힌 지시문
@DESIGN.md 를 디자인 정본으로 삼고, **마켓/P2P** 유형의 화면을 만든다.

## 이 유형이 하는 일

사람끼리 사고판다. 대표 서비스 = 당근마켓 · 번개장터 · 중고나라

## 반드시 들어가는 컴포넌트 5개

1. **판매자 프로필** - 신뢰도를 숫자로 보여준다. 매너온도 · 거래 횟수 · 응답률
2. **거래 상태 배지** - 판매중 · 예약중 · 거래완료. 상태가 바뀌면 화면 전체 톤이 바뀐다
3. **위치·거리** - 동네 이름과 거리를 붙인다. 이 유형에만 있는 축
4. **가격 제안 입력** - 정가가 아니라 협상이 전제다. 제안 금액을 넣는다
5. **채팅 진입** - 거래는 대화로 시작된다. 하단 고정 바에 채팅 버튼

다섯 개가 다 있어야 이 유형의 화면이다. 하나라도 빠지면 무엇이 빠졌는지 먼저 말해줘.

## 컴포넌트별로 DESIGN.md에서 찾아 쓸 토큰

- 판매자 프로필: 아바타 크기, 지표 색 단계
- 거래 상태 배지: 상태별 배경색 3종
- 위치·거리: muted 색, 아이콘 정렬
- 가격 제안 입력: 입력 높이, 숫자 정렬
- 채팅 진입: 보조 버튼, 고정 바 높이

## 규칙

- shadcn/ui 프리미티브를 그대로 쓰고 스타일은 DESIGN.md 토큰으로만 덮는다
- 위 5개 각각에 주석으로 번호를 남긴다 (`{/* 1. 상품 카드 */}` 형태). 설계서와 코드를 대조할 수 있게
- DESIGN.md에 없는 색·간격·radius를 만들지 않는다
- 모바일 우선. 폭 375px에서 먼저 성립해야 한다

## 순서

1. 컴포넌트 5개 각각에 어떤 shadcn 프리미티브와 어떤 토큰을 쓸지 표로 먼저 보여줘
2. 내가 확인하면 코드를 쓴다
유형 04

위치/배차

위치 기반으로 보낸다

내 폰의 앱 · 카카오T · 따릉이 · 타다 · 우버 · 배달의민족

어울리는 디자인 언어 · Uber

지도가 배경 전체를 덮고 UI는 그 위에 얹힌다. 검정과 흰색 대비, 각진 모서리, 큰 단일 CTA.

목업 번호가 오른쪽 컴포넌트와 1:1
지도1
멀티캠퍼스 세종대
도착지 입력
2
일반3분12,400원3
블랙7분21,000원
도착 예정 09:42 · 예상 12,400원4
5

Uber 디자인 언어를 입힌 위치/배차 화면입니다. 동그란 번호를 오른쪽 목록과 짝지어 보세요.

핵심 컴포넌트 5
1
지도 뷰
화면 대부분을 차지한다. 마커와 경로가 그 위에 올라간다
토큰 · 오버레이 그림자, 시야 영역
2
출발·도착 입력
두 줄이 세로로 연결된다. 점과 선으로 경로임을 표시
토큰 · 연결선 색, 활성 점
3
옵션 선택 리스트
차량 등급 또는 배달 방식. 선택된 항목이 테두리로 도드라진다
토큰 · 선택 테두리 굵기, 행 높이
4
ETA·요금 표시
도착 시간과 예상 금액. 결정에 필요한 유일한 숫자
토큰 · 숫자 타이포 굵기
5
호출 CTA + 진행 상태
누르면 버튼이 상태 표시로 바뀐다. 배차중 → 도착 → 탑승
토큰 · primary 색, 상태 전환 애니메이션
이 유형 만들기 프롬프트 컴포넌트 5개가 박힌 지시문
@DESIGN.md 를 디자인 정본으로 삼고, **위치/배차** 유형의 화면을 만든다.

## 이 유형이 하는 일

위치 기반으로 보낸다. 대표 서비스 = 카카오T · 따릉이 · 타다 · 우버 · 배달의민족

## 반드시 들어가는 컴포넌트 5개

1. **지도 뷰** - 화면 대부분을 차지한다. 마커와 경로가 그 위에 올라간다
2. **출발·도착 입력** - 두 줄이 세로로 연결된다. 점과 선으로 경로임을 표시
3. **옵션 선택 리스트** - 차량 등급 또는 배달 방식. 선택된 항목이 테두리로 도드라진다
4. **ETA·요금 표시** - 도착 시간과 예상 금액. 결정에 필요한 유일한 숫자
5. **호출 CTA + 진행 상태** - 누르면 버튼이 상태 표시로 바뀐다. 배차중 → 도착 → 탑승

다섯 개가 다 있어야 이 유형의 화면이다. 하나라도 빠지면 무엇이 빠졌는지 먼저 말해줘.

## 컴포넌트별로 DESIGN.md에서 찾아 쓸 토큰

- 지도 뷰: 오버레이 그림자, 시야 영역
- 출발·도착 입력: 연결선 색, 활성 점
- 옵션 선택 리스트: 선택 테두리 굵기, 행 높이
- ETA·요금 표시: 숫자 타이포 굵기
- 호출 CTA + 진행 상태: primary 색, 상태 전환 애니메이션

## 규칙

- shadcn/ui 프리미티브를 그대로 쓰고 스타일은 DESIGN.md 토큰으로만 덮는다
- 위 5개 각각에 주석으로 번호를 남긴다 (`{/* 1. 상품 카드 */}` 형태). 설계서와 코드를 대조할 수 있게
- DESIGN.md에 없는 색·간격·radius를 만들지 않는다
- 모바일 우선. 폭 375px에서 먼저 성립해야 한다

## 순서

1. 컴포넌트 5개 각각에 어떤 shadcn 프리미티브와 어떤 토큰을 쓸지 표로 먼저 보여줘
2. 내가 확인하면 코드를 쓴다
유형 05

피드/소비

콘텐츠를 본다/듣는다

내 폰의 앱 · 넷플릭스 · 멜론 · 유튜브 뮤직 · 스포티파이

어울리는 디자인 언어 · Spotify

어두운 배경에서 커버 아트가 빛난다. 알약 버튼과 형광 강조색 하나.

목업 번호가 오른쪽 컴포넌트와 1:1
오늘의 추천
깊은 밤의 재즈
42곡 · 2시간 38분
1
이어 듣기4
2
Weightless
Marconi Union
♥5

Spotify 디자인 언어를 입힌 피드/소비 화면입니다. 동그란 번호를 오른쪽 목록과 짝지어 보세요.

핵심 컴포넌트 5
1
히어로 배너
오늘 밀고 싶은 것 하나를 화면 가득 띄운다
토큰 · 그라데이션 오버레이, 큰 타이포
2
가로 캐러셀
장르·추천 묶음을 옆으로 넘긴다. 세로 스크롤과 직교
토큰 · 카드 폭, 간격, 잘림 처리
3
재생 컨트롤
재생·이전·다음. 하단에 미니 플레이어로 상주
토큰 · 원형 버튼, 알약 radius
4
진행 바
어디까지 봤는지. 이어보기의 근거
토큰 · 바 높이, primary 색
5
저장·찜 토글
내 목록에 넣는다. 상태가 즉시 뒤집힌다
토큰 · 토글 on/off 색
이 유형 만들기 프롬프트 컴포넌트 5개가 박힌 지시문
@DESIGN.md 를 디자인 정본으로 삼고, **피드/소비** 유형의 화면을 만든다.

## 이 유형이 하는 일

콘텐츠를 본다/듣는다. 대표 서비스 = 넷플릭스 · 멜론 · 유튜브 뮤직 · 스포티파이

## 반드시 들어가는 컴포넌트 5개

1. **히어로 배너** - 오늘 밀고 싶은 것 하나를 화면 가득 띄운다
2. **가로 캐러셀** - 장르·추천 묶음을 옆으로 넘긴다. 세로 스크롤과 직교
3. **재생 컨트롤** - 재생·이전·다음. 하단에 미니 플레이어로 상주
4. **진행 바** - 어디까지 봤는지. 이어보기의 근거
5. **저장·찜 토글** - 내 목록에 넣는다. 상태가 즉시 뒤집힌다

다섯 개가 다 있어야 이 유형의 화면이다. 하나라도 빠지면 무엇이 빠졌는지 먼저 말해줘.

## 컴포넌트별로 DESIGN.md에서 찾아 쓸 토큰

- 히어로 배너: 그라데이션 오버레이, 큰 타이포
- 가로 캐러셀: 카드 폭, 간격, 잘림 처리
- 재생 컨트롤: 원형 버튼, 알약 radius
- 진행 바: 바 높이, primary 색
- 저장·찜 토글: 토글 on/off 색

## 규칙

- shadcn/ui 프리미티브를 그대로 쓰고 스타일은 DESIGN.md 토큰으로만 덮는다
- 위 5개 각각에 주석으로 번호를 남긴다 (`{/* 1. 상품 카드 */}` 형태). 설계서와 코드를 대조할 수 있게
- DESIGN.md에 없는 색·간격·radius를 만들지 않는다
- 모바일 우선. 폭 375px에서 먼저 성립해야 한다

## 순서

1. 컴포넌트 5개 각각에 어떤 shadcn 프리미티브와 어떤 토큰을 쓸지 표로 먼저 보여줘
2. 내가 확인하면 코드를 쓴다
유형 06

피드/소셜

콘텐츠를 만들고 공유한다

내 폰의 앱 · 유튜브 · 인스타그램 · 틱톡

어울리는 디자인 언어 · Material 3

업로드 진입(FAB)과 칩 필터가 표준화된 유형이다. 큰 라운드와 상태 레이어.

목업 번호가 오른쪽 컴포넌트와 1:1
128게시물 2.4천팔로워
5
haneol· 2시간
♥ 342💬 28↗ 공유저장2
1
designer_k
3

Material 3 디자인 언어를 입힌 피드/소셜 화면입니다. 동그란 번호를 오른쪽 목록과 짝지어 보세요.

핵심 컴포넌트 5
1
게시물 카드
작성자 · 본문 · 미디어를 한 덩어리로. 피드의 반복 단위
토큰 · 아바타, 카드 여백, 미디어 비율
2
반응 액션 바
좋아요 · 댓글 · 공유 · 저장. 누르면 즉시 카운트가 바뀐다
토큰 · 아이콘 크기, 활성 색
3
무한 스크롤 피드
끝이 없다. 로딩 자리를 미리 잡아 화면이 튀지 않게 한다
토큰 · 스켈레톤, 카드 간격
4
업로드 진입
만드는 행동이 보는 행동만큼 중요하다. FAB 또는 탭바 중앙 +
토큰 · FAB 크기, 그림자, radius
5
프로필 헤더
팔로워 수와 게시물 그리드. 내 정체성 표면
토큰 · 통계 타이포, 그리드 간격
이 유형 만들기 프롬프트 컴포넌트 5개가 박힌 지시문
@DESIGN.md 를 디자인 정본으로 삼고, **피드/소셜** 유형의 화면을 만든다.

## 이 유형이 하는 일

콘텐츠를 만들고 공유한다. 대표 서비스 = 유튜브 · 인스타그램 · 틱톡

## 반드시 들어가는 컴포넌트 5개

1. **게시물 카드** - 작성자 · 본문 · 미디어를 한 덩어리로. 피드의 반복 단위
2. **반응 액션 바** - 좋아요 · 댓글 · 공유 · 저장. 누르면 즉시 카운트가 바뀐다
3. **무한 스크롤 피드** - 끝이 없다. 로딩 자리를 미리 잡아 화면이 튀지 않게 한다
4. **업로드 진입** - 만드는 행동이 보는 행동만큼 중요하다. FAB 또는 탭바 중앙 +
5. **프로필 헤더** - 팔로워 수와 게시물 그리드. 내 정체성 표면

다섯 개가 다 있어야 이 유형의 화면이다. 하나라도 빠지면 무엇이 빠졌는지 먼저 말해줘.

## 컴포넌트별로 DESIGN.md에서 찾아 쓸 토큰

- 게시물 카드: 아바타, 카드 여백, 미디어 비율
- 반응 액션 바: 아이콘 크기, 활성 색
- 무한 스크롤 피드: 스켈레톤, 카드 간격
- 업로드 진입: FAB 크기, 그림자, radius
- 프로필 헤더: 통계 타이포, 그리드 간격

## 규칙

- shadcn/ui 프리미티브를 그대로 쓰고 스타일은 DESIGN.md 토큰으로만 덮는다
- 위 5개 각각에 주석으로 번호를 남긴다 (`{/* 1. 상품 카드 */}` 형태). 설계서와 코드를 대조할 수 있게
- DESIGN.md에 없는 색·간격·radius를 만들지 않는다
- 모바일 우선. 폭 375px에서 먼저 성립해야 한다

## 순서

1. 컴포넌트 5개 각각에 어떤 shadcn 프리미티브와 어떤 토큰을 쓸지 표로 먼저 보여줘
2. 내가 확인하면 코드를 쓴다
유형 07

메시지

대화한다

내 폰의 앱 · 카카오톡 · 라인 · 슬랙

어울리는 디자인 언어 · Linear

목록 밀도가 높고 읽음·미읽음 상태가 촘촘히 갈린다. 조밀한 리스트와 작은 타이포.

목업 번호가 오른쪽 컴포넌트와 1:1
디자인팀14:22
시안 확인 부탁드려요
31
김한얼어제
네 확인했습니다
시안 확인 부탁드려요
지금 볼게요읽음 14:234
2
메시지 입력＋3
이 방 알림5

Linear 디자인 언어를 입힌 메시지 화면입니다. 동그란 번호를 오른쪽 목록과 짝지어 보세요.

핵심 컴포넌트 5
1
대화 목록
마지막 메시지 미리보기 + 시각 + 미읽음 배지
토큰 · 행 높이, 배지 색, 미읽음 굵기
2
말풍선
보낸 것과 받은 것이 좌우로 갈린다. 연속 메시지는 묶는다
토큰 · radius 비대칭, 두 배경색
3
입력창 + 첨부
하단 고정. 길어지면 위로 자란다
토큰 · 입력 최소·최대 높이
4
읽음·시각 표시
누가 읽었는지, 언제인지. 작지만 이 유형의 핵심 신호
토큰 · muted 색, 아주 작은 타이포
5
알림 설정
방마다 켜고 끈다. 이 유형에만 있는 방별 제어
토큰 · 토글, 아이콘 상태
이 유형 만들기 프롬프트 컴포넌트 5개가 박힌 지시문
@DESIGN.md 를 디자인 정본으로 삼고, **메시지** 유형의 화면을 만든다.

## 이 유형이 하는 일

대화한다. 대표 서비스 = 카카오톡 · 라인 · 슬랙

## 반드시 들어가는 컴포넌트 5개

1. **대화 목록** - 마지막 메시지 미리보기 + 시각 + 미읽음 배지
2. **말풍선** - 보낸 것과 받은 것이 좌우로 갈린다. 연속 메시지는 묶는다
3. **입력창 + 첨부** - 하단 고정. 길어지면 위로 자란다
4. **읽음·시각 표시** - 누가 읽었는지, 언제인지. 작지만 이 유형의 핵심 신호
5. **알림 설정** - 방마다 켜고 끈다. 이 유형에만 있는 방별 제어

다섯 개가 다 있어야 이 유형의 화면이다. 하나라도 빠지면 무엇이 빠졌는지 먼저 말해줘.

## 컴포넌트별로 DESIGN.md에서 찾아 쓸 토큰

- 대화 목록: 행 높이, 배지 색, 미읽음 굵기
- 말풍선: radius 비대칭, 두 배경색
- 입력창 + 첨부: 입력 최소·최대 높이
- 읽음·시각 표시: muted 색, 아주 작은 타이포
- 알림 설정: 토글, 아이콘 상태

## 규칙

- shadcn/ui 프리미티브를 그대로 쓰고 스타일은 DESIGN.md 토큰으로만 덮는다
- 위 5개 각각에 주석으로 번호를 남긴다 (`{/* 1. 상품 카드 */}` 형태). 설계서와 코드를 대조할 수 있게
- DESIGN.md에 없는 색·간격·radius를 만들지 않는다
- 모바일 우선. 폭 375px에서 먼저 성립해야 한다

## 순서

1. 컴포넌트 5개 각각에 어떤 shadcn 프리미티브와 어떤 토큰을 쓸지 표로 먼저 보여줘
2. 내가 확인하면 코드를 쓴다
유형 08

협업 도구

같이 일한다

내 폰의 앱 · 노션 · 피그마 · 구글독스

어울리는 디자인 언어 · Notion

장식이 거의 없고 텍스트가 주인공이다. 작은 라운드, 따뜻한 회갈색 본문.

목업 번호가 오른쪽 컴포넌트와 1:1
회고1
8월 4주
8월 3주
스펙
3
8월 4주 회고
배포 전 체크리스트를 위키로 옮겼다.2
스테이징 QA 통과
릴리스 노트 초안
이 항목 담당자 확인 필요4
링크가 있는 모든 사용자 · 보기 가능5

Notion 디자인 언어를 입힌 협업 도구 화면입니다. 동그란 번호를 오른쪽 목록과 짝지어 보세요.

핵심 컴포넌트 5
1
문서 트리
좌측 사이드바에 계층으로 쌓인다. 접고 펴진다
토큰 · 들여쓰기 단위, 활성 배경
2
블록 에디터
문단 · 목록 · 체크박스가 같은 블록 문법으로 바뀐다
토큰 · 블록 간격, 슬래시 메뉴
3
협업자 표시
지금 누가 보고 있는지. 아바타 또는 커서
토큰 · 아바타 겹침 간격, 커서 색
4
코멘트 스레드
본문 옆에 붙는 대화. 해결하면 접힌다
토큰 · 하이라이트 색, 스레드 카드
5
공유 권한
누가 볼 수 있고 고칠 수 있는지. 실수하면 사고가 난다
토큰 · 드롭다운, 경고 문구
이 유형 만들기 프롬프트 컴포넌트 5개가 박힌 지시문
@DESIGN.md 를 디자인 정본으로 삼고, **협업 도구** 유형의 화면을 만든다.

## 이 유형이 하는 일

같이 일한다. 대표 서비스 = 노션 · 피그마 · 구글독스

## 반드시 들어가는 컴포넌트 5개

1. **문서 트리** - 좌측 사이드바에 계층으로 쌓인다. 접고 펴진다
2. **블록 에디터** - 문단 · 목록 · 체크박스가 같은 블록 문법으로 바뀐다
3. **협업자 표시** - 지금 누가 보고 있는지. 아바타 또는 커서
4. **코멘트 스레드** - 본문 옆에 붙는 대화. 해결하면 접힌다
5. **공유 권한** - 누가 볼 수 있고 고칠 수 있는지. 실수하면 사고가 난다

다섯 개가 다 있어야 이 유형의 화면이다. 하나라도 빠지면 무엇이 빠졌는지 먼저 말해줘.

## 컴포넌트별로 DESIGN.md에서 찾아 쓸 토큰

- 문서 트리: 들여쓰기 단위, 활성 배경
- 블록 에디터: 블록 간격, 슬래시 메뉴
- 협업자 표시: 아바타 겹침 간격, 커서 색
- 코멘트 스레드: 하이라이트 색, 스레드 카드
- 공유 권한: 드롭다운, 경고 문구

## 규칙

- shadcn/ui 프리미티브를 그대로 쓰고 스타일은 DESIGN.md 토큰으로만 덮는다
- 위 5개 각각에 주석으로 번호를 남긴다 (`{/* 1. 상품 카드 */}` 형태). 설계서와 코드를 대조할 수 있게
- DESIGN.md에 없는 색·간격·radius를 만들지 않는다
- 모바일 우선. 폭 375px에서 먼저 성립해야 한다

## 순서

1. 컴포넌트 5개 각각에 어떤 shadcn 프리미티브와 어떤 토큰을 쓸지 표로 먼저 보여줘
2. 내가 확인하면 코드를 쓴다
유형 09

금융

돈을 관리한다

내 폰의 앱 · 신한은행 · 우리은행 · 미래에셋증권 · 토스

어울리는 디자인 언어 · Stripe

숫자가 화면의 주인공이고 오차가 허용되지 않는다. 정밀한 여백과 얕은 이중 그림자.

목업 번호가 오른쪽 컴포넌트와 1:1
주계좌
2,847,300원
1
8월 25일
스타벅스−5,800
급여+3,200,000
2
이체 금액
150,000원
3
생체 인증으로 확인4
5

Stripe 디자인 언어를 입힌 금융 화면입니다. 동그란 번호를 오른쪽 목록과 짝지어 보세요.

핵심 컴포넌트 5
1
잔액 카드
가장 큰 숫자. 계좌를 여러 개 가지면 가로로 넘긴다
토큰 · 큰 숫자 타이포, 카드 그림자
2
거래 내역 리스트
날짜별로 묶고 입금·출금을 색으로 가른다
토큰 · 두 방향 색, 날짜 구분선
3
금액 입력
숫자 키패드가 화면을 차지한다. 오타가 사고로 이어진다
토큰 · 큰 입력 타이포, 키패드 높이
4
인증 단계
비밀번호 · 생체 · OTP. 되돌릴 수 없는 행동 앞의 관문
토큰 · 단계 표시, 오류 상태
5
자산 요약 차트
기간별 추이. 숫자만으로는 안 보이는 것을 보여준다
토큰 · 차트 색, 축 라벨
이 유형 만들기 프롬프트 컴포넌트 5개가 박힌 지시문
@DESIGN.md 를 디자인 정본으로 삼고, **금융** 유형의 화면을 만든다.

## 이 유형이 하는 일

돈을 관리한다. 대표 서비스 = 신한은행 · 우리은행 · 미래에셋증권 · 토스

## 반드시 들어가는 컴포넌트 5개

1. **잔액 카드** - 가장 큰 숫자. 계좌를 여러 개 가지면 가로로 넘긴다
2. **거래 내역 리스트** - 날짜별로 묶고 입금·출금을 색으로 가른다
3. **금액 입력** - 숫자 키패드가 화면을 차지한다. 오타가 사고로 이어진다
4. **인증 단계** - 비밀번호 · 생체 · OTP. 되돌릴 수 없는 행동 앞의 관문
5. **자산 요약 차트** - 기간별 추이. 숫자만으로는 안 보이는 것을 보여준다

다섯 개가 다 있어야 이 유형의 화면이다. 하나라도 빠지면 무엇이 빠졌는지 먼저 말해줘.

## 컴포넌트별로 DESIGN.md에서 찾아 쓸 토큰

- 잔액 카드: 큰 숫자 타이포, 카드 그림자
- 거래 내역 리스트: 두 방향 색, 날짜 구분선
- 금액 입력: 큰 입력 타이포, 키패드 높이
- 인증 단계: 단계 표시, 오류 상태
- 자산 요약 차트: 차트 색, 축 라벨

## 규칙

- shadcn/ui 프리미티브를 그대로 쓰고 스타일은 DESIGN.md 토큰으로만 덮는다
- 위 5개 각각에 주석으로 번호를 남긴다 (`{/* 1. 상품 카드 */}` 형태). 설계서와 코드를 대조할 수 있게
- DESIGN.md에 없는 색·간격·radius를 만들지 않는다
- 모바일 우선. 폭 375px에서 먼저 성립해야 한다

## 순서

1. 컴포넌트 5개 각각에 어떤 shadcn 프리미티브와 어떤 토큰을 쓸지 표로 먼저 보여줘
2. 내가 확인하면 코드를 쓴다
유형 10

기록/모니터링

나를 기록한다

내 폰의 앱 · 건강앱 · 만보기 · 캐시워크 · 캘린더

어울리는 디자인 언어 · Supabase

지표와 시계열이 중심이라 데이터 도구 톤이 맞는다. 어두운 배경 위 단일 강조색.

목업 번호가 오른쪽 컴포넌트와 1:1
8,240걸음
1
2
3
12일 연속 기록 중4
이번 주 평균7,820
목표 달성5 / 7일
5

Supabase 디자인 언어를 입힌 기록/모니터링 화면입니다. 동그란 번호를 오른쪽 목록과 짝지어 보세요.

핵심 컴포넌트 5
1
목표 링·게이지
오늘 얼마나 했는지 한눈에. 이 유형의 얼굴
토큰 · 링 두께, 진행 색
2
시계열 차트
주·월 단위 추이. 어제와 오늘을 비교하게 만든다
토큰 · 막대 폭, 기준선
3
빠른 기록 입력
두 번 이상 누르게 하면 기록이 끊긴다. 최소 탭 수
토큰 · 입력 버튼 크기, 프리셋
4
연속 기록(스트릭)
며칠째인지. 끊기지 않게 만드는 장치
토큰 · 강조색, 숫자 타이포
5
요약 리포트
주간·월간으로 접어서 보여준다. 돌아보는 표면
토큰 · 카드 그리드, 지표 대비
이 유형 만들기 프롬프트 컴포넌트 5개가 박힌 지시문
@DESIGN.md 를 디자인 정본으로 삼고, **기록/모니터링** 유형의 화면을 만든다.

## 이 유형이 하는 일

나를 기록한다. 대표 서비스 = 건강앱 · 만보기 · 캐시워크 · 캘린더

## 반드시 들어가는 컴포넌트 5개

1. **목표 링·게이지** - 오늘 얼마나 했는지 한눈에. 이 유형의 얼굴
2. **시계열 차트** - 주·월 단위 추이. 어제와 오늘을 비교하게 만든다
3. **빠른 기록 입력** - 두 번 이상 누르게 하면 기록이 끊긴다. 최소 탭 수
4. **연속 기록(스트릭)** - 며칠째인지. 끊기지 않게 만드는 장치
5. **요약 리포트** - 주간·월간으로 접어서 보여준다. 돌아보는 표면

다섯 개가 다 있어야 이 유형의 화면이다. 하나라도 빠지면 무엇이 빠졌는지 먼저 말해줘.

## 컴포넌트별로 DESIGN.md에서 찾아 쓸 토큰

- 목표 링·게이지: 링 두께, 진행 색
- 시계열 차트: 막대 폭, 기준선
- 빠른 기록 입력: 입력 버튼 크기, 프리셋
- 연속 기록(스트릭): 강조색, 숫자 타이포
- 요약 리포트: 카드 그리드, 지표 대비

## 규칙

- shadcn/ui 프리미티브를 그대로 쓰고 스타일은 DESIGN.md 토큰으로만 덮는다
- 위 5개 각각에 주석으로 번호를 남긴다 (`{/* 1. 상품 카드 */}` 형태). 설계서와 코드를 대조할 수 있게
- DESIGN.md에 없는 색·간격·radius를 만들지 않는다
- 모바일 우선. 폭 375px에서 먼저 성립해야 한다

## 순서

1. 컴포넌트 5개 각각에 어떤 shadcn 프리미티브와 어떤 토큰을 쓸지 표로 먼저 보여줘
2. 내가 확인하면 코드를 쓴다