Три дня вы строили ассистента изнутри — модель, ключ, системный промпт. Теперь он умный. Но выглядит как форма обратной связи на сайте 2010 года.
Пора это изменить. Не чтобы было «красиво», а потому что есть три практические причины.
Первая: вы сами будете пользоваться им чаще, если интерфейс удобный. Вторая: можно показать другу или клиенту и объяснить, что вы делаете. Третья: это уже ваш продукт — а не учебное задание.
Вы не будете рисовать в Figma. Вы опишете что хотите словами. Для этого нужно знать пять терминов — чтобы WorkAI точно понял, что вы имеете в виду.
| Термин | Что это | Пример в промпте |
|---|---|---|
background | фон страницы или элемента | «тёмный фон #1a1a2e» |
padding | воздух внутри элемента | «добавь отступ внутри пузыря» |
border-radius | скруглённые углы | «скругли углы пузырей» |
flex / justify | как элементы выровнены по горизонтали | «сообщения пользователя — справа» |
font-size / weight | размер и жирность текста | «шрифт крупнее, заголовок жирным» |
Не нужно помнить синтаксис. Нужно знать, что попросить — WorkAI переведёт в код.
Главная ошибка: написать «сделай красиво» или «сделай как в ChatGPT». AI получает размытую задачу — генерирует что-то, но непредсказуемо.
Работает иначе: одно изменение — один промпт. «Измени цвет фона на тёмный.» «Сохранить». Смотрите. «Добавь отступы внутри пузырей.» «Сохранить». Смотрите снова.
Кажется, что так медленнее, — но на деле быстрее, потому что каждый шаг контролируете вы. Если результат не устраивает — нажимаете «Отменить» и пробуете иначе.
В текущей версии страница показывает один ответ — предыдущий исчезает при новом вопросе. Чат работает иначе: каждое сообщение добавляется в ленту и остаётся на экране. Пользователь видит всю историю переписки.
Важно: это история в интерфейсе — то, что видит пользователь. Модель её пока не видит: в каждый запрос по-прежнему уходит только последний вопрос. Как передать модели весь разговор, чтобы она его помнила, — тема Дня 5.
Ленту сообщений WorkAI добавит одним промптом — менять код вручную не нужно.
Сейчас ваш ассистент работает так: вы отправляете вопрос → несколько секунд тишины → весь ответ появляется сразу. Это называется batch response — пакетный ответ.
Стриминг работает иначе: слова появляются по мере того, как модель их генерирует. Первое слово — через долю секунды. Потом следующее. Потом ещё. Именно так отвечает ChatGPT.
Почему лучше: ощущение живого разговора, а не ожидания загрузки.
Подключается одним промптом к WorkAI — без ручного кода.
Стриминг — потоковый вывод ответа. Слова появляются по мере генерации, а не все сразу.
Итерация в дизайне — одно изменение за раз. Результат предсказуем, процесс под контролем.
Теперь вы умеете описывать интерфейс словами — и получать результат через WorkAI без ручного кода. Знаете пять терминов, которые делают промпты точными. Понимаете как работает стриминг и зачем он нужен.
В видео — весь процесс от формы до чата: первый промпт, три итерации, стриминг. В задании — то же самое для вашего проекта.
В День 5 — последний шаг курса: ассистент научится помнить разговор.
WorkAI иногда интерпретирует дизайн-промпты неожиданно — и это всегда по-своему. Напишите в комментариях: первый промпт на дизайн WorkAI понял точно или что-то пришлось переформулировать?