← Все памятки

Дизайн для ИИ

Подготовь этот проект к дальнейшей разработке интерфейса.

Твоя задача:

  1. Использовать shadcn/ui как основную UI-библиотеку проекта.

  2. Если shadcn/ui ещё не установлен — корректно подключить и настроить его для текущего стека проекта.

  3. Не устанавливать все компоненты shadcn/ui заранее. Добавлять только те компоненты, которые реально нужны проекту.

  4. Для стандартных элементов интерфейса использовать 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.
  5. Создай в корне проекта файл 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

При создании каждого нового экрана самостоятельно проверь:

  1. Как он выглядит на большом desktop.
  2. Как он выглядит на обычном ноутбуке.
  3. Как он выглядит на мобильном экране.
  4. Что можно убрать или упростить на мобильном.
  5. Не появилась ли неудобная длинная страница из-за простого stacking всех desktop-блоков.
  6. Доступно ли главное действие без лишнего поиска.

Before completing any UI task

Перед завершением любой задачи с интерфейсом проведи cleanup pass.

Проверь, можно ли удалить:

  • лишний текст;
  • лишний подзаголовок;
  • лишнее описание;
  • лишнюю кнопку;
  • лишний Card;
  • лишний контейнер;
  • лишнюю границу;
  • лишнюю тень;
  • лишний раздел;
  • дублирование информации;
  • декоративный элемент без функции.

Если элемент можно удалить без ухудшения usability — удали его.

Development behavior

  • Не ограничивайся созданием внешнего вида — интерфейс должен реально работать.
  • Сохраняй существующую архитектуру проекта, если нет причины её менять.
  • Не устанавливай лишние зависимости.
  • Не переписывай рабочие части проекта без необходимости.
  • Используй существующие design tokens и CSS variables.
  • Поддерживай consistency между новыми и существующими страницами.
  • После изменений проверяй отсутствие ошибок сборки, TypeScript и lint, если соответствующие инструменты настроены в проекте.

После создания AGENTS.md:

  1. Убедись, что shadcn/ui корректно настроен.
  2. Не переделывай весь существующий интерфейс без моего задания.
  3. С этого момента при любой разработке UI строго соблюдай AGENTS.md.
  4. При конфликте между привычными AI-паттернами дизайна и AGENTS.md приоритет имеет AGENTS.md.
  5. Не копируй содержимое AGENTS.md в пользовательский интерфейс.
  6. Не сообщай пользователю сайта о существовании AGENTS.md.

Выполни настройку проекта и создай AGENTS.md.