ГлавнаяМатериалы из Reels/ShortsЧек-лист
Чек-лист
кодовое словоГрадиент

Как забрать у нейросети дефолтный дизайн

Содержание6 глав
  1. 011. Палитра и шрифты
  2. 022. Тема компонентов
  3. 033. Фон
  4. 044. Анимации
  5. 055. Что отдать модели
  6. 066. Проверка перед публикацией

Модель не выбирает вкус — она выдаёт среднее по обучающей выборке. Единственный способ получить другой результат: принести ей источник до того, как она начнёт угадывать.

Три приметы, по которым сайт узнают за секунду
Фиолетово-синий градиент в шапке · шрифт Inter по умолчанию · три одинаковые карточки в ряд под первым экраном. Если совпало хотя бы два — дальше по шагам.

1. Палитра и шрифты

Realtime Colors — БЕСПЛАТНО Подбираешь цвета и шрифты сразу на живом макете сайта, а не на квадратиках. Есть контраст-чекер и экспорт готовыми переменными. realtimecolors.com · шрифты: fonts.google.com

  • Выбрал 4 цвета: текст, фон, основной, акцент. Основной — не индиго и не фиолетовый.
  • Проверил контраст текста к фону: минимум AA, лучше AAA.
  • Поставил пару шрифтов: один для заголовков, один для текста. Inter и Arial — мимо.
  • Выгрузил результат в CSS-переменные или Tailwind-конфиг и сохранил отдельным файлом.

2. Тема компонентов

tweakcn — ОТКРЫТЫЙ КОД · APACHE-2.0 Визуальный редактор темы для shadcn/ui. Существует ровно потому, что сайты на дефолтной теме выглядят одинаково. Пресеты, правка каждого токена, экспорт в CSS-переменные и Figma. Регистрация не нужна. tweakcn.com/editor/theme · исходники: github.com/jnsahaj/tweakcn

  • Взял пресет как отправную точку, а не дефолт из коробки.
  • Подставил свои цвета из шага 1: primary, secondary, accent, border, ring.
  • Проверил тему в тёмном режиме — не только в светлом.
  • Скопировал блок CSS-переменных к себе в проект.

3. Фон

Haikei — БЕСПЛАТНО · БЕЗ РЕГИСТРАЦИИ Около 15 генераторов SVG-фонов: волны, блобы, размытые градиенты, лоу-поли сетки, россыпь кругов. Экспорт в SVG и PNG, всё считается прямо в браузере. haikei.app · список генераторов: haikei.app/generators

  • Собрал фон в цветах из шага 1, а не в дефолтной палитре генератора.
  • Скачал SVG, а не PNG — он масштабируется и весит меньше.
  • Проверил, что текст поверх фона читается на телефоне.

4. Анимации

Motion Primitives — ОТКРЫТЫЙ КОД · MIT Набор готовых анимированных React-компонентов на Motion и Tailwind: появление текста, реакция на скролл, подсветка за курсором, док в стиле macOS. Копируешь блок кода, а не описываешь анимацию словами. github.com/ibelick/motion-primitives

  • Выбрал 2-3 эффекта максимум. Больше — это уже не дизайн, это ярмарка.
  • Скопировал код компонентов в проект до того, как просить модель что-то верстать.
  • Проверил, что анимации не мешают читать на слабом телефоне.

5. Что отдать модели

Не просьба «сделай красиво», а ограничения. Вставляй блок в начало задачи — и дальше модель собирает по нему, а не по среднему из интернета.

Промт 115 строк · 512 знаков
Работай строго внутри этих ограничений.

ЦВЕТА: используй только переменные из моего файла темы.
Индиго, фиолетовый и сине-фиолетовые градиенты запрещены.

ШРИФТЫ: заголовки - [шрифт 1], текст - [шрифт 2].
Inter, Roboto и Arial не использовать.

ФОН: подключи мой SVG из /assets. Свой градиент не генерируй.

КОМПОНЕНТЫ: бери готовые блоки из моей папки components.
Новые анимации не придумывай.

СТРУКТУРА ПЕРВОГО ЭКРАНА: не три одинаковые карточки в ряд.
Предложи два других варианта раскладки и объясни выбор.

6. Проверка перед публикацией

  • В коде не осталось индиго и фиолетовых градиентов.
  • Шрифт — твой, а не дефолтный.
  • Первый экран не собран из трёх одинаковых карточек.
  • Контраст текста проходит AA на всех блоках.
  • Фон — файл из твоей папки, а не сгенерированный на ходу.
  • Открыл на телефоне и на широком мониторе.
Последний тест
Открой свой первый экран рядом с тремя чужими лендингами и спроси человека, который не в теме, какой из четырёх собрала нейросеть. Если он не угадывает — готово.

Всё в списке бесплатное. Порядок шагов важнее набора инструментов.

Скачать материал