프롬프트: Claude Code 세션을 위한 실시간 아이소메트릭 '팀 사무실'
Prompt: a live isometric "team office" for your Claude Code sessions
핵심 요약
Claude Code 에이전트들의 작업 상태를 90년대 경영 시뮬레이션 게임 스타일의 아이소메트릭 사무실로 시각화하는 프롬프트입니다.
- 시각화 도구 — Claude Code 세션과 에이전트 활동을 실시간 사무실 화면으로 구현함
- 게임 스타일 — Theme Hospital 등 90년대 아이소메트릭 경영 시뮬레이션에서 영감을 받음
- 기술 스택 — 외부 라이브러리 없이 바닐라 HTML/CSS/JS로만 구성된 로컬 웹 페이지
- 데이터 연동 — 프로젝트 폴더 내 JSONL 로그를 읽어 에이전트 상태와 작업 현황을 반영함
추신. 이건 내 실제 AI 함대다. 여기 있는 건 전부 가짜 데이터가 아니다.
프롬프트: Claude Code 세션을 위한 라이브 아이소메트릭 "팀 사무실"
이 페이지를 만들고 싶은 폴더에서 Claude Code에 아래 내용을 붙여넣어라. 먼저 <placeholders> 부분을 채워 넣을 것.
내 Claude Code 팀이 일하는 모습을 활기찬 아이소메트릭 사무실로 보여주는 로컬 웹 페이지를 실시간으로 만들어줘.
내 환경은 이래. 각 프로젝트 폴더마다 Claude Code 세션을 하나씩 돌리고 있어: <lead session: path>, <team A session: path>, <team B session: path>. 각각 서브 에이전트를 생성하는데, 일부는 Workflow 도구를 쓰기도 해. 내 빌드 머신 목록은 <inventory file, or "VMs named … and podman containers">에 적어뒀어.
세 명의 에이전트가 한 팀이 되어, 아래 순서대로 하나의 공유 데이터 계약을 가지고 작업해:
-
UX 디자이너가 DESIGN.md를 작성한다: 평면도, 밝은 모드와 어두운 모드용 팔레트, 역할별 오리지널 캐릭터 하나씩, 정확한 애니메이션 상태와 타이밍, 서버실, HUD, 그리고 스케치. 코드는 쓰지 마.
-
데이터 수집가가 office_state.py를 작성한다: 파이썬 표준 라이브러리만 사용, 일회성 실행, 1초 미만 소요, state.js 파일 생성.
-
웹 개발자가 DESIGN.md와 계약 내용을 바탕으로 office.html을 빌드한다. 그 후 헤드리스 방식으로 체크(콘솔 에러 없어야 함)하고 스크린샷을 찍는다.
공유 계약: state.js는 window.OFFICE_STATE를 설정한다: { "generated_at": ISO8601, "demo": bool, "zones": [ {"id": "office-owner|office-lead|office-<team>|open-<team>|servers", "title": str} ], "people": [ {"id": str, "name": str, "role": str, "zone": zone-id, "state": "idle|working|talking|done|away", "since": ISO8601, "task": str|null} ], "messages": [ {"from": person-id, "to": person-id, "label": str<=60, "at": ISO8601} ], "machines": [ {"id": str, "kind": str, "owner_stream": str, "state": "on|test|off|unknown"} ] }
페이지 요구사항
-
office.html 하나로 끝낼 것: 바닐라 HTML/CSS/JS 인라인 방식, CDN 금지, 네트워크 연결 금지. 서버 없이 file://로 열려야 함.
-
5초마다 <script src="state.js?t=…"> 태그를 다시 추가하는 방식으로 state.js를 다시 읽고, 요소를 새로 빌드하지 말고 id를 통해 업데이트할 것. 데이터는 오직 textContent / setAttribute로만 넣고, innerHTML은 절대 금지.
-
모든 UI 텍스트는 영어로 작성.