ditto.site란?

ditto.site는 오픈소스 기반의 결정론적 웹사이트 클로너입니다. 공개된 URL을 입력하면 몇 분 안에 깔끔하고 컴포넌트화된 Next.js 또는 Vite 코드로 충실한 복사본을 제공합니다. 예측 불가능한 LLM 출력에 의존하는 도구와 달리, ditto는 완전히 결정론적이어서 모든 클론이 빠르고 저렴하며 일관됩니다. 컴포넌트, 디자인 토큰, 인터랙션, 호버 상태 등을 추출하여 즉시 활용 가능한 실제 코드베이스를 제공합니다.

대상 사용자

• AI 앱 빌더 — 빈 캔버스 대신 모든 신규 고객에게 충실하고 실제 코드로 구성된 시작점이 필요한 분
• 사이트 마이그레이션 또는 리디자인 개발자 — 기존 웹사이트를 처음부터 다시 시작하는 대신 유지보수 가능한 타입 기반 컴포넌트로 캡처하려는 분
• 에이전트 및 자동화 엔지니어 — MCP 서버를 통해 Claude, Cursor 또는 자체 빌더 루프에 클로닝 도구를 연결하려는 분

주요 기능

결정론적 클로닝 엔진

Ditto는 LLM을 사이트에 적용하고 결과를 기대하지 않습니다. 완전히 결정론적인 파이프라인은 매번 빠르고 안정적이며 일관된 출력을 제공합니다. 높은 정확도로 100% 재현 가능한 결과를 얻을 수 있습니다. 놀라움도, 환각도 없습니다.

컴포넌트화된 출력

반복되는 DOM은 컴포넌트로 분할되고, 깔끔한 페이지 영역은 섹션이 되며, 편집 가능한 콘텐츠 모델이 추출됩니다. 결과물은 하나의 거대한 파일이 아닌, 타입이 지정되고 토큰화된 코드를 갖춘 실제 프로젝트입니다. 호버 상태, 드롭다운 메뉴, 아코디언, 선언적 모션 등이 모두 보존됩니다.

세 가지 통합 모드

선호하는 방식으로 동일한 결정론적 엔진을 사용하세요. MIT 라이선스의 오픈소스 버전으로 전체 파이프라인을 자체 호스팅하거나, 간단한 POST-및-폴링 워크플로로 호스팅된 REST API를 호출하거나, MCP 서버를 모든 에이전트에 연결하여 빌드 루프 내에서 자동 클로닝을 수행할 수 있습니다.

프레임워크 및 스타일링 유연성

출력 프레임워크로 Next.js 또는 Vite 중에서 선택하고, 스타일링은 Tailwind v4 또는 일반 CSS를 사용할 수 있습니다. Ditto는 단일 페이지 및 다중 페이지 경로를 지원하며, 모든 항목은 기본적으로 TypeScript로 출력됩니다.

차별점

"AI 앱 빌더에게 완벽한 첫 단계입니다: 모든 신규 고객에게 빈 캔버스 대신 충실하고 실제 코드로 구성된 시작점을 제공하세요."

대부분의 클로닝 도구는 지저분하고 유지보수하기 어려운 출력을 생성하거나 예측 불가능한 AI에 의존합니다. Ditto의 결정론적 접근 방식은 매번 깔끔하고 컴포넌트화된 코드베이스를 제공하며, 디자인 토큰, 폰트, 인터랙션, 중단점이 자동으로 추출됩니다. 실시간 워크플로에서 사용할 수 있을 만큼 빠르고, 대규모로 실행할 수 있을 만큼 저렴합니다.

이런 분들께 추천합니다

AI 기반 앱을 개발 중이며 실제 웹사이트를 시작 템플릿으로 안정적으로 클론할 방법이 필요하신 분, 또는 기존 사이트를 수동 재작업 없이 최신 프레임워크로 마이그레이션하려는 분. 또한 에이전트와 함께 워크플로를 자동화하고, 자체 호스팅하거나 API로 호출할 수 있는 결정론적 오픈소스 클로닝 도구가 필요하신 분에게 ditto가 이상적입니다.