Разбор стрима про design engineering: как дизайнерам работать с AI-агентами, почему появляется AI-slop, зачем нужны design tokens, Paper, Mobbin MCP и хороший контекст для Codex/Claude Code.
Last updated: 2026-05-25
- Дизайнеру уже мало просто рисовать в Figma: ценность сдвигается к prototype-first и code-aware работе.
- AI-агентам нужны нормальные design skills: tokens, states, references, constraints и критерии вкуса.
- Главный враг — AI-slop: generic карточки, случайные gradients, непонятная иерархия и отсутствие живого feedback.
Что реально поменялось
AI меняет скорость макетов и требования к роли дизайнера. Ценнее становится человек, который умеет соединять вкус, продуктовую задачу и код.
Design engineer здесь — роль на стыке: быстро собрать прототип, понять ограничения интерфейса, дать агенту нормальные skills и довести идею ближе к работающему продукту.
Команда «сделай красиво» почти всегда проигрывает нормальным skills, дизайн-токенам и правилам визуального стиля.
Почему агенты делают AI-slop
Codex, Claude Code, Lovable, v0 и похожие инструменты умеют быстро собрать интерфейс. Проблема в том, что без ограничений они тянут усреднённый интернет: одинаковые карточки, случайную типографику, декоративные блоки и визуальный шум.
Практический вывод: агенту нужен язык дизайна вместе с задачей: семантические токены, состояния компонентов, анти-референсы, примеры хороших flow и критерии, по которым результат считается готовым.
Инструменты и где они полезны
| Инструмент | Для чего | Риск |
|---|---|---|
| Paper | Design-to-code и импорт живых сайтов ближе к HTML/CSS модели. | Нужны продуктовая логика и responsive states. |
| Mobbin MCP | Реальные UX-референсы для onboarding, paywall, checkout, settings. | Можно скопировать паттерн без понимания контекста. |
| Codex / Claude Code | Сборка route, ревью, перенос UI в код, работа с существующим проектом. | Без дизайн-системы быстро скатываются в generic UI. |
Промпт, который можно дать агенту
Ты помогаешь сделать frontend экран не похожим на AI-slop.
Контекст:
- пользователь: [кто открывает экран]
- задача: [что он должен сделать]
- продуктовый риск: [что нельзя сломать]
- референсы: [2-5 ссылок или описаний]
Правила:
1. Используй semantic tokens: text-primary, text-secondary, bg, surface-100, border, accent.
2. Покажи empty/loading/error/success states.
3. Не добавляй декоративные карточки без функции.
4. Добавь micro-interactions только там, где они дают feedback.
5. Перед финалом проверь mobile и desktop viewport.Что делать дальше
- Собрать
design.mdдля проекта: tokens, typography, spacing, radius, components, anti-patterns. - Для каждого нового UI task давать агенту задачу, референсы и правила визуального стиля.
- Проверять mobile/desktop, empty/loading/error states и микроинтеракции до финала.
- Сохранять созвоны, решения и дизайн-обсуждения как будущую память для агентов.