Как создать сайт, используя одни нейросети
- -
- 100%
- +
Если не сказать про адаптив — получите сайт, который на телефоне выглядит как уменьшенная копия компьютерного. Текст будет мелким, кнопки — неудобными.
Главная идея пятнадцатой главы
Рисовать макет можно не только в Фигме.
Можно рисовать словами.
И для нейросети текстовый прототип понятнее, чем картинка.
Сверху вниз. Вложенность через отступы.
Технические фразы вместо «красиво».
Цифры для отступов и размеров.
Отдельно — адаптив.
Текстовый прототип занимает 5—10 минут на написание. Он сохраняет вам часы на переделках, потому что нейросеть не гадает, где что должно стоять. Она просто читает инструкцию и выполняет.
Вы не дизайнер? Не проблема. Вы просто описываете расположение блоков словами. Это умеют все, кто умеет объяснять дорогу прохожему.
ПРАКТИКУМ К ГЛАВЕ 15
Задание 1 (7 минут).
Возьмите любой сайт, который вам нравится (откройте в браузере). Напишите его текстовый прототип по правилам из этой главы: блоки сверху вниз, вложенность, отступы, расположение элементов. Сравните ваш прототип с реальным сайтом. Насколько точно вы описали?
Задание 2 (5 минут).
Отправьте нейросети текстовый прототип из примера (кошачья ферма) с промтом: «Сделай полный HTML/CSS/JS код по этому текстовому прототипу. Все картинки — заглушки, цвета и шрифты — на твой вкус, но придерживайся структуры». Получите сайт. Сравните с тем, что вы представили. Насколько структура совпала?
Задание 3 (5 минут).
Возьмите старый промт из первых глав, где вы просили «сделай сайт». Перепишите его в виде текстового прототипа по правилам этой главы. Отправьте оба варианта нейросети (в разные чаты). Сравните результаты. Во втором случае структура будет точнее?
Задание 4 (закрепить).
Распечатайте шпаргалку «Фразы для текстового прототипа»:
— «в ряд» / «в строку» / «вертикально»
— «отступ между элементами X пикселей»
— «внутренние отступы X пикселей со всех сторон»
— «грид из X колонок»
— «на телефоне — одна колонка»
— «элемент A слева, элемент B справа»
— «выравнивание по центру / по левому краю / по правому краю»
— «при нажатии — скролл к блоку Y»
Пользуйтесь этой шпаргалкой при каждом новом прототипе.
Задание 5 (для продвинутых).
Создайте текстовый прототип для сложного макета: например, интернет-магазин с фильтрами (категории слева, товары справа), корзиной (плавающая иконка), модальным окном оформления заказа. Опишите всё словами. Отправьте нейросети. Посмотрите, справилась ли. Если да — вы достигли уровня, когда текстом можно нарисовать почти всё.
ГЛАВА 16.Создаем цветовую схему и шрифты через диалог с ИИ
Цвет и шрифты — это одежда вашего сайта. Можно иметь идеальную структуру, блестящий контент, удобные формы, но если цвета кричат друг на друга, а шрифты выглядят как дешёвая листовка из 90-х — никто не останется.
Проблема в том, что чувство цвета и вкус к шрифтам не приходят по щелчку пальцев. Вы можете быть гениальным предпринимателем, но при этом выбирать ярко-красный текст на зелёном фоне, потому что «так заметнее».
Нейросеть не сделает вас дизайнером. Но она может стать вашим личным консультантом по цвету и типографике. Вы будете вести с ней диалог: «Мне нужно вот такое настроение, вот такая аудитория», — а она будет предлагать проверенные сочетания, объяснять, почему они работают, и предупреждать об ошибках.
Эта глава — про то, как построить этот диалог.
Почему нельзя доверять своему глазу (если вы не дизайнер)
Вы смотрите на цвет и думаете: «Нравится». Или: «Не нравится». Это эмоция, а не анализ.
Профессиональный дизайнер смотрит на цвет и оценивает: контрастность по отношению к фону, доступность для дальтоников, сочетаемость с соседними цветами по цветовому кругу, психологическое воздействие на целевую аудиторию, читаемость текста поверх этого цвета.
Ваш глаз этого не видит. Ваш глаз видит «красивый синий». А нейросеть видит всё остальное.
Кроме того, у каждого человека есть когнитивное искажение «эффект знакомства». Вам нравится то, что вы уже видели раньше. Если вы выросли в квартире с салатовыми стенами, вам может казаться, что салатовый — это нормально для сайта стоматологии. Нейросеть свободна от таких предрассудков.
Поэтому первый шаг к хорошей цветовой схеме — признать: «Я в этом не специалист, я доверяю нейросети, но контролирую её через правильные вопросы».
Трёхшаговый диалог для создания цветовой схемы
Вот схема, по которой вы будете работать всегда. Три шага, 5—7 минут, и у вас есть готовая профессиональная схема.
Шаг 1. Вы даёте контекст.
Рассказываете нейросети о бизнесе, аудитории, желаемом настроении. Грузите всё, что знаете.
Шаг 2. Нейросеть предлагает 2—3 варианта схем.
Каждый вариант: основной цвет, дополнительный цвет, акцентный цвет, цвет фона, цвет текста. С объяснениями, почему это подходит.
Шаг 3. Вы уточняете и выбираете.
Просите изменить яркость, поменять акцент, проверить контрастность, адаптировать для дальтоников. Выбираете финальный вариант.
Никакой магии. Просто структурированный диалог.
Шаг 1. Промт для генерации цветовой схемы
Вот готовый промт. Копируйте и заполняйте квадратные скобки.
*«Ты — колорист и веб-дизайнер с опытом 10 лет. Мне нужна цветовая схема для сайта.*
Вот информация:
— Что за бизнес: [например, питомник британских кошек]
— Аудитория: [например, семьи с детьми 30—45 лет]
— Желаемое настроение: [например, благородное, сдержанное, вызывающее доверие]
— Что НЕ нужно: [например, никакого розового и золота, не детское, не сладкое]
— Есть ли брендовые цвета: [если да — укажите, если нет — напишите «нет»]
Предложи 3 варианта цветовой схемы. Для каждого варианта укажи:
— Основной цвет (где будет фон больших блоков или шапка).
— Дополнительный цвет (для карточек, второстепенных элементов).
— Акцентный цвет (для кнопок, ссылок, важных элементов).
— Цвет фона страницы (обычно светлый или тёмный).
— Цвет основного текста (обычно тёмно-серый или белый).
— Цвет второстепенного текста (для подписей, мелких элементов).
*Для каждого цвета укажи hex-код (например, #1A2A4F) и краткое описание, почему этот цвет подходит моей аудитории и настроению.*
После трёх вариантов порекомендуй один как самый подходящий и объясни почему».
Этот промт заставляет нейросеть не просто выдать цвета, а обосновать выбор. А когда она обосновывает, она проверяет себя на ошибки.
Пример работы промта (кошачья ферма)
Давайте отправим промт с нашими данными и посмотрим, что вернёт нейросеть.
Входные данные:
Бизнес — питомник британских кошек. Аудитория — семьи с детьми 30—45 лет, средний достаток. Настроение — благородное, сдержанное, вызывающее доверие. Не нужно — розового, золота, пафоса, дешёвой милоты. Брендовых цветов нет.
Ответ нейросети (сокращённо):
Вариант 1. Благородная классика
Основной: #1A2A4F (тёмно-синий) — для шапки и футера. Символизирует надёжность, породность.
Дополнительный: #E8ECEF (светло-серый) — для карточек и блоков. Не отвлекает от контента.
Акцентный: #B0B8C1 (серебристый) — для кнопок. Холодный, сдержанный, но заметный.
Фон страницы: #F5F5F5 (почти белый) — чистый, не напрягает глаза.
Текст основной: #222222 (тёмно-серый) — высокая контрастность.
Текст второстепенный: #777777 (средний серый) — для подписей.
Вариант 2. Природная элегантность
Основной: #2D5A27 (тёмно-зелёный) — ассоциация с природой, спокойствие.
Дополнительный: #F4F1E1 (слоновая кость) — тёплый нейтральный.
Акцентный: #C9A96E (песочный, приглушённое золото) — тепло, но без пафоса.
Фон страницы: #FFFFFF (белый).
Текст основной: #333333.
Текст второстепенный: #666666.
Вариант 3. Современный минимализм
Основной: #2C2C2C (почти чёрный) — для шапки и акцентов. Строго, дорого.
Дополнительный: #EAEAEA (светло-серый) — для карточек.
Акцентный: #0077B6 (чистый синий) — технологичный, вызывает доверие.
Фон страницы: #FFFFFF (белый).
Текст основной: #1A1A1A.
Текст второстепенный: #888888.
Рекомендация. Для вашей аудитории (семьи с детьми, средний достаток) и настроения (благородное, сдержанное) лучше всего подходит Вариант 1 — тёмно-синий с серебром. Тёмно-зелёный (вариант 2) хорош, но ассоциируется с ветеринарией и садоводством больше, чем с питомником. Почти чёрный (вариант 3) слишком строг для семейной аудитории. Выбирайте вариант 1.
Вы получили три схемы с кодами и обоснованием. Теперь вы не гадаете, а выбираете из профессионально подобранных вариантов.
Как уточнять и доводить схему до ума
Первый вариант может быть не идеальным. Слишком тёмный фон? Слишком бледный акцент? Не проблема. Вот фразы для уточнения.
Изменить насыщенность или яркость.
«Основной цвет #1A2A4F сделай на 20% светлее. Акцентный #B0B8C1 сделай чуть теплее, добавь немного жёлтого».
Поменять роли цветов.
«Сделай акцентный цвет основным для шапки, а основной — акцентным для кнопок».
Проверить контрастность.
«Проверь контрастность между основным текстом #222222 и фоном #F5F5F5. Соответствует ли стандартам WCAG?»
Адаптировать для дальтоников.
*«У меня аудитория — мужчины 50+. Много дальтоников. Убедись, что схема различима при красно-зелёной слепоте». *
Добавить цвет ошибки и успеха.
«Добавь в схему цвет для ошибок (красный) и цвет для успешных действий (зелёный), но чтобы они вписывались в общую гамму».
Нейросеть скорректирует схему за секунду.
Создаём шрифтовую пару через диалог
Цвета есть. Теперь шрифты. Здесь тот же принцип: вы даёте контекст, нейросеть предлагает, вы уточняете.
Промт для шрифтов:
«Ты — типографист. Мне нужна шрифтовая пара для сайта.
Вот информация:
— Бизнес: [питомник кошек]
— Аудитория: [семьи с детьми 30—45 лет]
— Настроение: [благородное, сдержанное, но не холодное]
— Цветовая схема: [тёмно-синий + серебро + светло-серый]
Предложи 3 варианта шрифтовой пары: шрифт для заголовков и шрифт для основного текста. Для каждого варианта укажи название шрифта из Google Fonts (чтобы я мог подключить), размеры (заголовки H1, H2, текст), жирность, межстрочный интервал.
Объясни, почему эта пара подходит моей аудитории и настроению. Порекомендуй один вариант».
Ответ нейросети (пример):
Вариант 1. Классика с засечками
Заголовки: Playfair Display (жирный, 48px для H1, 32px для H2). С засечками, благородный.
Текст: Open Sans (обычный, 18px, межстрочный 1.5). Без засечек, читаемый.
Почему: сочетание засечек и беззасечных — классика веб-типографики. Playfair даёт благородство, Open Sans — современность.
Вариант 2. Минималистичный
Заголовки: Montserrat (жирный, 44px для H1, 30px для H2). Без засечек, геометричный.
Текст: Roboto (обычный, 18px, межстрочный 1.5). Без засечек, нейтральный.
Почему: строго, современно, без лишних эмоций. Хорошо для технологичных брендов, для питомника может быть холодновато.
Вариант 3. Уютный
Заголовки: Cormorant Garamond (средний, 50px для H1, 34px для H2). С засечками, элегантный.
Текст: Lora (обычный, 18px, межстрочный 1.5). С засечками, мягкий.
Почему: оба шрифта с засечками, что создаёт ощущение книжности, тепла, традиций. Хорошо для семейной аудитории, но менее современно.
Рекомендация. Для вашей аудитории (семьи) и настроения (благородное, но не холодное) выбирайте вариант 1 — Playfair Display + Open Sans. Это золотой стандарт, который нравится почти всем и читается на любых устройствах.
Вы получили готовую шрифтовую пару, которую осталось только подключить.
Как подключить шрифты из Google Fonts (инструкция для нейросети)
Вы можете попросить нейросеть не только выбрать шрифты, но и написать код для их подключения.
Промт:
«Вот шрифтовая пара: заголовки — Playfair Display, текст — Open Sans. Напиши HTML-код для подключения этих шрифтов через Google Fonts и CSS-правила для использования (font-family для заголовков и для текста)».
Нейросеть вернёт:
html
css
body {
font-family: «Open Sans’, sans-serif;
font-size: 18px;
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
font-family: «Playfair Display’, serif;
font-weight: 700;
}
h1 {font-size: 48px;}
h2 {font-size: 32px;}
Вы копируете этот код в свой сайт — и шрифты работают.
Главные ошибки в цвете и шрифтах (которые нейросеть поможет не совершить)
Вот список того, что новички делают не так. Нейросеть вас предупредит, если вы попросите.
Ошибка 1. Слишком много цветов.
Правило: на сайте не больше 3—4 цветов (основной, дополнительный, акцентный, фоновый). Всё остальное — оттенки этих цветов. Нейросеть никогда не предложит радугу.
Ошибка 2. Низкая контрастность.
Серый текст на светло-сером фоне не читается. Нейросеть проверяет контрастность автоматически, если вы попросите.
Ошибка 3. Слишком много шрифтов.
Правило: максимум два шрифта (один для заголовков, один для текста). Третий — только для логотипа или акцентов. Нейросеть предложит пару, а не коллекцию.
Конец ознакомительного фрагмента.
Текст предоставлен ООО «Литрес».
Прочитайте эту книгу целиком, купив полную легальную версию на Литрес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.