UI-инструменты для вайбкодинга

Собрал несколько сервисов, которые помогают быстрее довести интерфейс до нормального состояния.
Компоненты и эффекты
• Canvas UI — WebGL и 3D-эффекты
• Beam — анимированные светящиеся рамки
• Origin UI — готовые анимированные компоненты
• AI CSS — компоненты для AI-чатов и агентов
• Transitions — переходы и анимации
• Metal — эффект жидкого металла
• Beautiful UI — элементы для AI-интерфейсов
• Orbs — анимированные AI-сферы
Как использовать
Открываете нужный сервис → выбираете компонент → копируете код или команду установки → передаёте агенту вместе с задачей.

Например:
«Добавь этот компонент в hero-блок и адаптируй под текущий дизайн сайта.»

Отдельно: Agentation
Позволяет прямо на странице отметить проблемный элемент и написать, что нужно исправить. После этого формирует понятный контекст для Cursor, Claude Code, Codex и других агентов.
Установка:
npm install agentation
Ещё один полезный инструмент — Better Skills
Это набор skills для проверки:
UI · типографики · layout · цветов · accessibility · текстов
Установка:
npx skills add jakubkrehel/skills
После этого агенту можно дать не абстрактное «сделай красивее», а попросить провести полноценный review интерфейса по конкретным правилам.
Сохраните, если занимаетесь веб-проектами. Скорее всего ещё пригодится.

Если есть любые вопросы пишите - @drskx