🍰 Как создать сайт с помощью Codex и GPT-5.6 - пошаговый гайд для новичка — 29 июля 2026 г. в 14:20:42.095
Вложенный файл
Откройте файл в новой вкладке
🍰 Как создать сайт с помощью 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: мелкие правки. Получить идеалити-сайт одним запросом не получится. Соберите черновик, исправьте ошибки, проверьте мобилку. Потом адаптируйте проект под свой бизнес. Мои избранные подборки и гайды