Разработчики и дизайнеры часто сталкиваются с ситуацией, когда эстетичный макет после переноса в код превращается в источник проблем. Автор статьи на Хабре провел эксперимент: взял два варианта одного и того же экрана — «грязный» и «чистый» — и прогнал их через Claude Design с одинаковым промптом. Промпт требовал чистый HTML, CSS по BEM, JavaScript без библиотек и без сокращений в названиях классов, функций и переменных. Результат показал, что код, сгенерированный с грязного макета, оказался «кромешным адом» для разработчика: ИИ интерпретировал структуру неоднозначно, что порождало множество вопросов и домыслов. Код с чистого макета, собранного по правилам, описанным в статье, был структурирован и понятен как человеку, так и ИИ.
Проблема усугубляется тем, что современные инструменты генерации кода на основе ИИ, такие как Claude Design, становятся все более популярными. Однако их эффективность напрямую зависит от качества входных данных. Если макет содержит хаотично расположенные элементы, группы без логики и непонятные названия слоев, ИИ вынужден интерпретировать намерения дизайнера, что часто приводит к ошибкам. Внедрение правил гигиены макетов позволяет не только улучшить взаимодействие между дизайнерами и разработчиками, но и значительно повысить качество автоматически сгенерированного кода.
Автор статьи выделяет несколько ключевых аспектов гигиены макетов. Во-первых, архитектура и структура: все элементы должны быть обернуты в Auto Layout, который аналогичен CSS Flexbox и Grid. Это позволяет передать разработчику отступы и поведение элементов без лишних слов. Фреймы без Auto Layout допустимы только в крайних случаях, а группы (Groups) в контексте верстки лучше забыть — они не имеют паддингов и ведут себя непредсказуемо. Во-вторых, нейминг и семантика: названия слоев должны отражать их функцию (например, Header, ButtonPrimary), а не быть абстрактными (Frame 112, Rectangle 4). Единообразие в названиях критически важно.
Код, сгенерированный с грязного макета, оказался неструктурированным и требовал множества уточнений у дизайнера.
Практический эффект от внедрения этих правил автор оценивает по трекам в Jira: количество обращений разработки с уточняющими вопросами практически исчезло. Это экономит время обеих сторон и снижает уровень стресса. Для команд, которые активно используют ИИ-инструменты для генерации кода, гигиена макетов становится не просто рекомендацией, а необходимостью. Чистый макет — это не только удобство для человека, но и залог того, что ИИ сможет корректно интерпретировать дизайн и создать качественный код.
В статье также упоминаются Layout guides и строгая вложенность элементов. Сетки должны использоваться как направляющие на уровне страницы, а не для позиционирования отдельных элементов. Визуальная иерархия макета должна на 100% совпадать со структурой слоев, чтобы разработчик и ИИ могли считывать макет последовательно, как дерево объектов. Гигиена также включает удаление пустых фреймов и скрытого мусора — никто, кроме дизайнера, не должен знать о них.
Таким образом, статья предлагает конкретный чек-лист для дизайнеров, который помогает создавать макеты, удобные для разработки и для ИИ. Это особенно актуально в условиях растущей автоматизации фронтенд-разработки. Инструменты вроде Claude Design становятся частью рабочего процесса, и их эффективность напрямую зависит от качества входных данных. Соблюдение простых правил гигиены макетов может значительно ускорить разработку и улучшить взаимодействие в команде.
