목업이 아닌 동작하는 HTML
파일을 열고, 클릭해 보고, 배포하세요. 중간에 디자인 도구가 필요 없습니다.
랜딩페이지 & 제품 사이트 · 포트폴리오 & 개인 사이트 · 쇼핑몰 & 관리자 페이지
AI 에이전트를 위한 프론트엔드 디자인 Skills
에이전트가 동작하는 HTML로 만들어 주는 프런트엔드 디자인 템플릿: 랜딩 페이지, 포트폴리오, 대시보드 전체 또는 Hero, 가격, 후기 섹션 하나.
지원 환경
처음 써 볼 웹 페이지 Skill 고르기
프런트엔드 디자인 Skills로 할 수 있는 것
여기 있는 모든 Skill은 브라우저에서 열 수 있는 파일로 끝납니다.
전체 사이트 또는 단일 섹션
여러 페이지로 된 사이트, 또는 기존 페이지에 넣을 Hero, 후기, 차트 섹션 하나.
기본적으로 반응형
레이아웃은 출시 전에 데스크톱과 모바일 너비에서 검증됩니다.
내 역할에 맞는 웹 페이지 Skills 찾기
각 역할 페이지는 해당 업무에 가장 잘 맞는 Skills를 골라 둡니다.
Skill로 웹 페이지 만드는 방법
Claude Code, Codex, Cursor에서 세 단계면 됩니다. 디자인 앱은 필요 없습니다.
- 1
설치 프롬프트 붙여 넣기
설치 프롬프트를 복사해 에이전트에 붙여 넣거나 아래 명령어를 실행하세요. Skill이 에이전트의 skills 폴더에 설치됩니다.
npx skillry-cli@latest install bs-dot-avatar-maker - 2
슬래시로 호출하기
슬래시와 Skill 이름을 입력한 뒤, 원하는 것을 평소 말투로 말하세요.
/bs-dot-avatar-maker 이 브리프, 문구, 브랜드 키트로 반응형 랜딩 페이지를 만들어 줘. - 3
검토하고 넘기기
만들어진 파일을 열고, 같은 대화에서 수정을 요청한 뒤 게시하거나 넘겨주세요.
index.html
프롬프트 대신 웹 페이지 Skill을 써야 하는 이유는 무엇인가요?
프롬프트로는 페이지를 만들 수 있습니다. Web Skill은 제품 사실 기반, 반응형 인터랙션, 검증, 유지보수 가능한 납품물을 더합니다.
| 항목 | 일반 프롬프트 | Skill |
|---|---|---|
| 콘텐츠 | 익숙한 템플릿에 자리 채움용 문구를 넣음 | 실제 청중, 제품 사실, 근거를 중심으로 페이지를 구성합니다 |
| 인터랙션 | 보기에만 그럴듯한 버튼과 탭을 그림 | 실제 상태, 내비게이션, 오류 처리를 연결합니다 |
| 납품 | 완성된 것처럼 보이는 코드를 돌려줌 | 기존 기술 스택을 따르고, 의존성을 명시하며, 휴대폰과 키보드 사용을 점검합니다 |
프론트엔드 디자인 Skill로 만들 수 있는 것
- 01런칭이나 캠페인을 위한 랜딩 페이지문구와 이미지를 섹션이 명확하고 가입 또는 구매 버튼이 있는 페이지로 바꿉니다.
- 02클릭 가능한 프로토타입실제 화면과 버튼으로 목업을 만들어, 개발 전에 팀이 제품을 써 볼 수 있게 합니다.
- 03대시보드숫자, 표, 차트를 어떤 화면에서도 읽기 쉽게 배치합니다.
- 04재사용 가능한 페이지 구성 요소버튼, 카드, 레이아웃을 하나의 스타일로 통일해 새 페이지도 기존 페이지와 어울립니다.
프론트엔드 디자인 Skill 고르는 방법
- 1제품에 맞는 스타일 고르기SaaS, 포트폴리오, 쇼핑몰, 이벤트 페이지: 만들고 있는 것에 맞는 룩을 고르세요.
- 2라이브 예시 써 보기모든 Skill 페이지에 데스크톱과 휴대폰에서 직접 클릭해 볼 수 있는 예시 사이트가 있습니다.
- 3다운로드해서 써 보기에이전트에 설치하고 직접 준비한 콘텐츠로 페이지 하나를 만들어 보세요. 몇 분이면 알 수 있습니다.
모든 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이 프로젝트에 맞게 조정된다고 명시되어 있다면 가능합니다. 그렇지 않으면 독립 페이지를 납품하므로 통합은 직접 계획해야 합니다.
편집 가능한 HTML을 받나요, 미리보기만 받나요?
편집 가능한 코드입니다. 에이전트가 HTML 파일을 직접 작성하며, 정확한 파일, 에셋, 실행 단계는 상세 페이지의 You get 목록에 나와 있습니다.
결제와 분석이 연결되어 있나요?
상세 페이지에 명시되어 있지 않다면 아닙니다. 디자인 속 결제 버튼이나 차트는 직접 서비스를 연결하기 전까지는 UI일 뿐입니다.
페이지를 출시하기 전에 무엇을 확인해야 하나요?
모든 컨트롤을 클릭해 본 다음, 데스크톱 너비와 휴대폰 너비, 키보드만 사용할 때, 동작 줄이기를 켰을 때 각각 페이지를 확인하세요. 긴 텍스트, 오류 상태, Skill이 약속한 내보내기나 오프라인 기능도 점검하세요.