클로드로 웹사이트 만드는 프롬프트 8가지

STEP 2 · 10분비싼 사이트를 구조로 뜯어본다

마음에 드는 사이트 [URL 3개]를 넣습니다.

클로드가 링크를 열 수 없는 환경이면 첫 화면 캡처를 함께 붙여 넣으세요.

결과는 아래 "레퍼런스 분해 표" 틀로 받으면 비교가 쉽습니다.

Reference Hunter 역할을 맡아줘. 내가 고른 레퍼런스 사이트 [URL 3개]의 첫 화면을 구조·여백·글자 크기·색·움직임으로 분해해줘. 공통으로 쓰는 장치 5개를 뽑고, 우리 사이트에 가져올 것과 버릴 것을 이유와 함께 나눠줘. 문구와 이미지는 그대로 베끼지 마.

성공하면 사이트별 분해 표와 공통 장치 5개, 가져올 것·버릴 것 목록이 나옵니다.

STEP 3 · 5분색·글자·여백을 토큰으로 묶는다

02에서 가져오기로 한 장치를 같이 넣습니다.

받은 CSS 변수를 파일 맨 위에 두고, 이후 모든 단계에서 "이 토큰만 써줘"라고 붙이면 페이지 전체가 한 벌로 맞춰집니다.

아래 "디자인 토큰 CSS 예시"가 결과의 모양입니다.

Design System 담당으로 일해줘. 앞에서 가져오기로 한 장치를 기준으로 색 토큰 6개, 글자 크기 6단계, 여백 8단계, 모서리·그림자 값을 CSS 변수로 정의해줘. 버튼·카드·입력창을 이 토큰으로만 만들고, 대비가 4.5:1 미만인 조합은 표시해줘.

성공하면 CSS 변수 묶음과 토큰으로만 만든 버튼·카드·입력창, 대비가 낮은 조합 목록이 나옵니다.

STEP 4 · 10분3초 안에 잡는 첫 화면을 만든다

01의 행동과 03의 토큰을 넣습니다.

3안씩 받은 제목·부제·버튼 중 조합을 고르고, 1440px와 390px 두 폭에서 버튼이 첫 화면 안에 보이는지 직접 확인하세요.

Hero Builder 역할을 맡아줘. 첫 화면 제목 3안, 부제 3안, 버튼 문구 3안을 쓰고 가장 좋은 조합을 골라줘. 그 조합으로 데스크톱 1440px과 모바일 390px 첫 화면을 HTML·CSS로 만들어줘. 두 화면 모두 첫 화면 안에 버튼이 보이게 해줘.

성공하면 문구 3안씩과 고른 조합, 두 폭의 첫 화면 HTML·CSS가 나옵니다.

STEP 5 · 10분기능·후기·가격·FAQ 문구를 채운다

[실제 후기]가 없으면 빈칸으로 둡니다.

지어낸 후기는 넣지 마세요.

기능 문구는 "~할 수 있어요"보다 고객이 얻는 결과로 시작해야 읽힙니다.

Section Writer 역할을 맡아줘. 나머지 섹션 [기능·후기·가격·FAQ]의 문구를 써줘. 기능은 고객이 얻는 결과로 시작하고, 후기는 [실제 후기]만 쓰고 없으면 빈칸으로 둬. FAQ는 결제·환불·사용 방법 질문을 넣어 6개로 만들어줘.

성공하면 섹션별 문구와 FAQ 6개가 나오고, 후기 칸은 실제 후기만 채워집니다.

STEP 6 · 10분비싸 보이는 움직임을 더한다

완성된 페이지 코드를 넣습니다.

움직임은 5개 이하, 0.6초 이하로 제한해 두었습니다.

많이 넣을수록 싸 보입니다.

Motion Detailer 역할을 맡아줘. 완성된 페이지에 스크롤 등장, 버튼 호버, 숫자 카운트 같은 움직임을 5개 이하로 넣어줘. 움직임마다 0.6초 이하로 하고, prefers-reduced-motion을 켠 사용자에게는 꺼지게 해줘. 움직임이 없어도 내용이 다 읽혀야 해.

성공하면 움직임 5개 이하가 들어간 코드와, 움직임 줄이기 설정 사용자용 처리가 함께 나옵니다.

STEP 7 · 10분느린 곳·빠진 곳을 찾는다

출시 전에 점수부터 봅니다.

크롬 개발자 도구의 Lighthouse 탭에서 점검을 돌리고, 결과를 클로드에게 붙여 넣으면 고칠 순서를 잡아 줍니다.

Performance Checker 역할을 맡아줘. 완성된 페이지의 이미지 크기, 폰트 로딩, 메타 태그, 제목 구조, 링크 동작을 점검해줘. 코드로 확인한 것과 브라우저에서 직접 볼 것을 나누고, Lighthouse로 볼 항목과 고치는 방법을 우선순위대로 정리해줘.

성공하면 코드 확인 항목과 브라우저 확인 항목이 나뉘고, 고칠 순서가 우선순위로 정리됩니다.

STEP 8 · 5분올리기 전 마지막으로 점검한다

[배포할 곳]에는 Vercel·Netlify·아임웹처럼 실제로 올릴 곳을 적습니다.

배포는 클로드가 하지 않고, 내가 따라 할 순서만 받습니다.

아래 "출시 전 점검 순서"와 같이 보세요.

Launch Manager 역할을 맡아줘. [배포할 곳]에 올리기 전에 도메인, 문의 폼 연결, 분석 도구, 개인정보처리방침, 404 페이지를 점검할 목록을 만들어줘. 배포는 실행하지 말고 내가 순서대로 따라 할 단계와 확인 방법만 적어줘.

성공하면 점검 목록과 내가 따라 할 단계·확인 방법이 나옵니다.

레퍼런스 분해 표

02의 결과를 이 틀로 받으세요.

프롬프트 뒤에 "아래 표 틀로 정리해줘"와 함께 붙여 넣으면 됩니다.

디자인 토큰 CSS 예시

03에서 받을 결과의 모양입니다.

색 값만 내 브랜드 색으로 바꾸면 그대로 붙여 씁니다.

버튼·카드도 이 변수로만 만들었습니다.

:root {
  --color-bg: #FAF8F4;
  --color-surface: #FFFFFF;
  --color-ink: #14120E;
  --color-muted: #6B665C;
  --color-accent: #D9622B;
  --color-line: #E9E5DE;

  --text-xs: 12px; --text-sm: 14px; --text-md: 16px;
  --text-lg: 20px; --text-xl: 32px; --text-2xl: 52px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 80px;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(20, 18, 14, .06), 0 8px 24px rgba(20, 18, 14, .06);
}

body { background: var(--color-bg); color: var(--color-ink); font-size: var(--text-md); }

.btn {
  display: inline-block; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius); background: var(--color-accent); color: #fff;
  font-size: var(--text-md); font-weight: 700; text-decoration: none;
}

.card {
  padding: var(--space-6); border: 1px solid var(--color-line);
  border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow);
}

.input {
  width: 100%; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line); border-radius: var(--radius); font-size: var(--text-md);
}

출시 전 점검 순서

08에서 받은 목록과 함께 위에서부터 하나씩 확인합니다.

1. 도메인 — 주소를 입력했을 때 https:// 로 열리고, www 가 있을 때와 없을 때 모두 같은 페이지로 가는지 확인합니다.
2. 문의 폼 — 실제로 한 번 보내 보고 내 메일이나 시트에 도착하는지 확인합니다.
3. 분석 도구 — 사이트를 한 번 열고 분석 도구 화면에 방문이 찍히는지 확인합니다.
4. 개인정보처리방침 — 문의 폼으로 이름·연락처를 받는다면 페이지 아래에 처리방침 링크를 둡니다.
5. 메타 태그 — 카톡·인스타에 링크를 보냈을 때 제목과 미리보기 이미지가 제대로 뜨는지 봅니다.
6. 404 페이지 — 없는 주소(예: /abc)를 열었을 때 홈으로 돌아가는 버튼이 있는 페이지가 나오는지 확인합니다.

자주 막히는 곳

02에서 클로드가 링크를 못 연다고 합니다.

레퍼런스 사이트의 첫 화면을 캡처해 이미지로 붙여 넣으세요.

구조·여백·색은 캡처로도 충분히 분해됩니다.

04의 모바일 화면에서 버튼이 첫 화면 밖으로 밀립니다.

제목을 2줄 이하로 줄이거나 부제를 한 줄로 줄이라고 다시 요청하세요.

07 Lighthouse를 어디서 여는지 모르겠습니다.

크롬에서 페이지를 열고 마우스 오른쪽 → 검사 → 상단 탭의 Lighthouse를 누르면 됩니다.

FAQ

코딩을 몰라도 되나요? 됩니다.

04~06에서 받은 HTML 파일을 브라우저로 열어 확인하고, 고칠 곳은 말로 요청하면 됩니다.

실제로 올리는 단계에서만 배포할 곳의 안내를 따르면 됩니다.

아임웹·워드프레스 같은 빌더에서도 쓰나요? 01·02·05·07·08은 그대로 씁니다.

03·04·06의 코드는 빌더의 HTML 블록이나 사용자 CSS 칸에 붙여 넣으세요.

공식 참고 자료

• Chrome 공식 — Lighthouse 개요
• MDN — prefers-reduced-motion
• Anthropic 공식 — 프롬프트 엔지니어링 개요