Перед следующим шагом
Вы знаете, какое действие ждёте от посетителя, и можете объяснить, на каких данных основан этот выбор.
PIXEL PERFECT / САЙТЫ С ИИ
Сайты с ИИ
по референсам
с Awwwards
Пять правил работы с агентом: от задачи клиента до готового первого экрана и его проверки.
Пять правил
Покажите агенту, что нужно сделать
Показали агенту красивый сайт и попросили сделать похожий. А получили шаблонные карточки и случайные отступы.
Одного референса мало: агенту нужны задача сайта, материалы и ваши пояснения — что берём и почему. Попробуйте эти пять правил на одном экране своего проекта.
01
Начните с задачи клиентаОпределите, зачем посетитель приходит на сайт и какое действие вы от него ждёте.
02
Выбирайте конкретные приёмы из референсовВыберите, что хотите взять из референса и зачем это нужно вашему сайту.
03
Храните решения в канвасеХраните в канвасе материалы проекта, референсы и пояснения к своим решениям.
04
Соберите дизайн-системуДо сборки остальных страниц определите цвета, шрифты, отступы и состояния кнопок.
05
Собирайте и проверяйте по этапамНачните с первого экрана. Откройте его в браузере и проверьте главное действие.
Соберите переписку с клиентом, заметки с созвонов, тексты, фотографии и ссылки. Для каждого вывода укажите, откуда он взялся. Догадки и вопросы запишите отдельно.
В учебном проекте Даниила «Пекарня на Баумана» владелец хочет собирать предзаказы хлеба на выходные. А управляющая говорит, что больше половины выручки приносят торты. Клиент вымышленный, но ситуация знакомая: сначала нужно решить, что важнее для сайта. От этого зависит первый экран.
Материалы учебной пекарни: рядом с каждым выводом указано, на чём он основан.
Запрос для агента
Разбери приложенные вводные проекта. Составь краткую карточку: задача сайта, аудитория, главное действие посетителя, доступные материалы. У каждого вывода укажи источник. Предположения отдели от подтверждённых фактов. Противоречия и недостающие сведения вынеси в вопросы. Пока не собирай страницу: сначала покажи разбор.
В одном референсе вам подойдёт расположение элементов на первом экране, в другом — способ выбора товара. Запишите, что берёте, зачем и как адаптируете под свой проект.
В канвасе пекарни есть референс из другой ниши: в одном блоке можно выбрать день и увидеть, до какого времени принимают заказы. Этот приём подходит для предзаказа хлеба. Тексты, изображения и оформление используйте свои.
Чтобы агент разобрал анимацию, приложите запись экрана или ссылку на страницу, которую он сможет открыть. Скриншот не показывает, как элементы двигаются.
Запишите выбранный приём и причину: «Берём выбор дня, потому что заказы привязаны к выходным».
Запрос для агента
Разбери приложенный фрагмент референса под задачу проекта. Опиши композицию, типографику, главный визуал и действие пользователя. Анимацию разбери по приложенной записи или на самой странице, если можешь её открыть. Предложи, как применить выбранный приём к нашим материалам. Укажи, что нельзя понять по приложенным материалам. Покажи разбор и дождись решения, что берём.
Перед следующим шагом
Вы выбрали один приём и знаете, зачем он нужен и как применить его на своём экране.
Канвас Даниила — рабочее пространство с досками для каждого этапа проекта. Агент использует скиллы — готовые инструкции для разбора материалов и референсов. Вы отвечаете на его вопросы и выбираете решения, затем переходите к следующему этапу.
Запишите, что выбрали и почему, от чего отказались и какие вопросы пока не решили. Перед новой задачей попросите агента прочитать эти записи.
Запрос для агента
Прочитай карточку проекта и принятые решения. Перед продолжением кратко перечисли, на что опираешься. Используй согласованные приёмы. Учитывай, какие варианты мы отклонили и почему. Если новая задача противоречит прежним решениям, объясни это до правок страницы. После согласованной правки обнови карточку.
Перед следующим шагом
Агент прочитал записи и перечислил решения, на которые будет опираться в следующей задаче.
Попросите агента предложить базовые правила оформления первого экрана. По кнопке должно быть понятно, что произойдёт после нажатия. Размеры заголовков должны показывать, что важнее, а изображения — сочетаться по стилю.
Попросите объяснить, как эти решения помогают задаче сайта и поддерживают выбранный приём. Выберите подходящий вариант и сохраните дизайн-систему в проекте. В следующих правках указывайте, какой элемент нужно изменить и как.
Запрос для агента
Предложи дизайн-систему для первого экрана, опираясь на карточку проекта и выбранные приёмы. Опиши цвета, шрифты и размеры текста, отступы, вид кнопки в разных состояниях и правила выбора изображений. Объясни, как эти решения помогают выполнить задачу страницы. Покажи предложение до сборки. После согласования сохрани его в проекте.
Перед следующим шагом
Агент использует согласованную систему при сборке следующих блоков.
Проверьте, помогает ли экран выполнить задачу сайта и использован ли выбранный приём. Текст должен легко читаться, оформление — соответствовать дизайн-системе, а следующий шаг — быть понятным.
На телефоне проверьте переносы текста, обрезанные элементы, работу кнопки и анимации. Если кнопка ведёт к форме, отправьте её и проверьте результат. Попросите агента сохранить скриншоты или запись проверки, затем проверьте страницу сами.
Описывайте правку конкретно: «На телефоне заголовок перекрывает кнопку. Размести их так, чтобы текст читался, а кнопка была видна и доступна для нажатия. Сохрани порядок важности текстов».
Запрос для агента
Собери первый экран по карточке проекта, выбранному приёму и согласованной дизайн-системе. Затем открой страницу и проверь её на компьютере и телефоне. Проверь результат по критериям из карточки проекта. Проверь, может ли посетитель выполнить главное действие, и запиши найденные проблемы. Если какую-то проверку выполнить не можешь, укажи какую. Исправления покажи вместе с результатом повторной проверки.
Перед следующим шагом
Вы зафиксировали найденные проблемы и проверили исправления на компьютере и телефоне.
Инструмент для проекта
Канвас Даниила
В канвасе собраны материалы проекта, референсы и ваши решения с пояснениями. Агент заполняет доски, вы выбираете, что использовать в проекте.
Когда комплект будет готов, здесь появятся ссылка на скачивание и инструкция по установке.
После установки создайте проект, запишите задачу сайта и добавьте один референс. Выберите приём и объясните, зачем он нужен. Закройте и снова откройте проект: проверьте, что запись сохранилась.
Примените к своему проекту
Соберите один экран
Выберите один экран
Выберите экран своего проекта и определите его задачу. В примере с пекарней посетитель должен выбрать день и оставить предзаказ хлеба на выходные.
Запишите решение
В карточке проекта запишите главное действие посетителя, ссылку на референс и выбранный приём — с пояснением, зачем он нужен. Добавьте дизайн-систему и критерии проверки. По этой карточке составьте задание агенту.
Соберите и проверьте
Откройте собранный экран на компьютере и телефоне. Проверьте, может ли посетитель выполнить главное действие. Запишите, что исправили и что ещё нужно доработать.
Скачать карточку
Карточка проекта в формате Markdown (.md). Заполните её сами или с помощью агента.
Поставьте отметку, когда экран будет собран и проверен.
Курс «Сайты с ИИ»
От первого экрана — к готовому сайту
Первый экран готов. Дальше — продумать остальные страницы и их содержание, подготовить изображения, собрать формы и админку, опубликовать сайт и сдать клиенту. На курсе «Сайты с ИИ» вы пройдёте весь этот путь с Даниилом и Николаем за 10 недель практики. Соберёте с агентами 4 проекта в портфолио: лендинг, многостраничник с CMS, магазин с оплатой и сайт с 3D и анимацией. А для следующих заказов у вас останется своя рабочая среда со скиллами — готовыми инструкциями для агентов под каждый этап.