클로드 코드 디자인 스킬로 AI 티 나는 사이트 고치기: ui-ux-pro-max, frontend-design 비교

"어디서 본 사이트인데" 싶을 때

클로드로 소개 페이지를 하나 만들고 나면, 열자마자 이런 느낌이 듭니다. 어디서 본 것 같은데. 제목 위에는 "Welcome to"로 시작하는 문구, 그 아래로 아이콘이 달린 카드가 세 장씩 줄지어 있고, 배경에는 보라에서 파랑으로 넘어가는 그라데이션이 깔려 있습니다.

이건 클로드만의 문제로 보이지 않습니다. 요청이 "깔끔하게 만들어줘" 정도로 모호하면, AI는 가장 흔하고 무난한 모양으로 수렴하는 경향이 있습니다. 그리고 무난한 모양을 여러 사람이 똑같이 받아 가니, 결과물끼리 닮게 됩니다.

Anthropic이 공개한 frontend-design 스킬은 이 문제를 스킬 문서에서 직접 다룹니다. 같은 크기의 둥근 카드로 내용을 잘라 놓는 틀, 모든 제목 위에 붙는 영문 대문자 소제목, 링크 글자 끝에 붙는 화살표를 "AI가 만든 티가 나는 습관"으로 적어 두었습니다.

똑같아 보이는 신호 5개와 고치는 말

아래 표의 왼쪽 열이 "AI 티"가 나는 대표 모양입니다. 보라 그라데이션, 이모지 아이콘, "Welcome to" 히어로는 자주 눈에 띄는 패턴이고, 공식 문서에 목록으로 적힌 것은 아닙니다. 오른쪽 열은 그걸 피하게 하는 요청 문장입니다.

• 보라-파랑 그라데이션 배경

  왜 티가 나는가

  브랜드와 상관없이 누구에게나 붙는 색

  이렇게 시키면 달라집니다

  브랜드 색 하나만 쓰고, 나머지는 흰색과 회색 계열로

• 카드 3장 격자

  왜 티가 나는가

  내용의 중요도와 무관하게 똑같은 크기로 나뉨

  이렇게 시키면 달라집니다

  카드 격자 금지. 중요한 항목은 크게, 나머지는 목록으로

• 모든 요소가 같은 둥근 모서리

  왜 티가 나는가

  모서리 값이 하나로 통일되어 밋밋함

  이렇게 시키면 달라집니다

  모서리는 버튼에만 둥글게, 나머지는 각지게

• 이모지 아이콘

  왜 티가 나는가

  글자 모양 아이콘이라 어디서든 똑같이 보임

  이렇게 시키면 달라집니다

  이모지 대신 아이콘을 안 쓰거나, 선 굵기가 같은 아이콘 한 세트만

• "Welcome to"로 시작하는 히어로

  왜 티가 나는가

  무슨 사이트인지 첫 줄에서 알 수 없음

  이렇게 시키면 달라집니다

  첫 화면에 서비스가 하는 일을 한 문장으로, 인사말 금지

방법 1: 디자인 스킬을 깔아 두기

스킬은 클로드 코드가 필요할 때 읽는 지침서 묶음입니다. 디자인 스킬을 깔아 두면 "사이트 만들어줘"라는 말 뒤에서 클로드가 폰트·색·구성 규칙을 먼저 참고합니다. 매번 같은 말을 직접 적지 않아도 되는 것이 장점입니다.

아래는 2026-11-05에 깃허브 API와 각 저장소 README로 확인한 값입니다.

• nextlevelbuilder/ui-ux-pro-max-skill

  별

  145,319

  라이선스

  MIT

  하는 일

  스타일 79종, 색 조합 192개, 폰트 짝 74개, 차트 25종 등을 담은 디자인 데이터. 프로젝트 설명을 주면 어울리는 스타일·색·폰트와 피해야 할 모양을 정리

• anthropics/skills 안의 frontend-design

  별

  187,475 (저장소 전체)

  라이선스

  스킬 폴더의 LICENSE.txt 참고

  하는 일

  폰트는 한두 종류, 모션은 한 곳에만, 같은 카드 반복 금지 등 방향을 잡는 지침 문서

• Nutlope/hallmark

  별

  48,094

  라이선스

  MIT

  하는 일

  "AI가 만든 티"를 줄이는 것이 목표. 50가지 시각 테마, 화면 폭 8가지에서 검사하는 린터, 기존 페이지 점검 기능

별 수를 읽는 법

frontend-design의 별 187,475개는 이 스킬 하나의 수가 아니라 anthropics/skills 저장소 전체의 수입니다. 이 저장소에는 문서(docx, pdf, pptx, xlsx) 스킬과 MCP 만들기, 캔버스 디자인 같은 스킬이 함께 들어 있습니다.

그 밖에 nexu-io/open-design(105,980개, Apache-2.0)도 디자인 쪽에서 별이 많지만, 이건 스킬 하나가 아니라 데스크톱 앱과 작업 공간입니다. 클로드 코드 같은 에이전트를 "디자인 엔진"으로 불러 쓰는 구조여서, 스킬 설치와는 다른 이야기입니다. 이 글에서는 이름만 적어 둡니다.

설치 명령 (복사해서 클로드 코드에 입력)

세 가지 모두 클로드 코드 안에서 `/plugin` 명령으로 설치하는 방식이 README에 적혀 있습니다. 설치 뒤에는 클로드 코드를 다시 시작하는 편이 안전합니다.

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

npx skills add nutlope/hallmark -g --agent claude-code

스킬을 깔아도 안 풀리는 것

스킬을 깔았다고 사이트가 알아서 독창적이 되지는 않습니다. 스킬은 규칙을 주는 것이고, 무엇을 파는 사이트인지, 누가 보는지는 여전히 사람이 말해 줘야 합니다. frontend-design 문서도 주제가 정해지지 않았으면 먼저 주제·대상·핵심 역할을 정하라고 시킵니다.

스킬이 여러 개면 서로 다른 말을 할 수 있습니다. 하나는 "카드를 쓰라", 다른 하나는 "카드를 줄이라"고 하면 클로드가 어느 쪽을 따를지 매번 다릅니다. 처음에는 하나만 깔고, 결과가 마음에 안 들 때 바꿔 보는 편이 낫습니다.

한 가지 더. 별이 많다는 것은 많이 설치됐다는 뜻이지, 내 사이트에 맞는다는 보증이 아닙니다. 결과물을 눈으로 보고 판단하세요.

방법 2: 스킬 없이 요청에 규칙을 직접 쓰기

스킬 설치가 번거롭거나 클로드 코드를 안 쓰는 경우에는 프로젝트 첫 요청에 아래 문장을 붙이면 됩니다. 규칙을 구체적인 숫자로 줄수록 결과가 덜 닮습니다. "예쁘게"보다 "폰트 두 개"가 훨씬 잘 지켜집니다.

이 사이트를 만들 때 아래 규칙을 지켜줘.
1. 폰트는 딱 두 개만 쓴다. 제목용 하나, 본문용 하나. 서로 확실히 다른 느낌으로.
2. 브랜드 색은 하나만 쓴다. 나머지는 흰색, 검정, 회색 계열.
3. 같은 크기 카드가 줄지어 놓이는 격자는 쓰지 않는다. 중요한 건 크게, 덜 중요한 건 목록으로.
4. 이모지는 아이콘으로 쓰지 않는다.
5. 모션은 한 군데에만 넣는다. 페이지가 열릴 때 한 번 움직이는 정도.
6. 첫 화면에 "Welcome to" 같은 인사말을 쓰지 않는다. 이 사이트가 하는 일을 한 문장으로 쓴다.
7. 만든 뒤에 "다른 사이트에도 그대로 붙일 수 있는 부분"을 스스로 찾아서 고쳐줘.

움직임은 라이브러리 이름만 대면 됩니다

버튼이 부드럽게 나타나거나 숫자가 올라가는 움직임은 애니메이션 라이브러리가 맡습니다. 코드를 모르는 사람은 이름만 알아 두면 됩니다. "GSAP으로 첫 화면 제목을 한 번만 나타나게 해줘"처럼 말하면 클로드가 설치와 코드를 알아서 처리합니다.

• anime.js

  설치 이름 (npm)

  animejs

  라이선스·비용

  깃허브 저장소 기준 MIT. 공식 사이트에는 라이선스 문구가 없음

  이럴 때

  가벼운 움직임 하나를 넣고 싶을 때

• Motion (옛 Framer Motion)

  설치 이름 (npm)

  motion

  라이선스·비용

  공식 사이트에 무료·오픈소스로 표기. 유료 Motion+는 별도 상품. 깃허브 저장소 기준 MIT

  이럴 때

  리액트로 만든 사이트에서 화면 전환이나 클릭 반응

• GSAP

  설치 이름 (npm)

  gsap

  라이선스·비용

  공식 요금 페이지에 "모든 사용자에게 100% 무료"로 표기. 라이선스 조항은 이번에 못 확인

  이럴 때

  스크롤에 맞춰 장면이 바뀌는 연출

움직임은 한 곳에만

다만 라이브러리를 많이 쓸수록 사이트가 덜 AI 같아지지는 않습니다. 오히려 움직이는 곳이 많으면 더 흔한 템플릿처럼 보입니다. frontend-design 문서도 효과를 여러 군데 뿌리기보다 페이지가 열릴 때 한 번 움직이는 연출이 낫다고 적어 두었습니다.

이 방법이 안 맞는 경우

• 이미 디자이너가 만든 시안이 있을 때. 시안 이미지를 주고 그대로 만들라고 시키는 편이 정확합니다.
• 관리 화면이나 내부 도구처럼 눈에 띄는 디자인이 필요 없을 때. 규칙 몇 줄이면 충분하고, 스킬까지 깔면 오히려 과해집니다.
• 클로드 코드가 아니라 일반 채팅(웹·앱)에서 쓸 때. `/plugin` 명령은 클로드 코드 전용이어서, 이때는 방법 2의 문장을 붙여 쓰세요.

같이 알아두면 좋은 말

스킬(Skill)

클로드 코드가 필요할 때 읽는 지침 묶음. 폴더 안의 SKILL.md 파일이 기본 단위입니다.

플러그인 마켓

`/plugin marketplace add`로 저장소를 등록해 두면, 그 안의 플러그인을 이름으로 설치할 수 있는 방식입니다.

히어로(Hero)

사이트를 열자마자 보이는 첫 화면 영역. 제목과 한 줄 설명이 들어가는 곳입니다.

자주 묻는 질문

관련 페이지

• 클로드 코드 스킬 설치 방법
• 클로드 코드 스킬 추천 TOP 10
• 클로드로 영상 만들기 (하이퍼프레임·Remotion)
• 클로드 마케팅 스킬
• 포트폴리오 사이트 만들기
• 링크인바이오 페이지 만들기