Siteprint

페이지의 모든 색을 중성색과 유채색으로 나눠 HEX, RGB, HSL로 보여 준다. 스캔 한 번이 그 사이트의 디자인 시스템이 된다. 색상에 더해 캔버스, 표면, 텍스트, 흐린 색 같은 역할을 붙이므로 어떤 색이 어디로 가야 하는지 에이전트가 안다. 다크 모드 변형과 그라데이션은 사이트가 쓰는 경우 따로 기록한다.

타이포그래피 패널은 폰트 패밀리, 굵기, 불러오는 파일과 그 출처를 적는다. 텍스트 스타일에는 크기, 행간, 자간, 적용되는 요소가 따라붙는다. 스크린샷이 줄 수 없는 부분이고, 재구축이 어긋나기 시작하는 지점도 대개 여기다.

간격 단계와 모서리 반경, 콘텐츠 폭은 렌더링된 레이아웃에서 읽는다. 추측하지 않는다. 그림자와 이징 곡선, 지속 시간에는 미리보기가 붙어 마우스를 올리면 재생된다. 참고 사이트에서는 맞아 보이던 버튼이 내 구현에서 이상할 때 쓸모가 있다.

Pro는 스캔 하나를 레이아웃과 모션, 치수를 설명하는 프롬프트 한 편으로 바꾼다. 지정한 AI 빌더의 형식에 맞춘다. DESIGN.md는 같은 디자인을 고정 페이지가 아닌 방향으로 적으므로, 참고 사이트에 아직 없는 화면에도 에이전트가 적용할 수 있다.

프롬프트 외에 Tailwind v4 설정, shadcn/ui 테마, CSS 변수, 토큰 파일을 내보낸다. 색과 텍스트 스타일마다 이름이 붙고 위치가 잡혀 있어, 손으로 이름을 바꾸며 반나절을 쓰는 작업이 사라진다.

Safari 확장은 로컬 MCP 디자인 서버를 띄우고 list_designs, get_design, get_reference_image 세 도구를 제공한다. Claude Code, Cursor, Codex, 그 밖의 MCP 클라이언트가 저장한 스캔을 프롬프트, 디자인, 레이아웃, Tailwind 설정, shadcn 테마, CSS, JSON으로 읽는다. 웹 버전에서는 Library에서 에이전트를 연결하고, 확장 경로에서는 파일이 맥 밖으로 나가지 않는다.

내 버전의 주소를 붙여 넣으면 Siteprint가 참고 사이트와 비교한다. 결과는 수정 목록과 내 페이지를 원본 쪽으로 밀어 주는 프롬프트다. 레이아웃이 몇 픽셀 어긋났을 때 헥스 코드 차이를 들여다보는 것보다 낫다.