Codex и GPT-5.6 позволяют создавать сайт в формате диалога: вы описываете задачу на русском языке, показываете референс и получаете рабочий HTML/CSS/JavaScript. Полностью без ручного написания кода это возможно для простых статических сайтов и прототипов, но результат всё равно нужно проверять в браузере: AI-агент может ошибиться в вёрстке, логике форм, адаптивности и настройках публикации.
В этом материале разобран полный практический сценарий: от выбора референса и подготовки промпта до мобильной адаптации и публикации на хостинге. В качестве сквозного кейса используется интернет-магазин пахлавы, собранный в связке Codex и GPT-5.6. Вы увидите, как распределять задачи между версиями Sol, Terra и Luna в рамках этого сценария, как править дизайн итерациями и как заменить тематику сайта без переписывания кода с нуля.
Что понадобится для создания сайта через Codex
Перед началом подготовьте четыре вещи:
- визуальный референс сайта или скринкаст с пояснениями;
- Codex и доступ к GPT-5.6;
- редактор кода с браузерным предпросмотром, например VS Code с Live Server;
- хостинг и домен, если сайт нужно опубликовать в интернете.
Без программирования реально собрать статический лендинг, каталог, простую визитку или прототип интернет-магазина. Ручная проверка понадобится для форм, корзины, интеграций, безопасности, SEO, скорости загрузки и всех сценариев, где сайт взаимодействует с внешним API или бэкендом.
Ограничения и типичные ошибки в работе с AI-агентом
Codex ускоряет создание сайта, но не заменяет проверку результата. Он может неверно понять референс, нарушить сетку при правке одного блока, оставить тестовые данные или сгенерировать код, который выглядит рабочим только в одном браузере.
- Не просите воспроизвести сложный сайт целиком одним запросом. Разбивайте работу на структуру, стили, интерактивность и тестирование.
- Не принимайте обещание «готово» за результат проверки. Открывайте сайт в браузере после каждой существенной правки.
- Не передавайте агенту секретные ключи и приватные данные. Для интеграций используйте публичные настройки и переменные окружения.
- Не ограничивайтесь десктопным просмотром. Мобильная вёрстка требует отдельной проверки на нескольких разрешениях и реальном устройстве.
Что такое Codex и GPT-5.6 и почему они меняют веб-разработку
Codex - это AI-агент, который генерирует и редактирует код по текстовым описаниям. Он понимает структуру проекта, создаёт файлы, предлагает архитектуру и вносит правки, сохраняя контекст текущей сессии. GPT-5.6 - языковая модель, обеспечивающая понимание задач. В зависимости от доступного интерфейса и настроек она может интерпретировать промпты и визуальные материалы, включая видео с референсами.
В описываемой схеме семейство GPT-5.6 разделено на три версии, заточенные под разные задачи. Sol используется для быстрых правок: замены текста, цвета и отступов. Terra - для более сложной CSS-анимации и адаптивной вёрстки. Luna - для нестандартных UX-решений и предложений по дизайну. Названия и доступность режимов зависят от конкретной конфигурации Codex, поэтому воспринимайте это как рабочую схему распределения задач, а не как универсальное правило для всех интерфейсов.
Интернет-магазин пахлавы в этом материале проходит путь от идеи до работающего сайта. Вы показываете Codex, что хотите получить, и описываете изменения обычным языком. Агент переписывает исходники, а вы сразу видите новую версию в браузере.
Такой подход снижает порог входа в веб-разработку - необходимость знать языки программирования на старте становится необязательной. Вы оперируете понятиями «секция», «кнопка», «анимация», а не селекторами и медиазапросами. При этом понимание базовых ограничений HTML/CSS и умение проверить результат остаются полезными.
Подготовка к работе: выбор референса и запись видео для анализа
Качество результата зависит от качества входных данных. Codex не читает мысли - ему нужен чёткий визуальный ориентир. Перед стартом выполните два подготовительных шага: найдите референс и запишите скринкаст с комментариями.
Как выбрать идеальный референс: критерии и источники
Референс - это сайт, дизайн и функционал которого вы хотите воспроизвести. Критерии отбора: чистая вёрстка, понятная навигация, отсутствие избыточной сложности. Если цель - лендинг или магазин на статике, избегайте сайтов с тяжёлым JavaScript, WebGL и сложными SPA-переходами. Codex может воспроизвести отдельную логику, но излишняя интерактивность увеличит число итераций и объём ручной проверки.
Источники для поиска: Awwwards, Behance, тематические подборки в Telegram-каналах. Выбирайте проекты с выраженной сеткой, читаемой типографикой и повторяемыми компонентами - карточками товаров, секциями с иконками и формами обратной связи. Такие паттерны проще описать и проверить.
Запись видео для Codex: что говорить и показывать
Скринкаст помогает передать агенту визуальный контекст. Практичная длительность - 3-5 минут. Во время записи:
- Покажите общий обзор страницы: прокрутите от хедера до футера и называйте секции.
- Разберите основные элементы: header с логотипом и меню, hero-секцию с заголовком и CTA-кнопкой, карточки товаров, блок с отзывами и footer с контактами.
- Отдельно укажите анимации и интерактивные элементы: «Здесь слайдер с автоматической прокруткой, хочу такой же», «При наведении на карточку она приподнимается и появляется тень».
Комментируйте функционально, а не технически. Не нужно говорить «используй flexbox» или «добавь transition 0.3s ease-in-out». Опишите поведение: «Кнопка плавно меняет цвет при наведении», «Карточки выстраиваются в три колонки на десктопе и в одну на телефоне». Модель сама подберёт реализацию, но готовый код всё равно нужно проверить.
Настройка проекта и генерация первого кода
После загрузки видео в Codex начинается этап инициализации. Агент анализирует скринкаст, выделяет структурные блоки и предлагает архитектуру файлов. Для простого статического проекта это обычно index.html, styles.css и script.js. Для проектов с бэкендом - например, корзиной или формами - Codex может предложить Supabase как готовый BaaS-сервис. Его подключение требует отдельной проверки настроек доступа и обработки данных.
Для локального предпросмотра установите Live Server в VS Code. Расширение автоматически обновляет страницу при изменении файлов. Рабочий цикл выглядит так: вы формулируете промпт, Codex обновляет код, браузер показывает новую версию, а вы фиксируете, что именно нужно исправить.
Первый промпт: как описать задачу, чтобы получить рабочий результат
От формулировки первого запроса зависит количество последующих итераций. Укажите тип сайта, основные секции, технологический стек, референс и обязательные функции:
Создай [тип сайта] с [основные секции]. Используй [технологии]. Ориентируйся на дизайн из видео. Добавь [специфические элементы]. Сначала создай структуру проекта, затем проверь адаптивность и работу интерактивных элементов.Пример для магазина пахлавы:
Создай одностраничный интернет-магазин пахлавы с шапкой, hero-секцией, каталогом из 6 товаров, блоком отзывов и контактами. Используй HTML, CSS, JavaScript. Ориентируйся на дизайн из видео. Добавь корзину и форму заказа. После генерации проверь, чтобы элементы не выходили за границы экрана на мобильных разрешениях.Явно указывайте цветовую гамму и шрифты, если они критичны: «Основной цвет - тёмно-коричневый #3E2723, акцентный - золотой #FFD700, шрифт - Montserrat». Это уменьшает число правок на старте.
Итеративные правки дизайна и анимации: практический рабочий цикл
Создание сайта с Codex - это последовательный диалог. Первая версия редко бывает финальной: вы смотрите результат, формулируете одну группу правок на русском языке, отправляете её агенту и снова открываете страницу в браузере.
Для правок используйте короткий список:
- сначала исправляйте структуру и расположение блоков;
- затем настраивайте цвета, типографику, отступы и размеры;
- после этого добавляйте анимацию и интерактивность;
- в конце проверяйте формы, ссылки и мобильную версию.
Примеры запросов: «Сделай кнопку больше и добавь тень», «Замени статичную картинку на анимацию появления при скролле», «Перенеси блок отзывов выше, перед каталогом».
Codex сохраняет контекст текущей сессии, поэтому можно ссылаться на предыдущие правки: «Откати цвет кнопки к версии трёх итераций назад». Надёжность такого отката зависит от истории проекта, поэтому важные версии лучше сохранять отдельно или через Git.
Распределение задач между Sol, Terra и Luna: когда какую модель использовать
Если в вашем интерфейсе доступны эти версии GPT-5.6, их можно распределить по сложности задачи:
- Sol - быстрые правки: замена текста, цвета, отступов и шрифтов. Для задачи «Поменяй все заголовки с чёрного на тёмно-серый» подойдёт быстрый режим.
- Terra - сложные CSS-анимации, адаптивная вёрстка и кроссбраузерные фиксы. Пример: «Добавь параллакс-эффект для hero-секции и анимацию появления карточек при скролле». Результат нужно проверить на целевых устройствах.
- Luna - генерация идей для улучшения UX и нестандартных дизайнерских решений. Запрос: «Предложи три варианта оформления карточки товара, которые повысят конверсию». Любые выводы о конверсии следует рассматривать как гипотезы и проверять аналитикой.
После каждого цикла правок проверьте кроссбраузерность в Chrome, Firefox и Safari, скорость загрузки, отображение изображений и плавность анимаций на мобильных устройствах.
Адаптация под мобильные устройства: проверяем вёрстку отдельно
Проблема «на телефоне всё съезжает» требует не только одного промпта, но и проверки результата. Откройте инструменты разработчика в браузере (F12 → Toggle Device Toolbar), выберите разрешение iPhone 12 или Pixel 5 и зафиксируйте проблемные места. При возможности дополнительно проверьте страницу на реальном устройстве.
Рабочий промпт:
Проверь сайт на мобильных разрешениях 375px и 414px. Исправь все элементы, которые выходят за экран или накладываются друг на друга. Карточки товаров должны выстраиваться в одну колонку, меню - сворачиваться в гамбургер, шрифты - масштабироваться без потери читаемости. Не меняй структуру десктопной версии без необходимости.Codex добавит медиазапросы и перестроит сетку, но не всегда правильно определяет причину дефекта. После правок проверьте горизонтальный скролл, меню, кнопки, формы, изображения и длинные заголовки в DevTools и на реальном устройстве.
Смена тематики сайта без переписывания с нуля
Готовый сайт можно адаптировать под другую нишу, если структура и логика уже подходят. Кейс: из интернет-магазина пахлавы делаем лендинг для доставки цветов. Процесс можно описать так: «Замени весь контент на тематику доставки цветов. Поменяй цветовую схему на бело-зелёную. Замени изображения на цветочные композиции. Оставь структуру и логику корзины без изменений».
Codex переписывает тексты, меняет цветовые переменные в CSS и подставляет новые изображения. Структура секций и логика интерактивных элементов могут сохраниться, но после такой трансформации проверьте ссылки, формы, подписи кнопок, изображения и соответствие контента новой нише.
Публикация на виртуальном хостинге: как вывести сайт в интернет
Для деплоя выберите хостинг, например Beget или Timeweb, загрузите файлы через FTP или панель управления и привяжите домен. Если использовался Supabase для бэкенда, отдельно настройте переменные окружения и проверьте URL проекта и публичный API-ключ. Секретные ключи нельзя размещать в клиентском коде.
Перед публикацией используйте мини-список:
- соберите финальную версию проекта и сохраните резервную копию;
- проверьте, какие файлы нужно загрузить в корневую директорию сайта;
- настройте домен и дождитесь обновления DNS-записей;
- включите SSL и откройте сайт по HTTPS;
- проверьте формы, ссылки и загрузку изображений уже на публичном URL.
Попросите Codex сгенерировать инструкцию по деплою конкретно для вашего проекта. Промпт: «Напиши пошаговую инструкцию по загрузке этого сайта на хостинг Beget. Какие файлы загружать, в какую директорию, как настроить домен и SSL». Агент проанализирует структуру проекта и выдаст релевантные шаги, но названия разделов панели хостинга могут отличаться.
Для автоматизации процесса доступна связка с GitHub Actions: при пуше в репозиторий код автоматически выкатывается на сервер. Codex может подготовить конфиг для Actions по запросу «Настрой автоматический деплой на хостинг через GitHub». Перед включением автоматического деплоя проверьте секреты, ветку публикации и возможность отката.
Как подключить домен и настроить SSL
Краткая последовательность: зарегистрируйте домен у регистратора, в панели управления хостингом укажите NS-серверы, дождитесь делегирования и выпустите SSL-сертификат. Срок обновления DNS зависит от регистратора и конфигурации домена. После активации сертификата откройте сайт по HTTPS и проверьте, что внутренние ресурсы также загружаются без ошибок.
Чек-лист тестирования перед запуском и типичные ошибки
Перед тем как отправлять ссылку клиентам, пройдите по списку:
- Все ссылки ведут на существующие страницы или секции.
- Формы отправляют данные и показывают подтверждение.
- Сайт корректно отображается в Chrome, Firefox и Safari.
- На iPhone и Android нет горизонтального скролла, текст читается без масштабирования.
- Изображения сжаты, а скорость загрузки проверена через PageSpeed Insights.
- 404-страница настроена и показывает понятное сообщение.
- На сайте есть favicon, корректные title и description, а заголовки и изображения подготовлены для SEO.
Типичные ошибки, которые легко пропустить: заглушки контента («Lorem ipsum» в карточках товаров), неоптимизированные изображения, отсутствие favicon, неработающие формы и ссылки на локальные файлы. Их можно исправлять отдельными промптами: «Замени все заглушки на осмысленный текст», «Сожми изображения до 200 КБ», «Добавь favicon». После автоматической правки обязательно проверьте результат вручную.
FAQ: создание сайта через Codex
Можно ли создать сайт без кода?
Да, если речь идёт о простом статическом сайте, лендинге или прототипе. Codex может сгенерировать HTML/CSS/JavaScript по описанию и помочь внести изменения. Для сложной бизнес-логики, платёжных систем, авторизации, интеграций и требований к безопасности понадобятся ручная проверка и, возможно, участие разработчика.
Что делать, если Codex сделал плохую вёрстку?
Откройте страницу в браузере, зафиксируйте конкретные дефекты и отправляйте их небольшими группами: например, отдельно переполнение по ширине, отдельно меню и отдельно карточки. Укажите разрешение экрана и ожидаемое поведение. Если правки начинают ломать уже готовые блоки, вернитесь к рабочей версии и попросите Codex изменить только проблемную секцию.
Что нужно для публикации сайта?
Для статического проекта достаточно файлов сайта, хостинга, домена и доступа к панели управления или FTP. Для динамических функций дополнительно понадобятся бэкенд, база данных или внешний сервис вроде Supabase. После загрузки проверьте домен, HTTPS, формы, ссылки и работу сайта на мобильных устройствах.
Заключение: что можно получить от AI для создания сайта
Создание сайта без ручного написания кода возможно для ряда практических задач, если разделить процесс на понятные этапы: референс, структура, промпт, итеративные правки, адаптация и публикация. Связка Codex и GPT-5.6 снимает часть технического барьера и позволяет сосредоточиться на контенте, структуре и предложении для клиента, но не отменяет тестирование.
Сквозной кейс с интернет-магазином пахлавы показывает рабочий принцип: сначала создаётся каркас, затем уточняются дизайн и интерактивность, после чего сайт проверяется на мобильных устройствах и публикуется на хостинге. Дальше можно добавить блог, настроить SEO, интегрировать CRM и подключить аналитику - каждую задачу стоит формулировать отдельно и проверять по фактическому результату.
Итогом работы становится не абстрактный макет, а проект с файлами, адаптированной вёрсткой и публичным URL, если настроены хостинг и домен.