클로드 홈페이지 AI 티 빼는 스킬 — frontend-design

★설치 — 복사해서 터미널에 붙여 넣고 Enter

홈페이지를 만들 프로젝트 폴더에서 터미널을 열고 입력해요.

npx skills add https://github.com/anthropics/skills --skill frontend-design

설치되면 그 폴더 안 .claude/skills/frontend-design/ 에 스킬 파일이 생겨요. 설치 위치를 물으면 Claude Code 를 고르면 돼요.

모든 프로젝트에서 쓰려면 끝에 -g (내 컴퓨터 전체 설치)

npx skills add https://github.com/anthropics/skills --skill frontend-design -g

클로드 코드 안에서 설치하는 방법

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

이 방법은 frontend-design 을 포함한 공식 예시 스킬 묶음이 함께 설치돼요.

★요청할 때 — 맨 앞에 이 한마디

frontend-design 스킬로 

뒤에 원래 하던 요청을 그대로 이어 쓰면 돼요.

영상 속 요청 — 카페

frontend-design 스킬로 동네 카페 '모퉁이 커피'를 소개하는 랜딩페이지를 index.html 한 파일로 만들어줘. 대표 메뉴, 영업시간, 오시는 길 섹션을 넣어줘.

바꿔 쓰는 예시 (가게·서비스 이름만 바꾸세요)

frontend-design 스킬로 내 포트폴리오 사이트를 index.html 한 파일로 만들어줘. 소개, 작업물, 연락처 섹션을 넣어줘.

frontend-design 스킬로 동네 필라테스 스튜디오를 소개하는 랜딩페이지를 index.html 한 파일로 만들어줘. 수업 종류, 시간표, 상담 신청 버튼을 넣어줘.