Repolode
Предложить
jomvick

jomvick/design-oracle

Анализирует сайты с помощью Playwright и экспортирует их дизайн-систему в виде конфига Tailwind v4, React-компонентов, дизайн-токенов или отчёта DESIGN.md.

Открыть на GitHubСайт
Звёзды
81
Форки
5
Открытые issues
0
Последний коммит
2 месяца назад

Что это?

Design Oracle принимает URL, отрисовывает всю страницу в Chromium с помощью Playwright и извлекает её визуальную систему: цвета, типографику, отступы, такие компоненты, как hero, pricing, nav и FAQ, а также UX-паттерны. Для каждого анализа сохраняются скриншот, наложение с компонентами и исходные данные в формате JSON.

Результаты можно экспортировать как тему Tailwind v4, заготовки React-компонентов в JSX, структурированные дизайн-токены в JSON или отчёт о дизайне в Markdown. Проект состоит из бэкенда на FastAPI с воркером ARQ поверх Redis и веб-интерфейса на Next.js с отображением хода выполнения через SSE; развернуть его можно с помощью Docker Compose.

Проект также доступен AI-агентам через MCP-сервер по HTTP или stdio либо через лёгкий клиент `uvx design-oracle-mcp`. Компоненты обнаруживаются эвристическими методами, без моделей компьютерного зрения; для хранения используется SQLite в режиме одного пользователя, а размер viewport составляет 1440×900.

Ключевые возможности

  • 01Снимает всю страницу с помощью Playwright и Chromium.
  • 02Извлекает цвета, типографику, отступы и координаты границ компонентов.
  • 03Экспортирует конфиг Tailwind v4, React JSX, дизайн-токены в JSON и отчёты в Markdown.
  • 04Показывает ход анализа в реальном времени через SSE и pub/sub Redis.
  • 05Предоставляет AI-агентам инструменты анализа через MCP-сервер.

Сценарии использования

  • Преобразование стилей существующего сайта в тему Tailwind для редизайна.
  • Создание заготовок React-компонентов, повторяющих структуру референсного сайта.
  • Передача AI-агенту для написания кода структурированного описания дизайна сайта перед разработкой интерфейса.
  • Документирование дизайн-системы сайта конкурента или устаревшего сайта в виде отчёта Markdown.

Быстрый старт

  1. 1

    Клонируйте репозиторий и перейдите в его каталог

  2. 2

    Скопируйте файл env (необязательно при использовании Docker)

    cp .env.example .env
  3. 3

    Запустите с помощью Docker Compose, затем откройте http://localhost:3000

    docker compose up --build -d

Что важно знать

  • Анализ выполняется в одном окне просмотра размером 1440×900; анализ для нескольких устройств не реализован.
  • Сайты с продвинутой защитой от ботов могут блокировать Playwright; также может потребоваться решение CAPTCHA или платные прокси.
  • Обнаружение компонентов основано на эвристиках, а не на моделях ML или компьютерного зрения.
  • Хранилище SQLite подходит для локального использования одним пользователем, но не для развертываний с несколькими арендаторами.

Темы

#design-system#design-tokens#website-analysis#tailwind#playwright#react#mcp#arq#fastapi#nextjs

Частые вопросы

Что такое design-oracle?
Анализирует сайты с помощью Playwright и экспортирует их дизайн-систему в виде конфига Tailwind v4, React-компонентов, дизайн-токенов или отчёта DESIGN.md. Design Oracle принимает URL, отрисовывает всю страницу в Chromium с помощью Playwright и извлекает её визуальную систему: цвета, типографику, отступы, такие компоненты, как hero, pricing, nav и FAQ, а также UX-паттерны. Для каждого анализа сохраняются скриншот, наложение с компонентами и исходные данные в формате JSON.
design-oracle можно использовать бесплатно? Какая у него лицензия?
design-oracle распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
design-oracle всё ещё поддерживается?
Обновлялся за последние 6 месяцев. Последний коммит в design-oracle — 9 авг. 2026 г..
Для чего можно использовать design-oracle?
Преобразование стилей существующего сайта в тему Tailwind для редизайна. Создание заготовок React-компонентов, повторяющих структуру референсного сайта. Передача AI-агенту для написания кода структурированного описания дизайна сайта перед разработкой интерфейса. Документирование дизайн-системы сайта конкурента или устаревшего сайта в виде отчёта Markdown.
Как установить design-oracle?
Клонируйте репозиторий и перейдите в его каталог Скопируйте файл env (необязательно при использовании Docker): cp .env.example .env Запустите с помощью Docker Compose, затем откройте http://localhost:3000: docker compose up --build -d
Где скачать design-oracle?
Исходный код и инструкции по установке — на GitHub: https://github.com/jomvick/design-oracle

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты