Codex с нуля

Гайд по Codex: знакомство и настройка с нуля.

Если словили блок от Claude или хотите попробовать агента OpenAI для веб-проектов — этот текст для вас. Разберём, что такое Codex от ChatGPT и почему для сборки лендингов и простых инструментов он часто сильнее обычного чата.

ChatGPT советует. Codex работает. Пока не попробуете руками — это звучит как маркетинг. Цель гайда: от «не понимаю, что это» до первого собранного проекта за вечер.

Гайд стоит читать, если вы:

• эксперт, фрилансер или специалист и хотите сами собирать лендинги, визитки и рабочие инструменты без разработчика и дизайнера;
• предприниматель, которому надоело ждать недели простую страницу и нужен быстрый MVP;
• никогда не писали код, но идей жалко;
• пробовали ChatGPT для кода и каждый раз заканчивали на «ничего не работает, не понимаю почему».

Вы не научитесь программировать здесь. Это и не нужно. Научитесь ставить задачи Codex так, чтобы получать рабочий результат — этого хватает, чтобы делать то, на что раньше уходили программист, дизайнер и неделя с большим бюджетом.

Что внутри: что такое Codex → установка и тариф → Codex в VS Code → AGENTS.md → как ставить задачи → восемь готовых сценариев с промптами.

Для регистрации и оплаты ChatGPT из РФ: Регистрация и оплата Claude / ChatGPT из РФ в 2026.

01. Что такое Codex и зачем он вам

Codex — ИИ-агент для кода от OpenAI. Слово «агент» здесь меняет всё.

Чат-бот — собеседник. Вы пишете запрос — он отвечает текстом. Скопировать, вставить, проверить, починить — руками.

Агент — исполнитель. Вы ставите задачу — он открывает файлы, пишет код, запускает программы, ловит ошибки, правит, проверяет, сохраняет. Вам остаётся посмотреть и принять работу.

Два сценария

С ChatGPT. Преподаватель английского просит «код для лендинга». Получает текст. Создаёт файл, копирует, открывает — кнопки не работают. Описывает проблему. Получает правку. Снова копирует. На третий раз получается. Полтора часа.

С Codex. «Сделай лендинг для частного преподавателя английского. Аудитория — студенты до 30. Цель — запись на пробный урок через Telegram». Codex создаёт файл, видит, что кнопки не ведут в Telegram, чинит, проверяет. Через несколько минут: «готово, открывай index.html».

Фишка: доступ к вашим файлам, запуск программ, цикл «ошибка → правка». Обычный ChatGPT этого не делает.

Где Codex силён

• лендинг, визитка, простой инструмент или приложение с нуля по описанию;
• страница под услугу, мероприятие, курс — то, за что разработчику часто платят десятки и сотни тысяч рублей;
• доработка существующего проекта, даже если вы его не писали;
• перевод форматов, рефакторинг чужого шаблона;
• документация и инструкция по запуску;
• проверка кода до публикации.

Где слабее, чем кажется

• Большие задачи без декомпозиции. «Сделай соцсеть» или «всю CRM» — плохо. Codex силён на задачу одной сессии: лендинг, визитка, калькулятор. Большое собирается кусками.
• Запутанный чужой код без документации. Сначала попросите разобраться и описать, потом менять.
• Творчество без критериев. «Сделай красиво» — не задача. Чем точнее описание, тем точнее результат.

Где пользоваться

Один агент, несколько поверхностей. Подписка одна, лимиты общие.

• VS Code — расширение в редакторе. Открыли папку, панель Codex сбоку. Лучший старт для новичка — с него и идём.
• Codex CLI — терминал. В этом гайде не разбираем.
• Облако — chatgpt.com/codex. Удобно для длинных задач и телефона. К нему — в конце.

02. Что установить и куда залогиниться

Нужны три вещи: аккаунт ChatGPT с доступом к Codex, VS Code, расширение Codex.

Шаг 1. Аккаунт ChatGPT

chatgpt.com — email и, часто, зарубежный номер. Из РФ: гайд по регистрации и оплате.

Шаг 2. Тариф

Codex входит в подписку ChatGPT, отдельно не покупается. Расклад меняется — сверяйте chatgpt.com/pricing. Ориентир на 2026:

• Free / Go — иногда дают потрогать Codex с жёсткими лимитами.
• Plus (~$20/мес) — рабочий минимум для большинства: пара лендингов в неделю + правки.
• Pro (более дорогие уровни) — имеет смысл, только если каждый день упираетесь в лимиты Plus.
• Business — команды.

Совет: начните с Plus, поработайте неделю. Нужен Pro или нет — станет ясно на практике. Перейти можно в настройках.

Шаг 3. VS Code

Бесплатный редактор: code.visualstudio.com. Установите и запустите. Тёмный экран и куча кнопок — нормально. Для старта нужны 3–4 элемента.

03. Codex в VS Code

Путь: открыли папку → поговорили с Codex → увидели, как он создаёт и меняет файлы.

Шаг 1. Расширение

1. Слева — иконка Extensions (четыре квадрата).
2. Поиск: Codex.
3. Codex — OpenAI’s coding agent от издателя OpenAI (официальное).
4. Install.

Шаг 2. Вход

Иконка Codex справа → Sign in with ChatGPT → браузер, разрешите доступ. Лимиты подтянутся из плана ChatGPT. Отдельные API-ключи обычно не нужны.

Шаг 3. Папка проекта

Создайте папку, например my-first-landing на рабочем столе. В VS Code: File → Open Folder.

Шаг 4. Режимы прав

Под полем ввода — переключатель режимов (названия в интерфейсе могут чуть отличаться):

1. Default / по умолчанию — читает код, перед изменениями и командами спрашивает Approve / Reject. Безопасно для незнакомого репо и важного кода.
2. Auto-review / баланс — меньше ручных кликов, часть действий проходит после внутренней проверки. Обычная разработка.
3. Full access — полная свобода. Не включайте первую неделю.

Шаг 5. Первая задача

В поле Codex:

Создай одностраничный лендинг для моего онлайн-курса по рисованию.

Аудитория — взрослые новички 25–45 лет, которые всегда хотели рисовать,
но не решались начать.

Нужно (сверху вниз):
— первый экран: заголовок «Научись рисовать с нуля за 2 месяца»,
  подзаголовок про подход, кнопка «Записаться»
— блок «О курсе» — 3–4 предложения: пошагово, без давления, с поддержкой
— блок «3 преимущества» — гибкий график, обратная связь, готовые материалы
— блок «Для кого» — три типа учеников
— блок «Отзывы» — 3 карточки с придуманными именами
— блок «О преподавателе» — фото-заглушка, имя, опыт
— форма записи: имя, email, телефон
— футер с контактами

Стиль: лёгкий, вдохновляющий, светлый.
Главный цвет — мягкий сиреневый.
Шрифт без засечек. Адаптив под мобильные обязательно.

HTML, CSS и немного JavaScript. Один файл index.html, всё внутри.

Модель возьмите актуальную сильную из списка (в гайдах часто ориентируются на GPT‑5.x Medium / выше — смотрите интерфейс).

Отправьте. Codex покажет план, начнёт файлы, попросит подтверждения — жмите Approve. Через пару минут откройте index.html двойным кликом — лендинг в браузере.

Что заметите

1. ИИ не «помог вставить код» — сделал и проверил.
2. Тот же лендинг у подрядчика часто стоит десятки тысяч рублей; у вас — минуты и подписка.
3. Замените нишу («рисование» → «английский» / «йога» / «коуч») — структура промпта та же.

Три ошибки первого дня

1. Расплывчато. «Красивый сайт» → среднее и час правок. Блоки, тексты, стиль, цвета.
2. Без бэкапа. Codex меняет файлы на диске. Перед большой задачей скопируйте папку _backup_v1. Git — потом.
3. Новый чат при любой ошибке. Внутри чата есть контекст: «Заголовок ок, описание сократи вдвое». Новый чат — если контекст реально раздут.

Если что-то сломалось

• Много Approve — норма для Default. На рутине можно Approve all; Full Access — не в первую неделю.
• Криво выглядит — не с нуля: «Шрифт мелкий ×1.5. На мобильных галерея в два столбца».
• «Не находит файл» — чаще всего не открыта папка (File → Open Folder).
• Нет Sign in — перезапуск VS Code, проверка аккаунта в настройках расширения.
• «Нет доступа к интернету» — спросите Codex: «Зачем тебе нужен доступ?» Разрешайте, только если понятно зачем.

Глобально: любая ошибка → спросите Codex, что это и как исправить.

04. AGENTS.md — инструкция для агента

Если пропустите только эту главу — остальное даст меньше пользы. AGENTS.md превращает Codex из «умного помощника» в агента с вашими правилами.

Без файла vs с файлом

Без: отвечает по-английски, в следующий раз снова; называет файлы как хочет; ставит лишние библиотеки; переписывает спокойный тон в «продающий». Каждый раз одни и те же правила заново.

С: правила один раз. Codex читает их в начале сессии.

Технически — текстовый файл. Читается автоматически до первого сообщения.

Где лежит

• Глобальный — в ~/.codex/ на машине. На все проекты.
• Локальный — в корне конкретного проекта. Только для него.

Если есть оба — сначала глобальные, потом локальные дополняют или перекрывают.

Глобальный — один раз

Попросите Codex:

Добавь глобальный AGENTS.md со следующими правилами:

# Глобальные правила работы

## Стиль ответов
— Отвечай мне по-русски, в коде комментарии тоже на русском
— Имена файлов и переменных — на английском, маленькими буквами
— Если задача неясна — задай 1–2 уточняющих вопроса, не выдумывай
— Не извиняйся, не благодари — просто работай

## Безопасность
— Не удаляй мои файлы без явного подтверждения
— Не устанавливай новые библиотеки без объяснения, зачем они
— Не лезь в системные настройки компьютера

## В конце задачи
— Кратко: что сделал и какие файлы поменял
— Если есть сомнения — скажи, не делай вид, что всё идеально
— Если не получилось — честно признайся

Локальный — под проект

Лендинг услуги:

# AGENTS.md — лендинг моей услуги

## Что это за проект
Одностраничный лендинг для записи на пробный урок английского.
Аудитория — студенты до 30 лет.

## Команды
— Открыть страницу — двойной клик по index.html
— Без npm / python и лишних запусков

## Стиль
— Главный цвет — глубокий синий (#1e3a8a), акцент — мягкий оранжевый (#fb923c)
— Шрифт без засечек, воздух между строк
— Адаптив под мобильные во всех правках
— Тон — дружеский, на «ты», без продающих штампов

## Что не трогать
— Тексты в «Обо мне» — не переписывай
— Блок с ценами не убирай
— Все CTA только в Telegram (@my_username), без формы на сайте

Калькулятор:

# AGENTS.md — калькулятор стоимости

## Что это за проект
Калькулятор: пользователь выбирает параметры — получает примерную стоимость.

## Стиль
— Минимализм, белый фон, спокойные тёмные шрифты
— Одна кнопка действия
— Большие поля под телефон

## Логика
— Расчёты в браузере на JavaScript
— Без внешних API
— Цены и параметры — в отдельном объекте в начале файла

Чего в AGENTS.md не должно быть

• длинных манифестов «следуй лучшим практикам»;
• паролей, API-ключей, секретов;
• размытых формулировок.

Хороший файл — один экран коротких пунктов. Растёт так: каждый раз, когда Codex ошибся в привычке — добавьте одну строку.

05. Как ставить задачи

Качество результата примерно на 80% зависит от формулировки. Полминуты на запрос экономят час правок.

Формула

1. Что собрать — не «сайт», а «одностраничная визитка частного психолога из Москвы, онлайн».
2. Структура и тексты — какие блоки и что в них.
3. Стиль и ограничения — цвета, технологии («HTML+CSS в одном файле, без библиотек»).
4. Критерий готовности — «открой файл, проверь кнопку “Записаться” на мобильной ширине и переход в Telegram».

Плохо vs хорошо

Плохо:

Сделай мне сайт-визитку.

Хорошо:

Собери одностраничный сайт-визитку. Я частный психолог, работаю онлайн по всей России.

Структура (сверху вниз):
— шапка: имя «Анна Соколова», подзаголовок «психолог, КПТ»
— «Подход» — три предложения: КПТ, тревога и выгорание, без эзотерики
— «С чем я работаю» — 5 запросов одной строкой
— «Как проходит работа» — 3 шага
— «О себе» — фото-заглушка, образование, опыт
— «Стоимость» — цена и формат оплаты
— контакты: Telegram, email; кнопка «Записаться» → Telegram

Стиль: спокойный, светлый, без продающих штампов.
Цвет — приглушённый мятный. Шрифт лёгкий, с воздухом. Адаптив.

Один файл index.html, стили внутри. Без сторонних библиотек.
Когда соберёшь — открой в браузере и проверь кнопку на мобильной ширине.

Три правила

1. Бэкап папки до большой задачи.
2. Не новый чат — уточнения в том же.
3. Просите самопроверку: «открой файл и убедись, что нет ошибок / что мобильная вёрстка ок».

Референс

Хочу лендинг в стиле, как на этом сайте: [ссылка].

Меня цепляет:
— чёрно-белая палитра с одним акцентом
— крупная типографика на первом экране
— много воздуха между блоками

Сделай лендинг онлайн-школы английского в этом стиле.
Содержание: [блоки и тексты].

06. Что собрать прямо сейчас — восемь сценариев

Большинство — один index.html, открывается двойным кликом. 1–3 часа с чистого листа.

1. Лендинг услуги или курса

Ты — опытный веб-дизайнер. Сделай одностраничный лендинг для [услуга или курс].

Аудитория — [возраст, потребности].

Структура:
— первый экран: ценностный заголовок, подзаголовок, кнопка «записаться»
— «о курсе» / «о подходе» — 3–4 предложения
— «3 преимущества»
— «для кого» — три типа клиентов
— «отзывы» — 3 карточки
— форма: имя, телефон, мессенджер
— футер

Стиль: [лёгкий / строгий / тёплый]. Цвета: [2–3]. Адаптив.
Один index.html. После сборки проверь мобильную читаемость.

2. Визитка эксперта

Сайт-визитка. Я — [коуч / репетитор / психолог / маркетолог / эксперт].
Цель — чтобы клиент написал в Telegram и записался.

Структура: шапка → обо мне → с чем работаю (5–7 запросов) → как работаем (3 шага)
→ отзывы → стоимость → контакты (все CTA в Telegram).

Стиль: [спокойный / энергичный / экспертный]. Цвет — [укажи]. Адаптив.
Один index.html.

3. Калькулятор стоимости

Калькулятор для [профессия].

Логика: тип услуги (3–4 варианта) → объём → доп. опции → «рассчитать»
→ крупная сумма → кнопка «обсудить» в Telegram.
Цены — в объекте в начале файла.
Стиль чистый. Один index.html. Проверь разные комбинации выбора.

4. Форма-бриф

Форма-бриф перед стартом работы. Я — [профессия].
Вопросы: [5–8 ключевых]. К каждому — подсказка.
После заполнения — блок текста для копирования в Telegram.
Дизайн аккуратный. Адаптив. Один index.html.

5. Страница вебинара / мероприятия

Лендинг сбора заявок на бесплатный вебинар «[тема]».
Аудитория — [кто].

Структура: первый экран (тема, дата, CTA) → что узнаете (3–4) → о спикере
→ форма (имя, email) → бонусы после → мягкая «места ограничены».
Один index.html.

6. Мини-CRM / трекер заявок

Трекер заявок в браузере.
Форма: имя, телефон, источник, статус (новый / в работе / закрыт), комментарий.
Список карточками, смена статуса кликом, фильтр, статистика сверху,
удаление с «уверены?». Данные в localStorage.
Один index.html.

7. Планер недели

Планер: 7 колонок, задачи, галочка «выполнено», счётчик за неделю,
«начать новую неделю» с подтверждением, localStorage.
Минимализм, пастель. Адаптив. Один index.html.

8. Доработка чужого шаблона

Я открыл проект — [сайт / лендинг], скачанный / от фрилансера.

Сначала изучи структуру и кратко расскажи:
— что делает проект
— из каких частей состоит
— как запустить
— есть ли странные места

Пока ничего не правь.

Потом точечные правки: город, цвета, убрать отзывы, добавить FAQ.

Ещё куда пригодится

тексты блоков лендинга; инструкция для клиента; «объясни этот файл на пальцах»; скрипт разбора CSV контактов; перевод HTML ↔ конструктор; два A/B-варианта первого экрана.

07. Куда расти

Когда VS Code станет привычным:

• Облако chatgpt.com/codex — длинные задачи, телефон, несколько задач параллельно (часто через GitHub).
• CLI — npm install -g @openai/codex, затем codex в папке. Лимиты те же. Большинству на старте не нужно.

Знаки, что базы мало: 3–5 проектов за 30–60 минут; хочется раскладывать по папкам и переиспользовать куски; параллельные задачи; базы данных, почта, платежи, публикация в интернет.

Что вы теперь умеете

Если сделали хотя бы первую задачу, вы уже:

• ставите Codex в VS Code и логинитесь через ChatGPT;
• формулируете задачу до рабочего результата;
• настраиваете AGENTS.md;
• делаете бэкапы;
• понимаете, что отдавать агенту, а что — специалисту;
• имеете набор промптов на ближайший месяц практики.

Что дальше

Codex — инструмент. Один и тот же агент у новичка и у человека с системой (AGENTS.md, чёткие задачи, свои сценарии) выдаёт разный результат.

Дальше по пути Pattern Automation:

• AI Club — сообщество и разборы
• Claude для новичков — если параллельно работаете в Claude
• Оплата ChatGPT / Claude из РФ
• Telegram — вопросы по доступу и внедрению

Написать в Telegram →