Codex для новичков

Если вы словили блок от Claude или решили попробовать новую нейросеть для создания веб-разработок — этот гайд специально для вас.

Сегодня мы с вами разберемся, что такое Codex от ChatGPT и почему он ничем не уступает Claude Code.

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

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

Ты не научишься программировать в этом гайде. Это и не нужно. Ты научишься ставить задачи Codex так, чтобы получать готовый рабочий результат и этого достаточно, чтобы делать вещи, которые раньше требовали программиста + дизайнера и недели работы с огромными вложениями.

Что внутри:

Сначала разберёмся, что такое Codex и почему он принципиально другой инструмент. Потом, что нужно установить, как зарегистрироваться и какой тариф взять под твой сценарий. Затем самое важное: AGENTS.md (это что-то вроде инструкции для Codex), как ставить задачи, и три простых правила безопасности. В финальной части разберем восемь готовых сценариев с промптами, которые можно копировать прямо в Codex , чтобы собрать первый проект сегодня же.

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

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

Чат-бот — это собеседник. Ты пишешь запрос — он отвечает текстом. Что делать дальше с этим текстом, твоя проблема. Скопировать, вставить в нужное место, проверить, исправить, заставить работать — всё руками.

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

Сравни два сценария.

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

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

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

Где Codex реально мощный

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

Будем честны. Это важно понять до того, как ты разочаруешься на третий день.

Если держишь это в голове — разочарований не будет.

Как пользоваться Codex?

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

В этом гайде идём по самому понятному пути — расширение для VS Code. Это то, с чего стоит начать. Остальное освоишь, когда захочешь.

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

Чтобы Codex заработал, нужны три вещи: аккаунт ChatGPT с подпиской, редактор кода VS Code и расширение Codex внутри него. Идём по порядку.

Шаг 1. Создай аккаунт ChatGPT

Зайди на chatgpt.com и зарегистрируйся. Понадобится email и зарубежный номер телефона.

Для тех, кто из РФ, у нас есть отдельный гайд (https://airoomclub.ru/guides/reg-and-pay-ai) — как корректно зарегистрироваться и оплатить подписку, чтобы потом не было проблем. Там всё подробно описано.

Шаг 2. Выбери тариф под свой сценарий

Codex входит в подписку ChatGPT, отдельно его не покупают. На апрель 2026 расклад такой.

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

Актуальные цены и лимиты можно посмотреть тут: https://chatgpt.com/ru-RU/pricing/

Шаг 3. Поставь VS Code

VS Code — это бесплатный редактор кода. Программа, в которой ты будешь работать с файлами своего проекта. Скачай её с code.visualstudio.com, установи и запусти. Если уже стоит — пропусти шаг.

Когда откроешь VS Code в первый раз — не пугайся. Тёмный экран, странная панель, куча кнопок. Тебе из всего этого понадобится буквально 3-4 элемента, мы их сейчас разберём.

03. Codex в VS Code — твой главный инструмент

Самый простой путь:

→ открыл папку с проектом;

→ поговорил с Codex прямо в редакторе;

→ увидел, как он создаёт и меняет файлы.

Шаг 1. Поставь расширение Codex

В VS Code слева есть вертикальная панель с иконками.

Нажми на иконку Extensions (четыре квадратика).

В поиске введи Codex.

Выбери расширение Codex — OpenAI's coding agent от издателя OpenAI. Важно — ставь именно официальное.

Нажми Install.

Шаг 2. Войди в свой аккаунт ChatGPT

После установки в правой панели появится иконка Codex.

Нажми на неё. В открывшемся окне — кнопка Sign in with ChatGPT.

Откроется браузер, авторизуйся в свой аккаунт, разреши доступ.

После этого панель Codex активируется. Лимиты подтянутся из твоего ChatGPT-плана сами — никаких дополнительных ключей вводить не нужно.

Шаг 3. Открой папку для проекта

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

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

Шаг 4. Не пугайся настроек режимов

Под полем ввода в панели Codex есть переключатель из трёх режимов. Выглядит сложно, но запомни простое.

1. Default permissions (по умолчанию)

Что делает:

Читает код, предлагает изменения

Перед каждым действием (запуск команды, изменение файлов) — спрашивает подтверждение

Поведение:

безопасный режим

много всплывающих “Approve / Reject”

Когда использовать:

незнакомый репозиторий

работа с продом / важным кодом

По сути: “ничего не делает без тебя”

2. Auto-review

Что делает:

сам выполняет действия, но через внутреннюю проверку (условно “второй агент проверяет”)

меньше спрашивает вручную

Поведение:

баланс между скоростью и безопасностью

многие действия проходят автоматически, но не все

Когда использовать:

обычная разработка

когда хочешь меньше кликов, но не полный риск

Это компромиссный режим: быстрее, чем default, но не полностью автономный

3. Full access

Полная свобода без вопросов. Не лезь сюда, пока не освоишься.

Шаг 5. Поставь первую задачу

Начнем с простого, создадим лендинг для онлайн-курса. В поле Codex напиши:

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

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

Нужно (сверху вниз):

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

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

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

Я выбрал модель GPT 5.5 - Medium

Нажми отправить. Codex покажет план, начнёт создавать файлы, попросит подтверждения на каждом шаге. Жми Approve (одобрить).

Через пару минут в твоей папке появится index.html. Открой его двойным кликом (из папки на рабочем столе) — лендинг откроется в браузере.

Что ты заметишь после первой задачи

Несколько вещей, которые удивляют новичков.

Первое: ИИ не «помог тебе сделать», а сделал. Между «дал готовый код, который ты сам вставлял» и «открыл файл, написал, проверил, исправил» — огромная разница. После Codex возвращаться к ChatGPT в режиме чата для подобных задач уже не хочется.

Второе: ты сэкономил реальные деньги. Этот лендинг у разработчика стоил бы 50-150 тысяч рублей. У дизайнера-фрилансера — от 30 тысяч. Тебе он обошёлся в 20 минут и подписку $20.

Третье: ты можешь повторить это для любой ниши. Замени «онлайн-курс по рисованию» на «школу английского», «курс инвестирования», «студию йоги», «частного коуча» — структура промпта та же. Понял один раз, как ставить задачу — повторил для любого своего проекта.

Три ошибки, которые ты сделаешь в первый день

Сразу предупрежу — это нормально, через них проходят все. Но проходишь быстрее, если знаешь заранее.

Ошибка 1: ты пишешь Codex слишком расплывчато. «Сделай красивый сайт» — Codex выдаст что-то среднее, ты будешь править два часа. Опиши конкретно: блоки, тексты, стиль, цвета. Полминуты на формулировку экономят час правок. Об этом отдельная глава ниже.

Ошибка 2: ты не делаешь резервную копию. Codex меняет файлы на твоем компьютере. Если результат не подойдёт — без копии вернуть "предыдущую версию" сложно. Самый простой способ: перед каждой большой задачей скопируй папку проекта рядом, добавь в название «_backup_v1». Если что-то пойдёт не так — вернёшься к копии и попробуешь снова.

Когда привыкнешь, освоишь Git (это система, которая сохраняет версии файлов автоматически). Но пока что и копии папки достаточно.

Ошибка 3: ты открываешь новый чат, когда что-то пошло не так. Не надо. Codex помнит весь твой разговор внутри одного чата. Просто напиши: «Заголовок ок, описание сократи вдвое, убери эмодзи». Он поправит. Новый чат — это начать всё заново и потерять контекст, который вы уже наработали. При этом, если контекст слишком "раздут", имеет смысл создать новый чат.

Что делать, если что-то пошло не так

Codex просит подтверждение на каждый чих. Это нормально для режима Default permissions. Если задача рутинная и ты уверен — жми Approve all, Codex продолжит без вопросов. Можно ещё переключить на Agent (Full Access), но не делай это в первую неделю, чтобы избежать рисков потери файлов.

Сайт собрался, но выглядит криво. Не начинай заново. Просто напиши Codex: «Шрифт мелкий, увеличь в 1.5 раза. Галерея в один столбец на мобильных — сделай в два». Он поправит.

Codex выдал ошибку, что не может найти файл. Скорее всего, ты забыл открыть папку проекта (File → Open Folder). Открой — попробуй снова.

Расширение не видит кнопку Sign in. Перезапусти VS Code. Если не помогло — в настройках расширения проверь, что выбран правильный аккаунт.

Codex говорит «нет доступа к интернету». Это значит, что ему нужно скачать какую-то библиотеку или обратиться к внешнему сервису. Если ты понимаешь, зачем — разреши кнопкой. Если нет — спроси у Codex прямо в чате: «Зачем тебе нужен доступ?». Он объяснит.

Глобально, если есть какая-то ошибка, просто спросите у Codex, что за ошибка и как ее исправить. Он точно поможет.

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

Это самая недооценённая глава. Если пропустишь только её — дальше можешь не читать. AGENTS.md — то, что превращает Codex из «умного помощника» в реально полезного агента, который понимает твой стиль и твои привычки.

Что меняется, когда у Codex есть AGENTS.md

Без AGENTS.md

ты просишь Codex что-то сделать, он делает — но отвечает по-английски. Ты просишь по-русски — он переходит. На следующей задаче снова по-английски. Дальше: называет файлы как ему удобнее, использует библиотеки, о которых ты не просил, удаляет твои комментарии, делает текст «продающим» хотя ты просил спокойный. Каждый раз ты объясняешь одни и те же правила заново.

С AGENTS.md

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

Думай об AGENTS.md как о памятке для новичка на работе.

Тебе нужно объяснить ему правила работы один раз — дальше он будет следовать им без напоминаний.

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

Где живёт AGENTS.md

Файл может быть в двух местах.

Глобальный AGENTS.md — в специальной папке ~/.codex/ на твоём компьютере. Эти правила Codex применяет ко всем твоим проектам.

Локальный AGENTS.md — в самой папке конкретного проекта. Эти правила работают только для него.

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

Пример реального "боевого" проекта, в котором лежит AGENTS.md

Глобальный AGENTS.md — настрой один раз и забудь

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

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

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

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

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

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

Сохрани файл. Всё. Теперь Codex в любом твоём проекте будет работать по этим правилам, без напоминаний.

Локальный AGENTS.md — для конкретного проекта

Когда у тебя появится проект со своими особенностями, добавь файл AGENTS.md прямо в корень его папки. Покажу два примера под типичные сценарии.

Локальный AGENTS.md для лендинга твоей услуги:

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

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

## Команды
— Чтобы открыть страницу — двойной клик по index.html в папке
— Никаких npm, python и других программ запускать не надо

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

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

Локальный AGENTS.md для калькулятора стоимости услуг:

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

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

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

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

Видишь? Файл маленький, но Codex теперь точно знает: что делать, что не делать, какой стиль, что не трогать.

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

Хороший AGENTS.md помещается в одном экране и состоит из коротких пунктов, которые реально влияют на поведение Codex. Меньше — лучше. Codex читает его каждый раз, и большой файл съедает место, которое могло пойти на полезную работу.

Как обновлять AGENTS.md ?

Лучший AGENTS.md растёт постепенно. Начни с минимума — пять-шесть пунктов. Каждый раз, когда Codex делает что-то не так, как ты хотел, — добавляй одну строку в файл. Через пару недель у тебя будет инструкция, заточенная под именно твои привычки.

Это и есть «обучение агента» — не магия, а последовательность. Продвинутый сценарий - AGENTS.md автоматически обновляет Codex.

05. Как ставить задачи, чтобы Codex не тупил

Качество результата на 80% зависит от того, как ты сформулировал запрос. Это самая выгодная инвестиция времени, которую ты делаешь, работая с Codex. Полминуты на нормальную формулировку экономят час правок.

Формула хорошей задачи

Четыре элемента — каждый необязательный, но каждый усиливает результат.

Что собрать: конкретно, что должно получиться. Не «сделай сайт», а «сделай одностраничный сайт-визитку для частного психолога из Москвы, работающего онлайн».

Структура и содержимое: какие блоки, что в них, какие тексты. Не «добавь информацию», а «блок Подход — три-четыре предложения о том, что я работаю в КПТ-подходе, специализируюсь на тревоге, без эзотерики».

Стиль и ограничения: как должно выглядеть, какие технологии. Не «красиво», а «спокойный, светлый стиль, акцент — приглушённый мятный, без анимаций. HTML и CSS в одном файле, без сторонних библиотек».

Критерий готовности: как ты поймёшь, что всё работает. «После сборки открой файл и проверь, что кнопка Записатьсямработает на мобильном размере и ведёт в Telegram».

Плохой запрос vs Хороший

❌ Плохо:

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

Что произойдёт. Codex сделает что-то максимально среднестатистическое: белый фон, синяя кнопка, шрифт по умолчанию, текст-заглушка про «современные услуги для современных клиентов». Ничего общего с тем, что у тебя в голове. Ты потратишь час на правки.

✅ Хорошо:

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

Структура (сверху вниз):

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

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

Один файл index.html, стили внутри. Без сторонних библиотек.

Когда соберёшь — открой index.html в браузере и проверь, что кнопка
«Записаться» работает на мобильном размере.

Что произойдёт. Codex получит конкретику и выдаст готовый сайт сразу. Ты откроешь — и если что-то не так, поправишь одной фразой («увеличь шрифт в блоке стоимости»), а не будешь переписывать с нуля.

Разница в результате — катастрофическая. Второй запрос пишется за три-четыре минуты, а избавляет от часа исправлений. Это самая выгодная инвестиция времени, которую ты делаешь, работая с Codex.

Три правила, которые сэкономят часы

Правило 1: резервная копия до задачи. Уже говорили выше. Скопируй папку рядом — это твоя страховка. Через пять секунд это делается, и через пять минут спасает от часа боли.

Правило 2: не начинай заново — уточняй. Если результат не идеальный — не открывай новый чат. Просто напиши: «Заголовок ок, а описание сократи вдвое». Codex держит весь контекст разговора. Новый чат — это потеря всех предыдущих договорённостей.

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

Покажи пример, если объяснить словами трудно

Иногда стиль или формат проще показать, чем описать. Ты можешь дать Codex ссылку на страницу-референс или приложить скриншот:

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

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

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

Это работает значительно лучше, чем пытаться описать визуальный стиль словами.

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

Теорию изучишь потом. Лучший способ освоить Codex — собрать что-то реальное за вечер. Здесь восемь готовых сценариев под разные задачи: для жизни, для работы, для бизнеса. Все выполнимы за 1-3 часа с чистого листа. Бери любой, копируй промпт в Codex, итерируй.

Большинство — браузерные проекты. Не нужно ничего ставить, кроме VS Code. Открыл готовый файл двойным кликом — он работает в браузере. Идеально для старта.

Для работы и фриланса

Эти сценарии — про то, чтобы зарабатывать больше или экономить на подрядчиках. Самые востребованные форматы.

1. Лендинг для своей услуги или курса

Ты — опытный веб-дизайнер. Сделай одностраничный лендинг для [твоя услуга
или курс — например, «онлайн-курса по графическому дизайну для начинающих»
или «консультаций психолога»].

Аудитория — [кто твои клиенты: возраст, потребности, что они ищут].

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

Стиль: [лёгкий и вдохновляющий / строгий и экспертный / тёплый и уютный — выбери].
Цвета: [укажи 2-3]. Адаптив под мобильные обязателен.

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

2. Сайт-визитка эксперта

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

Главная цель страницы — чтобы клиент написал мне в Telegram и записался
на консультацию.

Структура:

— шапка: моё имя, специализация в одном предложении
— блок «обо мне» — 3-4 предложения: образование, опыт, подход
— блок «с чем я работаю» — список из 5-7 типичных запросов клиентов
— блок «как мы работаем» — 3 шага от первого контакта до результата
— блок «отзывы» — 3 карточки
— блок «стоимость» — формат и цена
— контакты: все CTA-кнопки ведут в Telegram

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

Один файл index.html, всё внутри.

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

Собери калькулятор стоимости услуг для [твоя профессия — например,
«дизайнера интерьеров» или «копирайтера»].

Логика:

— пользователь выбирает тип услуги (3-4 варианта на твоё усмотрение,
  предложи типовые для моей сферы)
— выбирает объём работ (например, размер помещения или количество знаков)
— отмечает галочкой дополнительные опции (срочность, выезд, ещё что-то типичное)
— нажимает «рассчитать» — видит итоговую стоимость крупным шрифтом
— под результатом — кнопка «обсудить проект», ведёт в Telegram

Цены на параметры храни в отдельном объекте в начале файла, чтобы я их
мог потом легко менять.

Стиль: чистый, профессиональный, с минимумом отвлекающих элементов.
Цвет акцента — [укажи].

Один файл index.html, всё внутри. Проверь, что калькулятор работает
на разных вариантах выбора.

4. Форма-бриф для клиентов

Собери форму-бриф, которую я буду отправлять клиентам перед началом работы.
Я — [твоя профессия].

В форме нужны вопросы:
— [перечисли 5-8 ключевых вопросов, которые ты сейчас задаёшь клиентам устно.
  Например, для дизайнера интерьеров: тип помещения, площадь, бюджет, стиль,
  сроки, есть ли дети/животные, контакты]

К каждому полю добавь короткую подсказку, чтобы клиент понимал, что писать.

После заполнения — кнопка «отправить». Все данные собираются в один блок текста,
который клиент копирует и отправляет мне в Telegram.

Дизайн: аккуратный, профессиональный, без лишнего. Цвет — [укажи].
Адаптив обязательно.

Один файл index.html, всё внутри.

Для бизнеса и заработка

Эти сценарии — про быстрые тесты идей и экономию на подрядчиках.

5. Страница для сбора заявок на бесплатное мероприятие

Собери одностраничный сайт для сбора заявок на бесплатный вебинар
[тема — например, «Как начать инвестировать с 10000 рублей» или
«Первый шаг в графический дизайн»].

Аудитория — [кто, возраст, чего они ищут].

Структура:
— первый экран: заголовок с темой и датой/временем, кнопка «записаться»
— блок «что узнаете» — 3-4 пункта: что конкретно человек получит за час
— блок «о спикере» — фото-заглушка, имя, регалии (3-4 строки)
— форма записи: имя, email
— блок «после вебинара получите» — 1-2 бонуса (запись, чек-лист)
— подпись: «количество мест ограничено», без агрессии

Стиль: [строгий и серьёзный / лёгкий и дружелюбный — выбери].
Цвет акцента — [укажи].
Адаптив обязателен.

Один файл index.html.

6. Простой трекер заявок (мини-CRM)

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

Что должно быть:

— форма для добавления нового клиента: имя, телефон, источник (откуда узнал),
  статус (новый / в работе / закрыт), комментарий
— список добавленных клиентов снизу — карточками
— возможность изменить статус клиента кликом
— фильтр по статусу: показать всех / только новых / только в работе
— наверху статистика: «Всего: 23 / В работе: 8 / Закрыто за месяц: 12»
— возможность удалить запись (со страховочным «уверены?»)

Все данные сохраняются в браузере (localStorage), чтобы не пропадали при
перезагрузке.

Стиль: чистый, деловой, без лишних украшений. Главный цвет — [укажи спокойный].

Один файл index.html, всё внутри.

Для жизни — собрать что-то полезное под себя

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

7. Личный планер недели

Собери личный планер недели — браузерное приложение под мои привычки.

Что нужно:

— страница разделена на 7 колонок (понедельник-воскресенье)
— в каждой колонке — поле для добавления задач
— у задачи есть галочка «выполнено» (зачёркивает текст)
— наверху — счётчик «выполнено за неделю: 5 из 12»
— кнопка «начать новую неделю» (с подтверждением) очищает все задачи
— все задачи сохраняются в браузере, не пропадают при перезагрузке

Стиль: спокойный, минималистичный, без перегруза.
Шрифт без засечек, мягкая палитра — пастельные цвета, акцент — [укажи].
Адаптив под мобильные.

Один файл index.html.

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

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

Я открыл проект — это [сайт / лендинг / приложение], скачанный с интернета
(или сделанный кем-то для меня).

Сначала изучи его структуру: пройдись по файлам и кратко расскажи мне:
— что этот проект вообще делает
— из каких частей он состоит
— как его запустить (если нужно что-то запускать)
— есть ли очевидные проблемы или странные места

После этого я скажу, что нужно поменять. Пока ничего не правь.

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

После того как Codex описал проект, можешь смело давать конкретные правки: «замени все упоминания Москвы на Санкт-Петербург», «поменяй цветовую схему на светлую», «убери блок отзывов и добавь блок с FAQ».

Где ещё пригодится Codex

Кроме перечисленного, Codex отлично заходит для следующих сценариев. Эти штуки чуть сложнее, но к ним приходишь сам, когда освоишься.

Как создать AI-агента или проект, который можно использовать в работе

В нашем закрытом сообществе AI Room Club находится полноценный курс по полному освоению навыка вайбкодинга, чтобы собирать проекты, которые уже смогут использоваться в работе, чтобы приносить деньги.

В курсе: 5 модулей, 31 урок.

По мимо сайтов вы сможете создавать АИ-агентов, потому что вайбкодинг — это фундаментальный навык.

Вступайте в наше закрытый клуб для AI-энтузиастов.

07. Куда расти дальше

Когда базовая работа в VS Code станет привычным, у Codex есть ещё пара режимов работы. Они не нужны прямо сейчас — но знать о них полезно.

Codex в облаке (chatgpt.com/codex)

Браузерный режим. Подключаешь свои проекты на GitHub (это сервис для хранения кода, бесплатный), ставишь Codex задачу, он работает в облачной песочнице и присылает готовый результат.

Когда облако удобнее VS Code:

Для первых проектов это избыточно. Но когда у тебя появится 2-3 проекта, которые ты регулярно дорабатываешь, и желание попробовать «делегировать и забыть» — попробуй облако. К тому моменту GitHub и репозитории станут понятны естественным путём.

Codex CLI — для тех, кто любит работать в терминале

Если когда-то решишь освоить командную строку — у Codex есть и CLI-версия. Удобно для тех, кто хочет автоматизировать рутину или встроить Codex в скрипты. Большинству это не нужно.

Установка — одна команда:

npm install -g @openai/codex

Потом запускаешь codex в любой папке проекта, авторизуешься через ChatGPT — и работаешь. Лимиты те же, что в VS Code.

Знаки того, что пора расти

Несколько ориентиров — когда понимать, что базы тебе уже мало.

Когда дошёл до этой точки — у нас в клубе AI Room Club есть отдельные модули под продвинутые сценарии.

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

Если ты дочитал и сделал хотя бы первую задачу ты уже "впереди" тех, кто все еще скептически относится к ИИ, потому что можешь:

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

Что дальше

Codex — это инструмент. Как и любой инструмент, он становится мощнее, когда ты учишься им пользоваться системно: правильный AGENTS.md, продуманные задачи, накопленный опыт работы со своими сценариями. Один и тот же Codex у новичка, и у опытного пользователя выдаёт принципиально разный результат.

И сегодня я постарался передать тебе базу. Но это 5% того, что я делаю с AI каждый день.

В нашем закрытом клубе AI Room Club мы разбираем вайбкодинг, собираем своих ИИ-агентов, делимся рабочими шаблонами и инструментами 🔥

Делимся инструкциями, гайдами, курсами и готовыми проектами.

По факту мы следим за рынком и за тем, что реально работает, вместо тебя, а ты внедряешь это в свои проекты, бизнес и жизнь.

Прочитать о нашем клубе и о том, как вступить, можно тут.

Не упускайте новые технологии и возможность получать виденье, куда внедрить ИИ в твоей работе от нашей команды.