dittu — MCP-сервер для Claude Code: что делает и как установить
Клонирует фронтенд любого сайта в проект Next.js или Astro и сверяет точность вёрстки попиксельным диффом.
claude mcp add dittu -- npx -y @manishtamang/dittuЧто делает dittu
В отличие от генерации кода по скриншотам, dittu запускает Chromium, скроллит страницу для срабатывания ленивой загрузки и считывает итоговый DOM браузера. Инструмент сохраняет правила CSSOM, шрифты и ключевые кадры анимаций, после чего собирает проект на Next.js App Router или Astro с разбивкой разметки на секционные компоненты.
Через вызовы clone_website и verify_clone агент может скачать разметку, отрефакторить полученные компоненты и сразу проверить расхождение пикселей на разрешениях 1440px и 390px. При необходимости стили преобразуются в утилитарные классы Tailwind CSS.
Сервер переносит исключительно клиентскую часть: серверные маршруты, аутентификация и обработчики форм не копируются. Интерактивные табы или карусели сохраняют внешний вид, но теряют скриптовое поведение, а страницы за экраном логина или защитой от ботов клонировать не выйдет. В среде Linux для работы браузера может понадобиться системный пакет зависимостей Chromium из Playwright.
Какие задачи решает
- перенести интерфейс стороннего сайта в проект Next.js или Astro
- проверить точность копии вёрстки через полностраничное сравнение пикселей
- сконвертировать исходные стили страниц в классы Tailwind CSS
- сохранить разметку скролл-анимаций для последующего рефакторинга
Примеры запросов агенту
- Клонируй https://example.com в проект Next.js и вынеси блок с тарифами в отдельный компонент
- Сделай копию https://example.com на Astro со стилями Tailwind и проверь совпадение вёрстки
Как установить dittu
Командой платформы
claude mcp add dittu -- npx -y @manishtamang/dittuКомандой платформы
codex mcp add dittu -- npx -y @manishtamang/dittuФайл настроек
{
"mcpServers": {
"dittu": {
"command": "npx",
"args": [
"-y",
"@manishtamang/dittu"
]
}
}
}Файл настроек
{
"servers": {
"dittu": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@manishtamang/dittu"
]
}
}
}Командой платформы
gemini mcp add dittu npx -y @manishtamang/dittuПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о dittu
Как установить dittu в Claude Code?
Выполните в консоли команду claude mcp add dittu -- npx -y @manishtamang/dittu. Проверить готовность системы к запуску можно через npx @manishtamang/dittu doctor.
Что именно переносит dittu при клонировании?
Инструмент сохраняет отрендеренную браузером разметку, оригинальные стили, картинки и ключевые анимации. Серверная логика, базы данных и запросы к API не копируются.
Сохраняется ли работа интерактивных элементов вроде слайдеров?
Нет, копируется только их статичный внешний вид. Таймеры JavaScript замораживаются во время захвата, поэтому логику переключения слайдов или вкладок придётся реализовывать заново.
