2024-08-01 12:00:01
Про інструменти вайб-кодингу
Вайб-кодинг — це новий підхід до створення продуктів із використанням AI-інструментів, який дозволяє швидко та інтуїтивно створювати код через візуальні інтерфейси без необхідності писати код саморуч.
Нижче — список основних інструментів станом на сьогодні. Але з тією швидкістю, з якою з’являються нові сервіси, вже за пів року цей перелік може змінитися.
Категорії інструментів:
🟢 Мінімальний контроль: усе робить AI.
🟡 Помірний контроль: можливе часткове втручання.
🔵 Повний контроль: код-редактор з AI-помічником.
🟢 Bolt
Ідеальний інструмент, щоб швидко почати. Підтримує імпорт з Figma, створення мобільних прототипів з переглядом через QR-код (завдяки Expo), та навіть розгортання в App Store / Web. Але редагування або рефакторинг компонентів — болісне, особливо якщо використовуєш зовнішні сервіси, як Supabase.
🟢 Lovable
Схожий на Bolt, але має розумні підказки наступних дій. Інтеграція зі Stripe або PayPal дозволяє швидко додати платну підписку. Також є синхронізація з GitHub — можна внести зміни вручну в редакторі й повернути код назад у Lovable. Також є можоивість попросити AI не чіпати певні частини коду — що зменшує ризик зламати інші елементи.
🟡 V0 (Vercel)
Чудовий вибір, якщо хочеш вийти за межі прототипів. Мінус — Figma-інтеграція не входить у безкоштовний план. Плюс — можна бачити роботи інших, використовувати їхню логіку в своїх проектах.
🟡 Replit
Тут усе відкрито — структура файлів, можливість додавати файли, бачити, що робиться “під капотом”. Зручно для співпраці дизайнерів і розробників. Replit навіть пропонує “таски”, які можна автоматично додати до проекту. Особливо крута фіча — мобільний застосунок. Можна працювати й отримувати нотифікації прямо на телефоні.
🔵 Cursor
Це повноцінний код-редактор, тому ви маєте повну свободу встановлювати пакети й редагувати код так, як вам хочеться. Але разом із цим з’являється й можливість усе запросто зламати .
🔵 Figma Make
AI-інструмент від Figma, що об'єднує в одному середовищі дизайн, створення інтерактивних прототипів і генерацію готового для використання коду. Дизайнери можуть легко перетворювати свої ідеї в реальні продукти завдяки автоматичній генерації коду та повній інтеграції з усіма інструментами екосистеми Figma. Поки що інструмент знаходиться на ранньому етапі розвитку, через що деякі функції можуть працювати нестабільно.
Відчуваю, що дуже скоро вміння вайб-кодити стане must-have навичкою для кожного дизайнера. Тож я активно досліджую цю тему і час від часу ділитимусь спостереженнями.
Діліться своїм досвідом і доповненнями до написаного вище, у комментарях🙏
@berestux
Вайб-кодинг — це новий підхід до створення продуктів із використанням AI-інструментів, який дозволяє швидко та інтуїтивно створювати код через візуальні інтерфейси без необхідності писати код саморуч.
Нижче — список основних інструментів станом на сьогодні. Але з тією швидкістю, з якою з’являються нові сервіси, вже за пів року цей перелік може змінитися.
Категорії інструментів:
🟢 Мінімальний контроль: усе робить AI.
🟡 Помірний контроль: можливе часткове втручання.
🔵 Повний контроль: код-редактор з AI-помічником.
🟢 Bolt
Ідеальний інструмент, щоб швидко почати. Підтримує імпорт з Figma, створення мобільних прототипів з переглядом через QR-код (завдяки Expo), та навіть розгортання в App Store / Web. Але редагування або рефакторинг компонентів — болісне, особливо якщо використовуєш зовнішні сервіси, як Supabase.
🟢 Lovable
Схожий на Bolt, але має розумні підказки наступних дій. Інтеграція зі Stripe або PayPal дозволяє швидко додати платну підписку. Також є синхронізація з GitHub — можна внести зміни вручну в редакторі й повернути код назад у Lovable. Також є можоивість попросити AI не чіпати певні частини коду — що зменшує ризик зламати інші елементи.
🟡 V0 (Vercel)
Чудовий вибір, якщо хочеш вийти за межі прототипів. Мінус — Figma-інтеграція не входить у безкоштовний план. Плюс — можна бачити роботи інших, використовувати їхню логіку в своїх проектах.
🟡 Replit
Тут усе відкрито — структура файлів, можливість додавати файли, бачити, що робиться “під капотом”. Зручно для співпраці дизайнерів і розробників. Replit навіть пропонує “таски”, які можна автоматично додати до проекту. Особливо крута фіча — мобільний застосунок. Можна працювати й отримувати нотифікації прямо на телефоні.
🔵 Cursor
Це повноцінний код-редактор, тому ви маєте повну свободу встановлювати пакети й редагувати код так, як вам хочеться. Але разом із цим з’являється й можливість усе запросто зламати .
🔵 Figma Make
AI-інструмент від Figma, що об'єднує в одному середовищі дизайн, створення інтерактивних прототипів і генерацію готового для використання коду. Дизайнери можуть легко перетворювати свої ідеї в реальні продукти завдяки автоматичній генерації коду та повній інтеграції з усіма інструментами екосистеми Figma. Поки що інструмент знаходиться на ранньому етапі розвитку, через що деякі функції можуть працювати нестабільно.
Відчуваю, що дуже скоро вміння вайб-кодити стане must-have навичкою для кожного дизайнера. Тож я активно досліджую цю тему і час від часу ділитимусь спостереженнями.
Діліться своїм досвідом і доповненнями до написаного вище, у комментарях🙏
@berestux