ditto.site

ditto.site는 페이지에 LLM을 들이대고 운에 맡기지 않는다. 브라우저가 렌더링한 내용을 캡처한 뒤 그 동결된 캡처를 프로젝트로 컴파일하므로, 같은 입력에서 매번 바이트 단위로 안정적인 출력이 나온다. 같은 입력, 같은 출력. 이 일관성은 결과 위에 만들어 올리거나 변경 후 다시 생성할 때 중요하다.

이 도구는 반복되는 DOM을 컴포넌트로 쪼개고 깔끔한 영역을 섹션으로 끌어올린 뒤, 단일 모놀리식 파일이 아니라 진짜 프로젝트를 만든다. 거대한 파일을 풀어헤칠 필요가 없다. 기본으로 Next.js App Router를 요청할 수 있고, 스택에 더 맞으면 Vite React도 가능하다. 결과물은 타입과 토큰이 붙어 있어 평소 작업 흐름에 그대로 들어간다.

자기 개발 방식에 맞는 진입점을 고르면 된다. 저장소를 클론해 MIT 라이선스로 파이프라인 전체를 직접 호스팅하거나, 공개 URL을 호스팅된 REST API에 POST해 인프라를 생략하거나, MCP 서버를 연결해 어떤 에이전트든 클로닝을 도구로 쓰게 할 수 있다. 셋 다 아래에서는 같은 결정론적 엔진을 공유한다. 무엇이 맞는지는 환경에 달렸다.

마크업을 넘어서 ditto.site는 페이지에서 디자인 시스템을 뽑아낸다. 디자인 토큰, 웹 폰트, hover와 focus 상태, 드롭다운, 아코디언, 선언적 모션이다. 브레이크포인트와 섹션도 캡처하고, SEO 메타데이터, JSON-LD, 사이트맵도 함께 가져온다. 정적 스냅샷이 아니라 스타일링에 쓸 수 있는 편집 가능한 소재를 준다는 뜻이다.

api.ditto.site의 호스팅 엔드포인트는 REST로 클론 작업을 처리하고, 앱 상대 경로를 키로 한 파일 맵을 반환한다. api.ditto.site/mcp의 MCP 서버를 쓰면 Claude, Cursor, 또는 자체 빌드 루프에 클로닝을 도구로 바로 넘길 수 있다. 환경을 자동화하는 팀에게 클로닝을 파이프라인에 심는 가장 빠른 길이다.

프로젝트 전체가 MIT 라이선스이고 공개적으로 개발되므로 모든 줄을 읽고, PR을 보내고, 발전 방향을 함께 만들 수 있다. 직접 호스팅하면 캡처와 생성된 코드가 자기 머신에 남으므로 데이터 관행이 엄격한 팀에 맞는다. 페이월도 없다. 핵심 엔진을 감추는 유료 등급은 존재하지 않는다.