프롬프트 한 줄로 만드는 랜딩 페이지
제품을 설명하기만 하세요. Hero, 기능 그리드, 가격, FAQ는 Skill에 이미 있으니 에이전트가 검증된 레이아웃에 문구를 채워 넣습니다.
랜딩 페이지 또는 전체 사이트 · 기존 사이트에 넣을 섹션 · 포트폴리오 또는 이력서
AI 에이전트를 위한 홈페이지 템플릿 Skills
각 Skill은 검증된 웹사이트 디자인 하나입니다. 설치하고 제품을 설명하면 Claude Code, Codex, Cursor가 랜딩 페이지, 포트폴리오, 전체 사이트를 동작하는 HTML로 만들어 줍니다.
지원 환경
처음 써 볼 웹 디자인 Skill 고르기
웹 디자인 Skill이 에이전트에게 주는 것
여기 있는 각 Claude 디자인 Skill은 지침, 레이아웃 참고 자료, 점검 항목이 담긴 폴더입니다. 페이지를 요청하면 에이전트가 이를 불러오므로 디자인 결정은 이미 내려져 있습니다.
일관성을 유지하는 템플릿
포트폴리오, SaaS 사이트, 온라인 스토어 모두 페이지를 추가할 때마다 같은 서체, 간격, 모션을 유지합니다.
코드로 출시되는 프론트엔드 디자인
매번 열고, 편집하고, 배포할 수 있는 HTML 파일로 끝납니다. Claude Code, Codex, Cursor 모두 같은 SKILL.md를 읽습니다.
내 역할에 맞는 웹 디자인 Skills 찾기
각 역할 페이지는 해당 업무에 가장 잘 맞는 Skills를 골라 둡니다.
Skill로 웹사이트 만드는 방법
Claude Code, Codex, Cursor에서 세 단계면 됩니다. 디자인 앱은 필요 없습니다.
- 1
설치 프롬프트 붙여 넣기
설치 프롬프트를 복사해 에이전트에 붙여 넣거나 아래 명령어를 실행하세요. Skill이 에이전트의 skills 폴더에 설치됩니다.
npx skillry-cli@latest install bs-basalt-dev-portfolio - 2
슬래시로 호출하기
슬래시와 Skill 이름을 입력한 뒤, 원하는 것을 평소 말투로 말하세요.
/bs-basalt-dev-portfolio 이 브리프, 문구, 브랜드 키트로 반응형 랜딩 페이지를 만들어 줘. - 3
검토하고 넘기기
만들어진 파일을 열고, 같은 대화에서 수정을 요청한 뒤 게시하거나 넘겨주세요.
index.html
프롬프트 대신 웹 디자인 Skill을 써야 하는 이유는 무엇인가요?
| 항목 | 일반 프롬프트 | Skill |
|---|---|---|
| 레이아웃 | 실행할 때마다 새로 지어냄 | 검증된 Hero, 그리드, 푸터 |
| 타이포그래피 | 기본 시스템 폰트 | 정해진 타입 스케일과 폰트 조합 |
| 일관성 | 페이지마다 모양이 제각각 | 모든 페이지가 하나의 시스템을 따릅니다 |
| 결과물 | 모델이 쓰는 대로 | 확인을 마치고 바로 열 수 있는 HTML 파일 |
모든 Skill을 하나의 플랜으로
이 페이지의 모든 Skill과 앞으로 추가될 새 Skill을 설치할 수 있습니다. 언제든지 취소할 수 있습니다.
언제든지 취소 가능
월간
US$9.99 / 월
매월 결제로 Premium 전체 이용.
- 모든 Premium Skill 이용
- 웹 또는 CLI에서 설치
- 브라우저 승인 방식의 안전한 CLI 접근
- 지속적인 Skill 업데이트
- 새 Premium Skill 포함
- 필요할 때 언제든지 취소
연간 34% 절약
가장 인기연간
US$79 / 년
더 저렴한 연간 요금으로 Premium 전체 이용.
- 모든 Premium Skill 이용
- 웹 또는 CLI에서 설치
- 브라우저 승인 방식의 안전한 CLI 접근
- 지속적인 Skill 업데이트
- 새 Premium Skill 포함
- 필요할 때 언제든지 취소
한 번 결제 · 창립 멤버 가격
창립 멤버 혜택창립 멤버 평생 이용권
US$169 1회 결제
창립 멤버 가격 — 라이브러리가 커질수록 인상됩니다.
- 모든 Premium Skill 이용
- 웹 또는 CLI에서 설치
- 브라우저 승인 방식의 안전한 CLI 접근
- 지속적인 Skill 업데이트
- 새 Premium Skill 포함
- 구독 및 갱신 요금 없음
언제든지 취소할 수 있습니다. 결제 금액은 환불되지 않습니다.
웹 디자인 Skills FAQ
웹 디자인 Skill이란 무엇인가요?
SKILL.md, 레이아웃 참고 자료, 점검 항목이 담긴 폴더로, AI 에이전트에게 검증된 웹사이트 디자인 하나를 가르칩니다. 페이지를 요청하면 에이전트가 자동으로 불러옵니다.
Claude Code가 Skill로 웹사이트를 만들 수 있나요?
네. Claude Code에 Skill을 설치하고 사이트를 설명하면 Skill의 레이아웃에 따라 HTML을 작성합니다. Codex와 Cursor도 같은 방식으로 작동합니다.
HTML, React, Figma 파일 중 무엇을 받나요?
대부분의 웹 디자인 Skills는 동작하는 HTML 파일을 납품합니다. 일부는 상세 페이지에 Next.js나 컴포넌트 출력을 명시하며, Figma 파일을 제공하는 Skill은 없습니다.
웹사이트 템플릿은 무료인가요?
일부는 무료입니다. 무료 Skills에는 Free 라벨이 붙어 있고, 나머지는 Pro에 포함되거나 하나씩 구매할 수 있습니다.