Автоматизация реверс-инжиниринга UI
Разработчики и дизайнеры теперь могут использовать Design Oracle — инструмент с открытым исходным кодом, который превращает визуальный анализ сайта в структурированные данные. Проект позволяет не просто делать скриншоты, а извлекать «ДНК» дизайна: цветовые палитры, шрифтовые пары, отступы, UX-паттерны и даже генерировать готовые компоненты.
Ключевая особенность — интеграция с AI-агентами через протокол MCP (Model Context Protocol). Это позволяет таким инструментам, как Cursor, Claude Code и opencode, автоматически запрашивать дизайн-систему целевого сайта и внедрять её в код проекта без ручного вмешательства.
Технический стек и архитектура
Система построена на микросервисной архитектуре, обеспечивающей асинхронную обработку тяжелых задач. Frontend работает на Next.js 15 с React 19 и Tailwind v4, в то время как бэкенд на FastAPI управляет очередью задач через ARQ и Redis.
Для анализа страниц используется Playwright (Chromium), который делает полный скриншот страницы, а затем парсит DOM с помощью BeautifulSoup и TinyCSS2. Результаты сохраняются в SQLite, а прогресс передается через SSE (Server-Sent Events).
Возможности экспорта и интеграции
Design Oracle генерирует несколько форматов вывода, что делает его универсальным инструментом для разных этапов разработки. Ниже приведена таблица доступных форматов экспорта:
| Формат экспорта | Описание | Применение |
|---|---|---|
| Tailwind v4 Config | Готовый файл конфигурации с цветами, шрифтами и spacing | Быстрый старт проекта на Tailwind |
| React Components | JSX-код основных блоков (Hero, Nav, Pricing и др.) | Внедрение UI-компонентов в React-приложение |
| Design Tokens (JSON) | Структурированные токены дизайна | Использование в Figma или других дизайн-системах |
| DESIGN.md | Человекочитаемый отчет с эвристическим анализом | Документация и аудит UX |
Интеграция с AI-агентами (MCP)
Инструмент поддерживает режим работы как локального сервера, так и MCP-сервера. Это позволяет AI-ассистентам напрямую вызывать функции анализа. Например, в Claude Code или Cursor можно настроить подключение к локальному хосту, чтобы агент сам находил дизайн-систему конкурента и генерировал код.
Также доступен легковесный CLI-клиент uvx design-oracle-mcp, опубликованный в PyPI, который позволяет вызывать анализ через HTTP без необходимости запускать полный стек с Playwright на стороне клиента.
Ограничения и особенности
Анализ проводится в едином viewport (1440×900), что может быть недостаточно для адаптивного аудита. Также инструмент может сталкиваться с защитой от ботов (Cloudflare, Akamai). Для обхода базовой защиты предусмотрен режим STEALTH_MODE=true, но он не гарантирует работу с корпоративными решениями защиты, требующими решения CAPTCHA.
Детекция компонентов работает на основе эвристик, а не моделей компьютерного зрения, что может приводить к неточностям в сложных макетах. Хранение данных реализовано через SQLite, что подходит для локального использования, но не для мульти-тенантных сред.
Источник: Github ↗