Гайд · ИИ в работе

Как использовать Claude Code для дизайна интерфейсов

Попросить ИИ сделать страницу красивее легко. Труднее объяснить, почему посетителю неудобно ею пользоваться. Например, он видит пять одинаково заметных кнопок и не понимает, с чего начать. Claude Code полезно подключать к конкретной задаче: помочь человеку выбрать материал, записаться на встречу или найти следующий урок.

Повод для этого гайда — выступления Meaghan Choi, руководителя дизайна Claude Code. В интервью Peter Yang она разбирает работу с существующим продуктом и показывает доработку интерфейса. Ниже — наша практическая адаптация для небольшого сайта. Ссылки на исходные видео приведены в конце.

Анна Федина · CPO, CTO, CIO. Продуктовые и технологические направления в банках и финтехе, автор курса «Из бизнеса в CPO» и канала «ИТ-Коктейль».

Читать по шагам →

Выберите одну задачу посетителя

Начните с предложения: «На этом экране человек должен…». Если продолжение занимает абзац, сузьте задачу. Для каталога гайдов результатом может быть выбор материала по своей проблеме. Для кабинета — поиск следующего урока. Теперь назовите препятствие: непонятный заголовок, лишний шаг, незаметная кнопка. Так у вас появится основание оценивать изменения.

Пример задания: «Помоги посетителю выбрать гайд по задаче. Сейчас все карточки выглядят одинаково, а описания не объясняют, кому они подходят. Сначала предложи, как изменить информацию в карточке».

Разберитесь в текущем проекте

Передавайте агенту рабочую копию именно того проекта, который собираетесь улучшать. Попросите найти нужный экран, существующие компоненты и способ открыть локальное превью. Если копия устарела, красивое решение может не подойти к действующему сайту. Для первой попытки достаточно одного экрана и демонстрационных данных. Договоритесь, кто принимает изменения и как они попадут в основную версию.

Опишите стиль и поведение отдельно

Дайте скриншот принятого экрана и объясните, какие его свойства нужно сохранить: размер заголовков, плотность информации, оформление кнопок. Затем опишите поведение. Что произойдёт после нажатия? Что увидит человек, если данных пока нет? Как должен выглядеть длинный заголовок? Один визуальный референс не отвечает на эти вопросы.

Пример задания: «Сохрани оформление существующих карточек. Добавь короткую строку “Подойдёт, если…”. Кнопка ведёт к полному материалу. Для карточки без обложки предусмотрен аккуратный текстовый вариант».

Попросите несколько разных решений

Сравните три подхода к одной проблеме. В первом можно сократить текст, во втором — сгруппировать материалы по задаче, в третьем — добавить ясное объяснение результата. Попросите агента оставить одинаковыми исходные факты, чтобы различия не возникали из выдуманных обещаний. Решение выбирает человек: важнее понять, какой вариант помогает посетителю, чем получить уверенную рекомендацию модели.

Проверяйте прототип в действии

Откройте выбранный экран на телефоне и компьютере. Пройдите путь от первого действия до результата. Нажмите на ссылки, попробуйте перемещаться клавишей Tab, найдите фокус. Проверьте длинные названия и предусмотренные ошибки. Затем покажите прототип другому человеку и дайте задачу без подсказок. Его остановки и вопросы подскажут следующую правку.

Полезное замечание: «На узком экране название занимает четыре строки, и кнопка пропадает за нижним краем карточки. Покажи вариант, в котором главное действие заметно».

Сохраните результат для проверки

Попросите кратко описать новое поведение, показать изменённые файлы и перечислить выполненные проверки. Если работаете с разработчиком, передайте ему локальный прототип или черновой запрос на внесение изменений — draft PR. В него удобно добавить снимки до и после. Выход на живой сайт остаётся отдельным решением после проверки в нужном окружении.

Что остаётся за владельцем продукта

Вы выбираете проблему, задаёте ограничения и решаете, достаточно ли хорош результат. ИИ может ускорить подготовку вариантов, но не знает за вас, что обещано клиенту и какие компромиссы допустимы. Не приписывайте новому экрану рост продаж, пока его не измерили. Для начала достаточно проверяемого улучшения: человек смог выполнить задачу без объяснений.

Запрос для первого прототипа

Помоги улучшить [экран] для [аудитория]. Главное действие пользователя — [действие]. Сейчас мешает [наблюдаемая проблема]. Изучи существующие компоненты и предложи три решения с кратким сравнением. Сохрани достоверные тексты и стиль проекта. После выбора собери локальный прототип, проверь сценарий на телефоне и компьютере и покажи результаты проверок.

Выберите один экран своего продукта и опишите, где посетителю приходится догадываться. Если хотите системно оценить свои продуктовые навыки, начните со «Снежинки навыков» на QueenIT.

Что дальше

Хорошая задача для интерфейса начинается с клиента. Как понять, что ему мешает, — в гайдах «Портрет клиента и custdev» и «CJM: карта пути клиента».

Частые вопросы

Можно ли использовать Claude Code для дизайна интерфейсов?

Да. Claude Code полезно подключать к конкретной задаче: помочь человеку выбрать материал, записаться на встречу или найти следующий урок.

С чего начать работу над экраном с ИИ?

Начните с предложения: «На этом экране человек должен…». Если продолжение занимает абзац, сузьте задачу. Затем назовите препятствие: непонятный заголовок, лишний шаг, незаметная кнопка.

Сколько вариантов интерфейса просить у ИИ?

Сравните три подхода к одной проблеме. Решение выбирает человек: важнее понять, какой вариант помогает посетителю, чем получить уверенную рекомендацию модели.

Как проверить прототип, который сделал ИИ?

Откройте экран на телефоне и компьютере, пройдите путь от первого действия до результата, проверьте ссылки, переход клавишей Tab, длинные названия и ошибки. Затем покажите прототип другому человеку и дайте задачу без подсказок.

Что остаётся за человеком, а не за ИИ?

Источники

Обновлено 20 октября 2026 · Автор — Анна Федина · Текст в Markdown