정의

코드 작성 전, 브라우저에서 목업·다이어그램·아키텍처를 렌더링 해 사용자 승인 을 받는 시스템. Superpowers 프레임워크의 핵심 기능 중 하나. 요구사항 표류 차단 의 시각적 도구.

작동 원리

1. 에이전트 → screen_dir 에 HTML 프래그먼트 기록
2. 로컬 서버가 CSS 테마 와 결합 → 브라우저 렌더링
3. 사용자 클릭 / 선택 / 코멘트 → state_dir/events 로깅
4. 다음 에이전트 프롬프트에 역주입

효과

• 시각적 합의 확보 — 텍스트보다 강한 의사소통
• term/requirements-drift 차단 — 초기 의도 시각 고정
• 비개발자 협업 가능 — 코드 모르는 이해관계자도 검토 가능

강의 활용

03 HRN lesson/hrn-superpowers-framework 3대 개념 중 하나:

• 멘트: "코드를 짜기 전에 그림 을 보여주고 승인받습니다."

주의사항

• 대상 작업의 한정성: UI / 다이어그램 등 시각화 가능한 작업 에만 적용. 백엔드 로직은 부적합할 수 있음.
• 렌더링 인프라: 로컬 HTTP 서버 + 브라우저 = 추가 인프라. 도입 비용 고려.
• 상위 도구와의 결합: Superpowers 의 visual-companion 스킬이 자동화 보조.