Step 1 of 3
Step 1. 기획 및 프롬프트 정의 (구조, 색상, 레이아웃)
바이브 코딩의 핵심은 **"단 하나의 통합 파일에 완벽히 작동하는 HTML/Tailwind 코드 작성"**을 지시하는 것입니다.
### 웹사이트 요구 사양
1. **Hero Section:** 타이핑 애니메이션 효과가 들어간 자기소개 헤더
2. **Project Gallery:** 3개 카드 필터링 가능한 프로젝트 포트폴리오
3. **Interactive Guestbook:** LocalStorage 연동 방명록 작성 및 작성글 삭제 기능
4. **Theme Palette:** 깔끔한 슬레이트 백그라운드 & 에메랄드 포인트 컬러
포트폴리오 & 방명록 단일 파일 웹사이트 생성 프롬프트
💡 ChatGPT Recommended Prompt너는 최고의 프론트엔드 바이브 코딩 개발자다. 단 하나의 `index.html` 파일 안에 완벽히 동작하는 "개인 개발자 포트폴리오 & 방명록 웹사이트" 코드를 전체 출력해줘.
[조건]
1. Tailwind CSS CDN (`<script src="https://cdn.tailwindcss.com"></script>`) 포함
2. Lucide Icons CDN 및 Vanilla JS 사용
3. 구성: (1) Navigation Header (2) Hero 섹션 (3) 프로젝트 갤러리 카드 3개 (4) LocalStorage 저장 기능이 내장된 방명록 작성 폼 및 게시글 리스트 (5) Footer
4. 반응형 레이아웃(모바일/데스크톱 완벽 지원) 및 코드 생략 없이 전체 출력할 것.
📌 복잡한 빌드 도구 없이 브라우저에서 즉시 실행 가능한 완성형 단일 HTML 코드를 도출합니다.