코딩 몰라도 Claude Code로 홈페이지 만들기 | 디자인부터 배포까지
Claude Desktop → Code → 대화 입력창. 터미널이 아닙니다. 요청문은 영상에서 실제로 보낸 그대로이며, 카페 부분은 내 자료에 맞게 바꾸세요.

1. 레퍼런스 스킬 설치
https://github.com/jays0606/awesome-web-design-references

이 저장소의 reference-led-design을 Claude Code에서 쓸 수 있게 설치해줘. 설치 방법과 포함된 내용을 먼저 확인하고, 다른 프로젝트에서도 쓸 수 있도록 사용자 전역으로 설치해줘. 이미 설치돼 있으면 중복 설치하지 마.

설치 후 제대로 인식되는지 확인하고, 이 스킬이 무엇을 하는지와 frontend-design과 어떻게 함께 쓰면 되는지 짧게 설명해줘. 내가 직접 눌러야 하는 단계가 있으면 알려줘.

2. 디자인 계획부터 받기
reference-led-design 스킬로 이 폴더의 카페 소개, 메뉴, 사진을 보고 어떤 디자인으로 가면 좋을지 잡아줘.

어울리는 참고 사이트를 직접 살펴보고, 왜 우리 카페에 맞는지 알려줘. 첫 화면만 보지 말고 아래로 어떻게 이어지는지, 작은 화면이나 움직임도 볼 수 있는 만큼 확인해줘.

그걸 바탕으로 첫 화면부터 마지막까지 어떻게 구성할지, 어떤 사진을 어디에 쓰고 글자와 색감은 어떻게 할지 정리해줘. 후보만 많이 나열하지 말고 가장 잘 맞는 방향을 추천해줘. 아직 홈페이지 코드는 바꾸지 말고 디자인 계획부터 보여줘.

3. 만들기
이제 홈페이지 만들어봐. 좋은 것 같아 ㄱㄱ

4. 말로 고치기
일단 커피 한 잔, 책 몇 페이지라는 슬로건이 굉장히 어색해.

그리고 저 이미지가 메인 랜딩페이지 첫 화면에 들어가면 좋을 것 같아.

그리고 전체적으로 색이 너무 하얀색인 느낌? 우리 카페 그런 분위기나 느낌이 잘 드러나지 않는 것 같아.

5. 캡처로 고치기 · 모바일 보기
여기 메뉴 보이는 게 너무 심심한 느낌?? 더 디자인적으로 개선할 수 있을까?

그다음에 처음에 랜딩 문구가 좋긴 한데, 이게 어디에 있는 건지, 카페 이름 여백 등등 그런 게 잘 드러나면 좋을 것 같아.

6. Vercel에 공개하기
이 홈페이지를 Vercel에 배포하고, 나중에 수정하면 같은 주소로 다시 올릴 수 있게 해줘.

먼저 내가 쓰는 운영체제와 터미널 환경을 확인하고, Node.js와 npm, Vercel CLI가 설치돼 있는지, Vercel에 로그인돼 있는지 확인해줘. 이미 준비된 건 그대로 쓰고, 없는 도구는 공식 배포처의 설치 방법으로 설치해줘. Node가 없다면 Vercel CLI와 호환되는 LTS 버전으로 준비해줘.

직접 설치할 수 없는 단계는 내 환경에 맞춰 안내해줘. 어느 페이지에서 어떤 파일을 받고, 어느 앱이나 창에 입력해야 하는지 처음 쓰는 사람도 따라 할 수 있게 한 단계씩 알려줘. 설치 후 터미널이나 Claude를 다시 열어야 하면 그것도 알려줘. 로그인은 내가 브라우저에서 할게. 비밀번호나 토큰을 채팅에 붙여넣게 하지는 마.

준비가 되면 이번 홈페이지용 새 프로젝트로 정식 배포해줘. 기존 다른 프로젝트는 건드리지 말고, 웹사이트에 필요한 파일만 올려줘. 작업 기록이나 비밀정보는 제외하고, 유료 결제나 플랜 변경은 하지 마. 끝나면 공개 주소를 알려주고, 다음에도 같은 프로젝트로 배포할 수 있게 연결 정보를 남겨줘.