Сайт нейросетью: как сделать дизайн в Claude Code и Codex, чтобы никто не понял, что это ИИ

Лендинг, собранный нейронкой, сейчас видно за километр. Фиолетовый градиент на белом фоне, три одинаковые карточки с иконками, огромная цифра на первом экране, и каждая секция при прокрутке плавно выплывает снизу. Вы открываете такой сайт и через секунду догадываетесь: его сделали за пять минут по запросу «сделай красивый сайт». Клиент догадывается так же быстро. А сайт, который выглядит дешёвым, и продаёт дёшево.

Но Claude Code и Codex умеют делать и сайты, за которые не стыдно брать с клиентов хорошие деньги. Им просто нужно дать вкус дизайнера и образцы. Я покажу весь путь по шагам: какой скилл поставить агенту, где взять сайты-образцы, как собрать из них дизайн-паспорт и как потом пересобрать свой сайт блок за блоком по лучшим шапкам, подвалам и кнопкам из настоящих сайтов. Код пишет агент, вы только выбираете, что нравится, и говорите, что поправить.

Раздел 01Почему нейросеть делает одинаковые сайты

Представьте, что вы попросили незнакомого дизайнера «сделать красиво» и больше ничего не сказали. Ни ниши, ни примеров, ни цветов. Он сделает самый безопасный вариант из того, что попадалось ему чаще всего. С нейросетью происходит ровно это. Claude Code и Codex учились на миллионах сайтов, и на запрос без деталей агент собирает усреднённый вариант из всего, что видел. Внутренняя библиотека у агента одна на всех пользователей, поэтому и результат у всех выходит похожим.

Отсюда и узнаваемый «нейросетевой» вид. Причём он меняется. В ранней версии официального скилла для дизайна, о котором ниже, Anthropic запрещала агенту шрифты Inter, Roboto и Arial и фиолетовые градиенты на белом фоне: это и были главные приметы ИИ-сайта. Нейронки от них отучили, и тут же появились новые шаблоны. В версии скилла от сентября 2026 года Anthropic перечисляет уже пять примет, по которым сайт выдаёт нейросеть:

• кремовый фон, заголовок шрифтом с засечками и терракотовый акцент (по иронии, это фирменные цвета самого Claude);
• почти чёрный фон с одним кислотно-зелёным или ярко-красным акцентом;
• «газетная» вёрстка с тонкими линиями и совсем без скруглений;
• набор одинаковых скруглённых карточек с одинаковой тенью и градиентными заливками для красоты;
• шаблонная обвязка: мелкая надпись заглавными буквами над каждым заголовком, перечисления через точку, стрелочка «→» на каждой кнопке.

Там же запрещены выделение одного слова в заголовке цветом или курсивом, нумерация «01, 02, 03» там, где никакой последовательности нет, и анимация, при которой каждая секция выплывает снизу, а каждая карточка подпрыгивает под мышкой. В скилле так и написано: всё это читается как сгенерированное ИИ.

Посмотрите на этот список и вспомните последние пять лендингов, которые вам попадались. Узнали? Вот почему фраза «сделай красивый сайт» больше не работает. Агенту нужны вкус, образцы и правила, и дальше я по шагам покажу, как их дать.

Раздел 02Что понадобится

1. Claude Code или Codex на компьютере. Нужна программа для компьютера, в браузере эти агенты с папками на компьютере не работают. Claude Code – это вкладка Code в приложении Claude, нужна подписка Claude Pro или выше. Как скачать приложение и начать, я разобрал в статье Claude Code для непрограммиста. Codex – режим в приложении ChatGPT для компьютера, нужна подписка ChatGPT Plus или выше: на бесплатном тарифе Codex не рисует картинки, и без них не заработает один из главных инструментов. Про установку Codex – в статье Codex.
2. Готовый черновик сайта. Все шаги ниже переделывают дизайн сайта, который уже есть. Если сайта пока нет, сначала соберите первую версию по статье Сайт с Claude Code за вечер: там разобраны бриф, правки и публикация. Черновик можно собрать за вечер, а потом вернуться сюда.
3. Папка с сайтом на компьютере, например «Мой сайт» на рабочем столе. Если вы собирали сайт по статье выше, она у вас уже есть. В ней агент хранит все файлы сайта, туда же положит дизайн-паспорт.
4. VPN, если вы в России. Claude и ChatGPT из России без VPN не откроются. Конкретный сервис назвать не могу: в России запрещено рекламировать VPN.
5. Час-два времени на первый проход. Дальше каждая правка занимает минуты.

Все шаги одинаково работают в Claude Code и в Codex. Где есть разница, пишу отдельно для каждого.

В каждом шаге вам понадобится чат, открытый в папке сайта. Открывается он так.

• В Claude Code: откройте приложение Claude и нажмите вкладку Code. Слева нажмите «+ Создать» (New), под полем ввода нажмите кнопку с папкой, выберите «Открыть папку…» и укажите папку «Мой сайт».
• В Codex: откройте приложение ChatGPT и переключитесь в режим Codex. Над полем ввода нажмите на плашку проекта, выберите «Добавить проект» и укажите папку «Мой сайт».

И ещё одна деталь про промты в этой статье. Под каждым есть кнопка «Скопировать». Текст в квадратных скобках – подсказка: после вставки сотрите его вместе со скобками и напишите своё.

Шаг 01Поставьте агенту скилл frontend-design

Скилл – это файл с инструкцией, который агент читает перед задачей. Если хотите разобраться подробно, у меня есть статьи Скиллы Claude и Скиллы Codex. Сейчас достаточно знать одно: скилл ставится один раз и дальше включается сам.

У Anthropic есть официальный бесплатный скилл frontend-design. Он лежит в открытом доступе на GitHub, и его понимают оба агента: Claude Code и Codex читают скиллы одного и того же формата.

Агенту в этом скилле задают роль: ты руководитель дизайна в студии, которая каждому клиенту делает свой узнаваемый стиль. И сразу добавляют, что этот клиент уже забраковал все варианты, которые выглядели банально или шаблонно. Дальше агента ведут по шагам, которые обычно проходит живой дизайнер:

• сначала составить план: палитру из 4–6 цветов с точными кодами, шрифты, сетку страницы и схемы расположения блоков;
• подобрать шрифты осознанно, под задачу, и взять не больше двух на сайт;
• сверить план с задачей клиента, переделать всё, что выглядит шаблонно, и только после этого писать код;
• анимацию давать скупо: один продуманный момент на страницу;
• смелое решение делать в одном месте, остальное держать спокойным;
• проверить сайт на телефоне, проверить, удобно ли им пользоваться с клавиатуры, и посмотреть на результат по скриншотам.

Там даже есть совет Коко Шанель: перед выходом из дома посмотрите в зеркало и снимите один аксессуар. Агента просят сделать то же самое с каждым экраном.

Ставится скилл одним сообщением. Откройте чат в папке сайта и отправьте промт для своего агента.

Установи себе скилл frontend-design от Anthropic: https://github.com/anthropics/skills/tree/main/skills/frontend-design
Поставь его в мои личные скиллы, чтобы он работал во всех проектах. Когда закончишь, напиши, что скилл установлен и в каких случаях ты будешь его использовать.

Установи себе скилл frontend-design от Anthropic: https://github.com/anthropics/skills/tree/main/skills/frontend-design
Поставь его в мои личные скиллы Codex, чтобы он работал во всех проектах. Когда закончишь, напиши, что скилл установлен и в каких случаях ты будешь его использовать.

Агент сам скачает файл и положит его куда нужно: у Claude Code и у Codex для скиллов свои папки, и каждый знает свою. Вам нужно только нажать «Разрешить», если агент спросит разрешение.

После установки откройте новый чат в той же папке сайта: список скиллов агент читает в начале разговора. В новом чате отправьте проверочную фразу.

Какие скиллы у тебя установлены? Есть ли среди них frontend-design?

Дальше скилл включается сам, как только вы просите сделать или переделать дизайн. Для подстраховки можно писать в начале задания: «Используй скилл frontend-design».

Шаг 02В Codex добавьте плагин Build Web Apps

Этот шаг только для Codex, в Claude Code его просто пропустите.

У OpenAI есть официальный бесплатный плагин для Codex, он называется Build Web Apps. Плагин – это набор из нескольких скиллов и инструментов, которые ставятся одной кнопкой. Для дизайна в нём главное – порядок работы, которого Codex придерживается с этим плагином:

1. Сначала Codex рисует макет сайта картинкой. Для лендинга по умолчанию рисует отдельную картинку на каждую секцию.
2. Вы смотрите макет и соглашаетесь или просите поправить.
3. После согласия макет становится заданием, от которого нельзя отступать: Codex верстает строго по нему, без «творческих вольностей».
4. Codex открывает готовую страницу во встроенном браузере, делает скриншот, сравнивает его с макетом и правит, пока совпадение не станет полным.

Такой порядок экономит кучу времени. Картинку вы оцениваете за секунду, ещё до вёрстки. Переделать картинку быстрее, чем переверстать страницу, и спорить о вкусе на макете проще, чем на готовом сайте.

Чтобы поставить плагин, откройте приложение ChatGPT и переключитесь в режим Codex. Откройте раздел плагинов (Plugins), найдите в списке Build Web Apps и нажмите «+». После установки начните новый чат: плагин подключается к новым разговорам.

Чтобы плагин работал полностью, нужна подписка ChatGPT Plus или выше: на бесплатном тарифе Codex не рисует картинки, а значит, и макета не будет.

Скилл frontend-design из первого шага в Codex тоже оставьте. Скилл и плагин друг другу не мешают: первый отвечает за вкус и следит, чтобы не было шаблонов, второй задаёт порядок «макет, вёрстка, сверка».

В Claude Code плагина Build Web Apps нет, но сверку со скриншотами можно сделать и там. Во вкладке Code есть встроенный браузер: Claude сам открывает в нём сайт, делает скриншоты и правит то, что видит. Готовая фраза для этого будет в шаге 7.

Шаг 03Найдите 3–5 сайтов, которые вам нравятся

Со скиллом агент знает, как работает хороший дизайнер. Теперь ему нужно понять, что нравится лично вам. Описание здесь плохо помогает: «стильно, но не слишком строго, тепло, но не слащаво» каждый поймёт по-своему. Пример с экрана снимает все вопросы сразу. Поэтому дальше вы ищете 3–5 сайтов, которые вам нравятся.

Красивые лендинги собраны в трёх галереях, смотреть все три можно бесплатно:

• recent.design – свежие сайты, разложенные по нишам. Там же есть раздел со скиллами для дизайна.
• land-book.com – больше 20 000 сайтов с фильтрами по отраслям и стилю. Подписка за 9 долларов в месяц открывает скачивание и выгрузку в Figma, для этой статьи она лишняя.
• lapa.ninja – больше 7 000 лендингов, удобно искать по категориям. Подписка здесь убирает рекламу.

За вечер в таких галереях можно пролистать тысячу сайтов и ничего не выбрать. Чтобы этого не случилось, держитесь трёх правил.

Начинайте со своей ниши и потом смело выходите за неё. Если вы психолог, посмотрите сайты психологов, а потом загляните к косметике, кофейням и отелям: там часто находится нужное настроение. Фильтры в галереях английские, слова для поиска я собрал в таблицу ниже.

Решение принимайте по первому экрану. Посетитель решает, остаться ли на сайте, за первые секунды. Если первый экран вас зацепил, добавляйте сайт в подборку, даже если ниже по странице вам что-то не нравится.

И сохраняйте каждый понравившийся сайт дважды: ссылкой и картинкой экрана. Часть галерей и сайтов закрыта от роботов, и агент может не открыть ссылку. Картинку он увидит в любом случае. Хватит снимка первого экрана. На Mac нажмите Cmd+Shift+4 и обведите нужную область мышкой, на Windows нажмите Win+Shift+S и сделайте то же самое. Снимок сохранится на рабочий стол или в буфер обмена.

Пять сайтов – это потолок. Если дать больше, агент начнёт смешивать слишком разные стили, и вы получите тот же усреднённый сайт, от которого уходили. Хорошая подборка – три сайта, похожих по настроению, и один-два с отдельной удачной деталью.

Шаг 04Соберите дизайн-паспорт

Этот шаг важнее всех остальных. Если просто скинуть агенту образцы со словами «сделай так же», он посмотрит, что-то возьмёт, а через три правки забудет. Поэтому стиль нужно записать точными цифрами в отдельный документ. Я называю его дизайн-паспортом.

Всё отправляется одним сообщением. Перетащите снимки экранов в поле ввода чата, вставьте под ними промт, впишите ссылки на сайты вместо квадратных скобок и отправьте.

Вот сайты, которые мне нравятся: [ссылки на сайты, снимки экранов я приложил].
Разбери у каждого:
– какие шрифты в заголовках и в тексте, какие размеры;
– какие цвета: фон, текст, акценты, кнопки (точные коды);
– какие отступы между блоками и внутри них;
– как устроен первый экран: что слева, что справа, что крупно;
– какие кнопки: форма, размер, скругление, что происходит при наведении.
Потом собери для моего сайта единый дизайн-паспорт с точными оттенками и размерами. Возьми лучшее из этих сайтов и подстрой под мою нишу: [чем вы занимаетесь и для кого сайт].
Сохрани паспорт файлом «дизайн-паспорт.md» в папке сайта и используй его во всех правках.

Файл с окончанием .md – обычный текстовый документ, создавать его не нужно: агент сделает всё сам. В ответ он пришлёт разбор каждого сайта и паспорт примерно такого вида:

• Цвета: фон тёплый светло-серый, основной текст почти чёрный, один акцент для кнопок и ссылок, один дополнительный для плашек. У каждого цвета точный код.
• Шрифты: один для заголовков, другой для текста, размеры заголовков всех уровней и основного текста отдельно для компьютера и телефона.
• Отступы: расстояние между блоками, внутри карточек, ширина колонки текста.
• Первый экран: что и где стоит, какого размера заголовок, где фото, где кнопка.
• Кнопки и элементы: скругление, высота, что меняется при наведении.
• Чего избегать: пункты, которые не подходят вашему стилю.

Прочитайте паспорт глазами. Если какой-то цвет или шрифт не нравится, скажите об этом сейчас: поправить строчку в паспорте проще, чем потом переделывать весь сайт.

Уже на этом шаге сайт начинает походить на те, что вам понравились. Попросите агента применить паспорт к текущей версии и посмотрите разницу.

Примени дизайн-паспорт ко всему сайту. Тексты и порядок блоков оставь как есть, поменяй оформление. Когда закончишь, открой сайт и пришли мне скриншоты первого экрана на компьютере и на телефоне.

Остался последний штрих, и он сильно экономит нервы. Агент держит паспорт в памяти, пока идёт разговор. В новом чате или после долгой работы он может о нём забыть и начать «творить». Чтобы этого не было, попросите его записать правило в файл, который он читает в начале каждого разговора. У Claude Code это файл CLAUDE.md, у Codex – AGENTS.md. Создавать их вручную не нужно, агент сделает это сам.

Запиши в CLAUDE.md в папке сайта правило: перед любой правкой дизайна открывай «дизайн-паспорт.md» и следуй ему. Новые цвета, шрифты и отступы не придумывай, бери из паспорта. Если для задачи в паспорте чего-то не хватает, сначала спроси меня.

Запиши в AGENTS.md в папке сайта правило: перед любой правкой дизайна открывай «дизайн-паспорт.md» и следуй ему. Новые цвета, шрифты и отступы не придумывай, бери из паспорта. Если для задачи в паспорте чего-то не хватает, сначала спроси меня.

Теперь паспорт работает во всех будущих чатах, открытых в этой папке.

Шаг 05Соберите сайт блок за блоком по лучшим образцам

Паспорт задаёт общий стиль, и для многих сайтов этого уже хватит. Если хотите выжать максимум, подберите образец для каждого блока отдельно. Сайт, который вам понравился целиком, почти всегда хорош не везде: у одного отличная шапка и скучный подвал, у другого красивые тарифы и неудачный первый экран. Если брать лучшее для каждого блока, ваш сайт получится сильнее любого из образцов.

Для этого есть галереи, где с настоящих сайтов по отдельности собраны шапки, подвалы, кнопки и целые секции. Смотреть все можно бесплатно:

• navbar.gallery – шапки и меню. Разложены по видам: простые, с выпадающим списком, с большим меню на весь экран, с боковой панелью.
• footer.design – подвалы сайтов, с фильтрами по стилю. Подвал обычно делают в последнюю очередь, и по нему сразу видно, старались над сайтом или делали на скорую руку.
• cta.gallery – блоки с кнопкой и призывом: кнопки, формы заявки, тарифы. Можно отфильтровать светлую или тёмную тему.
• bentogrids.com – бенто-сетки, когда содержимое разложено плитками разного размера, как еда в японском ланч-боксе. Отличный формат для блоков «что внутри курса» или «мои услуги». У каждого примера есть ссылка на настоящий сайт.
• 404s.design – страницы ошибки, которые человек видит, если перешёл по неверной ссылке. Даже их можно сделать красиво, и посетитель, который попал не туда, улыбнётся и останется.
• unsection.com – целые секции: первый экран, тарифы, отзывы, вопросы и ответы. На каждой секции есть кнопка «Build this». Она копирует готовое задание, которое вы вставляете своему агенту, Claude Code или Codex, и агент пересобирает эту секцию у вас на сайте. Так можно бесплатно собрать до 5 секций в неделю, нужна регистрация. Платный тариф Pro за 9 долларов в месяц снимает ограничения, но для одного сайта обычно хватает и бесплатного: любую секцию можно передать агенту снимком экрана.

Работает всё одинаково. Нашли шапку, которая зацепила, – сделайте снимок экрана, перетащите его в чат и вставьте под ним промт.

Вот шапка, которая мне нравится, снимок экрана приложил.
Сделай мне такую же по стилю: расположение, ощущение, поведение при прокрутке. Цвета, шрифты и отступы возьми из дизайн-паспорта. Пункты меню оставь мои.
Когда закончишь, пришли скриншоты шапки на компьютере и на телефоне.

Для других блоков меняйте в промте слово «шапка» на нужный блок, а строчку про пункты меню – на то, что нужно сохранить: ваши тексты, фото, цены.

Обратите внимание на последнюю строчку про телефон. Шапка на телефоне устроена по-своему: меню прячется за кнопку, и именно тут агент чаще всего ошибается. Просите показать мобильную версию после каждого блока, так ошибки не накопятся к концу работы.

Так и собирайте весь сайт, блок за блоком. Удобный порядок:

1. Шапка.
2. Первый экран.
3. Блок «для кого» или «с чем помогаю».
4. Услуги или программа, они часто удачно ложатся в бенто-сетку.
5. Кейсы и отзывы.
6. Тарифы.
7. Вопросы и ответы.
8. Финальный блок с кнопкой.
9. Подвал.
10. Страница ошибки 404.

После каждого блока смотрите на сайт целиком: блоки должны сочетаться друг с другом, и каждый по отдельности здесь мало что решает. Если что-то выбивается, скажите: «Этот блок выбивается из остальных, приведи его к стилю паспорта».

Шаг 06Добавьте эффектные элементы с uiverse.io

Когда сайт собран, его можно оживить. Эффектные кнопки, переключатели, карточки с анимацией, красивые поля ввода, индикаторы загрузки – всё это есть на uiverse.io. Там больше 7 000 элементов, их делают участники сообщества, и у каждого есть готовый код. Пользоваться ими можно бесплатно, в том числе на сайтах, которые приносят деньги.

Порядок такой:

1. Откройте uiverse.io и выберите раздел: кнопки (Buttons), переключатели (Toggle switches), карточки (Cards) и так далее.
2. Наведите мышку на понравившийся элемент: он покажет анимацию.
3. Нажмите на элемент, откроется его код. Если код предлагают в нескольких видах, выберите HTML/CSS: он подходит для любого сайта. Скопируйте код кнопкой копирования.
4. Вставьте промт ниже в чат агенту, а код – на место квадратных скобок.

Вот код кнопки с uiverse.io: [вставьте код].
Сделай по этому образцу все главные кнопки на сайте. Анимацию оставь, цвета и шрифт возьми из дизайн-паспорта. Проверь, что кнопка хорошо выглядит на телефоне и что текст на ней читается.

Здесь легко перестараться. Помните совет из скилла: одна смелая деталь на экран. Если анимированные кнопки, прыгающие карточки и светящиеся переключатели стоят везде, сайт снова начинает выглядеть сгенерированным, только уже по-новому. Возьмите один-два элемента и поставьте их туда, где человек должен нажать: на главную кнопку и в форму заявки.

Шаг 07Проверьте сайт глазами клиента

Сайт собран. Последний шаг – проверка, и её тоже делает агент. Попросите его открыть сайт и оценить его глазами придирчивого дизайнера.

Открой мой сайт во встроенном браузере и сделай скриншоты в трёх размерах: компьютер, планшет, телефон.
Проверь:
– соответствует ли всё дизайн-паспорту;
– нет ли признаков шаблонного ИИ-дизайна из скилла frontend-design;
– не вылезает ли текст за край на телефоне и все ли картинки загрузились;
– читается ли текст на кнопках и на цветном фоне;
– не слишком ли много анимации.
Пришли скриншоты и список проблем, потом исправь их и проверь ещё раз.

В Claude Code агент откроет сайт во встроенном браузере вкладки Code. В Codex с плагином Build Web Apps это тоже встроенный браузер. Если по какой-то причине браузер не открылся, попросите агента сделать скриншоты другим способом: он найдёт, как.

Когда сайт нравится, его можно выложить в интернет. Как арендовать сервер и попросить агента опубликовать сайт, подробно разобрано в статье Сайт с Claude Code за вечер. Если вам нужен ещё и сервер, на котором агент работает круглосуточно, загляните в статью Сервер для нейросети.

После публикации сделайте ещё одну проверку сами. Откройте сайт на своём телефоне и отправьте ссылку двум-трём знакомым с вопросом: «Как думаешь, сколько стоил такой сайт?» Если называют суммы с тремя нулями, вы всё сделали правильно.

Раздел 03Как выглядит работа с агентом вживую

Чтобы было понятнее, покажу, как примерно идёт разговор. Допустим, у вас сайт психолога, и первый экран вам не нравится.

Вы пишете: «Первый экран скучный. Прикладываю снимок первого экрана, который мне нравится, сделай мой в таком духе, цвета из паспорта».

Агент со скиллом первым делом описывает план: «На образце фото занимает правую половину экрана, слева крупный заголовок в две строки и одна кнопка. Сделаю так же: ваше фото справа, заголовок шрифтом из паспорта, кнопку акцентным цветом. Цифры с количеством клиентов уберу из первого экрана в блок "обо мне": на образце первый экран держится на одной мысли». Потом делает и присылает скриншоты.

Вы смотрите: «Хорошо, но заголовок слишком большой на телефоне, он занимает весь экран». Агент уменьшает заголовок только на телефоне и присылает новый скриншот.

Так и идёт работа: вы реагируете на картинку, агент правит код. Знать, как называются отступы, шрифты и сетки, не нужно. Говорите обычными словами, что вам не нравится: «слишком тесно», «скучно», «кнопка теряется», «выглядит дёшево». Агент со скиллом и паспортом сам переведёт это в правки.

Пять фраз, которые пригодятся чаще всего:

• «Слишком много всего на экране, убери лишнее»: агент упростит блок.
• «Выглядит дёшево, сделай дороже»: агент добавит воздуха, уменьшит число цветов и анимаций.
• «Этот блок выбивается из остальных»: приведёт его к паспорту.
• «Покажи три варианта этого блока»: удобно, когда вы сами не знаете, чего хотите.
• «Верни как было»: если правка не понравилась, агент откатит её.

Раздел 04Если что-то пошло не так

Агент пишет, что не может открыть ссылку на сайт-образец. Часть галерей и сайтов закрыта от роботов, в том числе land-book, lapa.ninja и uiverse. Это нормально: сделайте снимок экрана и перетащите его в чат. Картинку агент видит всегда.

Сайт всё равно выглядит шаблонно. Проверьте, что скилл установлен: спросите агента «Какие скиллы у тебя установлены?». Если установлен, напишите: «Найди на моём сайте признаки шаблонного ИИ-дизайна по скиллу frontend-design и убери их». Ещё одна частая причина – слишком разные образцы: оставьте три похожих по настроению сайта и пересоберите паспорт.

Через какое-то время агент забыл про паспорт. Значит, правило не записано в CLAUDE.md или AGENTS.md. Вернитесь к концу шага 4 и отправьте промт «закрепить паспорт» для своего агента. Работайте над сайтом в чатах, открытых в той же папке сайта.

Элемент с uiverse сломал соседние блоки. Код с uiverse иногда задаёт оформление слишком широко, и оно цепляет другие элементы сайта. Напишите: «После того как ты добавил кнопку с uiverse, поехали другие блоки. Сделай так, чтобы её оформление действовало только на эту кнопку».

На телефоне всё разваливается. Попросите: «Пришли скриншот сайта на ширине телефона и исправь всё, что вылезает за край или наезжает друг на друга». Проверяйте телефон после каждого блока: так ошибки не копятся.

Codex не рисует макет картинкой. Проверьте подписку: на бесплатном тарифе картинки недоступны. Если подписка Plus или выше, проверьте, что плагин Build Web Apps установлен, и начните новый чат. Можно и попросить: «Сначала нарисуй макет первого экрана картинкой, верстать будем после того, как я его одобрю».

Unsection пишет, что лимит закончился. На бесплатном тарифе можно собрать 5 секций в неделю. Дождитесь новой недели или передайте понравившуюся секцию агенту снимком экрана, как блок из любой другой галереи.

Агент сделал совсем не то. Напишите «Верни как было» и дайте задание заново, теперь с образцом. Задание без образца – главная причина промахов.

Раздел 05Чек-лист: выдаёт ли ваш сайт нейросеть

Пройдитесь по этому списку перед тем, как показывать сайт клиентам. Каждое «да» – повод попросить агента переделать:

• Фиолетовый или сине-фиолетовый градиент на белом фоне?
• Шрифт Inter, Roboto или Arial везде, где есть текст?
• Три-шесть одинаковых карточек с иконкой, заголовком и двумя строками текста?
• Кремовый фон, заголовок с засечками и терракотовый акцент?
• Мелкая надпись заглавными буквами над каждым заголовком?
• Стрелочка «→» на каждой кнопке?
• Одно слово в каждом заголовке выделено цветом?
• Нумерация «01, 02, 03» у блоков, которые не идут по порядку?
• Каждая секция при прокрутке выплывает снизу?
• Огромная цифра с подписью на первом экране только потому, что так «принято»?

Одно-два «да» – не катастрофа, если это ваше осознанное решение. Если набралось шесть-семь, сайт выглядит как тысяча других, и клиент это почувствует.

Раздел 06Сколько это стоит

Почти всё, о чём я рассказал, вам ничего не будет стоить. Скилл frontend-design и плагин Build Web Apps бесплатные, плагин работает внутри подписки ChatGPT. Галереи образцов открыты для просмотра всем, а элементы uiverse можно ставить даже на коммерческие сайты.

Платите вы только за подписку на нейросеть, которая у вас, скорее всего, уже есть: Claude Pro или ChatGPT Plus, по 20 долларов в месяц. Платные тарифы галерей (land-book, lapa.ninja, Unsection – по 9 долларов в месяц) для одного сайта не нужны.

Для сравнения: раньше приличный сайт стоил от 30 000 руб и делался одну-две недели. Здесь вы тратите вечер-два и получаете сайт, который можно переделывать сколько угодно раз без доплат.

ИтогВесь путь за минуту

1. Поставьте агенту скилл frontend-design одним сообщением со ссылкой. В Codex добавьте ещё плагин Build Web Apps.
2. Найдите 3–5 сайтов, которые нравятся, на recent.design, land-book.com и lapa.ninja. Сохраните ссылки и снимки экранов.
3. Попросите агента разобрать их и собрать дизайн-паспорт с точными цветами, шрифтами и отступами. Закрепите паспорт в CLAUDE.md или AGENTS.md.
4. Пересоберите сайт блок за блоком по образцам из navbar.gallery, footer.design, cta.gallery, bentogrids.com, 404s.design и unsection.com.
5. Добавьте одну-две эффектные детали с uiverse.io.
6. Попросите агента проверить сайт на трёх экранах и по списку примет ИИ-дизайна.

Пройдёте этот путь один раз, и ваша нейронка начнёт собирать сайты, за которые не стыдно брать с клиентов хорошие деньги. Паспорт и скилл останутся у агента, и следующий сайт вы соберёте примерно за час.

FAQЧастые вопросы