Полная версия
Как создать сайт, используя одни нейросети
Вы можете этому научиться, но это годы практики. Или вы можете попросить нейросеть сделать это за вас за 2 минуты.
Способ 1. Анализ по описанию (когда нет ссылки или скриншота)
Вы не всегда можете дать нейросети прямую ссылку на сайт (не все нейросети умеют ходить по ссылкам). Но вы можете описать сайт своими словами. Или найти описание в интернете. Или просто вспомнить.
Промт для этого случая:
«Ты — веб-дизайнер-аналитик. Я опишу тебе три сайта из моей ниши [название ниши]. Твоя задача — проанализировать их стиль и выделить общие паттерны. Не копируй, а обобщай.
Сайт 1: [опишите: цветовая гамма, шрифты, композиция, настроение, что запомнилось].
Сайт 2: [опишите].
Сайт 3: [опишите].
После анализа ответь на вопросы:
— Какие цвета повторяются во всех трёх сайтах?
— Какая типографика общая?
— Как организовано пространство (много воздуха, плотно, сетка)?
— Какое общее настроение?
— Что можно взять для моего сайта, а что лучше не повторять?
— Какие элементы устарели или выглядят дешёво?
*
Напиши итоговую рекомендацию: «Для сайта в нише [ниша] оптимален стиль: [цвета], [шрифты], [композиция], [настроение]». Не пиши код, только анализ».
Этот способ работает, даже если вы не помните сайты идеально. Нейросеть достроит недостающие детали на основе статистических знаний о вашей нише.
Способ 2. Анализ по скриншотам (для нейросетей с зрением)
Самый мощный способ. Вы делаете скриншоты трёх сайтов, загружаете их в нейросеть (GPT-4o, Gemini с мультимодальностью) и просите анализа.
Промт:
«Посмотри на эти три скриншота сайтов из ниши [ваша ниша]. Ты — веб-дизайнер-аналитик. Проанализируй их стиль.
Для каждого скриншота опиши: цветовую схему (основной цвет, акцентный, фоновый), типографику (шрифты, размеры, жирность), композицию (сетка, отступы, расположение ключевых элементов), настроение (строгое/игривое/дорогое/минималистичное), что работает хорошо, что работает плохо.
Затем сравни три сайта и выдели общее: какие элементы повторяются, какие цвета доминируют, какой подход к отступам и воздуху.
В конце дай итоговую рекомендацию: «Для сайта в нише [ниша] оптимален следующий стиль — [перечень характеристик]. При создании своего сайта стоит избегать [что не надо копировать]».
Нейросеть «посмотрит» на скриншоты и выдаст разбор, который сделал бы профессиональный дизайнер. Вы получите готовый «рецепт» стиля для вашей ниши.
Способ 3. Анализ по живым ссылкам (если нейросеть умеет в интернет)
Некоторые нейросети (Perplexity, Gemini с включённым поиском, платный ChatGPT с browsing) могут открывать ссылки. Вы даёте три URL, нейросеть переходит по ним, читает сайты и анализирует.
Промт:
«Вот три сайта из моей ниши: [ссылка 1], [ссылка 2], [ссылка 3].
Ты — веб-дизайнер-аналитик. Перейди по каждой ссылке, изучи сайты. Проанализируй их стиль по следующим параметрам: цветовая гамма, типографика, композиция, отступы, использование теней и скруглений, настроение.
Выдели, что общего во всех трёх сайтах. Что повторяется? Что, наоборот, уникально для каждого?
Дай итоговую рекомендацию: «Если делать новый сайт в этой нише, стоит взять за основу [такие-то элементы стиля] и избегать [таких-то ошибок]».
Этот способ самый точный, потому что нейросеть видит сайт вживую, а не по вашему пересказу. Но требует, чтобы ваша нейросеть имела доступ к интернету.
Пример анализа (кошачья ферма)
Давайте посмотрим, как нейросеть может проанализировать три вымышленных сайта питомников. Вы даёте ей описания или скриншоты.
Сайт 1 (дорогой питомник в Москве). Тёмно-синий фон, золотые акценты, много воздуха, крупные фотографии котов на весь экран, шрифт с засечками для заголовков, меню минималистичное. Настроение: премиум, статус, порода как искусство.
Сайт 2 (семейный питомник в пригороде). Белый фон, пастельные тона (мягкий розовый, мятный), круглые скруглённые карточки, шрифт без засечек, много фотографий котят с детьми. Настроение: уют, дом, любовь.
Сайт 3 (питомник-федеральная сеть). Серо-голубой фон, строгие линии, иконки вместо фото, акцент на документах и гарантиях, шрифт рубленый. Настроение: надёжность, профессионализм, никакой сентиментальности.
Анализ нейросети (сокращённо):
Общее для всех трёх: все используют холодные оттенки (синий, серый, голубой) — это цвет доверия и породности. Никто не использует красный или ярко-жёлтый. Все имеют блок с документами и родословной. Все используют крупные фотографии (но стиль фото разный).
Различия: сайт 1 — дорого и статусно, сайт 2 — уютно и семейно, сайт 3 — надёжно и официально.
*Рекомендация для вашего питомника «Мур-Мур» (вы позиционируетесь как ответственные заводчики с душой): возьмите из сайта 1 — качественные крупные фото и тёмно-синий фон, из сайта 2 — скругления и человеческие эмоции, из сайта 3 — блок документов и гарантий. Избегайте золотых акцентов (они выглядят пафосно для вашей ценовой категории) и слишком официального тона (вы не сеть клиник, а семейный питомник). Итоговый стиль: сдержанно-благородный, с тёплыми акцентами (не пастель, а глубокий синий с серебром).*
Вы получили анализ, на который дизайнер потратил бы полдня. Нейросеть сделала за минуту.
Что делать с результатом анализа
Вы получили описание стиля. Теперь вы превращаете его в часть промта для создания сайта.
Берёте итоговую рекомендацию нейросети и добавляете в свой промт (или в ТЗ из главы 12) примерно так:
«На основе анализа трёх лучших сайтов в нише, вот стилевые требования:
* — Основной цвет: тёмно-синий (#1A2A4F) для фона шапки и футера.*
— Акцентный цвет: серебристый (#B0B8C1) для кнопок и рамок.
* — Фон страницы: светло-серый (#E8ECEF).*
— Шрифты: заголовки — Playfair Display (с засечками, благородно), текст — Open Sans.
— Композиция: много воздуха, крупные отступы между блоками (80px).
— Скругления: умеренные (8px для карточек, 4px для кнопок).
— Тени: лёгкие, едва заметные.
— Настроение: сдержанно-благородное, без пафоса и без дешёвой милоты.
— Чего избегать: золотых акцентов, розового, бантиков, анимаций.
*
Придерживайся этого стиля во всём коде».
Нейросеть, которая будет создавать сайт, получит не абстрактное «сделай красиво», а чёткий набор стилевых правил, взятых из лучших образцов в вашей нише.
Чего нельзя делать с референсами
Предупреждение. Оно важное.
Нельзя. Просить нейросеть скопировать чужой сайт. «Сделай как на сайте example.com» — это нарушение авторских прав и просто глупость. Нейросеть может отказать, а если не откажет — вы получите копию, за которую вас засудят.
Нельзя. Спрашивать «сделай точно такой же дизайн, но другой цвет». Это тоже копирование.
Нельзя. Использовать скриншоты конкурентов, чтобы сделать сайт-подделку. Это не этично и не прибыльно в долгую.
Можно и нужно. Анализировать и синтезировать. Взять цветовую гамму одного, композицию второго, типографику третьего, добавить своё — и получить уникальный результат, который не нарушает ничьих прав.
Нейросеть не копирует. Нейросеть обучалась на миллионах сайтов, и её «анализ» — это всегда обобщение, а не копирование. Но вы должны следить, чтобы ваш промт не звучал как «скопируй».
Главная идея четырнадцатой главы
Вы не обязаны быть дизайнером, чтобы понимать дизайн.
Нейросеть посмотрит на чужие сайты и объяснит вам их стиль словами.
Анализируйте три лучших сайта в нише.
Выделяйте общее — это стандарт ниши.
Замечайте уникальное — это идеи для вашего отличия.
Синтезируйте своё из лучших элементов.
Референсы — это не воровство. Это обучение у лучших с благодарностью.
Каждый раз, когда вы начинаете новый проект, вы будете тратить 5 минут на сбор референсов. И каждый раз ваш сайт будет выглядеть так, будто над ним работал дизайнер, изучивший рынок. Потому что так оно и есть — только роль дизайнера исполнила нейросеть.
ПРАКТИКУМ К ГЛАВЕ 14
Задание 1 (10 минут).
Найдите три сайта в любой нише, которые вам нравятся. Не обязательно вашей — просто красивые. Сделайте скриншоты. Загрузите их в GPT-4o (или другую нейросеть со зрением). Отправьте промт «Посмотри на эти три скриншота и проанализируй стиль». Получите разбор. Удивитесь, сколько деталей вы не заметили.
Задание 2 (5 минут).
Если у вас нет доступа к нейросети со зрением, опишите три сайта словами (цвета, шрифты, композицию, настроение) и отправьте промт «Ты — веб-дизайнер-аналитик. Проанализируй эти три описания». Сравните, насколько точен анализ по сравнению с тем, что вы видите глазами.
Задание 3 (7 минут).
Возьмите итоговую рекомендацию из анализа (например, «оптимальный стиль — тёмно-синий, шрифт с засечками, много воздуха»). Вставьте её в промт на создание сайта (из главы 12 или 13). Создайте сайт. Сравните с сайтом, сделанным без референсов. Разница будет огромной.
Задание 4 (закрепить).
Создайте документ «Мои референсы по нишам». Для каждой ниши, в которой вы работаете, сохраняйте итоговые рекомендации после анализа. Например: «Стоматология — белый, голубой акцент, шрифт без засечек, строго, минимально». «Кошачья ферма — тёмно-синий, серебро, шрифт с засечками, благородно». Когда вам понадобится сайт в этой нише через полгода, вы откроете документ и сэкономите час.
Задание 5 (для продвинутых).
Попросите нейросеть не просто проанализировать стиль трёх сайтов, но и определить, к какому типу относится каждый: «минимализм», «необрутализм», «кислотный дизайн», «макродизайн» и так далее. Затем спросите: «Какие тренды в моей нише уходят, а какие приходят?» Нейросеть даст вам форсайт на год вперёд
ГЛАВА 15. Прототипирование текстом: как объяснить расположение блоков без картинок
Представьте, что вы объясняете по телефону, как собрать шкаф из Икеи. Вы не можете показать картинку. Вы не можете начертить схему. У вас только голос и слова.
Если вы скажете: «Ну, там полки, и дверцы, и чтобы красиво было», — шкаф не соберётся. Если вы скажете: «Сначала нижняя панель. На неё, с отступом 10 см слева и справа, ставим вертикальные стенки. Между ними, на высоте 30 см от низа, крепим первую полку», — шкаф соберут даже без картинки.
Прототипирование текстом — это то же самое. Вы не рисуете макет в Фигме. Вы не делаете набросок на салфетке. Вы описываете расположение каждого блока словами — так точно, чтобы нейросеть, которая никогда не видела вашу картинку в голове, воссоздала её в коде с 90% точностью.
В этой главе мы разберём язык текстового прототипирования. Он проще, чем кажется. И он экономит часы, потому что нейросеть перестаёт гадать, где что должно стоять.
Почему текстовый прототип лучше картинки для нейросети
Вы можете подумать: «А почему бы мне просто не нарисовать макет и не загрузить его нейросети?»
Хороший вопрос. И ответ на него неочевидный.
Картинка для нейросети — это загадка. Она видит пиксели, но не всегда понимает логику. Почему этот блок выше того? Почему отступ именно 40 пикселей, а не 50? Почему кнопка именно здесь, а не на два пикселя правее?
Нейросеть может догадаться. А может и нет. Картинка оставляет пространство для интерпретации. А интерпретация, как мы знаем из главы 5, — враг точности.
Текстовый прототип не оставляет пространства. Вы пишете: «Блок А, под ним блок Б, внутри блока Б три карточки, каждая карточка имеет отступы 20 пикселей внутри и 24 пикселя между собой». Нейросеть читает и делает точно.
Кроме того, текстовый прототип вы можете редактировать за секунды. Переставили блоки местами? Поменяли две строчки в тексте. Нарисовали бы макет — перерисовывали бы полчаса.
Текстовый прототип — это самый быстрый и самый точный способ объяснить нейросети, как должно выглядеть расположение блоков.
Базовые принципы текстового прототипирования
Прежде чем мы перейдём к примерам, запомните три принципа. Они работают как законы физики для текстовых прототипов.
Принцип 1. Сверху вниз, без пропусков.
Вы описываете сайт как дорогу: первый блок, под ним второй, под ним третий. Никаких «а потом вернёмся к началу» и «этот блок плавает где-то сбоку». Только вертикальная последовательность.
Принцип 2. Внутри блоков — вложенное описание.
Если внутри блока есть элементы (например, внутри карточки — картинка, заголовок, текст, кнопка), вы описываете их тоже сверху вниз. Используйте отступы или маркеры, чтобы показать вложенность.
Принцип 3. Координаты не нужны, нужны отношения.
Вы не пишете «левый верхний угол карточки находится на 150 пикселей от края». Вы пишете «карточки расположены в грид из трёх колонок, с отступом 24 пикселя друг от друга». Нейросеть сама переведёт отношения в пиксели.
Синтаксис текстового прототипа (три способа)
У вас есть три способа описывать расположение блоков. Выберите тот, который вам удобнее, или комбинируйте.
Способ 1. Простой список (для маленьких сайтов).
Просто перечисляете блоки один за другим, как список покупок.
Пример:
— Шапка (логотип, меню, телефон)
— Геройский блок (заголовок, подзаголовок, кнопка)
— Карточки товаров (три штуки в ряд)
— Форма обратной связи (имя, телефон, кнопка)
— Футер (копирайт, соцсети)
Этот способ хорош для начала. Но он не показывает вложенность и не объясняет, как элементы расположены внутри блоков.
Способ 2. Маркированный список с вложенностью (универсальный).
Используете звёздочки или дефисы, а для вложенных элементов делаете отступ в два пробела.
Пример:
— Шапка
— Логотип: текст «Кошачья ферма» слева
— Меню: ссылки «О нас», «Котята», «Отзывы», «Контакты» справа
— Телефон: +7 (999) 123-45-67, при нажатии открывается набор номера
— Геройский блок
— Заголовок: «Британские котята с родословной»
— Подзаголовок: «Любовь с первого дня»
— Кнопка: «Выбрать котёнка», зелёная, ведёт к блоку котят
— Блок «Котята»
— Три карточки в грид, отступ 24px между ними
— Каждая карточка содержит:
— Фото-заглушку 300x200px
— Имя котёнка
— Цену
— Кнопку «Забронировать»
Этот способ читается нейросетью на ура. Он показывает иерархию и порядок.
Способ 3. Блочное описание (для сложных макетов).
Вы рисуете текстом «прямоугольники» с помощью символов. Это сложнее, но иногда нагляднее.
Пример:
┌─────────────────────────────────────────────┐
│ ШАПКА │
│ [Логотип] [Меню] [Телефон] │
└─────────────────────────────────────────────┘
┌─────────────────────────────────────────────┐
│ ГЕРОЙСКИЙ БЛОК │
│ «Британские котята с родословной» │
│ [Кнопка «Выбрать котёнка»] │
└─────────────────────────────────────────────┘
┌──────────┐ ┌──────────┐ ┌──────────┐
│ Котёнок 1│ │ Котёнок 2│ │ Котёнок 3│
│ [Фото] │ │ [Фото] │ │ [Фото] │
│ Мурзик │ │ Барсик │ │ Снежок │
│ 30 000 руб │ │ 25 000 руб │ │ 35 000 руб │
│ [Кнопка] │ │ [Кнопка] │ │ [Кнопка] │
└──────────┘ └──────────┘ └──────────┘
Этот способ самый наглядный для человека, но нейросеть иногда путается в псевдографике. Используйте его только если вы уверены, что ваша нейросеть с ним справляется.
Рекомендация: Начинайте со способа 2 (маркированный список с вложенностью). Он даёт 95% точности и прост для восприятия.
Как описать сетку и расположение элементов внутри блока
Самое сложное в текстовом прототипе — объяснить, как элементы расположены относительно друг друга внутри блока. Вот словарь фраз, которые понимает нейросеть.
Для горизонтального расположения:
— «элементы в ряд» — все в одной строке
— «элементы в строку, прижаты к левому краю»
— «элементы в строку, прижаты к правому краю»
— «элементы в строку, распределены равномерно по ширине»
— «элементы в строку с отступом 20 пикселей между ними»
Для вертикального расположения внутри блока:
— «внутри блока элементы идут вертикально друг за другом»
— «заголовок сверху, под ним текст, под ним кнопка»
— «между элементами отступ 16 пикселей»
Для сеток (грид):
— «три колонки одинаковой ширины, отступ 24 пикселя»
— «две колонки: левая 30% ширины, правая 70%»
— «на компьютере — 4 колонки, на телефоне — 1 колонка»
Для выравнивания:
— «текст по центру блока»
— «картинка слева, текст справа от неё»
— «кнопка выровнена по правому краю родителя»
Для отступов:
— «внутренние отступы внутри карточки: 20 пикселей со всех сторон»
— «внешний отступ снизу заголовка: 30 пикселей»
— «отступ между карточками: 24 пикселя»
Чем больше таких «технических» фраз, тем точнее нейросеть поймёт, как располагать элементы.
Полный пример текстового прототипа (кошачья ферма)
Давайте соберём всё вместе. Вот как выглядит текстовый прототип для сайта кошачьей фермы, который нейросеть поймёт с первого раза.
ТЕКСТОВЫЙ ПРОТОТИП САЙТА «МУР-МУР»
Общее: одностраничный сайт, блоки идут сверху вниз. Ширина контента ограничена контейнером 1200px по центру.
1. Шапка (прилипает к верху при скролле)
— Логотип: текст «Мур-Мур» слева, размер шрифта 24px, жирный.
— Меню: ссылки «О нас», «Котята», «Отзывы», «Контакты» — расположены справа от логотипа, в строку, отступ между ссылками 30px.
— Телефон: +7 (999) 123-45-67, ещё правее меню, цвет акцентный.
2. Геройский блок
— Заголовок: «Британские короткошёрстные из питомника „Мур-Мур“». Размер 48px. По центру.
— Подзаголовок: «Родословная, документы, любовь с первого дня». Размер 20px. Под заголовком, отступ 20px.
— Кнопка: «Выбрать котёнка». Под подзаголовком, отступ 40px. Цвет — серебристый. При нажатии — плавный скролл к блоку «Котята».
3. Блок «О питомнике»
— Заголовок «О нас» по центру.
— Две колонки: левая 40% — текст, правая 60% — фото-заглушка.
— Текст: три абзаца про опыт, про отличие от перекупов, про условия содержания.
4. Блок «Наши родители»
— Заголовок «Наши родители — чемпионы».
— Две карточки в ряд (кот и кошка), отступ между карточками 40px.
— Каждая карточка содержит:
— Фото-заглушку 300x300px, скругление 12px.
— Имя (например, «Арчибальд»), размер 24px.
— Титулы (например, «Чемпион России 2024»).
— Описание характера (одно предложение).
5. Блок «Котята»
— Заголовок «Наши котята».
— Грид из трёх колонок на компьютере, отступ между карточками 30px. На телефоне — одна колонка.
— Каждая карточка котёнка содержит:
— Фото-заглушку 300x200px, скругление 8px.
— Имя котёнка (Мурзик, Барсик, Снежок).
— Пол (мальчик/девочка).
— Цену (от 25 000 до 60 000 руб).
— Кнопку «Забронировать» — при нажатии плавный скролл к форме бронирования.
6. Блок «Отзывы»
— Заголовок «Что говорят наши семьи».
— Три отзыва в ряд, отступ 30px.
— Каждый отзыв:
— Фото-заглушка 80x80px, круглая.
— Текст отзыва (Lorem ipsum, 2—3 предложения).
— Имя семьи.
— Пять звёздочек (золотые).
7. Форма бронирования
— Заголовок «Забронируйте котёнка».
— Поля:
— Имя (текстовое поле, обязательно).
— Телефон (текстовое поле, обязательно, маска ввода).
— Выбрать котёнка (выпадающий список с именами из блока «Котята»).
— Кнопка «Отправить заявку». При успехе — всплывающее сообщение.
8. Карта и контакты
— Заглушка Яндекс. Карты.
— Адрес текстом: «Деревня Гаврилово, Ярославская область».
— Режим работы: «Ежедневно, 10:00—20:00».
9. Футер
— Телефон повторно.
— Ссылки на соцсеть и месенджер (иконками, ведут на #).
— Копирайт: «© 2025 Питомник «Мур-Мур»».
— Ссылка «Политика конфиденциальности» (модальное окно с текстом-заглушкой).
Этот текстовый прототип нейросеть превратит в код с точностью 90—95%. Вам останется только 2—3 итерации на доводку отступов и цветов.
Типичные ошибки текстового прототипирования
Даже зная все принципы, можно ошибиться. Вот частые ошибки новичков.
Ошибка 1. Описывать визуал, а не расположение.
Плохо: «Красивая шапка с элегантным меню». Хорошо: «В шапке слева логотип, справа меню из четырёх пунктов в строку».
Нейросеть не знает, что такое «красивая шапка». Она знает, что такое «логотип слева, меню справа».
Ошибка 2. Забывать про отступы и размеры.
Плохо: «Карточки в ряд». Хорошо: «Три карточки в ряд, отступ между ними 24 пикселя, внутренние отступы внутри карточек 20 пикселей».
Без отступов нейросеть сделает карточки вплотную. Вам не понравится.
Ошибка 3. Перескакивать между блоками.
Плохо: «В шапке телефон, потом в футере телефон, а ещё в геройском блоке кнопка, но она ведёт к форме, которая после отзывов».
Нейросеть запутается. Описывайте последовательно: от первого блока к последнему, без прыжков.
Ошибка 4. Использовать отрицания вместо позитивных инструкций.
Плохо: «Не делай меню слишком большим». Хорошо: «Сделай меню из четырёх пунктов, размер шрифта 18 пикселей».
Нейросеть плохо понимает, что значит «не слишком». Она отлично понимает цифры.
Ошибка 5. Забывать про адаптив.
Плохо: описали только компьютерную версию. Хорошо: добавили в конце «На телефоне: грид из трёх колонок превращается в одну колонку, шапка становится бургер-меню».
