🛌 Верстальщики могут спать спокойно и не бояться конкуренции от нейросетей, пока на создание дизайн-макетов нанимают дизайнеров без опыта веб-дизайна

🤵 Верстка в вебе — это процесс воссоздания на реальной веб-странице того, что изобразил в макете дизайнер. Процесс это рутинный и кропотливый, поскольку каждый элемент нужно прокликать и посмотреть его свойства, чтобы написать эти свойства в виде кода разметки CSS

👨‍🎨 Figma этот процесс в свое время упростила. Платформа сама ведет учет расстояний, позиций, цветов и других свойств, чтобы разработчик мог копировать свойства, а не подбирать на глаз, как это было с макетами в фотошопе, к примеру

😒 Для автоматизации верстки нейросетями к Figma прикрутили возможность передавать структуру элементов и свойства в нейросеть, чтобы ей не приходилось верстать на глаз. Казалось бы, вот она автоматизация?

🤭"Как бы не так!" — скажет дизайнер, у которого кнопка отрисована как отдельно текст, отдельно иконка, фон состоит из отдельного прямоугольника и наложенными слоями картинок размерами 1920х1024 при размере самой кнопки 300х55. Текст при этом не вписан в границы кнопки, а расположен независимо от фона. Поменяли текст или размер шрифта — кнопка потеряла пропорции.

🦜 Эффекты наложения, которых не существует в вебе? Сюдааа. В идеале сделать несколько слоев таких эффектов, чтобы для воссоздания вида на глаз нужно было оркестровать сразу всеми. Красота требует жертв, и нет ничего красивее, чем разработчик в мыле и с выдранными волосами

😭 Элементы, которые могут меняться в размере в зависимости от контента (кнопки, формы, карточки) такой дизайнер сделает строго по размеру "рыбы". Притом выставляя размеры, он будет мышкой или тачпадом тянуть за край элемента, после чего отступы в каждом таком элементе будут разные и не кратные ничему. Почему отступы по четырем сторонам 23px 39px 18px 40px? "Я дизайнер, я так вижу" — будет ответ

🐸 Когда с такими макетами работает разработчик, зачастую проще исправить макет и сделать, чем объяснить заказчику или дизайнеру. Дизайнер будет утверждать, что "раньше никто не жаловался", "я не программист", а заказчику терки смежных специалистов тем паче не интересны. Хотя казалось бы, разве нужно быть программистом чтобы думать о том, что текст кнопки могут переименовать, из-за чего кнопка должна красиво адаптироваться под разный размер текста?

🐈 Когда с такими макетами работает нейросеть, она делает 1в1 как в макете. Кнопка сделана как 4 независимых элемента, а не единый компонент? Тогда так и будет. Что вебом не поддерживается, будет выглядеть как баг

🤔 Мораль сей басни такова: если вам придется верстать макеты с Figma с помощью MCP TalkToFigma силами нейросети — не всё, что по итогу выглядит криво, является галлюцинациями нейросети. Иногда галлюцинации имели место быть еще раньше, когда дизайнеру карточек товаров для Авито или рекламных макетов показалось, что он веб-дизайнер

Оформление для Школы органического земледелия на платформе GetCourse. Так как я уже много лет работаю с ШОЗ, помимо соответствия макету мне сказали "сделай как можно более автоматизированным".

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

Отдельно я собрал бонусную механику, которой в школе особенно не хватало. Ученик набирает баллы по шкале, переходит на витрину, и бонусные рубли начисляются автоматически, с сохранением истории начислений, чтобы не было ни задвоений, ни лишнего. Никаких процессов порционных пересчетов баллов шкалы в бонусы, а вся настройка состоит в выборе шкалы на копированной странице витрины

Корзину я чутка переопределил под диз по структуре и перекрасил, а промокоды и карточки со скидками можно быстро переносить из потока в поток кастомным экспортом и импортом блоков.

Сам пост на конкурсе в чате GetCourse

Не стал писать в конкурсном посте слишком подробно про используемые технолоджии, скажу лишь что для кастомных блоков я во многих местах теперь отхожу от использования IDE и использую способы, которые доступны в 100% аккаунтов GetCourse, за счет которой компоненты грузятся быстрее 😉

Теперь все чаще буду применять именно этот способ для создании кастомов для гк

Одно из моих оформлений попало в список финалистов 😎

Буду благодарен за голос, хотя больше все-таки отдавайте предпочтение тому, за что искренне хотелось бы проголосовать 💪

https://t.me/getcourse_official/3689