lab/landing_page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
dev
landing_page/refer_landing_page/PROMPT.md
T

12 KiB
Raw Permalink Blame History

PROMPT.md — Claude Code에 전달한 프롬프트 기록

refer_landing_page/ 디렉터리를 만들 때 Claude Code에 보낸 프롬프트의 원문 + 의도 + 세션 메타 기록. 공부/재사용용.

0. 작업 요약

  • 대상: ~/PuKi/lab/landing_page/refer_landing_page/
  • 프레임워크: Next.js 14+ (App Router) + TypeScript + Tailwind CSS
  • 5개 라우트: /intro, /members, /publications, /lectures, /standardization
  • 컨텍스트: 경북대 IoT 표준 연구실 — MCM(메타버스 상호운용성) + QUIC 멀티에이전트 오케스트레이션
  • 최종 산출물: 18개 파일 (config 6 + app 7 + components 3 + README + .gitignore)
  • 총 비용: 약 $0.54 USD (claude-opus-4-8, 13 turns)
  • 호출 모드: claude -p "..." (print mode, 비대화형)

⚠️ npm install/npm run dev는 의도적으로 실행하지 않음. 사용자가 직접 실행.

1. 호출 명령 패턴 (Print Mode)

claude -p "$(cat /tmp/cc_prompt.md)" \
  --dangerously-skip-permissions \
  --max-turns 30 \
  --max-budget-usd 5 \
  --output-format json
플래그 값 이유
-p — 비대화형 one-shot. 다중-턴 워크플로에는 부적합
--dangerously-skip-permissions — 파일 쓰기/네트워크를 자동 승인 (워크스페이스 신뢰 다이얼로그 스킵)
--max-turns 30 무한 루프 방지. 단일 작업엔 25~30이면 충분
--max-budget-usd 5 비용 상한. 시스템 프롬프트 캐시 생성에 최소 ~$0.05 필요
--output-format json session_id, total_cost_usd 등 메타 회수
workdir /home/godopu16/PuKi/lab/landing_page Claude가 작업할 루트

2. 1차 프롬프트 (전체 — /tmp/cc_prompt.md)

claude가 부분적으로만 수행한 후 인터럽트됨. 다음 12개 파일만 생성: package.json, next.config.js, next-env.d.ts, tsconfig.json, postcss.config.js, tailwind.config.ts, .gitignore, app/layout.tsx, app/globals.css, components/Header.tsx, components/Footer.tsx, components/PageHeader.tsx

Create a Next.js 14+ (App Router) landing-page reference prototype at
/home/godopu16/PuKi/lab/landing_page/refer_landing_page/ for a Korean
university research lab.

REQUIREMENTS (strict):
1. Use Next.js 14+ App Router with TypeScript and Tailwind CSS. Use
   create-next-app style structure (package.json, next.config.js, app/
   directory, tailwind.config.ts, tsconfig.json, postcss.config.js).
   If create-next-app is not available offline, write all files
   manually with correct contents. Do NOT run any interactive install.
2. Top app header with 5 navigation links routing to: /intro, /members,
   /publications, /lectures, /standardization. Header must be sticky
   and have a working mobile hamburger menu.
3. Implement ALL 5 pages with realistic placeholder content. Each page
   must be a real Next.js route (app/<route>/page.tsx) — NOT a single-
   page mock.
4. Lab context: 경북대학교 컴퓨터학부 사물인터넷 표준 연구실
   (Internet of Things Standards Lab). The lab has two main research
   thrusts: (a) MCM project — interoperability in metaverse
   environments, (b) QUIC-based multi-agents orchestration architecture
   and communication interface design. The intro page should introduce
   both. The other pages should reflect this context.
5. Responsive: works on desktop (>=1024px), tablet (640-1023), and
   mobile (<640). Test that the header collapses to a hamburger menu
   on mobile. Use Tailwind responsive classes.
6. Korean-language UI. Lab name in Korean and English. Bilingual
   section headers (Korean primary, English in parentheses) where
   natural.
7. Include a Footer with lab address placeholder, contact email
   placeholder, and copyright line.
8. README.md inside refer_landing_page/ explaining: project purpose
   (reference prototype, not production), how to run (npm install,
   npm run dev), route map, and a short list of customization hooks
   (colors, fonts, content).
9. Do NOT install npm packages. Just generate the source files. Add a
   package.json with the standard Next.js scripts (dev, build, start,
   lint) and the deps listed but with a note in README that the user
   must run npm install themselves.
10. Keep total file count reasonable — prefer fewer, well-structured
    files over many fragments.

OUTPUT FORMAT:
- After generating files, list every file path you created with one-
  line descriptions.
- Do NOT run npm install, npm run dev, or any network commands.
- Reply in English (final summary to me). The user is the lab PI; I am
  Claude, the coding agent.

Begin.

1차 시도 결과

  • 1차 호출은 30분 이상 흐른 뒤 인터럽트됨 (Hermes 세션 셧다운).
  • 그 시점에 claude는 설정 파일 + components 3개 + layout.tsx + globals.css 까지만 생성.
  • 5개 페이지(app/<route>/page.tsx) + README.md 가 누락된 채 중단.

3. 2차 프롬프트 — 복구용 (누락 6개 파일만 생성) — /tmp/cc_prompt2.md

같은 디렉터리에 새 세션으로 재진입하되, 이미 만들어진 파일은 덮어쓰지 말라고 명시. claude-code skill의 Pitfall #13을 적용해 -c (continue) 대신 새 세션 + 명시적 파일 목록 패턴 사용.

You are continuing a partially-completed task. The previous Claude
session was interrupted at
/home/godopu16/PuKi/lab/landing_page/refer_landing_page/.

ALREADY CREATED (do NOT recreate, do NOT overwrite, leave as-is):
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/package.json
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/next.config.js
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/next-env.d.ts
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/tsconfig.json
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/postcss.config.js
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/tailwind.config.ts
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/.gitignore
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/layout.tsx
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/globals.css
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/components/Header.tsx
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/components/Footer.tsx
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/components/PageHeader.tsx

YOU MUST CREATE (these are missing):
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/intro/page.tsx
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/members/page.tsx
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/publications/page.tsx
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/lectures/page.tsx
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/standardization/page.tsx
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/README.md

CONTEXT (same as original task):
- Next.js 14+ App Router, TypeScript, Tailwind CSS.
- Lab: 경북대학교 컴퓨터학부 사물인터넷 표준 연구실 (Internet of
  Things Standards Lab).
- Two research thrusts:
  (a) MCM project — interoperability in metaverse environments
  (b) QUIC-based multi-agents orchestration architecture and
      communication interface design
- Korean-language UI. Bilingual section headers (Korean primary,
  English in parentheses) where natural.
- 5 pages must each have realistic placeholder content (not lorem
  ipsum). Use the lab context.
- Responsive: use Tailwind responsive classes; works on desktop,
  tablet, mobile.
- Each page should use the existing components/PageHeader.tsx and
  components/Footer.tsx where appropriate.

README.md must include:
- Project purpose (reference prototype, not production)
- Lab context (1-2 sentences)
- Tech stack (Next.js 14 App Router, TypeScript, Tailwind CSS)
- Directory structure
- How to run: `cd refer_landing_page && npm install && npm run dev`
  and the resulting URL
- Route map: /intro, /members, /publications, /lectures,
  /standardization with one-line description of each
- Customization hooks: where to change colors (tailwind.config.ts),
  fonts (app/layout.tsx), content (each page.tsx)
- A note that the user must run `npm install` themselves (do not run)

OUTPUT FORMAT:
- After generating files, list every file path you created with one-
  line descriptions.
- Do NOT run npm install, npm run dev, or any network commands.
- Do NOT overwrite any of the ALREADY CREATED files listed above.
- Reply in English. Be concise.

Begin.

2차 시도 결과

  • subtype: success, 13 turns, $0.54
  • 누락된 6개 파일 모두 생성, 기존 12개 파일은 그대로 유지
  • README에 경고 문구(사용자 직접 npm install 필요) 명시

4. 프롬프트 설계 패턴 — 학습 노트

4-1. Print 모드에서는 짧고 결정적인 프롬프트가 낫다

claude -p는 짧고 구체적인 지시에 최적화돼 있다. claude-code skill 공식 가이드도 같은 내용을 명시:

"Brief, concrete prompts for print-mode code generation finish in seconds. A 3-sentence verbose prompt with background context can cause 120s+ timeouts. The file-write tool (not your prompt text) carries the implementation details."

→ 1차 프롬프트가 60줄(약 1.2KB) 정도가 적절. 더 길면 thinking 시간만 늘어나고 결과는 같다.

4-2. REQUIREMENTS (strict): 10개로 분해

체크리스트 형식의 번호 매기기 지시는 누락이 적다. 1번이 누락되면 1번 항목만 다시 요청할 수 있어 복구 단위가 명확해진다.

4-3. "Do NOT run X" — 네거티브 제약

Do NOT run npm install, npm run dev, or any network commands 같은 명시적 금지 목록이 print 모드에서 일탈을 줄이는 데 효과적이었다.

4-4. 작업 디렉터리 경로를 절대경로로

workdir만으로는 부족. 프롬프트 안의 모든 경로를 절대경로로 적어야 claude가 자기 판단으로 위치를 옮기지 않는다.

4-5. 복구 패턴: -c 대신 새 세션 + "ALREADY CREATED" 명세

claude-code skill Pitfall #13:

"-c / --continue is dangerous in multi-workdir orchestration — claude -c resumes the most recent session for the current working directory, which is the wrong session whenever (a) you switched workdirs, (b) multiple workdirs are in play, or (c) the most recent session in that workdir is not the one you want to resume."

→ 이번 케이스도 같은 이유로 -c를 피하고 새 세션 + 누락 파일 명세 로 복구했다. 12개 파일 경로를 일일이 적은 덕에 claude는 안전하게 "기존 파일 보존 + 누락 6개 생성" 으로 작업을 분기했다.

4-6. // CUSTOMIZATION HOOK 주석 메타포

claude가 각 페이지에 // CUSTOMIZATION HOOK 주석을 달아 데이터 배열의 위치를 표시했다. README에서 이 주석을 가리키는 가이드를 작성하면 사용자가 실제 콘텐츠로 교체할 때 헤맬 일이 없다. (보너스 효과)

4-7. --output-format json의 활용

session_id, total_cost_usd, num_turns, usage.modelUsage를 받으면 비용 추적·재개에 유리하다. 본 작업의 비용 메타(13 turns, $0.54)도 이걸로 회수했다.

5. 다음에 비슷한 작업을 한다면

개선점 이유
프롬프트를 1차에 한 번에 다 보내지 말고, 테스트 가능한 단위(예: config + layout → 1차, pages → 2차)로 쪼갠다 인터럽트 시 손실이 적고 검증 단계 명확
--max-turns 20 + --max-budget-usd 3 같은 보수적 캡 평균 작업 단위에 맞춰 과다 사용 방지
--append-system-prompt-file로 연구실 컨텍스트 미리 주입 매번 프롬프트에 컨텍스트 반복 안 해도 됨
인터랙티브 모드(tmux) 검토 5개 페이지가 서로 의존성이 낮아 print 모드가 적절했지만, 디자인 반복이 많으면 tmux가 유리

6. 관련 산출물

  • refer_landing_page/README.md — 사용자용 실행 가이드
  • refer_landing_page/ — 실제 Next.js 프로토타입 (18개 파일)
  • refer_landing_page/RESEARCH.md(상위) — 연구 분야 소개용 (홈페이지 카피 소스)
  • /tmp/cc_prompt.md, /tmp/cc_prompt2.md — 원본 프롬프트 파일 (이 문서의 원천)
Reference in New Issue View Git Blame Copy Permalink