Что понадобится

Для работы потребуется:

компьютер на macOS или Windows;
аккаунт ChatGPT;
установленное новое приложение ChatGPT;
платная подписка ChatGPT для доступа к Sites;
идея сайта или хотя бы описание того, что он должен делать.

Важно: Codex и ChatGPT Sites не требуют отдельной оплаты через API, если вы входите через аккаунт ChatGPT и используете возможности своей подписки. API оплачивается отдельно и для этого гайда не нужен.

Часть 1. Выбор и оплата подписки

Какой тариф выбрать

ChatGPT Plus

Стоимость: $20 в месяц.

Подходит большинству пользователей, которые хотят:

пользоваться Codex;
создавать сайты через Sites;
работать с новыми моделями;
использовать ChatGPT для повседневной разработки;
создавать небольшие сайты, лендинги и прототипы.

Sites постепенно появляется у пользователей Plus. Если подписка уже оплачена, но вкладки пока нет, вероятнее всего, функция ещё не активировалась на аккаунте.

ChatGPT Pro

Доступны два тарифа:

Pro за $100 в месяц: примерно в 5 раз больше использования Codex, чем в Plus;
Pro за $200 в месяц: примерно в 20 раз больше использования Codex, чем в Plus.

Pro нужен тем, кто много работает с крупными проектами, запускает длительные задачи и регулярно упирается в лимиты Plus. Возможности тарифов в основном одинаковые, разница прежде всего в объёме доступного использования.

Что выбрать новичку

Начните с ChatGPT Plus за $20.

Переходить на Pro имеет смысл только после того, как вы действительно начали регулярно упираться в лимиты. Покупать тариф за $200 заранее ради ощущения технологического превосходства необязательно.

Как оплатить ChatGPT Plus

Откройте ChatGPT в браузере.
Войдите в свой аккаунт.
Нажмите на иконку профиля.
Выберите Upgrade Plan или Обновить план.
Нажмите Get Plus.
Введите данные банковской карты.
Подтвердите оплату.

Подписка оплачивается ежемесячно и автоматически продлевается. Отменить её можно в настройках аккаунта.

Где управлять подпиской

Откройте:

Профиль → Settings → Account → Manage subscription

В этом разделе можно:

посмотреть текущий тариф;
изменить тариф;
открыть счета;
поменять способ оплаты;
отменить подписку.

Если деньги списались, но Plus не появился

Проверьте, что вы вошли тем же способом, которым оформляли подписку:

через Google;
через Apple;
через Microsoft;
через почту и пароль.

Например, аккаунт, созданный через Google, и аккаунт с тем же адресом, но созданный через обычный вход по почте, иногда могут восприниматься как разные учётные записи. Особенно бодро эта путаница работает с функцией Apple «Скрыть e-mail».

Часть 2. Установка нового приложения ChatGPT

Для Sites нужно именно новое приложение ChatGPT, в котором появились режимы Work и Codex.

Старое приложение может отображаться как ChatGPT Classic. В нём Sites недоступен.

Установка на macOS

Откройте сайт ChatGPT.
Найдите раздел загрузки приложения.
Скачайте новую версию ChatGPT для macOS.
Откройте загруженный файл.
Перенесите ChatGPT в папку Applications.
Запустите приложение.
Войдите в тот же аккаунт, на котором оплачена подписка.

Если у вас уже было установлено старое приложение ChatGPT или приложение Codex, обновите его через уведомление внутри программы либо установите новую версию вручную.

После обновления старое приложение иногда остаётся на компьютере под названием ChatGPT Classic. Его можно удалить, когда убедитесь, что новое приложение работает.

Установка на Windows

Откройте страницу загрузки ChatGPT.
Скачайте версию для Windows.
Запустите установочный файл.
Завершите установку.
Войдите в аккаунт ChatGPT.

Как проверить, что установлено новое приложение

В новом приложении должны быть доступны режимы:

Chat;
Work;
Codex.

В зависимости от тарифа и этапа обновления интерфейс может немного отличаться.

Часть 3. Что такое Codex

Codex — это AI-агент OpenAI для разработки. Он может:

читать структуру проекта;
создавать и изменять файлы;
писать код;
запускать команды;
находить ошибки;
проводить ревью;
устанавливать зависимости;
запускать тесты;
работать сразу с несколькими задачами.

В отличие от обычного чата, Codex получает доступ к папке проекта и может выполнять действия внутри неё.

Часть 4. Как запустить Codex в приложении

Создание нового проекта

Откройте новое приложение ChatGPT.
Переключитесь в режим Codex.
Нажмите создание нового проекта.
Выберите папку на компьютере.

Можно выбрать:

пустую папку для нового проекта;
папку существующего сайта;
локальный Git-репозиторий.

Разрешите приложению доступ к папке.
Напишите первую задачу.

Пример:

Создай современный одностраничный сайт для AI-сервиса. Используй React, TypeScript и Tailwind CSS. Сначала составь план и структуру страниц. Не начинай писать код, пока не покажешь план.

Создание файла AGENTS.md

После подключения проекта отправьте команду:

/init

Codex создаст файл AGENTS.md. В нём можно зафиксировать:

структуру проекта;
используемый стек;
правила написания кода;
команды запуска;
запреты;
требования к дизайну;
требования к безопасности.

Этот файл помогает Codex не изобретать новый проект и новый стиль программирования при каждом запросе. Потому что даже искусственному интеллекту иногда приходится напоминать, что переписывать всё с нуля не считается рефакторингом.

Часть 5. Установка Codex CLI

Этот раздел нужен тем, кто хочет запускать Codex через терминал.

Для создания сайтов через вкладку Sites CLI устанавливать необязательно. Новичкам удобнее начинать с приложения.

Установка на macOS и Linux

Откройте терминал и выполните:

curl -fsSL https://chatgpt.com/codex/install.sh | sh

После установки перейдите в папку проекта:

cd путь-к-проекту

Запустите Codex:

codex

При первом запуске выберите:

Sign in with ChatGPT

Откроется браузер. Войдите в аккаунт, на котором оплачена подписка ChatGPT.

Альтернативная установка через npm

Если на компьютере уже установлен Node.js:

npm install -g @openai/codex

Проверить установку:

codex --version

Запустить Codex:

codex

Обновление Codex

При установке через официальный установщик повторно выполните:

curl -fsSL https://chatgpt.com/codex/install.sh | sh

При установке через npm:

npm install -g @openai/codex@latest

Часть 6. Основные команды Codex

Внутри Codex можно использовать команды:

/init

Создать файл AGENTS.md с инструкциями проекта.

/model

Выбрать модель и уровень рассуждения.

/status

Посмотреть текущую модель, папку и параметры сессии.

/permissions

Настроить, какие действия Codex может выполнять автоматически.

/review

Проверить внесённые изменения и найти потенциальные ошибки.

Безопасные настройки для новичка

На первых проектах не предоставляйте Codex максимальные разрешения без подтверждения.

Лучше разрешить:

чтение файлов;
изменение файлов проекта;
запуск безопасных локальных команд;
установку зависимостей после подтверждения.

Проверяйте запросы на:

удаление большого количества файлов;
изменение системных настроек;
работу с ключами и паролями;
отправку данных в интернет;
выполнение непонятных команд с правами администратора.

Перед крупной задачей создавайте Git-коммит:

git add .
git commit -m "checkpoint before Codex task"

Если Codex решит проявить творческую инициативу там, где её никто не просил, изменения можно будет откатить.

Часть 7. Что такое ChatGPT Sites

ChatGPT Sites — это встроенный конструктор интерактивных сайтов и небольших приложений.

Через Sites можно создавать:

лендинги;
портфолио;
презентационные сайты;
дашборды;
трекеры;
внутренние панели;
каталоги;
отчёты;
небольшие интерактивные приложения;
прототипы продуктов.

ChatGPT создаёт сайт, показывает приватное превью, принимает изменения и затем публикует результат по готовой ссылке.

Где доступен Sites

На момент написания гайда Sites находится в стадии публичной беты.

Функция доступна на платных тарифах, кроме Free и Go. Сначала доступ получают Pro, Pro Lite, Enterprise и Edu, затем функция постепенно появляется у Plus и Business.

Sites на старте недоступен:

в странах Европейской экономической зоны;
в Швейцарии;
в Великобритании.

Если вы находитесь в поддерживаемом регионе, но вкладки нет, функция, скорее всего, ещё не дошла до аккаунта.

Часть 8. Как создать сайт через вкладку Sites

Способ 1. Через новое приложение ChatGPT

Откройте новое приложение ChatGPT.
Выберите режим Work или Codex.
Создайте новый чат.
Напишите, что хотите создать сайт.
Укажите в запросе слово website или добавьте обращение:

@Sites

Опишите задачу.
Прикрепите материалы, если они есть:

логотип;
фотографии;
тексты;
таблицы;
документы;
ссылки;
референсы дизайна.

Дождитесь создания приватного превью.
Проверьте сайт.
Попросите внести изменения.
После завершения нажмите публикацию или попросите ChatGPT опубликовать сайт.

Официальный процесс выглядит так: описание задачи → генерация сайта → приватное превью → доработка → публикация.

Способ 2. Через браузер

Откройте ChatGPT.
Выберите режим Work.
Создайте новый запрос.
Напишите:

@Sites Создай сайт...

Добавьте описание и материалы.
Проверьте превью.
Отправляйте правки обычными сообщениями.
Опубликуйте готовую версию.

Часть 9. Первый промпт для создания сайта

Не пишите:

Сделай мне красивый сайт.

Слово «красивый» не является техническим заданием. Для одного человека это Apple, для другого анимация каждого заголовка и три неоновых градиента поверх фотографии небоскрёба.

Используйте следующую структуру.

Универсальный промпт

@Sites

Создай современный адаптивный сайт.

Цель сайта:
[опишите, зачем нужен сайт]

Целевая аудитория:
[кто будет пользоваться сайтом]

Основное действие пользователя:
[оставить заявку, зарегистрироваться, купить, посмотреть портфолио]

Страницы:
1. Главная
2. О продукте
3. Тарифы
4. FAQ
5. Контакты

Структура главной страницы:
1. Первый экран с сильным заголовком и кнопкой
2. Краткое объяснение продукта
3. Основные преимущества
4. Как это работает
5. Примеры использования
6. Тарифы
7. Ответы на вопросы
8. Финальный призыв к действию

Стиль:
Минималистичный, современный и серьёзный.
Используй белый фон, чёрный текст и один акцентный цвет.
Не используй лишние градиенты, стеклянные карточки и чрезмерные анимации.
Сайт должен выглядеть как настоящий технологический продукт, а не шаблон AI-конструктора.

Технические требования:
- адаптация под телефон и компьютер;
- понятная навигация;
- высокая контрастность текста;
- быстрые и аккуратные анимации;
- рабочие кнопки;
- понятные состояния наведения;
- отсутствие горизонтального скролла;
- единая система отступов;
- доступная типографика.

Сначала создай общую структуру и приватное превью.
Не публикуй сайт, пока я не проверю результат.

Часть 10. Пример промпта для лендинга AI-сервиса

@Sites

Создай одностраничный сайт для AI-сервиса, который помогает автоматически превращать длинные видео в короткие вертикальные ролики.

Целевая аудитория:
Блогеры, эксперты, небольшие агентства и владельцы бизнеса.

Основное действие:
Пользователь должен понять ценность продукта и нажать кнопку «Попробовать бесплатно».

Структура:
1. Первый экран
2. Демонстрация работы продукта
3. Три основных преимущества
4. Как работает сервис
5. Примеры готовых роликов
6. Тарифы
7. FAQ
8. Финальный CTA

Тексты должны быть короткими, понятными и без корпоративных штампов.

Дизайн:
Серьёзный технологичный минимализм.
Светлый фон, чёрная типографика, оранжевый акцент.
Крупные заголовки.
Карточки с небольшим скруглением.
Много свободного пространства.
Не используй чрезмерное количество градиентов и декоративных элементов.

Добавь:
- адаптивную мобильную версию;
- интерактивный пример загрузки видео;
- переключатель тарифов;
- рабочие состояния кнопок;
- плавные, но ненавязчивые анимации.

Сначала создай приватное превью. Не публикуй сайт автоматически.

Часть 11. Как правильно вносить изменения

После первой генерации не просите переделать весь сайт одним сообщением.

Исправляйте его по частям.

Пример изменения первого экрана

Измени только первый экран.

Сделай заголовок короче и конкретнее.
Уменьши высоту блока.
Добавь справа реалистичный интерфейс продукта.
Основную кнопку сделай заметнее.
Остальные секции пока не меняй.

Пример изменения мобильной версии

Проверь мобильную версию сайта.

Исправь:
- слишком крупные заголовки;
- маленькие отступы между секциями;
- кнопки, которые не помещаются по ширине;
- горизонтальный скролл;
- карточки, которые выглядят слишком узкими.

Десктопную версию не меняй без необходимости.

Пример проверки качества

Проведи полное ревью сайта перед публикацией.

Проверь:
- адаптивность;
- визуальную иерархию;
- контрастность;
- орфографию;
- работу кнопок;
- ссылки;
- формы;
- переполнение текста;
- состояния загрузки и ошибок;
- отображение на мобильном устройстве;
- отсутствие горизонтального скролла.

Сначала перечисли найденные проблемы. Затем исправь их.

Часть 12. Публикация сайта

Когда сайт готов:

Сохраните текущую версию.
Ещё раз откройте приватное превью.
Проверьте мобильную и десктопную версии.
Нажмите Deploy или Publish.
Настройте доступ.
Скопируйте готовую ссылку.

После публикации ChatGPT создаёт production URL. Это уже рабочая ссылка, которую можно отправлять другим людям.

Важное правило обновления

Не публикуйте каждое промежуточное изменение сразу.

Сначала:

сохраните новую версию;
проверьте превью;
убедитесь, что ничего не сломалось;
только затем обновляйте опубликованный сайт.

Каждое развёртывание считается production-версией. Поэтому привычка «сейчас быстро поправлю одну кнопку» иногда заканчивается исчезновением половины главной страницы.

Часть 13. Ограничения Sites

Во время публичной беты действуют лимиты, зависящие от тарифа.

Ограничиваться могут:

количество созданных сайтов;
объём хранения;
использование опубликованных сайтов;
доступность сайта при высокой нагрузке.

Актуальный лимит отображается непосредственно в интерфейсе Sites. OpenAI предупреждает пользователя при приближении к ограничению.

Если лимит закончился, можно по-прежнему редактировать и управлять существующими сайтами, но создание новых сайтов, увеличение хранилища или публичная доступность нагруженного проекта могут быть временно ограничены.

Часть 14. Sites или обычный проект Codex

Используйте Sites, когда нужно:

быстро создать сайт без ручной настройки хостинга;
получить готовую ссылку;
сделать лендинг;
создать небольшой интерактивный сервис;
показать прототип;
собрать внутренний инструмент;
не разбираться с сервером и деплоем.

Используйте обычный проект Codex, когда нужно:

полностью контролировать исходный код;
хранить проект в GitHub;
использовать собственный сервер;
подключать сложный backend;
настраивать базы данных;
использовать собственный домен и инфраструктуру;
строить полноценный коммерческий продукт;
переносить проект между хостингами.

Практическое правило

Sites подходит для быстрого запуска и проверки идеи.

Codex-проект подходит для продукта, который вы собираетесь долго развивать и полностью контролировать.

Можно начать с Sites, проверить интерес аудитории, а затем создать полноценную версию через Codex.

Часть 15. Что делать, если вкладки Sites нет

Проверьте следующие пункты:

Установлено именно новое приложение ChatGPT, а не ChatGPT Classic.
Приложение обновлено до последней версии.
Оплачена подходящая подписка.
Вы вошли в правильный аккаунт.
Вы используете режим Work или Codex.
Ваш регион поддерживается.
Вы попробовали написать @Sites вручную.
Функция уже дошла до вашего аккаунта.

Sites разворачивается постепенно. Даже два пользователя с одинаковым тарифом могут получить доступ в разные дни.

Часть 16. Рекомендованный порядок работы

Оплатите ChatGPT Plus.
Установите новое приложение ChatGPT.
Проверьте наличие Work, Codex и Sites.
Создайте сайт через @Sites.
Сначала сформируйте структуру.
Затем настройте дизайн.
Отдельно проверьте мобильную версию.
Проведите ревью.
Сохраните финальную версию.
Опубликуйте сайт.
Для более сложного продукта создайте отдельный проект в Codex.
Добавьте AGENTS.md и Git, прежде чем начинать крупную разработку.

Краткий итог

Для создания сайта не нужно отдельно покупать API или оплачивать Codex.

В большинстве случаев достаточно:

подписки ChatGPT Plus;
нового приложения ChatGPT;
режима Work или Codex;
команды @Sites;
подробного описания сайта.

Sites позволяет быстро создать и опубликовать сайт внутри ChatGPT. Codex нужен, когда требуется полноценная работа с кодом, файлами и архитектурой проекта.