클로드 스킬 추천 ③ 클로드 디자인 스킬 4개로 같은 홈페이지 만들어 보고 2개만 추천하는 이유

클로드 코드로 홈페이지를 만들면 어디서 본 듯한 모양이 나온다는 말이 많고, 그래서 디자인 스킬을 깔라는 추천도 많습니다. 디자인 스킬은 Claude가 화면을 만들기 전에 읽는 디자인 규칙 묶음이고, 이번에 쓴 네 개는 모두 무료지만 쓰는 동안 Claude 구독 사용량이 나갑니다. 공식 frontend-design과 GitHub 별이 많은 커뮤니티 스킬 세 개(ui-ux-pro-max, taste-skill, Hallmark)를 작업 폴더 하나에 하나씩 깔고, 가상의 동네 필라테스 스튜디오 홈페이지를 같은 요청으로 두 번씩 만들었습니다. 스킬 없이 만든 것까지 모두 열 개를 휴대폰과 컴퓨터 화면으로 열어 비교했습니다.

같은 요청으로 만든 홈페이지 다섯 개, 결과부터 보기

가게 정보 파일 하나를 주고 “동네 1인 필라테스 스튜디오 홈페이지를 한 페이지로 만들어 줘”라고 했습니다. 아래 영상은 1회차 결과를 휴대폰 크기로 나란히 놓은 것입니다.

직접 눌러 보기: 스킬 없음 · frontend-design · ui-ux-pro-max · taste-skill · Hallmark. Claude가 만든 파일을 한 글자도 고치지 않고 올렸습니다. 휴대폰으로 열면 아래쪽 예약 버튼까지 실제 모습 그대로 보입니다.

다섯 개 모두 가게 정보 파일에 있는 가격·시간·주소를 빠짐없이 넣었고, 후기나 회원 수 같은 지어낸 숫자는 없었습니다. 몇 개는 “회당 32,500원”처럼 묶음 가격을 횟수로 나눈 값을 덧붙였는데, 계산은 모두 맞았습니다.

따라 해 보기: 요청문과 실습 재료

실습 재료(zip)를 내려받아 빈 폴더에 풀면 input/스튜디오정보.txt가 생깁니다. 지어낸 가게의 이름·수업·시간표·가격·위치가 들어 있습니다. 그 폴더에서 Claude Code를 열고 아래 요청을 그대로 붙여 넣으세요. 스킬을 깔았든 안 깔았든 같은 요청을 썼고, 스킬 이름은 넣지 않았습니다. Claude Code가 처음이라면 클로드 코드 설치 방법을 먼저 보세요.

input/스튜디오정보.txt 내용으로 동네 1인 필라테스 스튜디오 홈페이지를 한 페이지로 만들어 줘. 소개, 수업 종류와 시간표, 가격, 강사 소개, 위치, 예약 문의 버튼이 들어가야 해. 손님 대부분이 휴대폰으로 볼 테니 휴대폰에서도 잘 보여야 해. 결과는 index.html 파일 하나로 만들어 줘. 자료에 없는 내용(후기, 수상 경력, 회원 수 같은 숫자)은 지어내지 마.

좋은 답이라면 index.html 하나가 생기고, 휴대폰 화면 아래에 전화·예약 버튼이 붙어 다니며, 답에 “후기·회원 수는 넣지 않았다”와 “예약 링크·전화번호는 가상 값이니 바꿔야 한다”는 안내가 옵니다. 열 번 모두 이 세 가지가 나왔습니다.

한눈에 비교

스킬	알아서 불렸나	걸린 시간	사용량(API 단가)	겉모습	추천
스킬 없음	–	2분 안팎	0.55~0.63달러	연녹색·미색, 섹션마다 영어 대문자 꼬리표	기준
frontend-design	2번 다	2분 반~3분	0.78~0.84달러	스킬 없음과 비슷, 흔한 장식 없음	✅ 하나만 깔 때
ui-ux-pro-max	2번 다	2분 반	0.81~0.83달러	스킬 없음과 비슷	❌
taste-skill	2번 다	12분 남짓	3.07~3.17달러	사진과 색 띠로 완전히 다름	✅ 모양을 바꾸고 싶을 때
Hallmark	2번 다	3분 안팎	1.19~1.36달러	스킬 없음과 비슷	❌

사용량은 실행 기록에 남은 값을 API 단가로 환산한 것입니다. 구독자라면 돈이 따로 나가지 않고 한도에서 빠집니다.

열 개를 나란히 놓으니 구성은 거의 같았습니다

스킬을 바꿔도 페이지의 뼈대는 크게 달라지지 않았습니다. 같은 요청을 한 번 더 돌린 2회차 결과도 그랬습니다.

• 휴대폰 화면 아래에 [전화]·[카카오톡 예약] 버튼이 붙어 다니는 구성은 열 개 모두 같았습니다.
• 첫 제목에 “숨”이 들어간 것이 열 개 중 아홉 개였습니다. 가게 정보에 적힌 원장의 수업 원칙 “숨 쉬는 법부터 다시 배우면 몸이 달라집니다”에서 가져왔습니다. 스킬 없이 만든 두 개는 제목이 “숨 쉬는 법부터 천천히 다시 배워요”로 글자까지 같았습니다.
• 구글 폰트에 있는 무료 명조체 고운바탕을 제목에 쓴 것이 열 개 중 일곱 개였습니다.

제가 보기에는 같은 자료를 주면 Claude가 고르는 답도 비슷해지고, 규칙만 담은 스킬로는 그 흐름이 잘 바뀌지 않습니다. 이번에 모양을 확 바꾼 taste-skill은 규칙 말고도 다른 재료를 줬습니다. 무작위로 뽑는 디자인 방향과 실제 동네 사진입니다.

1. taste-skill: 겉모습이 확 달라진 유일한 스킬 (GitHub 별 약 9.6만)

무엇을 해 주나

홈페이지를 만들기 전에 스크립트가 미리 정리해 둔 디자인 방향 20개 중 3개를 무작위로 뽑아 주고, Claude가 그중 하나를 고르게 합니다. 만든 사람은 잘 만든 사이트 247곳을 연구해 이 방향들을 만들었다고 밝힙니다. 사진이 없으면 위키미디어 같은 공개 자료실에서 그 동네 사진을 찾아 작가·라이선스와 함께 넣습니다. 다 만든 뒤에는 실제 크롬 브라우저로 컴퓨터·태블릿·휴대폰 세 가지 폭의 화면을 찍어 규칙을 어긴 곳이 없는지 검사합니다.

설치

플러그인은 스킬 여러 개를 묶은 꾸러미이고, 마켓(marketplace)은 그 꾸러미를 받아 오는 저장소 주소입니다. 설치할 폴더에서 터미널에 아래 두 줄을 실행합니다. Node.js 22 이상과 크롬(또는 엣지·크로미엄)이 있어야 하고, 사진을 찾을 때 인터넷이 필요합니다.

claude plugin marketplace add Leonxlnx/taste-skill --scope local
claude plugin install taste-skill@taste-skill --scope local

이렇게 나오면 성공 ✔ Successfully installed plugin: taste-skill@taste-skill (scope: local)

• 두 번째 줄에서 마켓을 찾지 못한다는 오류가 나오면, 첫 줄을 같은 폴더에서 먼저 실행했는지 확인합니다.
• 이미 열려 있던 Claude Code 창에는 새 스킬이 안 보일 수 있습니다. 그 폴더에서 Claude Code를 새로 열면 나타납니다.

이 플러그인에는 스킬 14개가 함께 들어옵니다. 홈페이지를 부탁하면 그중 기본 스킬(taste-skill:taste-skill)이 불렸습니다.

써 본 결과

1회차 첫 화면은 망원한강공원 사진 위에 “망원동의 작은 필라테스”라는 큰 제목이었습니다. 섹션마다 연두·하늘·분홍·노랑·회색으로 바탕색을 바꿨고, 시간표는 오늘 요일을 먼저 열어 다음 수업이 몇 시인지 알려 줬습니다. 사진 다섯 장은 크기를 줄여 파일 안에 넣었습니다. 그래서 요청대로 index.html 하나로 끝났고, 크기는 1.1MB였습니다. 페이지 맨 아래에는 사진마다 작가와 라이선스(CC BY-SA 4.0 등)를 적었습니다.

사진마다 “스튜디오 사진이 아니다”라는 설명을 단 점이 좋았습니다. 망원역 사진에는 “사진은 1번 출구이고, 늘숨은 2번 출구로 나와 걸어서 6분”이라고 적었습니다.

2회차는 회색빛 베이지 바탕에 청록 버튼으로 모양이 완전히 달랐습니다. 이번에는 사진을 파일에 넣지 않고 위키미디어·플리커·picsum 주소에서 바로 불러왔습니다. 그 사이트에서 사진이 지워지면 페이지의 사진도 깨집니다.

대신 시간과 사용량이 가장 많이 들었습니다. 두 번 다 12분 남짓 걸렸고, 사용량은 3.07달러와 3.17달러로 스킬 없이 만들 때의 5~6배였습니다. 사진 찾기와 화면 검사를 되풀이하느라 명령을 스무 번 넘게 실행했습니다. 1회차 답은 첫 줄이 “Korean summary below.(아래에 한국어 요약)”였는데, 한국어 요약 없이 끝까지 영어로 왔습니다. 2회차 답은 한국어였습니다.

이런 사람에게

• 가게 사진이 아직 없는데 첫인상이 중요한 소개 페이지를 만드는 사람
• Claude가 만든 페이지가 늘 비슷해 보여서 아예 다른 방향을 보고 싶은 사람

주의

• 넣어 준 사진은 동네 풍경이나 다른 곳의 기구 사진입니다. 실제 가게 홈페이지로 쓰려면 스튜디오 사진으로 바꾸세요.
• 작업 폴더에 assets/(내려받은 사진 원본)와 .taste-skill/(검사 화면) 폴더가 남습니다. 페이지에는 필요 없습니다.
• 방향을 뽑는 스크립트는 뽑은 기록을 홈 폴더의 ~/.taste-skill/history.json에 남기게 짜여 있습니다. 기록 위치는 환경 변수 TASTE_SKILL_HISTORY로 바꿀 수 있습니다.
• 1회차 버튼 아홉 개의 글자 끝에 “→”가 붙었습니다. 아래 frontend-design이 “흔한 장식”으로 꼽는 것입니다.

2. frontend-design: 하나만 깐다면 공식 스킬 (GitHub 별 약 18만, anthropics/skills 저장소)

무엇을 해 주나

Anthropic이 만든 공식 스킬입니다. “디자인 스튜디오의 수석 디자이너처럼” 가게의 업종·재료·동네에서 디자인을 끌어내라고 지시합니다. 그리고 요즘 AI가 만든 페이지의 흔한 장식을 다섯 가지로 적어 두고 피하라고 합니다. 따뜻한 크림색 바탕(#F4F1EA 근처)에 명조 제목, 모든 제목 위의 영어 대문자 꼬리표, 가운데 점으로 이은 짧은 정보, 버튼 끝 화살표 같은 것들입니다. 코드를 쓰기 전에 색·글꼴·배치 계획을 먼저 세우고, 그 계획이 흔한 기본값은 아닌지 스스로 검토하게 합니다.

설치

1편·2편과 같은 공식 저장소에서, frontend-design이 들어 있는 example-skills 묶음을 깝니다. 설치할 폴더에서 실행합니다.

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

이렇게 나오면 성공 ✔ Successfully installed plugin: example-skills@anthropic-agent-skills (scope: local)

• example-skills에는 frontend-design 말고도 스킬 11개가 함께 들어옵니다. 이번 홈페이지 요청에서는 frontend-design만 불렸습니다.
• 이것 하나만 원하면 기본으로 등록된 공식 마켓에서 claude plugin install frontend-design@claude-plugins-official --scope local로 깔 수 있습니다. 두 곳의 SKILL.md를 비교해 보니 내용이 글자 하나까지 같았습니다. 이 설치 방법은 이번에 해 보지 않았습니다.

써 본 결과

두 번 다 연녹색 바탕에 명조 제목, 숨 쉬듯 커졌다 작아지는 원 하나만 움직이는 첫 화면이 나왔습니다. 첫인상은 스킬 없이 만든 것과 비슷합니다.

차이는 장식에서 났습니다. 스킬 없이 만든 두 개는 “ABOUT”, “CLASSES”, “PRICE” 같은 영어 대문자 꼬리표를 섹션 제목 위에 붙였고(1회차 7개, 2회차 6개), 바탕은 두 번 다 크림색(#F6F1EA)이었습니다. 스킬 파일이 첫 번째로 꼽은 “따뜻한 크림색 바탕”과 거의 같은 색입니다. frontend-design 쪽은 두 번 다 영어 대문자 꼬리표, 가운데 점으로 이은 정보, 버튼 끝 화살표가 하나도 없었습니다. 다섯 폴더의 결과 열 개 중 이 셋이 모두 0개였던 것은 frontend-design의 두 개뿐입니다.

두 번 다 Claude가 파이썬으로 휴대폰·컴퓨터 화면을 찍어 보고 나서 끝냈습니다. 시간은 2분 반과 3분, 사용량은 스킬 없이 만들 때의 1.2~1.5배였습니다.

1편에서는 “웹페이지를 만들어 줘”라고만 했을 때 frontend-design이 불리지 않아 이름을 붙이라고 썼습니다. 이번 요청(홈페이지, 휴대폰 화면)에서는 이름 없이 두 번 다 불렸습니다.

이런 사람에게

• 디자인 스킬을 처음 하나 깔아 보는 사람
• 사진 없는 간단한 소개 페이지를 자주 만들고, 시간·사용량을 늘리고 싶지 않은 사람

주의

모양이 확 달라지기를 기대하면 실망합니다. 같은 자료로는 스킬 없이 만든 것과 비슷한 색·구성이 나왔습니다. 달라지는 건 군더더기 장식이 빠지는 정도입니다.

써 봤지만 이번 추천에서 뺀 스킬

ui-ux-pro-max: 추천은 받았지만 결과에 거의 안 쓰임 (GitHub 별 약 13.6만)

스타일 79개, 색 조합 192개, 글꼴 짝 74개를 담은 표에서 검색해 “디자인 시스템”을 추천해 주는 스킬입니다. 설치는 작업 폴더에서 아래 두 줄로 했습니다. 플러그인에는 배너·브랜드·슬라이드 등 스킬 7개가 함께 들어옵니다.

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

README가 먼저 권하는 npm 전역 설치(npm install -g ui-ux-pro-max-cli)는 컴퓨터 전체에 깔리므로 쓰지 않았습니다.

두 번 다 Claude가 검색 스크립트를 돌렸고, 추천은 “스위스 미니멀 스타일, 회색(#6B7280)과 청록(#0891B2), 후기 슬라이드를 넣은 구성”이었습니다. 하지만 완성된 페이지는 두 번 다 연녹색·미색이었고 추천받은 색은 쓰이지 않았습니다. 결과가 스킬 없이 만든 것과 거의 같아서 뺐습니다.

Hallmark: 질문형 제목은 좋았지만 한 번뿐 (GitHub 별 약 3만)

테마 21개 중 하나를 골라 입히고 “AI 티” 검사 항목 57개를 통과시키는 스킬입니다. 클로드 코드 마켓은 없고, README는 스킬 폴더를 컴퓨터 전체 스킬 폴더(~/.claude/skills/)에 복사하거나 npx skills add를 쓰라고 안내합니다. 저는 같은 파일을 작업 폴더 안 .claude/skills/에만 복사했습니다.

git clone --depth 1 https://github.com/Nutlope/hallmark.git
mkdir -p .claude/skills
cp -R hallmark/skills/hallmark .claude/skills/hallmark
ls .claude/skills/hallmark

이렇게 나오면 성공 SKILL.md references

1회차는 섹션 제목을 “얼마인가요?”, “어디에 있나요?”, “예약은 어떻게 하나요?”처럼 손님이 묻는 말로 달아서 눈에 띄었습니다. 2회차는 “가격”, “오시는 길” 같은 평범한 제목으로 돌아왔습니다. 모양은 두 번 다 연녹색에 명조 제목이었습니다. 사용량은 스킬 없이 만들 때의 1.9~2.5배였습니다.

지우기

설치한 폴더에서, 설치할 때와 같은 범위를 붙여 지웁니다.

# frontend-design
claude plugin uninstall example-skills@anthropic-agent-skills --scope local
claude plugin marketplace remove anthropic-agent-skills
# ui-ux-pro-max
claude plugin uninstall ui-ux-pro-max@ui-ux-pro-max-skill --scope local
claude plugin marketplace remove ui-ux-pro-max-skill
# taste-skill
claude plugin uninstall taste-skill@taste-skill --scope local
claude plugin marketplace remove taste-skill
# Hallmark: .claude/skills/hallmark 폴더와 git clone으로 받은 hallmark 폴더를 지웁니다

이렇게 나오면 성공 ✔ Successfully uninstalled plugin: taste-skill (scope: local)와 ✔ Successfully removed marketplace: taste-skill

내려받은 플러그인 파일은 지운 뒤에도 Claude Code의 공용 보관 폴더(~/.claude/plugins/cache/)에 남았습니다. 켜는 설정이 없어서 쓰이지는 않습니다.

실행 기록 · 작업 폴더 · 폴더마다 아래 형식으로 두 번씩 실행

$ sed -n 3p input/스튜디오정보.txt
가게 이름: 늘숨 필라테스
$ claude -p "<요청>" --model claude-opus-5-5 --effort medium --setting-sources project,local --permission-mode acceptEdits --allowedTools "Bash(python3:*)" "Bash(node:*)" ... < /dev/null
# --setting-sources project,local: 계정에 켜 둔 스킬과 개인 플러그인을 빼고, 이 폴더에 깐 스킬만 보이게 함
# 폴더마다 스킬 하나: <작업 폴더>/noskill, frontend-design, uiux-pro-max, taste, hallmark
# 불린 스킬(두 번 모두): example-skills:frontend-design, ui-ux-pro-max:ui-ux-pro-max, taste-skill:taste-skill, hallmark
$ claude plugin uninstall taste-skill@taste-skill --scope local
✔ Successfully uninstalled plugin: taste-skill (scope: local)
$ claude plugin marketplace remove taste-skill
✔ Successfully removed marketplace: taste-skill

한계와 주의할 점

• 사진 없는 1인 가게의 한 페이지 홈페이지라는 과제 하나를 두 번씩만 돌렸습니다. 쇼핑몰, 관리 화면, 사진이 많은 가게라면 결과가 다를 수 있습니다.
• 같은 요청도 실행할 때마다 결과가 달라집니다. taste-skill은 두 번의 모양이 완전히 달랐습니다.
• 한 번 묻고 끝내는 방식(claude -p)이라 허락이 필요한 명령은 막혔습니다. 스킬 없음·ui-ux-pro-max는 두 번 다, Hallmark는 2회차에 크롬 실행이 막혀 화면을 확인하지 못했다고 답했습니다. 대화창에서 쓰면 실행 전에 허락을 묻습니다.
• “흔한 장식”을 센 기준은 frontend-design 스킬 파일의 목록이라 그 스킬에 유리한 잣대일 수 있습니다. 판단은 영상과 데모 페이지로 직접 해 보시길 권합니다.
• 열 개 모두 글꼴을 인터넷에서 불러옵니다. 실습 재료는 지어낸 가게라 주소·전화번호·예약 링크가 가짜입니다.

대안

이름	다른 점	이럴 때 고르세요
스킬 없이 요청에 조건 붙이기	설치가 필요 없음. “영어 대문자 꼬리표와 크림색 바탕은 쓰지 마”처럼 원하는 점을 직접 적음(이번에 시험하지 않음)	가끔 한 번 만들 때
실제 가게 사진 주기	폴더에 사진을 넣고 “이 사진을 써서”라고 요청. 남의 동네 사진 대신 내 사진이 들어감(이번에 시험하지 않음)	사진이 이미 있을 때
frontend-design(이 글)	흔한 장식을 빼 줌. 시간·사용량이 거의 그대로	디자인 스킬 하나만 깔 때
taste-skill(이 글)	디자인 방향과 공개 사진으로 모양을 크게 바꿈. 시간·사용량이 5~6배	첫인상을 확 바꾸고 싶을 때

자주 묻는 질문

클로드 디자인 스킬은 이름을 불러야 쓰이나요?

이번에는 네 스킬 모두 이름 없이 두 번 다 알아서 불렸습니다. 요청에 “홈페이지”, “휴대폰 화면” 같은 말이 들어 있었습니다. 안 불린다면 요청 앞에 “frontend-design 스킬을 써서”처럼 이름을 붙이세요.

클로드 코드로 만든 홈페이지가 다 비슷해 보이는 이유는 뭔가요?

같은 자료를 주면 Claude가 고르는 답도 비슷해집니다. 모양을 바꾸려면 규칙보다 재료(사진, 다른 디자인 방향)를 바꾸는 편이 효과가 컸습니다.

디자인 스킬을 여러 개 같이 깔아도 되나요?

이번에는 폴더 하나에 하나씩만 시험했습니다. 여러 개를 깔면 어느 스킬이 불릴지 미리 알기 어렵고, 결과가 어느 스킬 덕인지도 가리기 어렵습니다. 저는 한 폴더에 디자인 스킬 하나만 둡니다.

디자인 스킬은 무료인가요?

내려받는 데 돈은 들지 않고, 쓰는 동안 Claude 구독 한도에서 사용량이 나갑니다.

윈도우에서도 되나요?

이번에는 맥에서만 해 봤습니다. taste-skill README는 Node.js 22 이상과 크롬·엣지·크로미엄 중 하나만 있으면 된다고 적고 있습니다.

퀴즈

taste-skill로 만든 페이지에 망원한강공원 사진이 들어갔습니다. 실제 가게 홈페이지로 쓰기 전에 할 일은?
❌ 예쁘니까 그대로 올린다
✅ 스튜디오 사진으로 바꾸고, 남겨 둘 사진은 아래쪽 작가·라이선스 표시를 지우지 않는다

다음 편

4편에서는 개발 습관을 잡아 주는 스킬 Superpowers(슈퍼파워스)를 다뤘습니다. 계획을 먼저 세우고 테스트를 먼저 쓰게 하는 스킬이 실제 결과를 바꾸는지, 모임 회비 정산기를 같은 조건으로 만들어 숨은 검사로 비교했습니다.

출처

anthropics/skills 저장소·frontend-design SKILL.md, ui-ux-pro-max-skill README, taste-skill README·SKILL.md, Hallmark README, Claude Code 스킬 문서, 플러그인 설치 문서 (모두 2026-10-14 확인)