Практика вайбкодинга: как нейросети помогают дорабатывать UX интерфейсов
VC.ru AI · оригинал
Материал подготовлен автоматизированной редакционной системой. Факты можно сверить по указанному первоисточнику.
В четвертом уроке бесплатного курса по вайбкодингу автор демонстрирует процесс улучшения дизайна прототипа договора с помощью ИИ-агента. Материал раскрывает нюансы взаимодействия с нейросетью, включая важность точных формулировок и проверку побочных эффектов изменений.
Статья иллюстрирует реальный рабочий процесс использования генеративного ИИ для решения конкретных задач в веб-разработке. Для специалистов и энтузиастов она полезна тем, что показывает не только результат, но и типичные ошибки коммуникации с алгоритмами, а также методы их предотвращения через структурированные промпты и ресёрч.
Четвертый урок курса по вайбкодингу посвящен практическому улучшению пользовательского интерфейса прототипа для согласования договоров. Автор описывает процесс работы с ИИ-агентом, где ключевым этапом становится не просто генерация кода, а управление логикой изменений. Сначала производится рутинная, но важная работа по переименованию файлов документации и структуры проекта с использованием git, что позволяет сохранить историю изменений и повысить читаемость кода для будущих промптов.
Основной фокус урока — переработка отображения пунктов договора. Автор отмечает, что в исходном прототипе было сложно отличить правку от комментария, а новые редакции не выделялись. Чтобы решить эту проблему, агент сначала проводит ресёрч: изучает, как Word и Google Docs отображают изменения. На основе этого анализа UX-кит пересобирается: комментарии выносятся на поля, а правки становятся отдельными блоками со статусами и кнопками действий. Этот подход позволяет юристам видеть формулировки целиком, но при этом легко отслеживать динамику согласования.
Однако процесс не обходится без сюрпризов. Из-за использования общих файлов стилей изменения в UX-ките случайно сломали прототип: исчезли ключевые кнопки управления. Автор подчеркивает важный урок: общие зависимости могут непредсказуемо влиять на другие части системы, поэтому после каждого шага необходимо проверять не только целевые элементы, но и смежные функции.
Далее рассматривается адаптация интерфейса под разные устройства. На больших мониторах договор занимал узкую колонку, оставляя пустое пространство по бокам. Агент перестроил экран в трехколоночную схему: слева разделы со статусами, в центре текст договора, справа — реквизиты и обсуждение. Для мобильных устройств, где контрагенты чаще всего открывают ссылки из мессенджеров, интерфейс стал компактнее: меню сворачивается, а действия с пунктами вынесены в нижнюю шторку.
Отдельное внимание уделено версии для печати. Изначально она представляла собой просто экран без кнопок, что делало документ непригодным для подписания. После доработки печать стала отдельным документом формата A4 с колонтитулами, номерами страниц и местом для подписей. Здесь же была обнаружена и исправлена техническая ошибка с нумерацией страниц, которую агент нашел путем анализа логики браузера.
Автор выделяет несколько ключевых выводов из этого этапа работы. Во-первых, точность формулировок критически важна: неясный промпт может быть интерпретирован ИИ буквально, что приведет к нежелательным результатам. Во-вторых, инструмент /prompt-master полезен не только для оформления текста, но и для выявления двусмысленностей до начала выполнения задачи. В-третьих, практика показывает, что прототипы нужны именно для того, чтобы находить такие мелкие, но важные дефекты до написания продакшен-кода.
В заключение автор предлагает читателям сравнить свой опыт согласования договоров с описанным процессом и задает вопрос о том, какие инструменты они используют в своей работе. Курс продолжает развиваться, опираясь на обратную связь аудитории, а следующий урок обещает быть не менее практичным.