Cursor Annotate: правки UI малюнком замість опису
У design mode Cursor додали Annotate. Він дає три дії: вибрати елемент і попросити агента його виправити, обвести область прямо на сторінці, порівняти верстку на різних ширинах. Вмикається через `Cmd+Shift+D` у браузері Cursor. На яких тарифах він доступний і з якої дати, офіційно не вказано.
Вибір кількох елементів і голосові інструкції design mode вмів і раніше. Нове в тому, що правка, розмітка й перевірка ширин тепер в одному потоці. За відгуками користувачів, рамка ще й звужує зону змін, і агент рідше чіпає зайві файли.
Порядок, що зменшує переробки: обвести → виправити → перевірити ширини
Автор джерела працює за однією схемою. Спершу обводить на сторінці місце, яке треба змінити, і додає кілька слів, що обмежують зону. Потім віддає правку агенту: місце вже показане, тож тексту треба мінімум. Наостанок обов'язково дивиться результат на різних ширинах. Цей крок часто пропускають, а на смартфоні елементи можуть налазити один на одного чи переноситися, хоча на десктопі все виглядає нормально.
Промпт для першого кроку (переклад із джерела):
Зараз ти підправиш зовнішній вигляд екрана. Місця для правки обведено на екрані.Змінювати можна лише всередині обведеного. Зовнішній вигляд і налаштування поза ним не чіпай.Перед початком у 3 рядках опиши, що і як збираєшся змінити, і дочекайся мого підтвердження.Після правки перевір відображення на ширині десктопа і смартфона та списком перелічи, що виглядає не так.
Як малювати, щоб агент не вгадував
Агент, який неправильно зрозумів словесний опис позиції, не скаже «не розумію». Він вибере ймовірне місце і змінить його, а помилку ви помітите лише через кілька ітерацій. Рамка знімає питання «де», але тільки якщо вона однозначна.
- За раз обводьте одне місце або одну суцільну область. Якщо обвести все одразу, стає неясно, що і як міняти.
- Рамку робіть точною, без захоплення сусідніх блоків.
- Розділяйте ролі: рамка задає місце, короткі слова задають напрям («зменшити відступ», «вирівняти по лівому краю»).
- Прямо пишіть, що поза рамкою нічого не змінювати. Без цього агент може «доправити» сусідні ділянки, і перевіряти доведеться більше.
Якщо ще не зрозуміло, що саме правити, джерело пропонує спершу дати агенту провести опитування:
Хочу впорядкувати, що виправити у вигляді екрана. Став запитання по одному в такому порядку і не переходь до наступного, поки я не відповім: 1) яка частина якого екрана не подобається; 2) чим поточний вигляд відрізняється від потрібного; 3) чи є проблеми на ширині смартфона. Наприкінці підсумуй по рядку на кожне місце: що обвести на екрані і коротка інструкція для ШІ.
Коли рамка не допоможе
Малювати варто, коли головне питання в тому, де і як змінити: розташування кнопок, відступи, розмір і колір шрифту, порядок елементів. Словами точніше передавати те, що стосується задуму, а не місця:
- зміну загальної атмосфери сторінки;
- зміну послідовності дій чи сценарію;
- спільні правила для кількох сторінок.
Критерій автора: Чи зрозуміють мене миттєво, якщо я просто покажу пальцем? Якщо можна показати, малюйте. Якщо ні, пишіть. Коли в задачі є і те, і те, спершу словами задайте загальний напрям, а потім рамкою вкажіть конкретні місця.
Що перевірити перед тим, як прийняти правку
- План агента до старту: чи збігається він із тим, що ви обвели.
- Чи не змінилося щось поза рамкою, зокрема інші файли. Те, що рамка зменшує зайві правки, відомо лише з відгуків користувачів, а не з офіційного опису.
- Вигляд на кількох ширинах через перевірку розмірів в Annotate, насамперед на мобільній.
Тарифи й версії, де доступний Annotate, офіційно не названо, тож наявність функції перевірте у своєму Cursor.