---
title: Прототипы и дизайн интерфейсов
description: "Где ИИ помогает в веб-дизайне: исследование, структура, макеты, прототипы в коде и проверка интерфейса — с границами между макетом, прототипом и сайтом."
---

## Где ИИ помогает в веб-дизайне

ИИ ускоряет переход между этапами дизайна и снижает стоимость черновика, но не отменяет решений: структуру, приоритеты и визуальный язык по-прежнему определяет человек. Дизайн включает исследование задач и аудитории, структуру, интерфейс, визуальные материалы и передачу решения в разработку — и на каждом этапе цена ошибки разная.

Для подбора сервисов и рекомендаций по процессу см. [ИИ-дизайн: сервисы и процесс](https://wpcraft.ru/kb/design/ai/tools-and-workflow.md). Там собраны инструменты для карты сайта, интерфейсных макетов, прототипов, публикации страниц и визуальных активов.

## Три разных результата

Самая частая путаница — считать, что «сгенерировали экран» и «сделали сайт» — это одно и то же. Результаты различаются тем, что с ними можно делать дальше.

| Результат | Что это | Что с ним дальше |
|---|---|---|
| **Макет** | Статичное изображение или редактируемый слой в Figma-подобной среде | Обсуждение, правки, передача в вёрстку |
| **Прототип** | Работающая страница с реальными компонентами и стилями | Проверка поведения, тесты на пользователях, основа реализации |
| **Опубликованный сайт** | Развёрнутое приложение с данными и интеграциями | Эксплуатация, поддержка, развитие |

Генераторы интерфейсов (v0, Lovable, Bolt и подобные) чаще дают второй или третий результат, дизайн-инструменты с ИИ — первый. Выбирайте инструмент по тому, какой артефакт нужен команде, а не по красоте демо.

## Визуальные правила и реализация

До генерации интерфейса полезно зафиксировать токены, компоненты, состояния и ограничения в [DESIGN.md](https://wpcraft.ru/kb/design/ai/design-md.md). Без этого каждый сгенерированный экран будет иметь свою палитру, отступы и типографику, а свести их вместе окажется дороже, чем нарисовать с нуля.

Для ревью и улучшения интерфейса можно использовать [Impeccable](https://wpcraft.ru/kb/design/ai/impeccable.md). Оба материала входят в раздел [ИИ-дизайн](https://wpcraft.ru/kb/design/ai.md), где также описаны продуктовые и маркетинговые контракты.

## Что ИИ делает хорошо и что плохо

**Хорошо:**

- Черновики структуры: карта разделов, список блоков, варианты порядка секций.
- Быстрые визуальные варианты для выбора направления, а не для финала.
- Тексты интерфейса: подписи, пустые состояния, ошибки, подсказки.
- Перевод макета в код на знакомом стеке — как черновик, который потом доводится руками.
- Систематическая проверка: контраст, состояния наведения и фокуса, адаптивность.

**Плохо:**

- Оценка пользовательской задачи: модель не знает вашу аудиторию и контекст.
- Доступность как свойство, а не как список: соответствие чек-листу не делает интерфейс удобным.
- Сложные состояния: длинные формы, ошибки сети, права, пустые данные.
- Консистентность на дистанции: каждый новый экран генерируется заново и незаметно расходится с системой.

## Проверка результата

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

Практический минимум:

- **Реальные данные и длинные строки.** Макет, сгенерированный под «Иван», ломается на «ООО „Ромашка-Пром-Сервис“».
- **Состояния.** Загрузка, ошибка, пусто, нет прав — по умолчанию их нет ни в одном сгенерированном экране.
- **Клавиатура и фокус.** Проверяется в браузере, а не на картинке.
- **Контраст и размеры.** Отдельно от общего впечатления.
- **Мобильная ширина.** Генераторы почти всегда оптимизируют desktop.

Как эти задачи соотносятся со слоями агентной системы — моделью, инструментами и ограничениями — видно в разделе [Агентные системы](https://wpcraft.ru/kb/ai/agents.md). Инструменты для генерации кода интерфейса разобраны в [Ассистентах и средах](https://wpcraft.ru/kb/ai/coding/harnesses.md).

## Связанные материалы

- [Генерация контента](https://wpcraft.ru/kb/ai/content-generation.md) — конвейер и правила проверки.
- [Изображения](https://wpcraft.ru/kb/ai/content-generation/images.md) — визуальные активы без интерфейсной логики.
- [ИИ-дизайн](https://wpcraft.ru/kb/design/ai.md) — процесс визуальной работы с ассистентом.
- [UI-дизайн](https://wpcraft.ru/kb/design/ui.md) — дизайн-система, токены и компоненты.

## Материалы и источники

- [ИИ-дизайн: сервисы и процесс](https://wpcraft.ru/kb/design/ai/tools-and-workflow.md)
- [DESIGN.md — формат для AI-агентов](https://wpcraft.ru/kb/design/ai/design-md.md)
- [ИИ-инструменты для веб-разработки](https://wpcraft.ru/kb/ai/coding/harnesses.md)
- [WCAG 2.2: Quick Reference](https://www.w3.org/WAI/WCAG22/quickref/) — критерии доступности для проверки результата