카테고리: 디자인
웹사이트 클론
기존 웹페이지의 콘텐츠, 에셋, 반응형 레이아웃, 인터랙션을 그대로 살려 수정 가능한 로컬 코드로 다시 만드는 스킬입니다.
할 수 있는 일
- 원본 페이지와 로컬 라우트 매핑
- 실제 콘텐츠와 이미지 등 에셋 추출
- 반응형 레이아웃과 애니메이션까지 재현
- Framer로 만든 사이트도 지원
이런 때 쓰세요
참고하고 싶은 사이트의 구조를 학습하거나, 노코드로 만든 기존 사이트를 직접 관리할 수 있는 코드로 옮길 때 씁니다. 저작권이 있는 디자인은 권리를 확인한 뒤 사용하세요.
설치 방법
- 터미널에서 아래 명령을 실행합니다. 사용하는 에이전트(Claude Code, Codex, Cursor, Gemini CLI, Copilot 등)를 고르면 맞는 폴더에 설치됩니다.
npx skills add https://github.com/JCodesMore/ai-website-cloner-template --skill clone-website
- 직접 설치하려면 GitHub 저장소에서
clone-website스킬 폴더를 내려받아~/.claude/skills/나.cursor/skills/같은 에이전트의 skills 폴더에 복사합니다. - 에이전트에게 관련 작업을 요청하면 스킬이 자동으로 사용됩니다.