Stagewise: инструмент для точной настройки UI с помощью ИИ 🎯

Stagewise — это браузерная панель инструментов, которая соединяет веб-интерфейс с ИИ-агентами в редакторах кода. Основная идея: выбираете элементы на странице, оставляете комментарий и позволяете ИИ внести нужные изменения.

Как это работает:
🔸 Устанавливаете расширение в VS Code/Cursor
🔸 Добавляете компонент в веб-приложение
🔸 Выбираете элементы прямо в браузере
🔸 Описываете желаемые изменения
🔸 ИИ получает контекст и вносит правки в код

Основные возможности:
🔸 Работает с React, Next.js, Vue
🔸 Передает DOM-элементы, скриншоты и метаданные
🔸 Поддерживает выбор нескольких элементов
🔸 Настраивается через конфигурационный файл

Поддерживаемые ИИ-агенты:
1️⃣ Cursor ✅
2️⃣ Windsurf ✅
3️⃣ GitHub Copilot 🚧 (в разработке)
4️⃣ Остальные пока не поддерживаются

Архитектура системы:
🔸 Браузерная панель инструментов
🔸 Расширение для VS Code
🔸 Типобезопасная RPC-система для связи
🔸 MCP-сервер для интеграции с ИИ

Инструмент решает проблему точной настройки UI, когда ИИ делает 80% работы правильно, но остальные 20% требуют детальных правок. Вместо описания изменений текстом, предоствляя скриншот, вы просто показываете конкретные элементы. Такая функциональность обычно встроена во все AI веб-кодеры (lovable, bolt.new, replit и т.д.), а stagewise дает возможность получить ее в IDE-кодерах на своем ПК или mac'e.

Проект с открытым исходным кодом, активно развивается.
Монорепозиторий включает компоненты для разных фреймворков и систему сборки на базе pnpm и Turborepo.
Deepwiki документация со схемами по нему здесь.

#ai #frontend #cursor #ui #development