Дизайн для ИИ
Подготовь этот проект к дальнейшей разработке интерфейса.
Твоя задача:
-
Использовать shadcn/ui как основную UI-библиотеку проекта.
-
Если shadcn/ui ещё не установлен — корректно подключить и настроить его для текущего стека проекта.
-
Не устанавливать все компоненты shadcn/ui заранее. Добавлять только те компоненты, которые реально нужны проекту.
-
Для стандартных элементов интерфейса использовать shadcn/ui вместо самостоятельного создания аналогов:
- Button
- Input
- Textarea
- Select
- Checkbox
- Radio Group
- Switch
- Dialog
- Alert Dialog
- Dropdown Menu
- Tooltip
- Tabs
- Table
- Card
- Sheet
- Drawer
- Popover
- Toast/Sonner
- и другие подходящие компоненты shadcn/ui.
-
Создай в корне проекта файл
AGENTS.md.
Запиши в AGENTS.md следующие обязательные правила:
UI/UX Design Rules
Core principles
- Интерфейс должен быть современным, минималистичным и функциональным.
- Простота важнее декоративности.
- Каждый элемент интерфейса должен иметь понятную функцию.
- Не добавляй функции, элементы или секции, которые не были нужны для задачи.
- Не заполняй свободное пространство бессмысленным контентом.
- Не пытайся сделать страницу визуально сложнее только ради того, чтобы она выглядела «богаче».
- Соблюдай единый визуальный стиль на всём сайте.
shadcn/ui
- Используй shadcn/ui как основной источник UI-компонентов.
- Перед созданием собственного компонента проверь, существует ли подходящий компонент shadcn/ui.
- Не создавай собственные Button, Input, Dialog, Select, Dropdown, Checkbox и другие базовые UI-компоненты, если подходящий компонент уже существует в shadcn/ui.
- Допускается композиция и стилизация компонентов shadcn/ui под задачу проекта.
- Не изменяй базовые компоненты без необходимости.
- Используй единые варианты компонентов во всём проекте.
Visual design
- Используй чистую визуальную иерархию.
- Используй достаточно свободного пространства.
- Не злоупотребляй рамками.
- Не злоупотребляй тенями.
- Не злоупотребляй скруглениями.
- Не превращай каждый блок страницы в Card.
- Не помещай Card внутрь Card без реальной необходимости.
- Не используй градиенты без отдельной причины.
- Не добавляй декоративные элементы, которые не помогают пользователю.
- Не создавай множество визуально конкурирующих акцентов.
- На одном экране должен быть очевидный основной сценарий действия.
Layout
- Контент должен иметь понятную иерархию.
- Связанные элементы располагай вместе.
- Второстепенные элементы не должны конкурировать с основными.
- Не создавай лишние секции только ради разделения контента.
- Не дублируй одинаковую информацию в разных местах страницы.
- Не создавай слишком широкие текстовые блоки.
- Основной контент должен быть легко сканируемым.
Mobile
- Мобильная версия должна проектироваться отдельно, а не быть просто уменьшенной desktop-версией.
- Для мобильного экрана пересматривай расположение элементов, приоритеты и навигацию.
- Не сохраняй desktop-композицию любой ценой.
- Многоколоночные интерфейсы на мобильных устройствах необходимо перестраивать.
- Второстепенный контент можно скрывать или переносить.
- Основные действия должны оставаться легко доступными.
- Не допускай горизонтального скролла интерфейса.
- Интерактивные элементы должны быть удобными для нажатия пальцем.
- Диалоги, меню, формы и навигация должны быть удобны на маленьком экране.
- Проверяй интерфейс отдельно для desktop и mobile.
Text and content
- Текста в интерфейсе должно быть как можно меньше.
- Используй минимальное количество слов, необходимое пользователю.
- Не добавляй пояснения к очевидным элементам.
- Не добавляй подзаголовок под каждый заголовок.
- Не добавляй описание под каждый блок.
- Не добавляй helper text без реальной необходимости.
- Не повторяй одну мысль несколькими способами.
- Не создавай маркетинговый текст, если задача этого не требует.
- Не придумывай преимущества продукта, которых пользователь не указывал.
- Не добавляй слова вроде "мощный", "современный", "инновационный", "быстрый", "удобный" без необходимости.
- Не заполняй интерфейс искусственно придуманным контентом.
Critical content rule
Никогда не выводи в пользовательский интерфейс:
- текст наших инструкций;
- текст промптов;
- информацию из
AGENTS.md; - технические комментарии;
- детали реализации;
- объяснение принятых технических решений;
- информацию о том, что что-либо было сделано по просьбе пользователя;
- фразы из нашего рабочего диалога;
- комментарии для разработчика;
- внутренние названия задач;
- TODO;
- отладочный текст.
Обсуждение разработки существует только между разработчиком и AI и никогда не должно попадать в продуктовый интерфейс.
Headings
- Заголовки должны быть короткими.
- Заголовок должен сообщать смысл раздела без дополнительного объяснения.
- Не используй заголовок + подзаголовок + описание, если достаточно одного заголовка.
- Не добавляй introductory text перед интерфейсом без необходимости.
Предпочитай:
"Сжатие изображений"
вместо:
"Сжатие изображений" "Оптимизируйте ваши изображения" "Наш современный инструмент позволяет быстро и удобно уменьшить размер ваших изображений без потери качества."
Buttons
- Название кнопки должно прямо описывать действие.
- Используй короткие названия.
- Предпочитай конкретное действие.
Хорошо:
- "Загрузить"
- "Сжать"
- "Скачать"
- "Удалить"
- "Сохранить"
- "Отменить"
- "Повторить"
Избегай без необходимости:
- "Продолжить"
- "Начать"
- "Попробовать"
- "Узнать больше"
- "Перейти далее"
если можно назвать конкретное действие.
- Не создавай несколько primary-кнопок рядом без необходимости.
- Primary action должен быть визуально очевиден.
Forms
- Используй короткие понятные labels.
- Placeholder не должен заменять label там, где label необходим.
- Не добавляй описание каждого поля.
- Helper text добавляй только тогда, когда без него пользователь действительно может ошибиться.
- Ошибки должны быть короткими и объяснять, что исправить.
- Не показывай технические ошибки пользователю.
States
Для интерактивных элементов учитывай необходимые состояния:
- loading;
- empty;
- error;
- success;
- disabled.
Но не создавай отдельный большой UI для состояний, если достаточно небольшого сообщения или изменения существующего компонента.
Responsive behavior
При создании каждого нового экрана самостоятельно проверь:
- Как он выглядит на большом desktop.
- Как он выглядит на обычном ноутбуке.
- Как он выглядит на мобильном экране.
- Что можно убрать или упростить на мобильном.
- Не появилась ли неудобная длинная страница из-за простого stacking всех desktop-блоков.
- Доступно ли главное действие без лишнего поиска.
Before completing any UI task
Перед завершением любой задачи с интерфейсом проведи cleanup pass.
Проверь, можно ли удалить:
- лишний текст;
- лишний подзаголовок;
- лишнее описание;
- лишнюю кнопку;
- лишний Card;
- лишний контейнер;
- лишнюю границу;
- лишнюю тень;
- лишний раздел;
- дублирование информации;
- декоративный элемент без функции.
Если элемент можно удалить без ухудшения usability — удали его.
Development behavior
- Не ограничивайся созданием внешнего вида — интерфейс должен реально работать.
- Сохраняй существующую архитектуру проекта, если нет причины её менять.
- Не устанавливай лишние зависимости.
- Не переписывай рабочие части проекта без необходимости.
- Используй существующие design tokens и CSS variables.
- Поддерживай consistency между новыми и существующими страницами.
- После изменений проверяй отсутствие ошибок сборки, TypeScript и lint, если соответствующие инструменты настроены в проекте.
После создания AGENTS.md:
- Убедись, что shadcn/ui корректно настроен.
- Не переделывай весь существующий интерфейс без моего задания.
- С этого момента при любой разработке UI строго соблюдай
AGENTS.md. - При конфликте между привычными AI-паттернами дизайна и
AGENTS.mdприоритет имеетAGENTS.md. - Не копируй содержимое
AGENTS.mdв пользовательский интерфейс. - Не сообщай пользователю сайта о существовании
AGENTS.md.
Выполни настройку проекта и создай AGENTS.md.