Попросите Claude создать лендинг - получите Inter, фиолетовый градиент и трёхколоночный макет.
AI slop в интерфейсах
AI slop - генерируемые интерфейсы с чрезмерной визуальной однородностью.
Шрифт Inter. Фиолетово-синий градиент на белом фоне. Трёхколоночная структура с rounded corners и subtle shadows.
В августе 2025 года Adam Wathan, создатель Tailwind CSS, опубликовал извинения. Пост набрал 684,000 просмотров. Он извинился за выбор bg-indigo-500 для примеров компонентов Tailwind UI. Этот цвет стал доминирующим паттерном в AI-генерируемых интерфейсах. Универсальный выбор попал в training data в момент формирования стандартов.
Я наблюдал это в проекте MP - крупном enterprise приложении. Первые версии были именно такими. После применения подходов ниже интерфейс обрёл собственное лицо.
Контекста недостаточно
Claude работает с тем, что видела модель в training data. Доминировали безопасные, универсальные решения.
Без явной дизайн-системы Claude предполагает, что вы хотите “нормальный” сайт.
Кросс-браузерная совместимость, accessibility guidelines, mobile-first подходы привели к конвергенции стилей.
Реактивный подход: скилл во время кодирования
Frontend-Design Skill от Anthropic работает на этапе реализации. Скилл заставляет Claude принять смелое дизайн-решение перед генерацией кода.
Purpose - что решает интерфейс, кто его использует.
Tone - экстремальный выбор: brutally minimal vs maximalist chaos, retro-futuristic vs contemporary, organic vs geometric, luxury vs playful.
Implementation Strategy - requirements matching vision.
Code Generation - следует выбранному направлению.
Ключевые измерения:
Typography - дистинктивные шрифты из Google Fonts вместо Inter и Roboto.
Color Systems - когерентные палитры, semantic colors.
Motion - целенаправленные анимации.
Layered Backgrounds - атмосферные фоны.
Я применил этот скилл к одному из компонентов MP. До этого компонент был стандартной карточкой с тенями и Inter для текста. Claude выбрал brutalist направление. JetBrains Mono для заголовков. Sharp edges вместо rounded corners. Высокий контраст. Deliberate whitespace. Компонент стал узнаваемым.
Frontend-design работает в Cursor, Claude Code, Windsurf. В январе 2026 года Justin Wetch опубликовал детальную статью “Teaching Claude to Design Better: Improving Anthropic’s Frontend Design Skill” с улучшениями через pull request. Он добавил реальные constraints вместо abstract guidelines.
Профилактический подход: дизайн-система перед кодированием
UI UX Pro Max Skill от nextlevelbuilder - AI-powered Design System Generator. Применяется на этапе проектирования, до первого кода.
Система генерирует UI стили (glassmorphism, claymorphism, minimalism, brutalism, neumorphism). Industry-specific color палитры для SaaS, e-commerce, healthcare, fintech, luxury, marketplace, beauty/spa, restaurant, agency, portfolio, Web3/NFT, spatial computing. Куратированные font pairings с Google Fonts интеграцией. Типы чартов для дашбордов. Технологические стеки от React до Flutter. UX guidelines. Industry-specific reasoning rules с anti-patterns, key effects, typography mood, color mood, style priority.
Механизм работы через CLI. Система параллельно ищет в нескольких областях:
- Product - тип продукта
- Style - рекомендуемый стиль
- Color - палитра
- Landing - паттерны
- Typography - пары шрифтов
Industry-specific подход критичен. Anti-patterns для банкинга и healthcare - AI purple/pink градиенты, подрывающие доверие. Для SaaS - generic tech blues без аутентичного brand цвета. Для beauty/spa - trendy градиенты вместо natural, earthy палет.
Последние обновления. Master + Overrides pattern для дизайн-системы - page-specific кастомизация при сохранении consistency. Dynamic version management. Claude Code Skill Marketplace интеграция. Support для Jetpack Compose и Android разработки. Intelligent page overrides для smart customizations.
Если бы я применил UI UX Pro Max к проекту MP на старте, система определила бы его как SaaS продукт. Сгенерировала соответствующую дизайн-систему. Professional палитру без generic indigo/purple. Coherent spacing rules. Dark mode logic. Дизайн-система, используемая всеми компонентами с первой итерации.
Extended Frames публикует на extendedframes.com: “AI flips the model. If you want AI in design systems to work reliably, your system must become machine-readable, not just ‘a Figma library and a wiki’, but a structured source of truth with tokens, metadata, rules, and approvals.”
UI UX Pro Max skill доступен в Claudetory.
Когда какой скилл использовать
| Аспект | Frontend-Design | UI UX Pro Max |
|---|---|---|
| Применяется | При кодировании | Перед кодированием |
| Размер | Компактный (~400 токенов) | Полная система |
| Лучше для | Небольших задач | Project-scale разработки |
| Результат | Distinctive компонент | Coherent дизайн-система |
| Фокус | Typography, color, motion, backgrounds | UI styles, palettes, fonts, industry rules |
Оба скилла работают вместе. UI UX Pro Max создаёт дизайн-систему на старте проекта. Генерирует design tokens. Определяет палитры. Выбирает font pairings. Устанавливает anti-patterns для конкретной индустрии. Frontend-design применяется при реализации каждого компонента. Использует систему. Добавляет distinctive vision для конкретной задачи.
В моём проекте MP этот workflow означал бы coherent, distinctive интерфейс без generic AI slop с первой итерации.
Для небольших задач - одна landing page, один компонент, быстрый прототип - frontend-design достаточен. Результат за один промпт.
Для project-scale разработки с multiple pages, компонентами, team collaboration - UI UX Pro Max обеспечивает foundation, экономящий итерации.
От слопа к системе
Frontend-Design - реактивный подход, улучшающий генерацию во время кодирования через explicit дизайн-принципы.
UI UX Pro Max - профилактический подход, создающий machine-readable дизайн-систему перед кодированием.
Следующий шаг после скилов - полноценные machine-readable design systems. Design tokens. Metadata. Rules. Approvals. Системы через MCP (Model Context Protocol) обеспечивают AI доступ к дизайн-знаниям в реальном времени.
Дайте Claude структурированный контекст. Попробуйте один из скилов на следующем проекте.