Ditto: бесплатное клонирование дизайна любого сайта в чистый код за 5 минут

Раньше, чтобы скопировать дизайн понравившегося сайта, приходилось либо вручную переписывать CSS, либо использовать «костыли» вроде сохранения страницы как HTML. Ditto решает эту проблему кардинально: вы просто кидаете URL, а он отдаёт готовый TypeScript-проект с выделенными компонентами, дизайн-токенами и полной адаптивностью. Ditto - здесь

Ditto — это детерминированный клонер сайтов с открытым исходным кодом, который превращает любой публичный URL в чистый, компонентный код на Next.js или Vite. В отличие от большинства AI-клонеров, он не полагается на LLM для угадывания структуры страницы — вместо этого он фиксирует то, что браузер реально отрендерил, и превращает это в код.

Проект выпущен под лицензией MIT, полностью бесплатен и доступен для самостоятельного хостинга.

1. Извлечение дизайн-системы и токенов

Ditto не просто копирует HTML. Он глубоко анализирует страницу и извлекает:

· Дизайн-токены: цвета, отступы, типографику

· Шрифты: автоматически выкачивает используемые веб-шрифты

· Адаптивные брейкпоинты: сохраняет логику отзывчивой вёрстки

· Интерактивные элементы: ховеры, фокусы, дропдауны, аккордеоны, анимации

2. Компонентный код вместо монолита

Вместо одного огромного HTML-файла Ditto разбивает повторяющиеся DOM-элементы на переиспользуемые React-компоненты. На выходе вы получаете реальную проектную структуру: типизированную, токенизированную и готовую к поддержке.

3. Детерминированность: стабильность вместо случайности

Главное отличие от AI-клонеров — детерминированность. Один и тот же URL при повторном запуске даёт идентичный результат. Никаких «галюцинаций» и случайных артефактов.

4. Экспорт в готовые форматы

Ditto экспортирует результат в:

· Figma — через дизайн-токены

· React-компоненты — готовые к использованию

· Tailwind-конфиг — все цвета и отступы в виде токенов

· CSS-переменные — для любой CSS-архитектуры

· Storybook — для документирования компонентов

· WordPress/Elementor — для сайтов на WP

1. Self-hosting (рекомендуется)

Клонируйте репозиторий ion-design/ditto.site и запустите локальный CLI. Полный контроль над данными и процессом.

2. Hosted REST API

Отправляйте URL через API и получайте готовый проект в виде файловой карты или ZIP-архива. Бесплатно, с API-ключом.

3. MCP-сервер для ИИ-агентов

Подключите Ditto к Claude Code, Cursor или любому AI-агенту через MCP. Агент сможет:

· Запустить клонирование

· Проверить статус

· Просмотреть метаданные результата

· Прочитать выборочные файлы без загрузки всего проекта

· Разработчикам — быстрый старт новых проектов на основе существующих дизайнов

· Дизайнерам — извлечение дизайн-токенов для Figma и систематизация визуального языка

· AI-разработчикам — подключение через MCP для автоматического реверс-инжиниринга интерфейсов

· Командам — ускорение передачи дизайна в разработку и миграция старых сайтов на современный стек

Ditto восстанавливает только фронтенд. Он не может получить:

· Приватный бэкенд и бизнес-логику

· Данные, требующие аутентификации

· Исходный код или базу данных

Клонирование сайта — это отправная точка для вашей работы, а не лицензия на перепубликацию чужого бренда или контента. Используйте Ditto для обучения, прототипирования и редизайна, но не для прямого копирования чужих продуктов.

Ditto — это революция для веб-дизайна и разработки. Он автоматизирует то, что раньше занимало часы или дни: анализ интерфейса, извлечение дизайн-системы и генерацию готового кода.

Ключевые преимущества:

· Бесплатно — MIT-лицензия, open-source

· Без LLM — детерминированный, стабильный и предсказуемый результат

· Чистый код — компоненты, токены, TypeScript

· Гибкость — Next.js, Vite, React, Tailwind или plain CSS

· MCP-интеграция — работает с любыми AI-агентами

· Реальные форматы — Figma, Storybook, WordPress

Начните с простого лендинга, чтобы оценить точность клонирования. А когда освоитесь — используйте Ditto как стартовую точку для своих проектов, экономя дни на вёрстке и настройке дизайн-системы.

Ditto - здесь