Чек-лист
кодовое словоГрадиент
Как убрать шаблонный AI-дизайн сайта
Чек-лист для сборки сайта, который не выглядит как ещё один шаблонный AI-лендинг: сначала вкус и система, потом генерация.
Сервисы из ролика
| Что | Зачем | Ссылка / команда |
|---|---|---|
| Realtime Colors | Собрать палитру и шрифты, сразу увидеть их на реальном макете. | https://www.realtimecolors.com/ |
| TweakCN | Подобрать тему для shadcn/ui и экспортировать CSS-переменные. | https://tweakcn.com/ |
| Haikei | Сделать фоновые SVG/PNG-формы без банального градиента. | https://haikei.app/ |
| Motion Primitives | Добавить готовые анимации и микровзаимодействия. | https://motion-primitives.com/docs |
Порядок работы
- Найди 3-5 референсов конкретного типа сайта, а не просто “красивый SaaS”.
- Выпиши, что именно берёшь: сетку, плотность, навигацию, тип кнопок, карточки, тон иллюстраций.
- Собери цвета и шрифты в Realtime Colors и экспортируй переменные.
- Подбери тему компонентов в TweakCN, чтобы кнопки, карточки и поля не выглядели дефолтно.
- Сгенерируй фон в Haikei только если он помогает композиции, а не просто украшает пустоту.
- Возьми 1-2 анимации из Motion Primitives: меню, появление блоков, текстовый эффект или интерактивную карточку.
- Передай агенту не “сделай красиво”, а готовый дизайн-бриф с запретами.
Промпт для агента7 строк · 483 знака
Собери страницу по этим правилам: 1. Не используй фиолетово-синий градиент, Inter по умолчанию, три одинаковые карточки и generic SaaS hero. 2. Используй палитру и шрифты из CSS-переменных ниже: [ВСТАВЬ ПЕРЕМЕННЫЕ]. 3. Ориентируйся на эти референсы: [ССЫЛКИ / ОПИСАНИЕ]. 4. Компоненты делай в стиле: [TweakCN theme / описание]. 5. Добавь только 1-2 осмысленные анимации: [что именно]. 6. В финале покажи, где в коде заданы дизайн-токены и какие дефолты ты сознательно не использовал.
