프롬프트 지갑

프로젝트 루트에 규칙 파일(AGENTS.md · CLAUDE.md · GEMINI.md 중 이 도구가 읽는 것)이 있어.
이게 우리 회사 디자인 규칙 문서야. 이 파일은 절대 고치지 마.
(폴더를 읽을 수 없는 대화형 도구라면, 이 메시지 맨 아래에 규칙 문서 전체를 붙여넣을게.)

지금부터 아래를 지켜줘.
1. 먼저 그 규칙 문서를 읽고, 규칙을 몇 조 읽었는지 나에게 말해줘.
   읽지 못했다면 읽지 못했다고 말해. 읽은 척하지 마.
2. https://ds.janytree.app/llms.txt 도 읽어줘. 우리가 쓸 수 있는
   토큰과 컴포넌트 목록이 전부 들어 있어.
3. 앞으로 색·크기·간격에 숫자나 hex(#305CDE 같은 것)를 직접 쓰지 마.
   반드시 var(--color-...) 같은 토큰 이름을 써.
4. 버튼·입력칸·표 같은 부품은 새로 만들지 말고 .jt-btn, .jt-input,
   .jt-table 같은 기존 클래스를 써.
5. jt-tokens.css 와 jt-utilities.css 파일은 수정 금지.
   모양을 바꿔야 하면 --jt-* 값만 덮어써.
6. 토큰에 없는 값이 필요하면 지어내지 말고 나에게 물어봐.

다 읽었으면 "규칙 확인 완료"라고 말하고, 규칙 중 가장 중요한 3개를
네 말로 요약해줘. 아직 코드는 만들지 마.

[대괄호] 부분은 지우고 본인 내용을 넣으세요.

이제 앱의 기본 뼈대를 만들어 줘.

- 앱 이름 : [앱 이름]
- 하는 일 : [한 줄 설명]
- 조판 : [Productive / Expressive]
- 본문 폭 : [720 / 1200 / 1440]
- 모바일 : [하단 탭바 있음 / PC만]
- 왼쪽 메뉴에 들어갈 것 : [메뉴1], [메뉴2], [메뉴3]

지킬 것:
- 화면 골격은 처음부터 그리지 말고
  https://ds.janytree.app/develop/patterns 의 패턴과
  https://ds.janytree.app/develop/templates 의 템플릿에서 골라서 써.
  어떤 것을 골랐는지 이유와 함께 알려줘.
- 클래스는 .jt-shell / .jt-sidebar / .jt-topbar / .jt-main 을 쓴다.
- 색·간격에 직접 값을 쓰지 않는다. 토큰 이름만 쓴다.
- 지금은 뼈대만. 개별 화면과 기능은 다음 단계에서 한다.

끝나면 (1) 만든 파일 목록 (2) 고른 패턴 이름과 이유를 알려줘.

[대괄호] 부분은 지우고 본인 내용을 넣으세요.

"[화면 이름]" 화면을 만들어 줘.

[이 화면이 하는 일]
[한두 줄 설명]

[화면에 들어가는 것]
1. [항목] — [예: 표, 검색창, 등록 버튼]
2. [항목] — [입력 방식]

지킬 것:
- 버튼·입력칸·표·배지는 새로 만들지 말고 .jt-* 기존 컴포넌트를 가져다 쓴다.
  목록: https://ds.janytree.app/components
- 색·크기·간격에 직접 값을 쓰지 않는다. 토큰만 쓴다.
- 빈 상태(데이터가 없을 때)와 로딩 상태도 함께 만든다.
- 지금은 화면(보이는 부분)만. 데이터 연결과 기능은 다음 단계.
  가짜 데이터를 5줄 정도 넣어서 화면이 어떻게 보이는지 볼 수 있게 해줘.

끝나면 어떤 .jt-* 컴포넌트를 썼는지 목록으로 알려줘.

[대괄호] 부분은 지우고 본인 내용을 넣으세요.

"[화면 이름]" 화면에 기능을 붙여 줘.

[이 화면에서 되어야 하는 일]
- [예: 목록을 데이터베이스에서 불러온다]
- [예: 검색창에 글자를 넣으면 이름으로 걸러진다]
- [예: 추가 버튼을 누르면 입력창이 뜨고, 저장하면 목록에 반영된다]
- [예: 삭제는 확인창을 거친 뒤에만 실행된다]

[주의할 것]
- 화면 모양은 바꾸지 말고, 기능만 붙여줘.
- 확인창은 브라우저 기본 팝업(alert, confirm) 대신 앱 안의 모달로 만들어줘.
- 저장에 실패했을 때 사용자에게 보여줄 문구도 만들어줘.
  문구 원칙: https://ds.janytree.app/develop/ux-writing
- 무엇이 잘못됐는지 나에게도 알려줘.

[대괄호] 부분은 지우고 본인 내용을 넣으세요.

새 화면 "[화면 이름]" 을 추가하려고 해.
시작하기 전에 반드시 아래 순서로 확인하고, 확인한 내용을 나에게 요약해줘.

1. 프로젝트 루트의 규칙 파일(AGENTS.md · CLAUDE.md · GEMINI.md)을 읽어서 디자인 규칙 확인
2. 이 프로젝트가 쓰는 토큰 목록 확인 (jt-tokens.css)
3. 이미 만들어 둔 공용 부품이 무엇인지 확인
4. 비슷한 기존 화면 하나를 열어서 구조와 여백 쓰는 법 확인

그다음 기존 화면들과 똑같은 결로 새 화면을 만들어 줘.

[이 화면이 하는 일]
[설명]

[화면에 들어가는 것]
1. [항목] — [입력 방식]
2. [항목] — [입력 방식]

새 버튼 모양이나 새 색을 만들지 마. 기존 것으로 안 되면 먼저 나에게
"이런 게 필요한데 새로 만들어도 될까요?" 라고 물어봐 줘.

[대괄호] 부분은 지우고 본인 내용을 넣으세요.

프로젝트 전체를 점검해 줘.

1. 색을 직접 박아 넣은 곳을 전부 찾아줘 (#305CDE 같은 hex, rgb())
2. 크기를 직접 박아 넣은 곳을 찾아줘 (p-[13px], text-[15px] 같은 대괄호 표기)
3. Tailwind 기본 색을 쓴 곳을 찾아줘 (bg-blue-*, text-gray-*, bg-slate-* 등)
4. style={{ }} 로 색이나 간격을 직접 지정한 곳을 찾아줘
5. .jt-* 공용 부품을 안 쓰고 따로 만든 버튼·입력칸이 있는지 찾아줘
6. jt-tokens.css 나 jt-utilities.css 를 수정한 흔적이 있는지 확인해줘

파일 이름과 줄 번호를 표로 보여 주고, 아직 고치지는 마.
무엇부터 고칠지는 내가 정할게.

이 프로젝트에 제니트리 디자인 시스템 v5.0을 입히려고 해.
먼저 지금 상태를 진단해줘. 아래 6가지를 확인해서 표로 정리하고,
각 항목마다 "쉬움 / 주의 / 위험" 으로 표시해줘. 아직 아무것도 고치지 마.

1. 본문 글자 크기가 몇 px 인가? (16px 이 아니면 주의)
2. Tailwind 를 쓰나? 쓴다면 v3 인가 v4 인가?
   (v4 라면 tailwind.config.js 가 무시된다는 점을 알려줘)
3. --color-text 같은 CSS 변수 이름을 이미 쓰고 있나? (있으면 이름 충돌 위험)
4. 전역 리셋(* { box-sizing: border-box })이 있나?
5. 다크 모드가 이미 있나? 있다면 어떤 방식인가?
6. 화면이 총 몇 개인가? 파일 목록으로 보여줘.

마지막에 "이 앱은 L1(색만) 부터 시작하면 됩니다" 처럼
어디서 시작할지 한 줄로 추천해줘.

[대괄호] 부분은 지우고 본인 내용을 넣으세요.

"[가장 단순한 화면 이름]" 이 화면 하나에서만 색을 우리 토큰으로 바꿔줘.

토큰 파일은 아래 두 줄을 head 에 넣어서 연결해줘.
<link rel="stylesheet" href="https://ds.janytree.app/v5/jt-tokens.css">
<link rel="stylesheet" href="https://ds.janytree.app/v5/jt-utilities.css">

바꿀 때 지킬 것:
- 구조, 클래스 이름, 레이아웃은 절대 건드리지 마. 색 값만 바꿔.
- 직접 박아 넣은 hex 색을 var(--color-*) 로만 교체해.
- 주버튼은 먹색(--color-primary)이야. 파랑으로 만들지 마.
  파랑(--color-link)은 "누를 수 있다"는 신호로만 써.
- 어느 토큰으로 바꿔야 할지 애매하면 임의로 정하지 말고 나에게 물어봐.
- 다 바꾼 뒤 "바꾸기 전 색 → 바꾼 후 토큰 이름 → 어디에 쓰였는지"를
  표로 보여줘.

다른 화면은 아직 건드리지 마.

방금 바꾼 것을 전부 되돌려줘. 바꾸기 직전 상태로 돌아가야 해.
되돌린 뒤 어떤 파일이 원래대로 돌아왔는지 알려줘.

[대괄호] 부분은 지우고 본인 내용을 넣으세요.

스티치 MCP에서 공통 뼈대(상단바, 왼쪽 메뉴, 본문 영역)를 읽어와서 구현해 줘.

중요 — 스티치가 준 코드를 그대로 붙이지 말고 반드시 아래를 정리한 뒤 넣어 줘.
- 임의 색(#305CDE 같은 hex)은 var(--color-*) 토큰으로 바꾼다.
- 임의 크기(p-[13px], text-[15px] 같은 대괄호 표기)는 토큰으로 바꾼다.
- Tailwind 기본 색(bg-blue-500, text-gray-600 등)은 뜻이 같은 우리 이름으로 바꾼다.
- 어느 이름으로 바꿔야 할지 애매하면 임의로 정하지 말고 먼저 나에게 물어봐.

끝나면 바꾼 것을 표로 보여 줘. (바꾸기 전 → 바꾼 후 → 이유)

지금 무엇을 하고 있는지, 어떤 파일을 고칠 계획인지
코딩을 모르는 사람이 이해할 수 있게 한국어로 설명해줘.
설명을 듣고 내가 진행 여부를 정할게.