🍰 Как создать сайт с помощью Codex и GPT-5.6 - пошаговый гайд для новичка
Я не программист, но за один вечер собрал два рабочих сайта: приложение для тренировок и интернет-магазин пахлавы.
На разработку одной версии ушло около четырех часов. Я говорил что делать, ИИ-агент писал код. В качестве примера взял структуру реального сайта из интернета. Затем агент изменил тематику под новый бизнес.
Хороший сайт появляется после 3-5 итераций правок.
То есть да, придется попотеть.
Теперь пошагово.
Полный гайд: https://inclient.ru/codex-site/.
Что потребуется:
— платная подписка ChatGPT (тариф Plus или Pro)
— приложение Codex для компьютеров
— пример сайта из интернета (я покажу где взять)
— промты для генерации и тестирования сайта (скачайте здесь).
Шаг 1. Найдите сайт для примера
Откройте Awwwards, Framer, Webflow. Выберите сайт с хорошей структурой и дизайном. Покупать шаблон не нужно. Сайт понадобится как пример визуала.
Позже вы замените тексты, изображения, цвета, логотип.
Шаг 2. Запишите сайт на видео
Включите запись экрана и медленно прокрутите страницу сверху вниз. Я использовал Bandicam (бесплатно). Запишите анимацию, этажи, кнопки, подвал и т. п. Codex увидит не только дизайн, но и то, как двигаются элементы.
Шаг 3. Подготовьте проект
Создайте пустую папку на ПК. Подключите ее в Codex через раздел “Проекты”.
Выберите GPT-5.6 Sol.
Создай в папке простой одностраничный сайт. Выбери подходящий современный стек сам. Подготовь проект к локальному запуску, но пока не работай над дизайном. Установи зависимости, запусти сайт и проверь, что он открывается без ошибок.
Шаг 4. Загрузите видео в Codex
В тот же диалог закиньте запись референса. Пусть ИИ-агент повторит сайт (в точности он не сможет это сделать):
Проанализируй видео и разработай лендинг с высокой визуальной точностью. Сохрани структуру страницы, расположение элементов, порядок разделов, анимации, переходы и взаимодействия. Копируй тексты и изображения как временный контент. Запусти сайт локально и проверь, что он работает без ошибок.
Codex изучит видео и соберет сайт с дизайном.
Шаг 5. Исправьте ошибки
Идеального результата после первого запроса не будет. Обычно ломаются: сложные анимации, отступы, отдельные визуальные блоки.
Сравните сайт с оригиналом. Сделайте скриншоты ошибок, отметьте проблемные места, отправьте Codex правки.
После этого:
Протестируй сайт: проверь точность дизайна, адаптивность, шрифты, отступы, цвета, анимации, кнопки, формы, скорость загрузки, ошибки в консоли и плавность работы. Исправь найденные проблемы и повтори проверку.
Обычно нормальный результат появляется после 3-5 итераций.
Шаг 6. Проверьте мобильную версию
В браузере нажмите F12. Посмотрите сайт на экранах смартфона и планшета. Проверьте нет ли ошибок в дизайне, не тормозит ли сайт.
Проверь мобильный вид страницы на смартфонах и планшетах. Исправь ошибки адаптивности. Сохрани общий вид и анимации настольной версии. После правок кратко перечисли, что было сломано и что ты изменил.
Шаг 7. Переделайте сайт под свой бизнес
Когда структура и анимации заработают, замените чужой контент на свой.
Загрузите логотип, тексты и фотографии (или попросите агента создать с нуля).
Замени тему сайта на [ваша тема]. Измени тексты, изображения, логотип, фавикон, отзывы, цвета и коммерческие элементы. Не меняй текущую структуру страницы. Полностью адаптируй сайт под новый бизнес.
Шаг 8. Опубликуйте сайт
Купите обычный хостинг и домен (по цене 400-600 руб в месяц). Я использую Hostland. Передайте Codex данные FTP. Пусть он соберет рабочую версию, загрузит файлы и проверит сайт.
Как использовать модели:
— GPT-5.6 Sol: для сложных задач (архитектура проекта, дизайн, анимации)
— GPT-5.6 Terra: переделка разделов, тексты, ошибки
— GPT-5.6 Luna: мелкие правки.
Получить идеалити-сайт одним запросом не получится. Соберите черновик, исправьте ошибки, проверьте мобилку. Потом адаптируйте проект под свой бизнес.
Мои избранные подборки и гайды
Я не программист, но за один вечер собрал два рабочих сайта: приложение для тренировок и интернет-магазин пахлавы.
На разработку одной версии ушло около четырех часов. Я говорил что делать, ИИ-агент писал код. В качестве примера взял структуру реального сайта из интернета. Затем агент изменил тематику под новый бизнес.
Хороший сайт появляется после 3-5 итераций правок.
То есть да, придется попотеть.
Теперь пошагово.
Полный гайд: https://inclient.ru/codex-site/.
Что потребуется:
— платная подписка ChatGPT (тариф Plus или Pro)
— приложение Codex для компьютеров
— пример сайта из интернета (я покажу где взять)
— промты для генерации и тестирования сайта (скачайте здесь).
Шаг 1. Найдите сайт для примера
Откройте Awwwards, Framer, Webflow. Выберите сайт с хорошей структурой и дизайном. Покупать шаблон не нужно. Сайт понадобится как пример визуала.
Позже вы замените тексты, изображения, цвета, логотип.
Шаг 2. Запишите сайт на видео
Включите запись экрана и медленно прокрутите страницу сверху вниз. Я использовал Bandicam (бесплатно). Запишите анимацию, этажи, кнопки, подвал и т. п. Codex увидит не только дизайн, но и то, как двигаются элементы.
Шаг 3. Подготовьте проект
Создайте пустую папку на ПК. Подключите ее в Codex через раздел “Проекты”.
Выберите GPT-5.6 Sol.
Создай в папке простой одностраничный сайт. Выбери подходящий современный стек сам. Подготовь проект к локальному запуску, но пока не работай над дизайном. Установи зависимости, запусти сайт и проверь, что он открывается без ошибок.
Шаг 4. Загрузите видео в Codex
В тот же диалог закиньте запись референса. Пусть ИИ-агент повторит сайт (в точности он не сможет это сделать):
Проанализируй видео и разработай лендинг с высокой визуальной точностью. Сохрани структуру страницы, расположение элементов, порядок разделов, анимации, переходы и взаимодействия. Копируй тексты и изображения как временный контент. Запусти сайт локально и проверь, что он работает без ошибок.
Codex изучит видео и соберет сайт с дизайном.
Шаг 5. Исправьте ошибки
Идеального результата после первого запроса не будет. Обычно ломаются: сложные анимации, отступы, отдельные визуальные блоки.
Сравните сайт с оригиналом. Сделайте скриншоты ошибок, отметьте проблемные места, отправьте Codex правки.
После этого:
Протестируй сайт: проверь точность дизайна, адаптивность, шрифты, отступы, цвета, анимации, кнопки, формы, скорость загрузки, ошибки в консоли и плавность работы. Исправь найденные проблемы и повтори проверку.
Обычно нормальный результат появляется после 3-5 итераций.
Шаг 6. Проверьте мобильную версию
В браузере нажмите F12. Посмотрите сайт на экранах смартфона и планшета. Проверьте нет ли ошибок в дизайне, не тормозит ли сайт.
Проверь мобильный вид страницы на смартфонах и планшетах. Исправь ошибки адаптивности. Сохрани общий вид и анимации настольной версии. После правок кратко перечисли, что было сломано и что ты изменил.
Шаг 7. Переделайте сайт под свой бизнес
Когда структура и анимации заработают, замените чужой контент на свой.
Загрузите логотип, тексты и фотографии (или попросите агента создать с нуля).
Замени тему сайта на [ваша тема]. Измени тексты, изображения, логотип, фавикон, отзывы, цвета и коммерческие элементы. Не меняй текущую структуру страницы. Полностью адаптируй сайт под новый бизнес.
Шаг 8. Опубликуйте сайт
Купите обычный хостинг и домен (по цене 400-600 руб в месяц). Я использую Hostland. Передайте Codex данные FTP. Пусть он соберет рабочую версию, загрузит файлы и проверит сайт.
Как использовать модели:
— GPT-5.6 Sol: для сложных задач (архитектура проекта, дизайн, анимации)
— GPT-5.6 Terra: переделка разделов, тексты, ошибки
— GPT-5.6 Luna: мелкие правки.
Получить идеалити-сайт одним запросом не получится. Соберите черновик, исправьте ошибки, проверьте мобилку. Потом адаптируйте проект под свой бизнес.
Мои избранные подборки и гайды