천만원짜리 웹사이트 만드는 무료 스킬 5개
한눈에 보기
| # | 이름 | 하는 일 |
|---|---|---|
| 1 | Impeccable | 디자인 방향 잡기부터 마지막 다듬기까지 명령어 하나로 끝내요 |
| 2 | 21st.dev Magic | 고퀄리티 컴포넌트 1만 개 넘게 검색해서 바로 붙여요 |
| 3 | shadcn/ui | 개발자들이 쓰는 컴포넌트를 공식 규칙대로 설치하고 조립해요 |
| 4 | GSAP Skills | 스크롤할 때 움직이는 애니메이션을 비싼 사이트처럼 넣어줘요 |
| 5 | Claude SEO | 만든 사이트가 구글·AI 검색에 잘 걸리는지 점검해요 |
Quick Start
- 다섯 개를 위에서부터 하나씩 설치하면 됩니다. 한 번에 다 하지 않아도 돼요.
/plugin으로 시작하는 줄은 클로드 코드 입력줄에, 나머지는 프로젝트 폴더에서 연 터미널에 붙여 넣어요.- 요청문은 그대로 붙여 넣어도 되고, [대괄호]만 내 상황으로 바꾸면 돼요.
STEP 1 · 2분Impeccable 로 디자인 방향부터 마무리까지 잡는다
/impeccable shape·critique·audit·polish·animate 같은 명령어로 화면 설계부터 디자인 리뷰, 마무리까지 단계별로 다듬어 주는 디자인 스킬이에요.
설치 뒤 클로드 코드에서 /impeccable init 부터 실행해요.
npx impeccable install
/impeccable init 으로 [사이트 설명, 예: 성수동 스페셜티 카페 브랜드 사이트]의 대상·목적·톤을 먼저 정리해 주세요. 그다음 /impeccable craft 로 메인 랜딩페이지를 만들고, 마지막에 /impeccable polish 로 다듬어 주세요.
성공하면 대상·목적·톤 정리가 먼저 나오고, 그 기준으로 만든 랜딩페이지가 다듬어진 상태로 돌아옵니다.
STEP 2 · 3분21st.dev Magic 으로 고퀄리티 컴포넌트를 붙인다
React·Tailwind 컴포넌트 1만 개 넘게 검색하고, 새 UI를 만들어 프로젝트에 바로 넣어 주는 MCP예요.
키는 21st.dev/mcp 에서 받아요.
npx @21st-dev/cli@latest init --client claude
21st MCP 로 [필요한 섹션, 예: 요금제 3단 비교 섹션]에 맞는 컴포넌트를 3개 찾아서 보여 주세요. 내가 하나 고르면 지금 프로젝트의 색과 폰트에 맞춰서 붙여 주세요.
성공하면 후보 컴포넌트 3개가 나오고, 고른 컴포넌트가 내 프로젝트 색·폰트에 맞춰 붙습니다.
STEP 3 · 3분shadcn/ui 로 컴포넌트를 공식 규칙대로 조립한다
shadcn/ui 팀이 공식으로 내놓은 스킬과 MCP예요.
클로드가 컴포넌트를 아무렇게나 새로 짜지 않고, shadcn 레지스트리에서 찾아 설치한 다음 조립해요.
저장소: shadcn-ui/ui
npx skills add shadcn/ui npx shadcn@latest mcp init --client claude
shadcn 스킬로 이 프로젝트에 [필요한 것, 예: 문의 폼과 FAQ 아코디언]을 만들어 주세요. 필요한 컴포넌트를 shadcn 레지스트리에서 먼저 찾아 설치하고, 직접 새로 짜지 말고 설치한 컴포넌트를 조립해서 만들어 주세요.
성공하면 레지스트리에서 설치한 컴포넌트 목록과, 그 컴포넌트로 조립한 화면이 돌아옵니다.
STEP 4 · 2분GSAP Skills 로 비싼 사이트 같은 움직임을 넣는다
GSAP 공식 AI 스킬이에요.
타임라인·ScrollTrigger·SplitText 같은 플러그인을 클로드가 제대로 쓰게 가르쳐요.
GSAP는 모든 플러그인까지 무료예요.
npx skills add https://github.com/greensock/gsap-skills
GSAP 스킬로 메인 페이지에 스크롤 애니메이션을 넣어 주세요. 첫 화면 제목은 SplitText 로 한 글자씩 올라오게, 아래 섹션은 ScrollTrigger 로 스크롤에 맞춰 나타나게 하고, 모바일에서도 버벅이지 않게 해 주세요.
성공하면 첫 화면 제목이 한 글자씩 올라오고, 아래 섹션이 스크롤에 맞춰 나타나는 코드가 돌아옵니다.
STEP 5 · 3분Claude SEO 로 검색에 걸리는지 점검한다
기술 SEO, 스키마, 이미지, 사이트맵, AI 검색(GEO)까지 하위 스킬 26개와 서브에이전트 19개로 사이트를 점검하는 스킬이에요.
/plugin marketplace add AgriciDaniel/claude-seo /plugin install claude-seo@agricidaniel-claude-seo
claude-seo 로 [사이트 주소 또는 지금 프로젝트]를 점검해 주세요. 기술 SEO·메타 태그·구조화 데이터·AI 검색 노출 항목에서 빠진 것을 중요한 순서대로 정리하고, 바로 고칠 수 있는 것부터 고쳐 주세요.
성공하면 빠진 항목이 중요한 순서로 정리되고, 바로 고칠 수 있는 것부터 수정됩니다.
다섯 개 한 번에 쓰는 요청문
다섯 개를 다 설치했다면 아래 요청문 하나로 단계별로 나눠 씁니다.
설치한 Impeccable, 21st.dev Magic, shadcn/ui, GSAP Skills, Claude SEO 를 모두 써서 [만들 것]을 진행해 주세요. 어느 단계에서 무엇을 쓸지 먼저 표로 보여 주고, 내가 승인하면 순서대로 진행해 주세요.
자주 막히는 곳
/plugin 명령을 터미널에 쳤더니 안 됩니다.
/plugin·/impeccable 로 시작하는 줄은 클로드 코드 입력줄에 넣어야 합니다.
npx 로 시작하는 줄만 터미널에 넣으세요.
21st.dev Magic 이 키를 달라고 합니다.
21st.dev/mcp 에서 키를 받아 설치 화면 안내대로 넣으세요.
키는 다른 사람에게 보여 주거나 코드에 붙여 올리지 마세요.
설치했는데 스킬을 안 쓰는 것 같습니다.
요청문 맨 앞에 스킬 이름을 넣으세요.
"Impeccable 로", "shadcn 스킬로"처럼 이름을 부르면 그 스킬을 씁니다.
FAQ
다섯 개를 다 깔아야 하나요? 아닙니다.
처음이라면 1번 Impeccable 로 방향을 잡고, 사이트를 공개하기 전에 5번 Claude SEO 로 점검하는 두 개부터 시작하세요.
React 프로젝트가 아니어도 되나요? Impeccable·GSAP Skills·Claude SEO 는 일반 HTML 사이트에도 씁니다.
21st.dev Magic·shadcn/ui 는 React 프로젝트에 맞춰져 있습니다.
공식 참고 자료
이메일 남기고 전체 바로 보기