Claude 설치와 사용에 대한 완벽 가이드 웹페이지를 만들어줘. index.html 단일 파일로 만들고, 왼쪽에 사이드바 메뉴, 오른쪽에 본문이 있는 레이아웃으로 해줘. 다크 모드 테마로 해줘.
본문 글씨가 어두워서 잘 안 보여. 글씨를 충분히 밝게 해서 잘 읽히도록 해줘.
GitHub, Supabase, Vercel, VS Code 섹션도 추가해줘. 각 도구별로 소개와 핵심 기능을 설명해줘.
상단에 내비게이션 탭 버튼을 만들어서 Claude, GitHub, Supabase, Vercel, VS Code를 선택할 수 있게 해줘.
왼쪽 사이드바에 각 도구별 하위 메뉴를 카테고리로 나눠서 정리해줘.
사이드바의 카테고리 제목에 상단 탭 버튼과 같은 색상을 적용해줘.
홈 화면에 각 도구(Claude, GitHub, Supabase, Vercel, VS Code)를 소개하는 카드를 추가해줘.
홈 화면 카드 아래에 설치 순서 로드맵을 세로 타임라인 형태로 추가해줘.
상단 내비게이션 바 배경색을 진한 회색으로, 페이지 배경색을 진한 녹색으로 바꿔줘.
페이지 맨 아래에 푸터를 추가해줘. 사이트 소개, 포함된 가이드 목록, 관련 링크를 3컬럼으로 보여줘.
사이트 이름을 'Vibe Coding Manual'로 바꿔줘. 상단 로고, 사이드바 로고, 푸터 제목 모두 변경해줘.
GitHub 공식 매뉴얼(https://docs.github.com)을 참고해서 GitHub 소개 섹션을 더 정확하고 상세하게 업데이트해줘.
홈 화면 제목을 '바이브코딩 완벽 매뉴얼'로 바꾸고, 부제목을 노란색 볼드로 만들어줘.
홈 화면의 각 카드 상단에 도구별 브랜드 색상 테두리를 추가해줘.
로드맵의 각 명령어 옆에 복사 버튼을 추가해줘.
상단 내비게이션에 '사용자 매뉴얼' 버튼을 추가해줘. 오른쪽에 간격을 두고 배치해줘.
사용자 매뉴얼 페이지를 만들어줘. 시작하기, 화면 구성, 주요 기능, 자주 묻는 질문 4개 메뉴로 구성해줘.
사용자 매뉴얼의 '시작하기' 페이지를 수정해줘. Vibe Coding Manual 소개, 사용 방법, 권장 학습 순서를 넣어줘. 권장 학습 순서에는 명령어와 복사 버튼을 포함해줘.
각 도구의 사이드바 하위 메뉴를 더 추가해줘. Claude에 토큰 절감 방안, Anthropic 이야기를 추가하고, GitHub에 GitHub Flow, 마크다운 문법, GitHub Actions를 추가하고, Supabase에 스토리지, RLS & 보안, 벡터 DB & AI를 추가해줘.
추가한 사이드바 메뉴에 맞는 콘텐츠 페이지를 모두 만들어줘.
사이드바 로고와 상단 로고를 클릭하면 홈 화면으로 돌아가게 해줘. 그리고 푸터 제목을 대문자로 바꿔줘.
