В этом гайде я покажу, как создать сайт в Codex, используя модель GPT-5.6. Вы программист? Я — нет. Но у меня получилось сгенерировать сайт хорошего качества за один вечер.
Что потребуется:
-
платная подписка ChatGPT (тариф Plus или Pro)
-
приложение Codex для компьютеров
-
пример сайта из интернета (я покажу где взять)
-
промты для генерации и тестирования сайта (скачайте здесь).
Вот что у меня получилось:
Эти проекты полностью сгенерированы нейросетью.
Не будем тянуть.
Начнем.
Присоединяйтесь к 19 000+ подписчиков в телеграм-канале Бегин (или макс-канал), где я выкладываю гайды, как использовать ИИ в бизнесе.
Шаг 1. Найдите сайт для примера
Нужен пример.
Я открою интернет-магазин, где продаются шаблоны сайтов.
Например, Awwwards, Framer, Webflow, Themeforest или другой.
Покупать шаблон не буду.
Мне просто нужен пример главной страницы с хорошей структурой и красивым дизайном. Позже, когда нейросеть отрисует страницу, я заменю картинки, тексты и логотип на свои, возможно, добавлю разделы.
Итак, я нашел сайт на тему стартапа.
Почему сайт понравился:
-
продукт показан на первом экране
-
сильная структура и типографика
-
яркие аккуратные изображения
-
несложная, но эффектная анимация
-
минималистичный дизайн
Я посмотрел главную страницу и мобильную версию.
Глянул еще второстепенные страницы, на случай, если понадобится расширить сайт до многостраничника.
Шаг 2. Запишите сайт на видео
Сделайте видео как работает сайт и отправьте его в Codex.
ИИ-агент запомнит расположение блоков, скорость прокрутки, переходы, эффекты анимации. Это лучше, чем отправлять скриншоты. ИИ увидит, как движутся элементы, лучше поймет дизайн.
Скачайте программу для записи видео экрана ПК.
Подойдет бесплатная версия.
Я использовал Bandicam.
Включил запись экрана и медленно прокручивал сайт сверху вниз.
Во время записи:
-
захватил вступительную анимацию (первый экран)
-
задерживался на каждом этаже на 2-3 секунды
-
наводил курсор на кнопки, карточки и меню
-
показывал перетаскивание карточек и другие действия;
-
дошел до подвала страницы.
Записывал только окно браузера.
Перед записью закрыл почту, мессенджер и другие вкладки, чтобы на видео не попали лишние уведомления.
Шаг 3. Подготовьте проект и задачу
Создайте на компьютере новую папку проекта.
Можете сделать это где угодно.
Например, на рабочем столе или в “Документы”.
Я создал папку “site_copy” в “Документы”.
Откройте Codex.
В левой панели в разделе “Проекты” нажмите “+”.
Выберите “Использовать существующую папку”.
Прикрепите свою папку.
Далее выберите в диалоговом окне GPT-5.6 Sol, средний уровень рассуждений. Попросите Codex подготовить основу для сайта.
Промт:
Создай в папке простой одностраничный сайт. Выбери подходящий современный стек сам (в будущем проект будет работать на виртуальном хостинге). Подготовь проект к локальному запуску, но пока не работай над дизайном. Установи зависимости, запусти сайт и проверь, что он открывался без ошибок.
Шаг 4. Отправьте видео, попросите повторить сайт
Перейдем к дизайну.
Загрузите записанное видео в то же диалоговое окно Codex.
ИИ-агент использует его как визуальный пример.
Промт:
Проанализируй видео и разработай лендинг с высокой визуальной точностью. Сохрани структуру страницы, расположение элементов, порядок разделов, анимацию при загрузке, анимации во время прокрутки, переходы, взаимодействия и так далее.
Особое внимание обрати на первый экран, переходы между разделами, эффекты при прокрутке и наведении. Копируй тексты и изображения — это временный контент.
Запусти сайт локально и проверь, что он работает без ошибок.
Codex изучит видео с примером сайта и разработает первую версию сайта.
Чтобы открыть сайт нажмите “Предосмотр веб-страницы”.
Шаг 5. Проверьте сайт, пусть ИИ-агент исправит баги
На этом этапе не рассчитывайте получить идеальный результат сразу.
Первая генерация будет косячная.
Где-то дизайн кривой, анимация слетит, тексты корявые.
Откройте сайт и сравните его с оригиналом.
Основные проблемы:
-
сломалась сложная анимация
-
текст наехал на картинки
-
нет отступов
-
некоторые визуальные блоки упрощены
Пример, когда на первом экране сломался визуал:
Внимательно осмотрите оригинал и копию сайта.
Проверяйте страницу в том же порядке, в котором ее увидит посетитель:
-
загрузка
-
хедер (верхнее меню)
-
первый экран
-
прокрутка
-
внутренние этажи
-
наведение на кнопки
-
подвал.
Я осмотрел сайт сверху вниз, набралось больше десяти правок.
Чтобы ИИ-агент меня лучше понял, я сделал скриншоты оригинала (каждый этаж) и прикрепил рисунки, где указал красными линиями на крупные баги.
Загрузил все это в диалоговое окно.
После каждого внесения правок проверяйте результат.
Вот краткий чек-лист:
-
все кнопки и ссылки работают
-
страница не дергается во время прокрутки
-
анимация разделах вовремя включается
-
текст хорошо читается на ПК и телефоне
-
меню раскрывается
-
изображения не растягиваются, загружаются быстро.
Вы можете пропустить некоторые баги, поэтому, отправьте Codex тестировать сайт самостоятельно.
Это можно делать после ваших правок или до.
Промт:
Протестируй сайт: проверь точность дизайна, адаптивность, шрифты, отступы, цвета, анимации, состояния кнопок и форм, затем оцени скорость загрузки, производительность, ошибки в консоли, тяжелые ресурсы и плавность работы. Исправь найденные проблемы и повтори проверку.
Вот что у меня получилось:
В одной из правок я попросил сразу перевести сайт.
На разработку у меня ушло около четырех часов.
Это примерно 50% недельного лимита Codex, если использовать GPT-5.6 Sol, средний уровень рассуждений.
Старайтесь отправлять не по одной правке, а пачками по 5-10 штук. Так ИИ-агент лучше видит общую картину, сразу учтет связанные ошибки и вы потратите меньше времени на тестирование (+ экономит токены).
Если у вас небольшие правки, например, нужно перевести текст или заменить картинку, то переключайтесь на GPT-5.6 Luna, средний или легкий уровень рассуждений. Terra быстрее и дешевле Sol, но при этом отлично подходит для небольших задач.
Чтобы получить дизайн, который мне нравится, я отправил около 5-8 запросов на исправление макета.
Каждый раз сайт становился лучше.
***
Вы дочитали до середины, а это значит, вам нравится, что я делаю. Поставьте сердечко под статьей и присоединяйтесь к 19 тысячам подписчиков в телеграм-канале Бегин (или макс-канал), где я рассказываю как применять ИИ в бизнесе и контент-маркетинге.
Продолжим.
***
Шаг 6. Проверьте мобильную версию сайта
Кстати, Codex сразу запилил мобильную версию, хотя я об этом его не просил. Хотя это логично, ведь более 60% населения Земли уже пользуются смартфонами.
Как тестировал?
Я открыл “Инструменты разработчика” в браузере (нажмите F12) и проверил страницу на смартфоне и планшете. Но я бы еще рекомендовал посмотреть мобильную версию на настоящем телефоне.
Смотрите, не выходит ли текст за края, удобно ли нажимать кнопки, правильно ли обрезаются изображения, не перекрывают ли друг друга элементы. Все должно быть на своих местах, не каша-малаша.
Чтобы ИИ-агент сначала сам проверил мобилку, отправьте запрос:
Проверь мобильный вид страницы на смартфонах и планшетах. Исправь ошибки адаптивности. Сохрани общий вид и анимации настольной версии. После правок кратко перечисли, что было сломано и что ты изменил.
Затем можно проверить скорость.
Большие видео, картинки и сложные эффекты перегружают страницу.
Промт:
Проверь скорость и плавность страницы. Найди слишком тяжелые изображения, лишние повторные вычисления и анимации, которые нагружают браузер. Оптимизируй их без заметного ухудшения картинки.
Шаг 7. Измените тему сайта на ваш бизнес
Итак, вы сделали первую версию на основе референса из интернета.
Разумеется, вы не будете запускать такой сайт в сеть.
Это нарушает авторские права, да и вообще не комильфо копипастить чужие сайты и выдавать за свои.
Заменим тематику сайта.
Преобразим его до неузнаваемости с помощью Codex.
Используя текущую структуру (которую мы так старательно вычистили от багов, на этом шаге наши труды окупятся вдвойне, мы будем разрабатывать дизайн на чистой версии сайта).
Покажу как я это сделал.
Допустим, у меня интернет-магазин по доставке пахлавы.
Первым делом я сгенерировал логотип.
Открыл ChatGPT, включил режим “Создать изображение”.
Промт:
Сделай шесть вариантов логотипа [Пахлаваныч — это интернет-магазин для заказа пахлавы].
Вернулся в Codex.
В запросе подробно описал что изменить — от текстов до картинок.
Если у вас есть свои тексты и изображения, загрузите их в диалоговое окно. Если нет, то Codex сам сгенерирует контент (позже можно заменить на свои). В качестве примера я также загрузил красивые картинки пахлавы из маркетплейсов.
Промт:
Замени тему сайта на [продажу пахлавы с грецким орехом]. Что изменить: тексты, изображения (сгенерируй заново), логотип, фавикон, название страницы, отзывы, цвета и другие элементы по смыслу. Не меняй текущую структуру страницы. Заново придумай преимущества, тарифы и другие коммерческие элементы, полностью адаптируй структуру сайта для новой темы.
Кстати, в своих правках вы можете ссылаться на предыдущий референс или любой другой сайт, чтобы взять у него идею анимации и элементов дизайна.
После разработки я снова проверил сайт.
Составил список правок.
Отправил Codex.
Чтобы проверить сайт нажмите на “Предосмотр веб-страницы”.
Справа откроется окно встроенного браузера Codex.
В браузере на верху скопируйте адрес страницы (у меня http://127.0.0.1:5174/) и вставьте в браузер, которым обычно пользуетесь, например, Яндекс Браузер или Хром, так удобнее работать.
Через три прогона я получил сайт, который меня устроил.
Посмотрите:
https://test.inclient.ru/pahlava/
Сайт можно дорабатывать и дорабатывать.
Шаг 8. Публикация сгенерированного сайта на хостинге
Пришло время выложить сайт в сеть.
Потребуется обычный виртуальный хостинг.
200-400 рублей в месяц.
Зарегистрируйтесь у любого хостинг-провайдера, оплатите тариф (лучше сразу за год, так дешевле) и авторизуйтесь в панели управления (данные придут на почту).
Затем закажите домен на странице “Домены”. Перейдите в “Сайты” и скопируйте данные FTP. Если запутались, просто спросите поддержку вашего хостинг-провайдера, они вышлют вам все данные.
Вернитесь в Codex.
Отправьте ИИ-агенту данные FTP.
Промт:
Подготовь сайт к публикации на виртуальном хостинге и загрузи его по FTP. Данные подключения: хост [FTP-хост], логин [логин], пароль [пароль], папка сайта [например, public_html]. Сначала собери рабочую версию проекта, удали лишние файлы разработки, проверь пути к изображениям, шрифтам и скриптам. Загрузи файлы, открой сайт по адресу [домен], проверь все страницы, ссылки, мобильную версию и ошибки в консоли. Ничего не удаляй на сервере без необходимости. После завершения кратко перечисли, что было загружено и какие ошибки исправлены.
ИИ-агент отчитается, когда сайт будет установлен на хостинге:
Проверьте.
(посмотреть мою версию — https://test.inclient.ru/pahlava)
Сайт должен открываться на домене.
Проверьте десктопную и мобильную версию.
Готово!
По уму надо сделать еще это:
-
адаптировать контент под SEO
-
создать sitemap.xml и настроить robots.txt
-
подключить Яндекс Метрику и настроить цели
-
проверить формы, заявки и уведомления
-
добавить политику конфиденциальности и согласие на обработку данных.
Это техническая часть.
Можно сделать самому (если разбираетесь), через Codex или нанимать разработчика. Если вам понравилось это руководство, поставьте сердечко и напишите в комментариях, так я буду знать, что пора готовить вторую часть.
Как распределять задачи между GPT-5.6 Sol, Terra и Luna при разработке сайта
В Codex не нужно всегда использовать самую мощную модель.
Используйте GPT-5.6 Sol для сложных задач.
Например, когда нужно создать архитектуру сайта, сгенерировать сложный дизайн или анимацию, разобрать видео для структуры сайта.
GPT-5.6 Terra подойдет для средних задач: поменять дизайн, написать текст, добавить анимацию, исправить ошибки.
Для мелких правок подойдет GPT-5.6 Luna.
Эта памятка поможет выбрать ИИ-модель при разработке сайта:
Заключение
С помощью Codex можно собрать рабочий сайт без опыта программирования. За один запрос, идеального результата не добиться. Придется попотеть вместе с агентом Codex: вы пишите своими словами что надо делать, агент — разрабатывает.
Хороший сайт появляется после 3-5 итераций правок: вы сравниваете сайт с референсом, находите ошибки, ИИ-агент исправляет дизайн, получаете чистую версию и только потом меняете тему под свой бизнес.
Не копируйте чужой сайт один в один.
Берите структуру, логику анимации, удачные приемы. Тексты, изображения, цвета и смысл создавайте заново. Тогда вы получите уникальный сайт.
Мои подборки и гайды
-
30 примеров, на что способен NotebookLM для телеграм-каналов
-
10 способов как находить топовые темы для контента с помощью ИИ
-
100 гайдов по промпт-инжинирингу от OpenAI, Google, Microsoft, Яндекса
***
Спасибо, что дочитали
Присоединяйтесь к 19 000+ подписчиков в телеграм-канале Бегин (или макс-канал), где я выкладываю гайды, как использовать ИИ в бизнесе.
ссылка на оригинал статьи https://habr.com/ru/articles/1064580/