Show GN: product design_harness - 아이디어부터 기획, 와이어프레임, 프로토타입 검증까지 연결하는 AI 하네스

매번 AI에게 와이어프레임을 바로 그려달라고 하면 매번 실패해서 직접 만들어보았습니다.
질문 먼저, 기획은 이후에.

AI로 화면을 빠르게 만드는 것은 쉬워졌지만,
무엇을 왜 만들어야 하는지 충분히 고민하지 않은 채 결과물부터 만드는 경우가 많았습니다.

이런 문제를 해결해 보고자 Claude Code와 Codex에서 사용할 수 있는 '프로덕트 디자인 하네스'를 만들어보았어요. :)

주요 기능
. 아이디어를 입력하면 AI가 먼저 질문해 제품의 맥락과 요구사항을 구체화
. 기획 → 와이어프레임 → 인터랙티브 프로토타입 → UX 검증까지 단계별로 실행
. Planner, Wireframe, Prototype, Critic 등 역할별 Agent와 26개 Playbook으로 작업 절차 구성
. Figma MCP 연결 시 Figma에 1-Pager와 와이어프레임 생성, 미연결 시 Markdown·HTML로 진행
. UX 원칙, 디자인 시스템, 제품 컨텍스트를 프로젝트별로 관리
. 검증 결과에 따라 프로토타입을 수정하는 피드백 루프 제공

차별점은 AI가 화면을 생성하는 것보다, 화면을 만들기 전의 질문과 만든 후의 검증을 하나의 워크플로로 연결했다는 점입니다.

저장소를 프로젝트별로 복제해 사용하는 구조이며, Claude Code에서는 /wire 명령으로 실행할 수 있습니다.
(그래야 프로젝트 마다 반영하고 싶은 디자인 시스템이나, 원칙 등등을 맞춰 변경할 수도 있다고 생각해서요)
실제 서비스 개발을 위한 완성형 도구보다는 초기 제품 아이디어를 구체화하고 검증하는 데 초점을 맞췄습니다.

짬짬이 개선은 해보았으나 아직 개선할 부분이 많을거라 생각합니다.
특히 기획 산출물의 품질, Figma 연동의 실용성, 검증 과정에서 보완할 점에 대해 보시고 피드백도 주시면 매우 감사하겠습니다.