바이브코딩

1. 검증 가능한 목적을 줍니다. 2. 카파시 4원칙을 적용할 수 있도록 가이드를 줍니다. 3. 규칙을 잘 지키도록 Hook등의 강제 레이어를 줍니다. 4. 실제 산출물(하네스 결과물)에 대한 구체적인 가이드를 줍니다. 5. 검증해야 하는 항목과 방법들을 구체적으로 명시합니다.

이 문서는 다섯 명이 한 팀이 되어 실제 웹사이트(KB손해보험)를 Figma로 가져오고, 팀 공통 규칙을 정한 뒤, Claude Code와 Figma MCP로 페이지를 한 장씩 나눠 만드는 작업 흐름을 세우는 문서다. 앞의 "Tailwind CSS v4 – 레이아웃부터 반응형까지"를 따라 해 봤다면 코드가 눈에 익고, HTML 기본 태그와 폴더 만들기 정도는 할 수 있어야 한다. 끝까지 따라 하면 … 더 읽기