«Накидай три варианта»: как я переделываю интерфейс вместе с агентом

3 октября 2026 · 5 минут чтения

Когда экран в моём продукте кажется неудобным, я не пишу техническое задание. Я делаю скриншот и пишу coding-агенту одну фразу: «неудобно, накидай три варианта, покажи через локальный веб-сервер». Через несколько минут в браузере открываются три разных макета, по которым можно кликать. Я выбираю глазами, дальше правлю короткими репликами, а в конце говорю «действуй».

Для этого нужен агент, который работает на вашем компьютере: читает код, запускает команды и может открыть страницу в браузере. Я работаю в Claude Code; подойдёт и другой агент с такими возможностями.

Ниже — как это прошло 2–3 октября 2026 года на Potee. Это планировщик, в котором проекты — цветные полосы на временной шкале, а вехи — отметки на них. За эти два дня так переделаны два экрана: главная страница и панель выбранного проекта.

Шаг 1. Скриншот и одна фраза

Для главной запрос был такой: «Предложи, как сделать эту страницу более живой. Накидай три варианта через локальный веб-сервер — три разные страницы».

Для панели проекта я приложил скриншот доски: при клике на проект кнопки редактирования и «Поделиться» появлялись в шапке, далеко от самого проекта. Подпись: «На мой взгляд, неудобно. Накидай три альтернативных варианта, покажи через локальный веб-сервер».

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

Шаг 2. Три разных подхода, а не три оттенка одного

Полезны варианты, которые решают задачу по-разному. Для главной агент сделал:

• живой таймлайн — за прежним текстом бесконечная доска, время на ней ускорено, а карточка показывает «следующий шаг» и отсчитывает дни до него;
• план из текста — фраза сама печатается в поле, а на шкале вырастают проекты и вехи;
• песочницу — мини-доску прямо на главной с подсказками «потяните проект», «растяните за край».

Для панели проекта: панель с иконками под самой полосой, карточка проекта справа и строка, которая раскрывается в редактор.

К каждому варианту агент приписал плюсы, минусы и свою рекомендацию. Оба раза я выбрал не то, что он рекомендовал. Для главной он советовал песочницу, я взял живой таймлайн. Для панели он советовал иконки под полосой и карточку только по кнопке «Подробнее», я взял одну карточку справа. Рекомендацию полезно прочитать, но выбирает тот, кто будет смотреть на этот экран каждый день.

Шаг 3. «Что сам думаешь?»

После того как агент перенёс живой таймлайн в настоящую главную, я прислал скриншот с широкого монитора и спросил: «Что сам думаешь?»

Агент нашёл шесть проблем, которых я сразу не сформулировал бы сам. Полос на экране было несколько десятков — намного больше, чем на настоящей доске. Отсчёт почти всегда показывал «через 1 день», потому что вех слишком много. Проекты повторялись по три раза. Цвета на тёмном фоне стали мутными. Дата на линии «сегодня» убегала вперёд и выглядела как ошибка. А по карточке было непонятно, о какой полосе она говорит. Я ответил «да», и пять исправлений пришли одним пакетом. Агент проверил в браузере, что повторов больше нет и отсчёт идёт «через 6… 5… 4 дня».

Мой вывод: попросить агента раскритиковать собственный результат по скриншоту — дешёвый способ найти то, что чувствуешь, но не можешь назвать.

Шаг 4. Короткие правки по скриншотам

Карточку проекта я довёл тремя репликами, каждая со скриншотом:

1. «Нет смысла показывать ссылку, если есть кнопка копирования». Поле со ссылкой исчезло, осталась одна кнопка. Поле появляется, только если браузер не дал скопировать.
2. «Сюда надо добавить возможность переставлять события и удалять (иконка удаления появляется при наведении)».
3. «А перетаскивание событий сюда забыл добавить?»

Вторую реплику агент понял частично. «Переставлять» он прочитал как «переносить на другую дату» и сделал выбор даты прямо в строке. После третьей реплики он сначала явно сформулировал смысл перетаскивания: даты остаются на местах, меняется порядок шагов. Только после этого он его сделал.

Короткая реплика экономит время, пока глагол однозначен. Если не однозначен, полезно, чтобы агент проговаривал своё понимание до работы, а не после.

Шаг 5. «Действуй»

Макеты — одноразовые страницы во временной директории, в репозиторий они не попадают. Выбранный вариант агент переписывает уже в коде продукта и прогоняет тесты. Для карточки проекта это было 33 сквозных теста (e2e) в браузере, включая новые: копирование ссылки, перенос вехи, удаление с отменой, перетаскивание с проверкой после перезагрузки. На «действуй» агент закоммитил изменения, собрал образ и выкатил его. Главная ушла на сайт 2 октября, карточка проекта — 3 октября.

Когда это не сработает

• Макет — не продукт. В макете карточки ломалась палитра, в настоящем интерфейсе обрезалось поле даты. Решение по макету — это решение о направлении. Детали всё равно проверяются на живом экране.
• Мелкие правки дешевле сказать словами. Три варианта нужны, когда непонятно, как должно быть. Когда понятно, хватит одной реплики.
• Агент не знает ваш вкус. Его рекомендация разумна, но оба раза я выбрал иначе. Выбор остаётся за вами.
• Неоднозначные слова дают неверную реализацию. «Переставлять», «живее», «удобнее» нужно уточнять, иначе агент сделает разумную, но не вашу интерпретацию.

Термины

• Coding-агент — AI-инструмент, который читает код, меняет файлы, запускает команды и проверяет результат.
• Локальный веб-сервер — программа на вашем компьютере, которая отдаёт страницы в браузер по адресу вида http://127.0.0.1:5795/. Снаружи такие страницы не видны.
• Макет — одноразовая страница, которая показывает, как будет выглядеть и вести себя экран, но не работает с настоящими данными.
• Сквозной тест (e2e) — автоматическая проверка, которая открывает приложение в браузере и проходит сценарий как пользователь.
• Выкатка — доставка новой версии приложения на рабочий сайт.

Статус: статья ещё в работе и доступна по прямой ссылке.

Автор: Данил Письменный · Дата: 3 октября 2026