무료 자료

클로드로 만든 홈페이지, AI 티 어떻게 빼나요? 공식 frontend-design 스킬 + 레퍼런스 사이트 3곳

이신영(신영쌤) · 리더플AI · 2026.10.01

한 줄 답

앤트로픽이 직접 만든 무료 스킬 'frontend-design'을 클로드에 추가하고, 잘 만든 사이트 화면을 캡처해 함께 주면 보라 그라데이션·똑같은 카드 같은 'AI 티'가 확 줄어듭니다. 클로드 사용자 지정 → 스킬 → 탐색에서 검색해 '추가'만 누르면 됩니다.

무료 자료클로드로 만든 홈페이지, AI 티 어떻게 빼나요? 공식 frontend-design 스킬 + 레퍼런스 사이트 3곳

이 글은 인스타그램 릴스 「클로드 홈페이지 AI 티 빼는 법」에서 약속드린 한국어 가이드입니다.

왜 클로드로 만든 화면은 다 비슷할까요?

"예쁜 홈페이지 만들어줘"라고만 하면 클로드는 가장 흔한 모양으로 채웁니다. 참고할 화면도, 우리 가게만의 이야기도 없으니 학습한 것 중 평균적인 디자인이 나오는 거예요. 그 평균이 바로 'AI 티'입니다.

앤트로픽이 직접 정리한 'AI 티 목록'

클로드를 만든 앤트로픽이 공개한 공식 스킬 frontend-design 안에는 "지금 AI가 만든 디자인은 이런 특징에 몰려 있다"는 목록이 들어 있습니다. 원문을 우리말로 옮기면 이렇습니다.

AI가 자주 만드는 모양	이렇게 보여요
따뜻한 크림색 배경 + 굵은 세리프 제목 + 주황·테라코타 포인트	클로드 자체 색과 비슷해 바로 티가 남
거의 검정 배경 + 형광 초록이나 주홍 한 색	어떤 업종이든 똑같은 분위기
신문처럼 가는 선과 빽빽한 단	내용과 상관없이 '있어 보이는' 틀
똑같은 둥근 카드를 줄줄이, 같은 그림자, 그라데이션 장식	서비스 소개 페이지의 전형
제목마다 영어 대문자 라벨, 'A · B · C' 점 나열, 버튼 끝마다 '→'	어느 사이트에나 붙는 템플릿 장식

스킬은 이 모양들이 "선택이 아니라 기본값"이라서 피하라고 안내합니다. 대신 업종과 실제 내용에서 디자인을 출발하라고 해요. 빵집이면 빵 나오는 시간표, 꽃집이면 오늘 들어온 꽃처럼요.

항목	내용 (2026년 10월 1일 확인)
이름	frontend-design
만든 곳	Anthropic (클로드 개발사)
원본	깃허브 공식 저장소
인기	공식 스킬 저장소 깃허브 별 약 17만 9천 개
라이선스	Apache-2.0
비용	무료

클로드에 추가하는 방법 (1분)

1claude.ai 왼쪽 메뉴 사용자 지정 → 스킬로 들어갑니다.
2위쪽 탐색 탭을 누르고 검색창에 `frontend-design`을 입력합니다.
3Anthropic 작성이라고 표시된 frontend-design 옆 추가를 누릅니다.

무료 요금제에서도 스킬을 쓸 수 있습니다. 스킬은 코드 실행 기능이 켜져 있어야 동작합니다.
비슷한 이름의 스킬이 함께 나오니 'Anthropic 작성' 표시를 확인하세요.
메뉴 이름은 클로드 화면이 업데이트되면 조금 바뀔 수 있습니다.

진짜 잘 만든 화면을 보여 주세요: 레퍼런스 사이트 3곳

스킬만으로도 좋아지지만, 참고할 화면 캡처를 같이 주면 결과가 훨씬 달라집니다. 무료로 둘러볼 수 있는 곳 세 군데입니다.

사이트	이런 걸 볼 수 있어요	사장님 활용 팁
Godly	디자이너들이 고른 웹사이트 모음	분위기·색감 참고용으로 둘러보기
One Page Love	한 페이지짜리 사이트만 모은 곳	가게 소개 홈페이지는 대부분 한 페이지면 충분
Awwwards	디자인 상을 받은 사이트 모음	첫 화면 구성·글자 크기 참고

마음에 드는 화면을 찾으면 화면 캡처해서 클로드 대화창에 붙여 넣으세요. 남의 디자인을 그대로 베끼라는 뜻이 아니라, "이런 느낌"을 말 대신 그림으로 전하는 겁니다.

전후 비교 (예시)

같은 동네 빵집 홈페이지를 두 가지로 만들어 봤습니다. 왼쪽은 아무 지시 없이 나오는 전형적인 모양을 재현한 것이고, 오른쪽은 frontend-design 스킬의 기준(업종의 실제 내용에서 출발, 템플릿 장식 빼기)을 적용해 만든 예시입니다.

스킬 없이: 보라 그라데이션, "특별한 빵" 같은 말, 이모지 아이콘 카드 3개, 버튼 끝 화살표
스킬 + 레퍼런스: "빵 나오는 시간표"를 첫 화면에, 시간·빵 이름·가격을 표로, 버튼은 "전화로 빵 맡기기"처럼 실제 행동으로

복사용 요청문

① 레퍼런스 캡처와 함께 홈페이지 만들기

frontend-design 스킬을 써서 우리 가게 홈페이지 첫 화면을 만들어줘.
첨부한 캡처는 분위기 참고용이고, 그대로 베끼지는 마.

[우리 가게]
- 업종:
- 위치·영업시간:
- 손님이 제일 많이 묻는 것:
- 실제로 보여줄 내용(메뉴·가격·시간표 등):

만들기 전에 색 4~6개, 글꼴, 첫 화면 구성을 먼저 짧게 제안하고
내가 좋다고 하면 그때 만들어줘.

② 이미 만든 화면에서 AI 티 찾기

frontend-design 스킬 기준으로 첨부한 내 홈페이지 화면을 점검해줘.
'AI가 자주 만드는 모양'에 해당하는 부분을 찾아서
위치 / 왜 티가 나는지 / 어떻게 바꾸면 좋은지 표로 정리해줘.
아직 고치지는 마.

③ 업종에서 출발하는 디자인 아이디어

frontend-design 스킬로, [업종] 가게 홈페이지 첫 화면 아이디어를 3개 줘.
각 아이디어는 우리 업종에서만 나올 수 있는 소재(예: 빵집이면 굽는 시간)를 하나씩 써서
제목 문장, 첫 화면에 보일 것, 색 분위기를 한 줄씩 적어줘.

직접 따라 해 보고 싶다면

클로드로 내 사이트를 처음부터 만드는 과정은 리더플AI 스쿨 실습실에서 함께 해 볼 수 있어요. 매주 화요일 저녁 8시 무료 AI 강의에서도 질문 받습니다.

확인한 것과 아직 안 한 것

2026년 10월 1일, 깃허브 공식 저장소에서 스킬 내용·라이선스, claude.ai 스킬 탐색 화면에서 'Anthropic 작성' frontend-design과 추가 버튼을 확인했습니다.
전후 비교는 리더플이 만든 예시입니다. 실제 결과는 입력한 내용과 캡처에 따라 달라집니다.
레퍼런스 사이트의 내용·운영 방식은 각 사이트 사정에 따라 바뀔 수 있습니다.

자주 묻는 질문

정말 무료인가요?

네. 스킬은 무료이고 클로드 무료 요금제에서도 쓸 수 있습니다. 레퍼런스 사이트 세 곳도 둘러보는 건 무료입니다(일부 기능은 가입·유료).

캡처한 디자인을 그대로 써도 되나요?

챗GPT에서도 되나요?

이 글은 클로드 기준입니다. 다만 '참고 화면 캡처를 같이 준다'는 방법은 다른 AI에서도 효과가 있습니다.