GUIDE · 디자인 규칙
페이지마다 붙여넣는 밤티 없는 사이트 디자인 규칙 프롬프트
읽는 데 6분2026-09-25 공개
하루 6시간 만에AI 기초부터 나만의
서비스까지 완성
클로드로 페이지를 여러 장 만들 때마다 색과 폰트가 달라진다면, 매번 디자인을 새로 정하게 두었기 때문일 가능성이 큽니다. 이 자료는 레퍼런스·색·폰트·아이콘·컴포넌트를 한 덩어리로 묶은 디자인 규칙 프롬프트 전문과, 주제만 바꿔 여러 페이지를 만드는 순서를 담았습니다.
Quick Start
디자인을 정해 주지 않고 페이지를 시키면 클로드는 페이지마다 색·폰트·아이콘을 새로 고르고, 결과가 제각각이 되기 쉽습니다. 밤티 탈출 시리즈에서 고른 재료(레퍼런스 갤러리·색 조합·한글 폰트·아이콘·UI 컴포넌트)를 규칙 한 덩어리로 적어 두고, 페이지를 만들 때마다 맨 위에 붙여넣으면 여러 페이지가 같은 결로 나옵니다.
- STEP 1에서 시리즈 재료로 규칙 다섯 줄을 채웁니다.
- STEP 2에서 규칙 블록을 붙여넣고 마지막 줄의 페이지 주제만 바꿉니다.
- STEP 3에서 결과가 규칙에서 벗어난 곳만 짚어 고칩니다.
STEP 1 · 10분시리즈 재료로 규칙 다섯 줄을 채운다
| 줄 | 무엇을 적나 | 어디서 고르나 |
|---|---|---|
| 1. 레퍼런스 | 참고할 사이트 분위기와 섹션 순서 한 문장 | Godly·Land-book·Lapa Ninja·Landingfolio·One Page Love 같은 레퍼런스 갤러리 → 사이트 5곳 |
| 2. 색 | 배경·글자·포인트·보조 색 코드 3~5개와 각 역할 | Coolors·Color Hunt·Khroma·Huemint·Realtime Colors → 사이트 5곳 |
| 3. 폰트·아이콘 | 폰트 하나와 굵기, 아이콘 세트 하나, 이모지 금지 | Pretendard·SUIT 같은 무료 한글 폰트(폰트 5개), Lucide·Heroicons 같은 아이콘 세트(사이트 5곳) |
| 4. 컴포넌트 | 버튼·카드의 높이·모서리·테두리·그림자 값 | shadcn/ui·daisyUI·Uiverse 같은 UI 컴포넌트 사이트 → 사이트 5곳 |
| 5. 만들 페이지 | 이번에 만들 페이지 주제 한 줄 | 매번 이 줄만 바꿉니다 |
값은 숫자로 적는 것이 핵심입니다. 「깔끔하게」 대신 「모서리 14px, 그림자 없음」처럼 적어야 페이지가 바뀌어도 같은 값이 유지됩니다.
STEP 2 · 3분규칙 블록을 붙여넣고 주제 줄만 바꾼다
아래가 영상에서 쓴 규칙 전문입니다. 색은 Realtime Colors에 입혀 본 팔레트, 폰트는 Pretendard, 아이콘은 Lucide입니다. 대괄호 부분만 바꿔 쓰세요.
[디자인 규칙 — 페이지를 만들 때마다 이 블록을 맨 위에 붙여넣기] 1. 레퍼런스: 여백이 넓은 한 장짜리 랜딩(Godly·One Page Love에서 고른 분위기). 순서는 히어로 → 특징 3개 → 가격·시간표 → 마지막 버튼. 2. 색: 배경 #F7EDE2 · 글자 #2F3E3A · 포인트 #F28482 · 보조 #84A59D, #F6BD60. 이 다섯 색 말고는 쓰지 말고 그라데이션·보라색 금지. 포인트색은 버튼과 강조 한두 곳만. 3. 폰트·아이콘: 폰트는 Pretendard 하나(제목 800, 본문 400, 본문 17px 이상). 아이콘은 Lucide 선 아이콘만(굵기 2, 24px). 이모지 금지. 4. 컴포넌트: 버튼 높이 52px·모서리 14px·그림자 없음. 카드 모서리 20px·1px 테두리(글자색 12%)·그림자 없음. 모든 간격은 8의 배수. 5. 만들 페이지: [여기에 페이지 주제 한 줄]
5. 만들 페이지: 성수동 스페셜티 로스터리 「온기 로스터리」 원두 구독 랜딩. 이번 주 원두 3종과 가격표 포함. 5. 만들 페이지: 망원동 소규모 요가 「숨 요가 스튜디오」 체험 수업 예약 랜딩. 요일별 시간표 포함. 5. 만들 페이지: 회의록 자동 정리 SaaS 「노트핏」 소개 랜딩. 개인·팀·회사 요금표 포함.
성공하면 페이지마다 내용은 달라도 배경색·글자·버튼 모양·아이콘 선이 같게 나옵니다.
STEP 3 · 5분규칙에서 벗어난 곳만 짚어 고친다
방금 만든 페이지를 위 디자인 규칙과 한 줄씩 비교해줘. 규칙에 없는 색·그라데이션·이모지·그림자, Pretendard가 아닌 폰트, 규칙과 다른 버튼·카드 모서리를 찾아 목록으로 보여 주고, 그 부분만 규칙대로 고쳐서 다시 만들어줘.
성공하면 벗어난 항목 목록과 그 부분만 바뀐 페이지가 나옵니다.
알아 둘 한계
- 영상의 카페·요가 스튜디오·SaaS 페이지 3장은 이 규칙대로 직접 만든 예시 화면입니다. 같은 규칙을 넣어도 클로드의 결과는 매번 조금씩 다를 수 있어 STEP 3 점검이 필요합니다.
- 규칙은 한 사이트(한 브랜드)의 여러 페이지를 맞출 때 가장 잘 맞습니다. 전혀 다른 브랜드를 만들 때는 1~4번 줄을 새로 채우세요.
- Pretendard는 SIL Open Font License 1.1, Lucide 아이콘은 ISC 라이선스입니다(2026년 9월 25일 공식 배포처 기준). 폰트를 쓰려면 페이지에서 폰트 파일이나 CDN을 불러와야 합니다.
- 이 글은 2026년 9월 25일 기준으로 작성했습니다.
공식 참고 자료
- Pretendard 공식 저장소 — 폰트 다운로드
- Lucide 공식 — 아이콘 검색
- Realtime Colors 공식 — 실제 화면에 색 입혀 보기
- shadcn/ui 공식 — 컴포넌트
함께 보면 좋은 글
- 클로드 밤티를 줄이는 밤티 탈출 레퍼런스 사이트 모음
- 뻔한 보라색을 끊는 밤티 탈출 색 조합 사이트 모음
- 클로드 밤티를 줄이는 밤티 탈출 무료 한글 폰트 모음
- 이모지 아이콘을 걷어내는 밤티 탈출 무료 아이콘 사이트 모음
- 클로드 밤티를 줄이는 밤티 탈출 무료 UI 컴포넌트 사이트 모음
- 클로드 밤티 화면을 없애는 레퍼런스 한 장 프롬프트