Якщо ви хоч раз працювали на стику дизайну та розробки, то знаєте цей біль: намалювати макет у Figma — одна справа, а от передати його програмістам так, щоб результат виглядав "як на картинці" — зовсім інша. Відступи не ті, кольори не ті, а кнопка чомусь поїхала на три пікселі вліво.
11 грудня 2025 року стартап Cursor зробив крок, який може серйозно змінити ситуацію. Компанія представила Visual Editor — візуальний редактор, вбудований в середовище розробки. Тепер дизайнери можуть працювати з реальним кодом так само інтуїтивно, як у Figma або Adobe XD, але при цьому всі зміни одразу застосовуються до коду.
Що таке Cursor і чому про нього всі говорять
Для тих, хто ще не в темі: Cursor — це редактор коду на базі Visual Studio Code, але з потужним штучним інтелектом. Його створила компанія Anysphere, яку заснували четверо друзів-випускників MIT у 2022 році.
За три роки стартап перетворився на справжнього єдинорога: у листопаді 2025 року компанія залучила 2,3 мільярда доларів інвестицій і досягла оцінки в 29,3 мільярда. Щорічний дохід перевищив мільярд доларів. Серед інвесторів — Nvidia, Google, Andreessen Horowitz та інші гіганти.
Cursor став одним із флагманів так званого "вайбкодингу" — підходу до програмування, де ти просто описуєш, що хочеш отримати, а ШІ генерує код за тебе. Термін придумав Андрій Карпаті, співзасновник OpenAI, і словник Collins навіть визнав його словом 2025 року.
Visual Editor: що це і як працює
Уявіть собі: ви відкриваєте свій вебпроєкт у Cursor, і поряд з кодом бачите живий сайт. Але замість того, щоб шукати потрібний CSS-файл і думати, який саме клас відповідає за цю кнопку, ви просто клікаєте на неї мишкою. Виділяєте. Перетягуєте. Змінюєте розмір. А код автоматично оновлюється.
Саме так працює новий Visual Editor.
Drag-and-drop
Головна фішка — можливість перетягувати елементи прямо на сторінці. Хочете поміняти місцями дві кнопки? Просто візьміть одну і перенесіть. Cursor дозволяє маніпулювати DOM-деревом візуально, без єдиного рядка коду вручну.
Після того як ви закінчили рухати елементи, просто скажіть ШІ-агенту застосувати зміни — і він сам знайде потрібні компоненти в кодовій базі та оновить їх.
Панель стилів як у професійних дизайн-інструментах
Праворуч від редактора з'являється бічна панель з усіма налаштуваннями стилів. Тут є:
- Слайдери для налаштування відступів, розмірів, заокруглень
- Пікер кольорів з попереднім переглядом
- Контроль типографіки — шрифти, міжрядковий інтервал, товщина тексту
- Управління grid та flexbox — змінюйте розташування елементів візуально
- Інтеграція з дизайн-токенами — редактор розуміє вашу дизайн-систему і використовує саме ваші змінні
Кожен елемент управління прив'язаний до реального CSS. Це не абстракція чи символічне представлення — ви працюєте безпосередньо з кодом, який потім потрапить до продакшену.
Робота з React-компонентами
Якщо ваш проєкт побудований на React (а таких зараз більшість), Visual Editor стає ще корисніший. Він автоматично визначає пропси компонентів і виводить їх у бічну панель. Наприклад, у вас є кнопка з варіантами "primary", "secondary" і "ghost". Замість того, щоб лізти в код і змінювати props вручну, ви просто обираєте потрібний варіант у випадаючому списку і одразу бачите результат.
"Point and prompt"
Мабуть, найцікавіша фішка — це можливість поєднувати візуальне редагування з текстовими командами. Працює вона так:
- Клікаєте на елемент
- Описуєте, що хочете змінити: "зроби цю кнопку червоною" або "збільши відступ зверху вдвічі"
- ШІ-агент застосовує зміни
І найкрутіше, ви можете запускати кілька команд одночасно. Клікнули на один елемент — "зроби більше". На інший — "зміни колір на синій". На третій — "поміняй місцями з попереднім". Агенти працюють паралельно, і за кілька секунд всі зміни готові. Джейсон Гінзберг, керівник продуктової інженерії Cursor, демонстрував це на презентації в офісі WIRED. Він просто клікав на елементи та диктував зміни, а код оновлювався на льоту.
Як почати користуватися
Visual Editor доступний у версії Cursor 2.2 і вище. Прикладаємо коротку інструкцію з користування:
- Встановіть або оновіть Cursor — завантажити можна з офіційного сайту cursor.com
- Відкрийте свій вебпроєкт — найкраще працює з React-застосунками, але підтримуються й інші технології
- Запустіть браузер Cursor — це вбудований браузер, який працює прямо в редакторі
- Увімкніть режим візуального редагування — і починайте клікати, перетягувати та описувати зміни
Важливо розуміти: Visual Editor — це не заміна Figma чи Sketch для проєктування з нуля. Це інструмент для роботи з вже існуючим кодом. Ви не малюєте макет , а редагуєте живий продукт.
Для кого підходить Visual Editor
Дизайнери в продуктових командах
Visual Editor дозволить вам самостійно внести дрібні правки. Не потрібно чекати спринту, не потрібно писати детальну специфікацію для зміни кольору кнопки.
Рьо Лю, керівник дизайну Cursor, описує це так: "Раніше дизайнери жили у своєму світі пікселів та фреймів, і це не переводилося безпосередньо в код. Тому командам доводилося створювати процеси для передачі роботи між дизайнерами та розробниками, і тут виникало багато тертя. Ми об'єднали світи дизайну та коду в єдиному інтерфейсі з єдиним ШІ-агентом."
Фронтенд-розробники
Для розробників це спосіб швидше ітерувати над UI. Замість того, щоб писати CSS наосліп, запускати проєкт, дивитися в браузері, повертатися до коду і знову правити, ви бачите результат одразу.
Власники продуктів та менеджери
Хочете швидко показати команді, як краще виглядатиме секція? Відкрили Visual Editor, поклацали, зробили скріншот — і на мітингу вже є конкретна пропозиція замість абстрактних "а давайте кнопку зробимо помітнішою".
Ті, хто будує MVP
Якщо ви запускаєте стартап і треба швидко зібрати прототип, Visual Editor прискорить цей процес у рази. Особливо в поєднанні з іншими можливостями Cursor, де ШІ може згенерувати базову структуру, а ви потім доведете її до ладу.
Чим Visual Editor відрізняється від інших інструментів
Порівняно з Figma/Adobe XD
Figma — це інструмент для проєктування. Ви створюєте макети, які потім треба перетворити на код. Visual Editor працює навпаки: ви редагуєте вже існуючий код візуально. Більше того, Cursor інтегрується з Figma через протокол MCP. Можна підтягнути дизайн-токени з Figma і використовувати їх прямо в редакторі.
Порівняно з Webflow/Framer
Ці інструменти генерують власний код, який не завжди легко інтегрувати у велику кодову базу. Cursor працює з вашим існуючим кодом — React-компонентами, CSS-файлами, дизайн-системою.
Порівняно з іншими вайбкодинг-платформами (Replit, Lovable)
Рьо Лю чітко розмежовує позиціонування: "Ті компанії орієнтуються на користувачів, які швидко будують демо-версії, а не на професіоналів, що працюють у великих кодових базах." Cursor — це інструмент для серйозної розробки, де важлива якість коду та підтримуваність.
Обмеження та нюанси
По-перше, Cursor найкраще працює з React-проєктами. Інші фреймворки підтримуються, але функціональність може бути обмежена.
По-друге, для складних змін все одно знадобиться розуміння коду. Ви можете поміняти колір кнопки візуально, але архітектурні рішення все ще вимагають людського судження.
По-третє, це частина платної Pro підписки Cursor, вартість якої $20 на місяць. У безкоштовному плані такі функції не передбачені.
Що це означає для індустрії
Cursor своїм Visual Editor кидає виклик традиційному розподілу ролей у розробці. Межа між дизайнером і фронтенд-розробником розмивається все більше. Це не означає, що розробники стануть непотрібними — скоріше навпаки. Складна логіка, архітектура, оптимізація продуктивності — все це залишається за людьми. Але рутинні завдання з верстки та стилізації тепер може виконувати ширше коло людей.
Для дизайнерів це можливість нарешті працювати з реальним кодом, а не макетами, які потім інтерпретуються (часто неправильно) розробниками. Конкуренти вже реагують. Adobe розвиває AI-функції в Express та XD, Figma працює над тіснішою інтеграцією з кодом. GitHub Copilot теж не стоїть на місці. Ринок AI-інструментів для розробки стрімко зростає.
Практичні поради для старту
Якщо хочете спробувати Visual Editor, ось кілька порад:
- Почніть з невеликого проєкту — не кидайтеся одразу на production-код великого застосунку. Візьміть особистий проєкт або демо.
- Переконайтеся, що у вас React — так ви отримаєте максимум від можливостей інспекції компонентів.
- Налаштуйте дизайн-токени — якщо у вашому проєкті є дизайн-система з CSS-змінними, Visual Editor зможе їх підхопити.
- Комбінуйте візуальне редагування з текстовими промптами — так швидше. Клікнули на елемент, описали словами, що змінити — готово.
- Не бійтеся експериментувати — зміни в коді можна відкотити через Git. Це не страшно.
Технічні деталі для допитливих
Інтеграція з браузером
Visual Editor побудований на основі вбудованого браузера Cursor. Цей браузер з'явився ще в попередніх версіях і спочатку використовувався для дебагінгу та тестування. ШІ-агенти могли робити скріншоти, аналізувати помилки на клієнтській стороні, перевіряти роботу застосунку. Visual Editor розширює ці можливості до активного редагування. Браузер тепер не просто показує результат — він стає інтерфейсом для взаємодії з кодом.
Робота з DOM
Коли ви перетягуєте елемент на сторінці, Cursor аналізує DOM-дерево і визначає, який саме компонент або HTML-елемент ви переміщуєте. Потім він знаходить відповідний код у вашому проєкті і генерує зміни. Це працює краще з React і подібними фреймворками, тому що компонентна архітектура створює чітку відповідність між тим, що ви бачите на екрані, і структурою коду.
Model Context Protocol (MCP)
Cursor підтримує протокол MCP, який дозволяє підключати зовнішні джерела даних. Зокрема, є офіційний сервер для Figma. Це означає, що ви можете імпортувати дизайн-токени, фрейми та інші елементи з Figma прямо в середовище розробки.
На практиці це виглядає так: дизайнер створює компонент у Figma, визначає кольори та відступи. Розробник підключає файл через MCP. Visual Editor бачить ці токени і пропонує їх використовувати при редагуванні. Коло замкнулося — дизайн-система єдина від макету до коду.
Вартість та плани підписки
Cursor пропонує три тарифні плани:
- Hobby (безкоштовно) — базові можливості з обмеженнями на кількість запитів до ШІ
- Pro ($20/місяць) — повний доступ до всіх функцій, включаючи Visual Editor
- Business ($40/користувач/місяць) — для команд, з додатковими можливостями адміністрування
Для індивідуальних користувачів і невеликих команд Pro-плану зазвичай достатньо. Якщо ви хочете спробувати Visual Editor, варто одразу брати платну версію, бо безкоштовний план занадто обмежений для повноцінної роботи.
Підсумок
Visual Editor — це не кінцева точка, а скоріше черговий крок. Компанія відкрито говорить про своє бачення майбутнього: агенти будуть ще глибше інтегровані в процес створення вебзастосунків, а люди виражатимуть свої ідеї через інтерфейси, які безпосередньо пов'язують думку з кодом.
Це може звучати футуристично, але подивіться, як швидко розвивається галузь. Ще два роки тому вайбкодинг був жартом Андрія Карпаті в Twitter. Сьогодні це слово року за версією словника Collins, а четверть стартапів у Y Combinator мають кодові бази, на 95% згенеровані ШІ.
Конкуренція загострюється. OpenAI купила Windsurf, Anthropic розвиває Claude Code, Google запустила Antigravity. Microsoft не сидить на місці з GitHub Copilot. Всі хочуть частку ринку, який за прогнозами буде одним із найбільших в індустрії ПЗ.
Cursor поки що тримає лідерство серед незалежних гравців. Мільйон активних користувачів щодня, мільярд рядків коду, згенерованих за допомогою ШІ щодня, понад мільярд доларів річного доходу — цифри вражають.
Отже, Visual Editor від Cursor — це логічний крок у напрямку, куди рухається вся індустрія. Ми йдемо від концепції "дизайнер малює, розробник пише код" до "команда працює над продуктом, а AI допомагає з рутиною".
Чи замінить це повністю традиційні дизайн-інструменти? Ні, і навряд чи це мета. Figma залишиться для проєктування з нуля, для складних ілюстрацій, для роботи з бренд-айдентикою. Але для щоденної роботи над живим продуктом, для швидких ітерацій, для швидких правок, які раніше вимагали залучення розробника — Visual Editor стане незамінним помічником.
Чи зробить це роботу над UI швидшою та приємнішою? Однозначно так. Особливо для тих, хто завжди мріяв "просто взяти і поправити" замість пояснювати комусь, що саме треба змінити.
Якщо ви працюєте на стику дизайну та розробки рекомендую обов'язково спробувати. Можливо, саме такого інструменту вам не вистачало. А якщо ні, принаймні будете знати, куди рухається індустрія і що очікувати від конкурентів.
