AI가 웹사이트의 디자인 스타일을 복제하도록 돕고 싶으신가요? 스크린샷에만 의존하여 설명하는 방식은 효과가 좋지 않습니다. 색상, 글꼴(font), 간격(spacing)과 같은 세부 사항을 정확하게 복제하기는 어렵기 때문입니다.

최근 어떤 웹사이트든 프론트엔드(frontend) 디자인을 역공학(reverse-engineer)하여 AI가 직접 읽을 수 있는 파일로 패키징할 수 있는 명령줄 도구(command-line tool)인 skillui를 발견했습니다.

단 한 번의 명령으로 대상 사이트를 지정하면, 완전한 색상 구성(color scheme), 글꼴(fonts), 간격(spacing), 컴포넌트 구조(component structure), 심지어 애니메이션(animations)과 상호작용 상태(interaction states)까지 모두 추출할 수 있습니다. 이 모든 과정은 어떠한 AI API에도 의존하지 않고 순수하게 정적 분석(static analysis)을 통해 이루어집니다.

GitHub:
http://github.com/amaancoderx/skillui

...
이 도구는 페이지의 처음부터 끝까지 스크롤 스크린샷을 자동으로 캡처할 수 있으며, 애니메이션 라이브러리(animation library) 유형을 감지하고, 호버(hover) 및 포커스(focus) 상태에서의 스타일 변화를 캡처할 수 있습니다. 출력 결과는 믿기지 않을 정도로 포괄적입니다.

실제 운영 중인 웹사이트를 분석하는 것 외에도, 로컬 프로젝트를 스캔하거나 Git 저장소(repo)를 직접 클론(clone)하여 분석하는 것도 지원합니다. 생성된 파일은 Claude Code에 바로 넣어 동일한 스타일로 페이지를 구축하는 데 사용할 수 있습니다.

명령어 하나로 설치가 가능하여, 페이지를 구축할 때 다른 사이트의 디자인을 참고해야 하는 분들에게 완벽한 도구입니다. 북마크해 두고 사용할 가치가 있습니다.