리본랩스 스킬팩
clone-website · MIT

맘에 드는 사이트,
주소만 주세요.

그 화면의 치수를 재 와서 다시 짓습니다 — 색 · 글꼴 · 글자크기 · 간격 · 모서리 · CSS 변수 · 섹션 뼈대. 남의 사진과 로고는 가져오지 않습니다.

클로드 코드 스킬 · API 키 없음 · 전부 로컬에서 돕니다

실제 사례

이 페이지도 그렇게 만들었습니다

https://trypost.it/en 을 정찰해 나온 값입니다. 꾸민 숫자가 아니라 돌려서 나온 결과입니다.

204종

글꼴

10종

글자크기

28종

굵기

15종

모서리

22종

간격

32종

CSS 변수

510종

섹션

12종

HTML 172,076자 · CSS 167,206자를 읽었고, 자산 파일은 0개 받았습니다.

무엇이 나오나

주소 하나 넣으면 이런 게 나옵니다

아래는 흔한 랜딩 한 장을 정찰기에 그대로 넣어 실제로 나온 값입니다.

#232a38×2#e8580c×2#0f1115×1#8c949f×1#f5f3ef×1
글꼴
Pretendard,-apple-system,sans-serif×1
글자크기
14px×116px×154px×1
굵기
700×1900×1
모서리
14px×2
간격
24px×214px×116px×128px×196px×1
CSS 변수
--bg: #0F1115×1--brand: #E8580C×1--fg: #F5F3EF×1--line: #232A38×1--radius: 14px×1

섹션 3 · 헤더 1 · 내비 1 · 푸터 1 · 제목 4개

재 오는 것과 안 가져오는 것

치수는 재 와도 되고, 짐은 들고 오면 안 됩니다.

재 옵니다

  • 색값 · 간격 · 모서리 반경
  • 글꼴 이름 · 글자크기 · 굵기
  • CSS 변수 · 섹션 뼈대 · 제목 위계
  • 자산 목록(주소만 적습니다)

안 가져옵니다

  • 이미지 · 폰트 파일
  • 로고 · 사진 · 일러스트
  • 남이 쓴 문장
  • 상표는 저작권과 별개로 상표법이 걸립니다

#E8580C 와 여백 24px 은 저작물이 아니고, 남의 사진과 로고와 글은 저작물입니다.

5단계

다섯 단계로 짓습니다

건너뛰면 「비슷한데 어딘가 다른」 것이 나옵니다.

정찰

주소를 넣으면 색·글꼴·글자크기·굵기·모서리·간격·CSS 변수·섹션 뼈대를 실제로 재 옵니다. 추측하지 않습니다.

토대

재 온 값으로 토큰 파일 하나를 먼저 고정합니다. 이걸 건너뛰면 나중에 색 하나 바꾸는 데 파일 스무 개를 엽니다.

명세

섹션마다 한 장씩 씁니다. 「크게」가 아니라 「48px」로 적습니다.

짓기

명세 하나당 파일 하나. 의존성 없는 HTML + CSS 가 기본이고, 원하시면 Next.js 로 냅니다.

대조

원본과 만든 화면을 같은 폭에서 나란히 놓고 다른 곳을 목록으로 적어 고칩니다. 모바일 390 도 봅니다.

받는 법

설치는 한 줄입니다

클로드 코드를 껐다 켜면 끝입니다. 그다음부터는 그냥 말하면 됩니다 — “이 사이트처럼 만들어 줘 https://…”

클로드 코드에서 바로 실행하기

터미널을 따로 열지 않아도 됩니다. 클로드 코드 안에서 둘 중 하나면 됩니다.

1
명령 앞에 ! 붙이기 — 제일 확실합니다
!npx --yes reborn-clone
맨 앞의 ! 까지 함께 붙여넣으세요. 클로드를 거치지 않고 곧장 설치가 돕니다.
중간의 --yes 도 빼지 마세요 — 이게 없으면 «받아도 되나요?» 하고 묻는 자리에서 아무 말 없이 멈춥니다.
2
클로드에게 그냥 말하기
reborn-clone 설치해줘
클로드가 명령을 대신 돌리고, 막히면 이유까지 봐 줍니다.
3
둘 다 안 되면 검은 창에서 — 클로드를 아예 거치지 않습니다
npx --yes reborn-clone
윈도우 — 윈도우키를 누르고 cmd 라고 친 뒤 엔터. command+스페이스 누르고 터미널 엔터.
어느 폴더에서 하셔도 상관없습니다 — 스킬은 항상 내 계정 폴더(~/.claude/skills)에 깔립니다. 여기서는 ! 를 빼세요.

먼저 컴퓨터에 Node.js 가 있어야 합니다. 없으면 위 명령이 아예 안 뜁니다 — nodejs.org 에서 큰 초록 버튼을 누르고 계속 «다음»만 누르시면 됩니다(3분). 클로드 코드를 쓰고 계시면 이미 있습니다.
클로드가 “실행하지 않겠습니다”라고 하면 1번을 쓰세요. 이제 막 나온 설치기라 클로드가 낯선 것으로 보고 막는 것이고, 그 판단 자체는 옳습니다. ! 를 붙이면 클로드에게 부탁하지 않고 바로 돌아갑니다.
폰이나 브라우저의 클로드 화면에서는 안 됩니다 — 그 창은 인터넷 저쪽의 임시 서버라 깔아도 내 컴퓨터에 남지 않습니다. 내 컴퓨터의 클로드 코드나 터미널에서 해 주세요.

설치가 끝나면 클로드 코드를 껐다 켜야 스킬이 잡힙니다.

터미널을 못 쓰시거나 npx 가 막힌 환경이면 reborn-clone.zip 을 받아 node cli.mjs 로 같은 설치가 됩니다.

먼저 아셔야 할 것

안 되는 것

되는 것보다 이쪽을 먼저 아셔야 헛수고를 안 합니다.

자바스크립트로 스타일을 나중에 붙이는 사이트
화면에 재 올 CSS 가 없습니다. 보고서의 CSS 글자 수가 유난히 작으면 그 경우입니다.
로그인 뒤 화면
공개된 주소만 읽습니다.
움직임
정지 화면의 치수까지입니다. 스크롤 애니메이션·전환 타이밍은 직접 만들어야 합니다.
원본의 내용
껍데기가 같아도 안에 들어갈 글과 사진은 당신 것이어야 합니다.

화면 말고 을 재 오는 것들

리본랩스가 골라 담은 스킬 48종. 목록과 직접 까는 명령까지 그 페이지에 적어 두었습니다.

리본랩스 스킬팩 보기