Claude Code로 웹사이트 만들기

Claude Code는 터미널에서 자연어로 코드를 만드는 AI 도구, 웹사이트 설계·생성·리뷰·배포까지 대화로 진행
HTML·CSS·JavaScript 한 줄도 직접 안 짜도 동작하는 사이트 완성

워크플로 3단계

① Plan Mode로 설계 → ② HTML/CSS/JS 생성 → ③ 스크린샷·리뷰 반복

① Plan Mode 설계 (Shift+Tab)

바로 코딩 대신 Plan Mode 진입 → 요구사항 정리 → Claude가 구현 플랜 제시 → 승인 후 코드 생성

② 코드 생성 & 부분 수정 요청

플랜 승인 시 파일 자동 생성, 이후 자연어로 부분만 콕 집어 수정 지시

③ 스크린샷·리뷰 반복

결과를 브라우저로 확인 → 스크린샷 첨부해 수정 지시, 반복 개선

• Plan Mode — 코딩 전 설계 단계, 큰 작업일수록 효과

frontend-design 공식 스킬로 UI 브리프부터 코드까지

frontend-design은 Claude의 공식 UI 디자인 스킬, 별도 철학 문서 없이 브리프(요구사항)를 받으면 바로 색·타이포·레이아웃을 구상해 코드로 완성함
막막한 "예쁘게 만들어줘" 대신, 이 페이지만의 시그니처 요소 하나를 정해 두면 그 주위로 나머지가 절제되게 정렬

① 스킬 찾기·실행

새 UI를 만들거나 기존 화면을 다듬어 달라고 부탁하면 스킬이 알아서 켜짐 (슬래시 명령 없이 자동 트리거)

② 브레인스토밍 — 토큰 시스템 구상

Claude가 코드 짜기 전에 4가지를 먼저 정함: 색(4~6개 named hex) · 타이포(디스플레이+본문+유틸 서체) · 레이아웃(ASCII 와이어프레임) · 시그니처(이 페이지만의 기억에 남을 요소 하나)

③ 스스로 비평 후 코드 작성

구상한 계획이 "어디서나 나올 법한 기본값"인지 되짚어 본 뒤, 확정된 계획대로만 코드 작성 — 그래야 브리프에 딱 맞는 결과가 나옴

만드는 순서: 브리프 구체화 → 색·타이포·레이아웃·시그니처를 토큰으로 한곳에 모으기 → 계획 비평 → 코드 완성
색 한 곳만 고치면 사이트 전체가 같이 바뀜

getdesign.md 갤러리 + design.md로 확장

design.md는 한 브랜드의 색·글씨·간격·부품을 정리한 디자인 설계도, 유명 사이트의 분위기를 그대로 글로 적어 둔 명세서 — 설계도만 건네면 Claude가 같은 무드의 사이트를 통째로 조립
디자인이 막힐 때는 잘 만든 예시 갤러리에서 명세 아이디어를 먼저 구경

① getdesign.md 갤러리

• getdesign.md — design.md 형식 디자인 명세 갤러리 (이번 워크플로 핵심 포맷)
• getdesign.kr — 한국 서비스(토스·배민·클래스101 등 14개) 디자인 시스템을 design.md 포맷으로 정리한 갤러리 (getdesign.md 한국판)

② 두번째 design.md (BMW M)

바탕은 새까만 #000 캔버스 / 파랑·남색·빨강 M 삼색 띠가 포인트 / 제목은 굵은 대문자(700), 본문은 얇게(300) / 모서리는 직각(radius 0)

③ Claude에 지시

두번째 설계도에 참고 사이트에서 본 레이아웃을 얹어 부탁

결과물 3종: bmw-tokens.css + bmw-styles.css + bmw.html(검은 캔버스·터미널 히어로·스펙 그리드·M 삼색 띠)