Часто натыкаюсь на мнение: «ИИ уже решает сложные задачи, а с самой простой — версткой, до сих пор справляется плохо».
Дальше мои мысли, почему верстка считает простой и где тут нюансы 😏
Наверное, потому что сложность мы обычно оцениваем по тому, что видим в коде. Алгоритмы, вычисления, ветвления, большой flow — понятно, тут сложно. А в верстке что? Контейнер, отступ, цвет, шрифт, какие-то новые непонятные свойства. В целом ничего интересного.
Только основная работа происходит до того, как появляются эти несколько строк CSS.
Дизайнер долго крутит экран, пробует варианты, что-то двигает на пару пикселей, возвращает обратно. В итоге отдает один макет, и весь этот процесс в нем уже не виден.
Фронтендер тоже получает не готовый ответ. Он(а) видит один экран и дальше сам(а) решает, что в нем было правилом, что случайностью, а что было перенесенным опытом дизайнера, который даже он(а) не осозновали. Как поведет себя длинный текст? Что сожмется на мобильном? Что должно остаться заметным, а чем можно пожертвовать?
И дизайнер, и фронтендер со временем делают это почти автоматически и обычно не проговаривают. Со стороны кажется, что один «нарисовал экран», а второй «перенес его в код».
ИИ очень хорошо показал, сколько всего было спрятано внутри этого «переноса».
ИИ может повторить внешний вид. Знает, как обычно выглядят карточки, формы и дашборды. Но часто не понимает, почему конкретный элемент оказался именно здесь. Поэтому вроде все аккуратно, а смотришь — и мертво. Или просто похоже на еще один случайный финтех.
С Tetri у меня постепенно появился свой способ работы с ИИ над интерфейсами. До нормального дизайнера с опытом и насмотренностью моделям далеко. Иногда после пяти итераций проще все выбросить. Иногда модель исправляет один элемент и заодно ломает три соседних. Ну вы сами видели иишные UI. Даже интерфейсы бекендеров выглядят лушче 😅
Но результат все равно заметно лучше, чем после стандартных промптов и готовых скиллов.
Никакого секретного промпта у меня нет. Я даю контекст Tetri, показываю существующую систему и реальные данные. Потом мы собираем HTML-прототип, я открываю его и пытаюсь понять, что меня раздражает.
Постепенно из моего невнятного «что-то не то» появляются более точные правила. И уже их можно переносить в дизайн-систему и рабочий интерфейс. То есть ИИ не проектирует Tetri вместо меня. Он быстро выдает вариант, на который я могу посмотреть и сказать: нет, вот здесь мы опять пошли не туда. Поэтому обычные промпты работают хуже. Они предполагают, что мы уже точно знаем, чего хотим, и можем описать это одним сообщением. Но с интерфейсами я часто понимаю, чего хотел, только когда вижу неправильный вариант. Бывает что через пару недель.
Так что сам CSS точно простой. Но он всего лишь последний шаг имплементации интерфейса.
Я ищу работу. Для вашей команды/проекта мой 11+ летний опыт работы с интерфейсами точно будет полезен: luzanov.dev/resume.pdf