#ui #web #ux #examples #ai #dev
Недавно я наткнулся на новый бесплатный ресурс, который, на мой взгляд, очень ценен!
https://21st.dev/
Он содержит более 730 готовых к работе компонентов пользовательского интерфейса от более чем 50 ведущих инженеров-проектировщиков.
Можно бесплатно брать и использовать все, что хочешь.
Запущен 9 января 2025 года - очень свежий!
Здесь оригинальный анонс
Что очень круто он уже оптимизирован для популярных ИИ-редакторов программного кода, таких как
- lovable.dev
- bolt.new
- v0.dev от vercel
с индивидуальными подсказками для легкой интеграции
Алгоритм работы с ним очень прост:
1) Выбирается понравившийся компонент интерфейса
2) Копируется информация о том, как его установить и промпт для выбранного ИИ-помощника
3) Затем повторяем компонент в своем коде
см. скришоты
Недавно я наткнулся на новый бесплатный ресурс, который, на мой взгляд, очень ценен!
https://21st.dev/
Он содержит более 730 готовых к работе компонентов пользовательского интерфейса от более чем 50 ведущих инженеров-проектировщиков.
Можно бесплатно брать и использовать все, что хочешь.
Запущен 9 января 2025 года - очень свежий!
Здесь оригинальный анонс
Что очень круто он уже оптимизирован для популярных ИИ-редакторов программного кода, таких как
- lovable.dev
- bolt.new
- v0.dev от vercel
с индивидуальными подсказками для легкой интеграции
Алгоритм работы с ним очень прост:
1) Выбирается понравившийся компонент интерфейса
2) Копируется информация о том, как его установить и промпт для выбранного ИИ-помощника
3) Затем повторяем компонент в своем коде
см. скришоты
❤1⚡1👍1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
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
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
👍6❤🔥3
🚀 v0.dev стал v0.app: еще одна агентная платформа для создания продуктов с ИИ
Популярная платформа v0.dev получила крупное обновление и сменила домен на v0.app. Теперь это более мощный инструмент, который позволяет создавать полноценные рабочие продукты с помощью агентного ИИ.
Это отличное дополнение к фронентд AI-кодерам lovable и bolt. Только v0.app сейчас бесплатный!
Что нового:
• Агентный ИИ планирует, исследует, создает и отлаживает проекты
• Возможность описать идею и получить готовый продукт
• Бесплатный доступ на этой неделе
Что уже создают пользователи: 1️⃣ Полноценные MVP стартапов 2️⃣ Интерактивные презентации с редактируемыми макетами 3️⃣ Приложения для опросов с подключением к базам данных 4️⃣ Витрины интернет-магазинов 5️⃣ Дашборды с реальными данными и API-интеграцией
Платформа предлагает бесплатный период для тестирования всех возможностей.
Основное преимущество платформы — не нужно писать промпты построчно. Достаточно описать, что хотите создать, и v0.app разберется с остальным 🤖
Я проверил на задаче создания сайта-визитки по профилю в linkedin (см. скриншоты)
Мне понравилось, как v0.app справился с созданием сайта, где есть переключение 2х языков и переключение с темной на светлую тему. Полгода назад, тестируя lovable и bolt на такой задаче, я потратил почти в 2 раза больше времени.
Осталось добавить форму обратной связи через email (для отправки email можно использовать EmailJS), сделать выгрузку CV в pdf и подправить ссылки на соц. сети.
После того как проект готов его можно либо сразу опубликовать на vercel (см. пример по ссылке), либо скачать архив и потом сделать частью более крупного проекта на claude/roocode/cursor/windsurf/...
Если сравнивать с lovable и bolt, то v0.app пока не хватает встроенного Security Audit, также нет отдельного режима планирования и автоматического рефакторинга кода (как в lovable).
А с точки зрения интеграций с Supabase и другими сервисами - у v0.app их даже больше! (подробности тут)
@llm_notes
#v0 #app #vibecoding #ui #agents #vercel #cv #site
Популярная платформа v0.dev получила крупное обновление и сменила домен на v0.app. Теперь это более мощный инструмент, который позволяет создавать полноценные рабочие продукты с помощью агентного ИИ.
Это отличное дополнение к фронентд AI-кодерам lovable и bolt. Только v0.app сейчас бесплатный!
Что нового:
• Агентный ИИ планирует, исследует, создает и отлаживает проекты
• Возможность описать идею и получить готовый продукт
• Бесплатный доступ на этой неделе
Что уже создают пользователи: 1️⃣ Полноценные MVP стартапов 2️⃣ Интерактивные презентации с редактируемыми макетами 3️⃣ Приложения для опросов с подключением к базам данных 4️⃣ Витрины интернет-магазинов 5️⃣ Дашборды с реальными данными и API-интеграцией
Платформа предлагает бесплатный период для тестирования всех возможностей.
Основное преимущество платформы — не нужно писать промпты построчно. Достаточно описать, что хотите создать, и v0.app разберется с остальным 🤖
Я проверил на задаче создания сайта-визитки по профилю в linkedin (см. скриншоты)
Мне понравилось, как v0.app справился с созданием сайта, где есть переключение 2х языков и переключение с темной на светлую тему. Полгода назад, тестируя lovable и bolt на такой задаче, я потратил почти в 2 раза больше времени.
Осталось добавить форму обратной связи через email (для отправки email можно использовать EmailJS), сделать выгрузку CV в pdf и подправить ссылки на соц. сети.
После того как проект готов его можно либо сразу опубликовать на vercel (см. пример по ссылке), либо скачать архив и потом сделать частью более крупного проекта на claude/roocode/cursor/windsurf/...
Если сравнивать с lovable и bolt, то v0.app пока не хватает встроенного Security Audit, также нет отдельного режима планирования и автоматического рефакторинга кода (как в lovable).
А с точки зрения интеграций с Supabase и другими сервисами - у v0.app их даже больше! (подробности тут)
@llm_notes
#v0 #app #vibecoding #ui #agents #vercel #cv #site
👍6❤3