Прототипы, созданные искусственным интеллектом, терпят неудачу чаще, чем должны. И дело не в слабости ИИ, а в том, что дизайн-система, которая его питает, полна мелких несоответствий: не задокументированные решения, оставленные жёстко закодированные токены или наивное предположение, что ИИ сам разберётся в ваших макетах.

Хардик Пандья из Atlassian недавно поделился практическим подходом к снижению расхождений, сокращению ошибок, сохранению контекста и повышению качества ИИ-прототипов. Вот как это работает — и как применить, если вы ведёте бизнес на Кипре или в ЕС.

1. Относитесь к дизайн-решениям как к инфраструктуре

Лучшие ИИ-прототипы начинаются с лучших данных — но также с более чёткого человеческого руководства. ИИ не может магическим образом выбрать правильный компонент или спроектировать доступность. Ему нужны приоритеты, принципы, примеры и чёткие указания «можно» и «нельзя». Каждое решение — не только визуальное, но и то, как вы расставляете приоритеты в работе — должно попадать в файл спецификации, доступный для ИИ. На Кипре, где многие веб-проекты ориентированы на аудиторию EN, RU и EL, документирование многоязычного поведения токенов заранее экономит недели последующих доработок.

2. Проводите аудит с помощью FigmaLint

FigmaLint — это бесплатный плагин для Figma, который проверяет токены, состояния, доступность, привязки, имена слоёв, отвязанные экземпляры, отсутствующие интерактивные состояния и жёстко заданные значения. Он также помогает подготовить дизайн-документацию. Если вы работаете с внешними подрядчиками или агентствами — что часто бывает в компаниях, создающих электронную коммерцию или CRM на острове — этот инструмент выявляет то, что часто упускают сторонние библиотеки. Чистый входной сигнал означает более качественный результат от ИИ.

3. Три уровня: файлы спецификаций + слой токенов + аудит

Структурируйте вашу дизайн-систему в три уровня:

  • Файлы спецификаций — Markdown-документы с правилами отступов, выбором цветов, рекомендациями по компонентам и приоритетами. ИИ читает их каждый раз, когда генерирует прототип. Текстовые файлы дешевле и точнее, чем просьба к ИИ расшифровывать визуальные макеты.
  • Слой токенов — актуальный поддерживаемый список всех токенов. ИИ выбирает из закрытого набора именованных переменных, вместо того чтобы изобретать значения на лету. Для бизнеса в ЕС это критически важно, когда токены должны адаптироваться под цвета согласий GDPR или многоязычные надписи на кнопках.
  • Скрипт аудита — регулярный скрипт (не ИИ), который сканирует каждый прототип и помечает все жёстко заданные значения. Он ждёт завершения работы ИИ, а затем возвращает обратную связь. Когда дизайн-система обновляется, процедура синхронизации сообщает, какие файлы спецификаций нуждаются в обновлении. ИИ всегда читает текущую версию, а не устаревшую.

4. Примеры из реальной жизни

Некоторые компании уже выпускают дизайн-системы, готовые к ИИ. Их стоит изучить:

  • Atlassian
  • Carbon (от IBM)
  • CMS Design System (от Центров Medicare и Medicaid США)
  • Nordhealth

Заключение

ИИ не исправит дизайнерский или технический долг без структуры. Он зависит от чётких решений, установленных приоритетов и хорошо определённых принципов. Чем точнее вы документируете эти решения — в файлах спецификаций, слоях токенов и аудитах — тем лучше будут ваши прототипы. На Кипре, где сроки сдачи и бюджеты ограничены, этот подход напрямую сокращает переделки и недопонимание с подрядчиками.

Знакомьтесь: «Паттерны дизайна для ИИ-интерфейсов»
Новый видеокурс Виталия включает сотни реальных примеров и UX-рекомендаций для проектирования ИИ-функций, которые люди действительно используют. Живое UX-обучение состоится позже в этом году. Переходите к бесплатному превью.

Цены:

  • Видео + UX-тренинг: $450.00 $799.00 — 30 видеоуроков (10 часов) + живой UX-тренинг. Гарантия возврата денег 100 дней.
  • Только видео: $275.00 $395.00 — 30 видеоуроков (10 часов). Обновляется ежегодно. Также доступно в составе UX-набора из 3 видеокурсов.

Полезные ресурсы

  • FigmaLint, от TJ Pitre
  • Пример дизайн-системы, готовой к ИИ от Atlassian
  • Пример дизайн-системы Carbon, готовой к ИИ от IBM
  • Пример дизайн-системы CMS, готовой к ИИ от Центров Medicare и Medicaid
  • Пример дизайн-системы Nordhealth, готовой к ИИ от Nordhealth