Гайд
кодовое словоШаблон
Как убрать одинаковый AI-дизайн из Claude Code
Claude Code часто выдает один и тот же визуальный паттерн не из-за слабости модели, а из-за бедного дизайн-контекста. Ему нужно дать систему, проверку и готовые блоки.
Содержание4 глав
Три слоя стека
| Инструмент | Роль | Что дает |
|---|---|---|
| UI/UX Pro Max | Дизайн-контекст | Стили интерфейса, палитры, шрифтовые пары, UX-правила и паттерны для промпта. |
| CodeRabbit | Проверка кода | AI-review до слияния: ошибки, риски, качество изменений, комментарии к pull request. |
| 21st.dev Magic MCP | Готовые UI-блоки | Поиск и генерация React/Tailwind компонентов прямо из редактора. |
Как применять
- Перед генерацией интерфейса выбери конкретное визуальное направление, а не проси “сделай современно”.
- Добавь в задачу палитру, типографику, плотность интерфейса, ограничения по карточкам и навигации.
- Подтяни готовые блоки из 21st.dev только там, где они экономят время, а не превращают страницу в витрину чужих компонентов.
- После реализации прогоняй ревью: адаптив, доступность, ошибки состояния, лишние зависимости.
- Сохраняй удачные решения как локальные правила проекта, чтобы следующий экран не начинался с нуля.
Мини-промпт для Claude Code4 строки · 306 знаков
Сделай интерфейс не как типовой AI-лендинг. Сначала выбери дизайн-направление, палитру, шрифтовую пару и плотность. Затем реализуй экран, проверь мобильную версию, состояния кнопок, пустые состояния и переполнение текста. Если используешь готовые блоки, адаптируй их под продукт, а не вставляй как витрину.
Красные флаги
- Темный фон, градиентный заголовок, три одинаковые карточки и “современный SaaS” без причины.
- Красивый первый экран, но нет нормального рабочего сценария пользователя.
- Готовые компоненты вставлены без единой системы отступов и типографики.
- AI-review не подключен, поэтому ошибки дизайна превращаются в ошибки кода.
