«Ми об’єднали світ дизайну та світ програмування». Cursor представив функцію Visual Editor — інструмент вайбкодингу для дизайнерів

«Ми раді представити візуальний редактор для Cursor Browser. Він об’єднує ваш вебзастосунок, базу коду та потужні інструменти візуального редагування в одному вікні. Ви можете перетягувати елементи, перевіряти компоненти та властивості безпосередньо, а також описувати зміни, вказуючи та клацаючи мишкою», — йдеться в блозі компанії. 

Cursor був одним із перших лідерів на ринку програмування за допомогою ШІ, але зараз він стикається з конкуренцією з боку OpenAI, Anthropic і Google. Стартап історично ліцензував моделі ШІ від цих компаній, але зараз його конкуренти інвестують значні кошти у власні продукти ШІ-програмування, відзначає WIRED. У відповідь Cursor почав розробляти та впроваджувати власні моделі штучного інтелекту.

«Раніше дизайнери жили у своєму власному світі пікселів і кадрів, які не можна було перетворити на код. Тому командам доводилося створювати процеси для передачі завдань між розробниками та дизайнерами, але це супроводжувалося великою кількістю конфліктів. Ми об’єднали світ дизайну та світ програмування в один інтерфейс з одним агентом штучного інтелекту», — розповів керівник відділу дизайну Cursor Рьо Лу.

Раніше Cursor випустила власний веббраузер, який працює безпосередньо в її середовищі програмування. Компанія стверджує, що браузер створює кращий цикл зворотного зв’язку під час розробки продуктів, дозволяючи інженерам і дизайнерам переглядати запити реальних користувачів і отримувати доступ до інструментів розробника в стилі Chrome.

Оскільки Visual Editor працює поверх браузера Cursor, користувачі також можуть вказати на будь-який активний сайт — не тільки свій власний — і перевірити його, ніби вони знаходяться всередині кодової бази цього сайту. За допомогою функції користувачі можуть точно налаштувати радіус кутів, відстань між літерами або змінити напрямок відкриття меню — вліво чи вправо.

На відміну від традиційних інструментів дизайну, які покладаються на власні абстракції, кожен елемент управління відповідає реальній CSS — мові програмування, яка вказує браузерам, як відображати візуальні елементи сторінки. Це означає, що дизайнери працюють не з символічною візуалізацією користувацького інтерфейсу, а з реальним продуктом для користувачів.

«Бічна панель візуального редактора дозволяє точно налаштувати стилі за допомогою повзунків, палітр, власних колірних маркерів та системи дизайну. Кожна настройка є повністю інтерактивною: динамічні палітри кольорів, що відображають попередній перегляд ваших виборів, а також елементи керування для точного перерозміщення сіток, макетів flexbox та типографіки», — відзначають в Cursor.

Візуальний редактор дозволяє натискати на будь-який елемент інтерфейсу та описувати, що саме користувач хоче змінити. Дизайнер може натиснути на один елемент і попросити його «збільшити», а інший — «зробити червоним». Агенти працюють паралельно, тому зміни починають застосовуватися «за лічені секунди».

З Visual Editor Cursor може почати конкурувати з продуктами Adobe або Figma, проте в компанії вважають, що ринок достатньо великий, щоб підтримувати різні підходи, а створення софту стає доступнішим для людей, які працюють у різних сферах.