Как сделать красивый сайт, а не очередной шаблон с нейросетью
Нейросеть соберёт сайт за пару минут. Беда в том, что он будет похож на тысячи других: фиолетовый градиент, три одинаковые карточки и шрифт Inter, а у свежих моделей — кремовый фон с одним оранжевым словом в заголовке.
Дело не в конкретной модели. Без подсказок любая нейросеть выдаёт среднее по интернету. Ниже — семь приёмов, которые превращают это среднее в дизайн с характером, и инструменты под каждый этап: бесплатные и платные, с кодом и без.
Как выглядит сайт, сделанный ИИ «по умолчанию»
Дизайн-студии уже собирают такие приметы. Самые частые:
- Фиолетово-синий градиент на первом экране и кнопках.
- Шрифт Inter или Roboto везде, без пары для заголовков.
- Заголовок по центру с плашкой-бейджем сверху и двумя кнопками снизу.
- Три одинаковые карточки с иконкой, заголовком и двумя строками текста.
- Плавное появление каждого блока при прокрутке.
- Пустые тексты вроде «Откройте новые возможности» и кнопка «Начать».
- Новый шаблон сильных моделей: кремовый фон, одно слово заголовка цветом, мелкая подпись капсом над ним.
Какую нейросеть выбрать для создания сайта: бесплатные и платные варианты
Удобнее думать не «какая нейросеть лучшая», а «какой инструмент на каком этапе». Хорошая связка — придумать дизайн в одном сервисе и собрать сайт в другом.
Придумать и перебрать дизайн:
- Google Stitch — холст, на котором ИИ рисует несколько вариантов экранов параллельно. Умеет вытащить стиль с любого сайта по ссылке и сделать кликабельный прототип. На октябрь 2026 года — бета Google Labs, бесплатно.
- Figma Make — промпт превращается в рабочий прототип прямо в Figma, результат можно вернуть на холст слоями. В бесплатном тарифе дают до 500 ИИ-кредитов в месяц, полный доступ — в Professional от $16 в месяц при оплате за год.
- Claude Design — макеты по описанию и референсам в подписке Claude от Pro. Отдаёт результат файлом HTML или передаёт в Claude Code на сборку.
Собрать сайт без кода:
- Lovable — пишет и сразу запускает сайт. Бесплатно дают 5 кредитов в день (до 30 в месяц): мелкая правка стоит около 0,5 кредита, лендинг с картинками — около 1,7. Скачать архив с кодом и подключить свой домен — с тарифа Pro за $25.
- v0 — генератор от Vercel с визуальным редактором Design Mode. Бесплатно — 7 сообщений в день, тариф Plus — $30 в месяц.
Собрать и довести в коде: Cursor, Codex, Claude Code, Antigravity, Gemini CLI. Подойдёт любой агент, который видит файлы проекта.
При переходе из Stitch в Lovable, v0 или агент с собой берут две вещи: файл стиля DESIGN.md (о нём ниже) и скриншот или HTML готового экрана.
1. Начать с референсов, а не с промпта
Слова «стильно» и «современно» нейросеть понимает как «как у всех». Скриншот с подписью сужает выбор до конкретного решения.
- Найти 2–3 сайта, которые нравятся по настроению: на Awwwards, Godly или Land-book. Для мобильных экранов — Mobbin.
- Сохранить скриншоты первого экрана и одного интересного блока.
- Подписать у каждого, что именно взять: «огромный заголовок», «работы стоят коллажем», «серый бетонный фон и фото на весь экран».
Без подписей нейросеть повторит всё подряд, включая то, что не понравилось.
2. Записать стиль в DESIGN.md
DESIGN.md — обычный текстовый файл с цветами, шрифтами, отступами и запретами. Он держит стиль одинаковым на всех страницах, но только если нейросеть о нём знает:
- Cursor, Codex, Claude Code: положить файл в папку проекта и дописать в AGENTS.md или CLAUDE.md строку «Перед любой правкой дизайна читай DESIGN.md».
- Lovable: вставить текст в Knowledge проекта.
- v0: добавить в инструкции проекта.
- Обычный чат: приложить файл к сообщению.
Формат придумали в Stitch, а в апреле 2026 года Google открыл его для всех. Готовые файлы есть в каталоге getdesign.md (550+ разобранных сайтов) и в бесплатной коллекции awesome-design-md на GitHub: стили Vercel, Notion, Apple, Airbnb и других.
Для своего сайта хватит короткой версии:
DESIGN.md — 3D-студия «Форма» Настроение: журнальное, смелое, много воздуха. Цвета: фон #1E2A4A (ночной синий), текст #F4EFE6, акцент #F2C14E — только кнопка и номера работ. Шрифты: заголовки Unbounded 800, текст Manrope 500. Сетка: 12 колонок, работы стоят коллажем разного размера. Анимация: одна — заголовок проявляется построчно при загрузке. Запрещено: градиенты, Inter, бейджи над заголовком, одинаковые карточки, эмодзи.
Чужой файл лучше брать как основу: поменять палитру и шрифты уже достаточно, чтобы сайт стал своим.
3. Промпт для сайта: стиль, запреты и одно смелое решение
В рабочем промпте три части: названное направление (журнальный стиль, швейцарский минимализм, брутализм), список запретов и одно решение, на которое тратится вся смелость. Остальное на странице остаётся спокойным.
Сделай одностраничный сайт 3D-студии «Форма» по DESIGN.md и приложенным референсам. Смелое решение одно: заголовок первого экрана в две строки разного размера, вторая крупнее и уходит за правый край. Работы — коллажем разного размера. Не используй градиенты, Inter, бейджи над заголовком, одинаковые карточки и выделение одного слова цветом. Сначала опиши композицию словами и схемой из прямоугольников, потом пиши код.
Просьба сначала описать план экономит время: исправить схему проще, чем переписывать сотни строк кода.
Левый вариант аккуратный, и в нашем тесте модель обошлась без фиолетового градиента. Но шаблон никуда не делся, он просто сменился. Кремовый фон, одно слово оранжевым, подпись капсом над заголовком и «технические» плашки вроде POLYGONS: 1 284 016 — почти всё это навык frontend-design прямо называет приметами ИИ-дизайна.
4. Навык frontend-design: нейросеть думает как арт-директор
У Anthropic есть открытый навык frontend-design — инструкция, которая меняет порядок работы модели:
- Сначала план: 4–6 цветов с названиями, роли шрифтов, схема страницы.
- Проверка плана по брифу: всё шаблонное переделывается до кода.
- Сборка и самокритика по скриншотам по ходу работы.
Самое полезное в нём — список примет ИИ-дизайна, которых модель избегает, если бриф не требует иного. Кроме фиолетовых градиентов, там есть неочевидные: кремовый фон с терракотовым акцентом, почти чёрный фон с одним кислотным или алым цветом, одинаковые скруглённые карточки, выделенное цветом слово в заголовке, подписи капсом над каждым блоком.
Навык ставится в агенты с поддержкой skills: Claude Code, Codex, Cursor и другие. В обычный чат текст SKILL.md можно вставить как инструкцию.
5. Где брать анимации и эффекты для сайта
Писать сложную анимацию с нуля долго, а готовые эффекты достаточно передать нейросети:
- React Bits — 217 анимированных фонов, текстов и компонентов, бесплатно для личных и коммерческих проектов. В меню Copy for AI есть готовый промпт и пункты Open in ChatGPT, Claude и v0.
- 21st.dev — больше 12 000 компонентов, шаблонов и тем от дизайнеров, у каждого кнопка Copy prompt для Cursor, Claude Code, v0 и Lovable. Бесплатно — 2 копирования в день.
- Aceternity UI и Magic UI — эффектные первые экраны, бегущие строки, 3D-карточки.
6. Править по скриншотам вместо «сделай красивее»
Расплывчатая просьба каждый раз даёт новый случайный вариант. Предсказуемо работает такой порядок:
- Сделать скриншот страницы и отдать его нейросети вместе с DESIGN.md.
- Попросить найти пять мест, где страница выглядит шаблонно или нарушает правила файла.
- Исправлять по одному пункту с точной задачей.
- Проверить узкий экран: открыть сайт на телефоне или в браузере нажать F12 и включить значок телефона. Заголовки и сетки чаще всего ломаются именно там.
Увеличь заголовок примерно на четверть. Картинку сдвинь правее, чтобы она не спорила с текстом. Палитру и остальные блоки не трогай. Покажи скриншот после правки.
7. Добавить детали, которые ИИ не придумает
Последний слой делает сайт чьим-то, а не «сайтом вообще»:
- Свои тексты. «Собираем 3D-миры для брендов и игр» вместо «Откройте новые возможности».
- Кнопки говорят, что произойдёт: «Обсудить проект», а не «Начать».
- Настоящие фото и работы вместо стоковых картинок.
- Иконки из одного набора, без эмодзи.
Stitch можно заменить на Figma Make, Lovable — на v0 или Cursor, и маршрут не сломается. Держится он на трёх вещах, которые остаются у автора сайта: референсах, файле стиля и точных правках.
Больше про нейросети в телеграме - ссылка в профиле