Войти
Все шаблоны
ДИЗАЙН · 28 ШАБЛОНОВ

Дизайнер

Экраны, референсы и анти-slop: направление до картинки, смотри это — не копируй то.

ПЛОХО → ХОРОШО
ПЛОХО

Сделай красивый лендинг

ХОРОШО

Экран: первый экран SaaS для [аудитория]. Направление: editorial, тёмный фон, один акцент [цвет]. Запреты: Inter, фиолетовый градиент, сетка из 4 одинаковых карточек. Сначала 5 буллетов направления, потом структура блоков.

«Красиво» агент заменит средним вкусом из обучения.

Было: Hero с Inter, фиолетовый градиент, три feature-карточки.
Стало: Одно направление, сильная типографика, один якорь, понятный CTA.
ЗАДАЧА

Найдено: 28

ДизайнерUI-экран

Направление экрана до картинки

Зафиксируй визуальное направление экрана [какой экран] до любых картинок и кода.

Продукт: [название]
Аудитория: [кто]
Направление (выбери одно и обоснуй): editorial / product-minimal / bold-marketing
Токены, если есть: [цвета, шрифты]
Запреты: Inter, Roboto, фиолетовый градиент, сетка из 4 одинаковых карточек как hero.

Выдай 5 буллетов: фон, тип, якорь, акцент, плотность. Без мокапов.

Если начать с «нарисуй», получите AI-slop с фиолетовым градиентом.

Frontend Design
Дизайнерлендинг

Первый экран лендинга

Собери структуру первого экрана, не весь сайт.

Оффер: [12 слов]
Для кого: [роль]
Доказательство: [цифра или кейс]
CTA: [текст кнопки + куда]
Направление: [editorial / product-minimal]
Запреты: карусель, 3 feature-карточки в hero, кнопка Learn more.

Выдай: иерархия блоков, тексты, что на якоре (фото/схема), что нельзя двигать.

Hero из карточек «фич» убивает оффер.

Премиум-шаблон

Характер интерфейса в 8 правилах

Собери короткие правила UI для продукта [название].

Референсы (принципы, не копия бренда): [2–3]
Не копировать: [бренды]
Нужно 8 правил: тип, цвет, сетка, кнопки, пустые состояния, иконки, фото, запреты.
Формат: правило → пример экрана → антипример.

«Сделай как у Linear» без запрета копирования даёт чужой бренд.

taste-skill
Дизайнерреференс

Разобрать референс, не скопировать

Разбери референс [URL или описание]. Нужны принципы, не пиксели.

Снимаем: сетку, тип, контраст, ритм, якорь.
Не снимаем: логотип, палитру 1:1, чужие фото.
Выдай таблицу: принцип → как применить в нашем экране [экран] с нашими токенами [токены].

Скриншот без разбора превращается в плагиат.

ДизайнерUI-экран

Пустое состояние экрана

Спроектируй empty state для [экран].

Почему пусто: [ещё нет данных / ошибка / нет прав]
Что человек должен сделать: [одно действие]
Тон: спокойный, без шуток про «здесь пока пусто».
Выдай: заголовок, 1 предложение, CTA, что не показывать (иллюстрация-космонавт, 5 кнопок).

Пустой экран без CTA — тупик. Космонавт не считается UX.

Набор иконок одного веса

Опиши набор из 8 иконок для навигации [пункты].

Стиль: [outline 1.5px / solid]
Сетка: 24px, оптический вес как у Lucide.
Запреты: смешивать filled и outline, 3D, градиент на иконке.
Для каждой: метафора, чего избегать, как подписать в UI.

Разный вес иконок выглядит как сборная солянка, даже если «красиво».

UI-Атлас
ДизайнерUI-экран

Описание макета для Figma / агента

Опиши экран [название] так, чтобы его собрали в Figma или в коде.

Размер: desktop 1280 и mobile 390
Сетка: [колонки]
Токены: [цвета, радиусы]
Блоки сверху вниз с отступами.
Состояния: default / hover / disabled / error — только для [компонент].
Не пиши «сделай современно».

Без сетки и состояний макет разъедется на телефоне.

Проверка читаемости и фокуса

Проверь описание экрана [экран] на доступность. Это аудит своего UI.

Проверь:
- контраст текста (цель 4.5:1)
- фокус клавиатуры на CTA
- подписи полей
- не цвет как единственный сигнал ошибки

Выдай список проблем и точечный фикс. Не предлагай перерисовать весь продукт.

Красивый серый текст на сером фоне «не баг», а потеря половины людей.

Web Design Guidelines
Дизайнермикрокопирайт

Микротексты кнопок и ошибок

Напиши микрокопирайт для экрана [название].

Кнопки: [список действий]
Ошибки: [какие могут быть]
Тон: [спокойный / прямой]
Запреты: «Oops», «Упс», «что-то пошло не так» без причины.
Для каждой кнопки: 1–3 слова. Для ошибки: что случилось + что сделать.

Кнопка «Отправить» и ошибка «ошибка» заставляют человека гадать.

ДизайнерUI-экран

Плотность дашборда

Собери каркас дашборда [для кого] на одном экране 1280.

Задачи человека за 30 секунд: [3]
Виджеты: не больше 6.
Направление: product-minimal.
Запреты: 12 KPI-карточек, градиентные графики, 4 вкладки «на будущее».
Выдай сетку и что можно выкинуть.

Дашборд из 12 карточек не читается. Плотность — это иерархия, не мелкая вёрстка.

Шкала типографики

Собери type scale для сайта [тип].

Шрифты: display [имя], body [имя]. Запрещены Inter/Roboto/Arial.
Экраны: H1 hero, H2 секция, body, caption, кнопка.
Для каждого: размер, вес, межстрочный, где используется.
Проверь, что H1 на мобиле не больше одной идеи в 2 строки.

Пять размеров «на глаз» ломают иерархию на каждом новом экране.

Палитра в токенах, не в настроении

Собери цветовую систему продукта [название].

База: фон, текст, бордер, акцент, опасность, успех.
Состояния акцента: default / hover / disabled.
Контраст текста на фоне — проверь словами (не «примерно нормально»).
Запрет: фиолетовый «AI-градиент», если это не бренд.
Выдай имена токенов как в CSS: --color-…

Палитра «из настроения» не переживает второй экран.

Дизайн-система
ДизайнерUI-экран

Тот же экран на 390px

Пересобери экран [название] для ширины 390.

Что на десктопе: [краткое описание]
Приоритет: [1 действие]
Что прячем / переносим вниз.
Запреты: горизонтальный скролл, тап-зоны меньше 44px, текст 11px.
Выдай порядок блоков и что происходит с таблицей/сайдбаром.

«Просто уменьшим» ломает CTA и таблицы.

ДизайнерUI-экран

Форма, которую допишут

Спроектируй форму [цель формы].

Поля: [список]
Обязательные: [список]
На мобиле одна колонка.
Ошибки под полем, не в тосте.
Не больше одной кнопки submit.
Выдай порядок, подсказки, валидацию в человеческом языке.

Форма из 18 полей на одном экране — это отказ, не лид.

Дизайнерлендинг

Онбординг в 3 шага

Собери онбординг продукта [название] на 3 экрана.

Человек хочет: [результат]
Нельзя спрашивать: [лишние поля]
Каждый шаг: один вопрос, один CTA, прогресс 1/3.
Запрет: тур из 12 тултипов.
Выдай тексты и что сохраняем после шага 3.

Онбординг-экскурсия учит интерфейсу, а не даёт первый результат.

Дизайнерреференс

Аудит AI-slop на макете

Проверь описание макета на штампы генеративного дизайна.

Макет:
[описание или список блоков]

Ищи: фиолетовый градиент, Inter, 3 одинаковые карточки, пластиковые 3D-иконки, «Get started» без оффера.
Для каждого штампа: чем заменить в нашем направлении [направление].

Slop видно сразу. Аудит экономит день «полировки случайности».

Impeccable
Дизайнерлендинг

Таблица тарифов без шума

Собери таблицу тарифов: [названия планов].

Для кого каждый план: [роль]
Рекомендуемый: [какой] — как выделить без неона.
Запреты: 12 галочек мелким серым, «unlimited» если лимит есть.
Выдай 5 строк сравнения + микротекст под CTA.

Тариф «всё включено» мелким шрифтом — это недоверие, не маркетинг.

ДизайнерUI-экран

Навигация из 5 пунктов

Собери главную навигацию сайта [тип].

Цели человека: [3]
Пунктов максимум 5 + CTA.
Что не кладём в шапку (блог, юр. страницы — в футер).
Mobile: бургер с тем же порядком, CTA не прятать.
Выдай подписи и куда ведёт каждый пункт.

Шапка из 12 пунктов — карта сайта, не навигация.

Дизайнерреференс

Бриф на иллюстрацию

Напиши бриф на одну иллюстрацию для [место на экране].

Метафора: [что происходит]
Стиль: [линия / плоский / фото+схема]
Палитра только из токенов: [список]
Запреты: стоковые люди с ноутбуком, космос, робот-помощник.
Формат файла и размер. Что должно читаться в 120px.

Бриф «нарисуй что-нибудь технологичное» даёт робота и фиолетовый шар.

ДизайнерUI-экран

Передача макета в разработку

Собери handoff экрана [название] для разработчика.

Нужно:
- токены (цвет, тип, радиус, тень)
- состояния компонентов
- брейкпоинты
- что анимировать, а что нет
- ссылка на DESIGN.md если есть

Не прикладывай «просто скрин». Без чисел это угадайка.

Скрин без токенов гарантирует расхождение «почти как в макете».

Дизайн-система
Дизайнеранти-slop

Перед генерацией: анти-slop чеклист

Не рисуй и не верстай. Сначала чеклист, можно ли вообще звать модель.

Экран: [какой]
Направление уже выбрано? [да/нет — какое]
Токены: [есть DESIGN.md / нет]
Запреты, которые обязаны попасть в запрос:
- Inter / Roboto / Arial
- фиолетовый «AI-градиент»
- сетка из 3–4 одинаковых feature-карточек как hero
- пластиковые 3D-иконки
- кнопка Get started / Learn more без оффера

Выдай готовый блок «запреты + якорь экрана», который вставить в любой запрос к агенту.

Если запреты не в запросе, модель вернёт средний вкус из обучения.

Frontend Design
Дизайнерреференс

Как собрать референсы агенту

Собери пакет референсов для экрана [название]. Не 30 картинок — 4.

Для каждого:
- URL или файл
- какой принцип снимаем (ритм / тип / якорь / плотность)
- чего не снимать (логотип, палитра 1:1, персонажи)

Итоговый REFERENCES.md: «смотри это» / «не делай то».
Запрет: «вдохновись Pinterest». Без разбора референс = плагиат.

Пачка скринов без принципа учит агента копировать, не проектировать.

taste-skill
Дизайнерреференс

Смотри это — не копируй то

Референс A (можно принципы): [описание/URL]
Референс B (не копировать бренд): [кто]
Наш продукт: [название], токены: [если есть]

Таблица из 6 строк: принцип из A → как у нас → что из B запрещено.
Отдельно: 5 визуальных запретов одной строкой для промпта.
Не предлагай «сделать гибрид логотипов».

«Как у Apple, но наше» без запрета копирования даёт чужой бренд с опечаткой.

Дизайнерреференс

Пак скринов для агента, не мусор из галереи

Нужно передать агенту визуал экрана [название].

Собери список из 3–5 файлов:
- что на кадре (hero / форма / мобила)
- зачем (ритм, не цвет чужого бренда)
- в каком порядке смотреть
Что не класть: чужие лендинги целиком, сток, 4K обои.

В конце: одна фраза в промпт: «принципы с кадров 1–2, палитра только из DESIGN.md».

Двадцать скринов без подписи агент усреднит в slop.

Дизайнеранти-slop

Негативный список визуала

Продукт: [название]
Направление: [editorial / product-minimal / …]

Выдай негативный список на 12 пунктов: что модель чаще всего подсовывает в этой нише.
Рядом: чем заменить (не «не используй градиент», а «один плоский акцент [токен]»).
Это блок для копирования в конец любого дизайн-запроса.

Негатив без замены оставляет дыру, и модель всё равно поставит градиент.

Impeccable
Дизайнеранти-slop

Вкус до пикселей: 7 решений

Зафиксируй 7 решений до Figma и до кода.

Экран: [какой]
1 направление
2 контраст (спокойный / жёсткий)
3 якорь (фото / схема / продукт)
4 плотность
5 один акцент
6 что запрещено
7 критерий «не slop» глазами через 5 секунд

Не предлагай палитру из 12 цветов. Если нет DESIGN.md — скажи, что его надо набросать первым.

Пиксели без 7 решений — лотерея. Семь решений можно поручить агенту.

Дизайн-система
Дизайнерреференс

Разобрать URL референса в правила

URL: [ссылка]
Наш экран: [какой]
Сними только воспроизводимое: сетка колонок, иерархия заголовка, поведение CTA, отступы словами (не px наугад).
Не снимай: шрифт с платной лицензией как «просто поставь», стоковые лица, копирайт блоков.

Выдай: 8 правил + 4 запрета. Формат, который вставляется в Cursor.

Просьба «сделай как этот сайт» без разбора = копия и риск.

Дизайнеранти-slop

Красные флаги AI-макета за 60 секунд

Опиши макет или вставь список блоков:
[описание]

Пройди 8 флагов: шрифт-дефолт, градиент-космос, одинаковые карточки, серый текст на цвете, 3D-иконки, пустой CTA, фейковые отзывы, «AI» в каждом заголовке.
Для каждого сработавшего: точечный фикс, не редизайн всего.
Оценка: можно в прод / только после правок / выкинуть.

Slop видно за минуту. Если не назвать флаги, начнут «чуть подкрутить».

Премиум-шаблон