# Как убрать одинаковый AI-дизайн из Claude Code

Claude Code часто выдает один и тот же визуальный паттерн не из-за слабости модели, а из-за бедного дизайн-контекста. Ему нужно дать систему, проверку и готовые блоки.

## Три слоя стека

| Инструмент | Роль | Что дает |
| --- | --- | --- |
| UI/UX Pro Max | Дизайн-контекст | Стили интерфейса, палитры, шрифтовые пары, UX-правила и паттерны для промпта. |
| CodeRabbit | Проверка кода | AI-review до слияния: ошибки, риски, качество изменений, комментарии к pull request. |
| 21st.dev Magic MCP | Готовые UI-блоки | Поиск и генерация React/Tailwind компонентов прямо из редактора. |

## Как применять

1. Перед генерацией интерфейса выбери конкретное визуальное направление, а не проси “сделай современно”.
2. Добавь в задачу палитру, типографику, плотность интерфейса, ограничения по карточкам и навигации.
3. Подтяни готовые блоки из 21st.dev только там, где они экономят время, а не превращают страницу в витрину чужих компонентов.
4. После реализации прогоняй ревью: адаптив, доступность, ошибки состояния, лишние зависимости.
5. Сохраняй удачные решения как локальные правила проекта, чтобы следующий экран не начинался с нуля.

## Мини-промпт для Claude Code

```
Сделай интерфейс не как типовой AI-лендинг.
Сначала выбери дизайн-направление, палитру, шрифтовую пару и плотность.
Затем реализуй экран, проверь мобильную версию, состояния кнопок, пустые состояния и переполнение текста.
Если используешь готовые блоки, адаптируй их под продукт, а не вставляй как витрину.
```

## Красные флаги

- Темный фон, градиентный заголовок, три одинаковые карточки и “современный SaaS” без причины.
- Красивый первый экран, но нет нормального рабочего сценария пользователя.
- Готовые компоненты вставлены без единой системы отступов и типографики.
- AI-review не подключен, поэтому ошибки дизайна превращаются в ошибки кода.

## Где взять

- [Koubos/ui-ux-pro-max](https://github.com/Koubos/ui-ux-pro-max)
- [CodeRabbit](https://coderabbit.ai/)
- [21st.dev Magic MCP](https://21st.dev/mcp)
- [21st-dev/magic-mcp](https://github.com/21st-dev/magic-mcp)

---

Источник: https://localhost:3000/m/kak-ubrat-odinakovyy-ai-dizayn-iz-claude-code