Codex и GPT-5.6 превращают создание сайта в диалог. Вы описываете задачу на русском языке, показываете референс - и получаете готовый HTML/CSS/JavaScript. Технические навыки не требуются. Достаточно умения формулировать, что именно вы хотите видеть на экране.
В этом материале разобран полный цикл: от выбора образца до публикации на хостинге. В качестве сквозного кейса взят интернет-магазин пахлавы - реальный проект, собранный связкой Codex и GPT-5.6. Вы узнаете, как распределять задачи между версиями Sol, Terra и Luna, как править дизайн итерациями и как заменить тематику сайта без переписывания кода с нуля.
Что такое Codex и GPT-5.6 и почему они меняют веб-разработку
Codex - это AI-агент, который генерирует и редактирует код по текстовым описаниям. Он понимает структуру проекта, создаёт файлы, предлагает архитектуру и вносит правки, сохраняя контекст всей сессии. GPT-5.6 - языковая модель, обеспечивающая понимание задач. Она интерпретирует ваши промпты, анализирует видео с референсами и определяет, какой именно код нужен.
Семейство GPT-5.6 включает три версии, заточенные под разные задачи. Sol выполняет быстрые правки: замена текста, цвета, отступов. Terra справляется со сложными CSS-анимациями и адаптивной вёрсткой. Luna генерирует нестандартные UX-решения и креативные предложения по дизайну. Переключение между версиями в рамках одного проекта позволяет экономить ресурсы и ускорять разработку.
Интернет-магазин пахлавы, созданный этой связкой, прошёл путь от идеи до работающего сайта за один вечер. Без строчки ручного кода. Вы просто показываете Codex, что нравится, и говорите, что изменить. Агент переписывает исходники, а вы сразу видите результат в браузере.
Этот подход снимает главный барьер входа в веб-разработку - необходимость знать языки программирования. Вы оперируете понятиями «секция», «кнопка», «анимация», а не селекторами и медиазапросами. Модель сама решает, как реализовать задуманное технически.
Подготовка к работе: выбор референса и запись видео для анализа
Качество результата напрямую зависит от качества входных данных. 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 перезаписывает код - браузер сразу показывает новую версию. Цикл обратной связи занимает 30-60 секунд.
Первый промпт: как описать задачу, чтобы получить рабочий результат
От формулировки первого запроса зависит, сколько итераций уйдёт на доводку. Шаблон промпта:
Создай [тип сайта] с [основные секции]. Используй [технологии]. Ориентируйся на дизайн из видео. Добавь [специфические элементы].Пример для магазина пахлавы:
Создай одностраничный интернет-магазин пахлавы с шапкой, hero-секцией, каталогом из 6 товаров, блоком отзывов и контактами. Используй HTML, CSS, JavaScript. Ориентируйся на дизайн из видео. Добавь корзину и форму заказа.Явно указывайте цветовую гамму и шрифты, если они критичны: «Основной цвет - тёмно-коричневый #3E2723, акцентный - золотой #FFD700, шрифт - Montserrat». Это сокращает число правок на старте.
Итеративные правки дизайна и анимации: работаем как профи
Создание сайта с Codex - это диалог. Первая версия редко бывает финальной. Вы смотрите результат, формулируете правку на русском языке, отправляете агенту, получаете обновлённый код. Типичный цикл: «Сделай кнопку больше и добавь тень», «Замени статичную картинку на анимацию появления при скролле», «Перенеси блок отзывов выше, перед каталогом».
Codex сохраняет контекст всей сессии. Вы можете ссылаться на предыдущие правки: «Откати цвет кнопки к версии трёх итераций назад». Агент помнит историю изменений и восстанавливает нужное состояние.
Распределение задач между Sol, Terra и Luna: когда какую модель использовать
Переключение между версиями GPT-5.6 даёт ощутимый прирост эффективности. Практическая схема распределения:
- Sol - быстрые правки: замена текста, цвета, отступов, шрифтов. Время ответа минимально, стоимость инференса низкая. Для задачи «Поменяй все заголовки с чёрного на тёмно-серый» используйте Sol.
- Terra - сложные CSS-анимации, адаптивная вёрстка, кроссбраузерные фиксы. Пример: «Добавь параллакс-эффект для hero-секции и анимацию появления карточек при скролле». Terra справляется за 1-2 итерации, тогда как Sol может потребовать 5-6.
- Luna - генерация идей для улучшения UX, нестандартные дизайнерские решения. Запрос: «Предложи три варианта оформления карточки товара, которые повысят конверсию». Luna анализирует паттерны и предлагает решения с обоснованием.
Чек-лист тестирования после каждого цикла правок: проверьте кроссбраузерность (Chrome, Firefox, Safari), скорость загрузки (изображения должны быть оптимизированы), плавность анимаций (отсутствие рывков на мобильных устройствах).
Адаптация под мобильные устройства: чтобы сайт выглядел идеально везде
Проблема «на телефоне всё съезжает» решается одним промптом. Откройте инструменты разработчика в браузере (F12 → Toggle Device Toolbar), выберите разрешение iPhone 12 или Pixel 5 и покажите Codex проблемные места - либо опишите их текстом.
Рабочий промпт: «Проверь сайт на мобильных разрешениях 375px и 414px. Исправь все элементы, которые выходят за экран или накладываются друг на друга. Карточки товаров должны выстраиваться в одну колонку, меню - сворачиваться в гамбургер, шрифты - масштабироваться без потери читаемости».
Codex добавит медиазапросы и перестроит сетку. Вам не нужно разбираться в брейкпойнтах - агент сам определит, на каких разрешениях ломается вёрстка, и адаптирует её. После правок проверьте результат на реальном устройстве или в эмуляторе DevTools.
Смена тематики сайта без переписывания с нуля
Готовый сайт можно трансформировать под другую нишу за 15-20 минут. Кейс: из интернет-магазина пахлавы делаем лендинг для доставки цветов. Процесс: «Замени весь контент на тематику доставки цветов. Поменяй цветовую схему на бело-зелёную. Замени изображения на цветочные композиции. Оставь структуру и логику корзины без изменений».
Codex переписывает тексты, меняет цветовые переменные в CSS, подставляет новые изображения. Структура секций и логика интерактивных элементов сохраняются. Это экономит десятки часов по сравнению с вёрсткой нового макета - вы переиспользуете готовый каркас, меняя только контентный слой.
Публикация на виртуальном хостинге: ваш сайт в интернете
Финальный этап - деплой. Выберите хостинг (Beget, Timeweb), загрузите файлы через FTP или панель управления, привяжите домен. Если использовался Supabase для бэкенда, настройте переменные окружения в панели хостинга - URL проекта и публичный API-ключ.
Совет: попросите Codex сгенерировать инструкцию по деплою конкретно для вашего проекта. Промпт: «Напиши пошаговую инструкцию по загрузке этого сайта на хостинг Beget. Какие файлы загружать, в какую директорию, как настроить домен и SSL». Агент проанализирует структуру проекта и выдаст релевантные шаги, а не общий шаблон.
Для тех, кто хочет автоматизировать процесс, доступна связка с GitHub Actions: при пуше в репозиторий код автоматически выкатывается на сервер. Codex сгенерирует конфиг для Actions по запросу «Настрой автоматический деплой на хостинг через GitHub».
Как подключить домен и настроить SSL
Краткая инструкция: зарегистрируйте домен у регистратора, в панели управления хостингом укажите NS-серверы, дождитесь делегирования (от 2 до 24 часов). SSL-сертификат устанавливается в один клик через панель хостинга - обычно это бесплатный Let's Encrypt. После активации сайт будет доступен по HTTPS.
Чек-лист тестирования перед запуском и типичные ошибки
Перед тем как отправлять ссылку клиентам, пройдите по списку:
- Все ссылки ведут на существующие страницы или секции.
- Формы отправляют данные и показывают подтверждение.
- Сайт корректно отображается в Chrome, Firefox, Safari.
- На iPhone и Android нет горизонтального скролла, текст читается без масштабирования.
- Скорость загрузки по PageSpeed Insights - не ниже 80 баллов.
- 404-страница настроена и показывает понятное сообщение.
Типичные ошибки, которые легко пропустить: заглушки контента («Lorem ipsum» в карточках товаров), неоптимизированные изображения (файлы по 2-5 МБ), отсутствие favicon. Каждая из них исправляется одним промптом: «Замени все заглушки на осмысленный текст», «Сожми изображения до 200 КБ», «Добавь favicon».
Заключение: ваш первый сайт на ИИ - что дальше?
Создание сайта без кода - реальность, доступная каждому. Связка Codex и GPT-5.6 снимает технический барьер и позволяет сосредоточиться на сути: контенте, структуре, предложении для клиента. Интернет-магазин пахлавы, собранный за вечер, доказывает, что результат достигается не месяцами разработки, а умением чётко ставить задачу.
Дальнейшие шаги: добавьте блог и настройте SEO-оптимизацию с помощью GPT-5.6 - модель сгенерирует метатеги, структуру заголовков и семантическую разметку. Интегрируйте CRM для обработки заявок. Подключите аналитику. Каждый из этих этапов также автоматизируется через диалог с агентом.
Попробуйте создать свой проект. От идеи до работающего URL - один вечер и несколько промптов.