# Codex с нуля — от настройки до приложения в интернете

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

## 1. Установи приложение и выбери формат работы

- [ ] Установи настольное приложение ChatGPT для **Windows или macOS**, войди в аккаунт и выбери **Codex** в переключателе. [Официальная инструкция по началу работы](https://learn.chatgpt.com/docs/quickstart).
- [ ] Начни с бесплатного аккаунта, если нужно познакомиться с инструментом. Если переходишь на платный тариф, сопоставь его с нагрузкой:

- **Go — $8**, **Plus — $20** в месяц — варианты для знакомства и менее интенсивной работы;
- **Pro 5× — $100** в месяц — ориентир для более активной работы с Codex;
- проверяй остаток лимита в меню приложения и актуальные условия на [странице тарифов](https://learn.chatgpt.com/docs/pricing). Цена подписки не гарантирует, что её хватит на любую задачу.

- [ ] Для быстрого вопроса используй чат; для действий с файлами, проектами, браузером и инструментами — Codex. До запуска сформулируй, какой готовый результат нужен.

## 2. Создай проект и постоянные инструкции

- [ ] Создай отдельную папку под задачу, например **Task Manager**. В Codex нажми **«+» → новый проект → добавить папку на компьютере**, выбери её и создай проект.
- [ ] Подтверди доверие выбранной папке и при необходимости закрепи проект через меню с тремя точками.
- [ ] Храни в папке контекст проекта: исходные файлы, документы, инструкции, выгрузки и результаты. Добавляй несколько исходных папок, только если задаче нужен контекст из нескольких проектов.
- [ ] Попроси предложить постоянные правила для `AGENTS.md`, проверь их, затем создай файл.

## Запрос: правила проекта

```text
На основе контекста задач этого проекта предложи инструкции для AGENTS.md: где находятся основные документы и файлы, по каким правилам выполнять задачи и сохранять результаты.
Сначала покажи предложенные инструкции.
```

После проверки:

```text
Создай AGENTS.md в папке этого проекта с согласованными инструкциями.
```

- [ ] Проверь наличие `AGENTS.md` в файлах проекта. Оставь в нём общие правила, которые нужны в разных чатах; ориентир для компактной инструкции — **до 400 строк**, а не подробный сценарий каждой задачи.

- [Документация AGENTS.md](https://learn.chatgpt.com/docs/agent-configuration/agents-md).
- Для повторяемой процедуры используй отдельный навык.
- Если параллельно работаешь в Claude Code, согласуй общие правила с его `CLAUDE.md`.

## 3. Настрой работу с агентом

- [ ] Выбери режим разрешений под задачу:

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

- [ ] Для обычных задач выбери **GPT-6.1 Sol**, для сложной архитектуры и требовательной работы с дизайном — **Astra**. Начальный ориентир усилия — **«Очень высокое»**.

- [Официальное описание моделей](https://learn.chatgpt.com/docs/models).

- [ ] Используй **Ultra** только для задач, где это действительно нужно: этот режим быстро расходует лимиты. Ускорение **1,5×** оставь для случаев, когда важно сократить ожидание.
- [ ] Если нужен план перед выполнением, включи режим планирования и сначала согласуй план. Для длительной задачи с определённым финишем можно использовать режим **«Цель»**.
- [ ] Попробуй диктовку для постановки задачи и голосовой чат для интервью о своей работе.

## Запрос: найти применение Codex в работе

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

- [ ] Открывай результаты в правой панели: файлы, браузер и терминал. Для точечной правки выделяй нужный элемент и добавляй комментарий.

- Боковой чат используй для временного вопроса: после закрытия он не сохраняется как обычный рабочий чат.
- Если нужен совместный документ, список задач или отчёт по ссылке, используй пространство **ChatGPT Work**; рабочие исходники проекта продолжай хранить в его папке.

- [ ] Подключай только нужные плагины: например, **GitHub** для репозиториев и [Notion](https://www.notion.com/) для рабочей базы знаний. Остальные интеграции выбирай под сервисы, которыми уже пользуешься.

## 4. Выполни задачу и преврати её в навык

- [ ] Прикрепи запись рабочего созвона или скринкаст с объяснением задач. Попроси полностью расшифровать его и собрать план для команды.

- Если установлен навык **Watch** для просмотра видео, проверь, что агент его применил.

## Запрос: план по видеозаписи

```text
Посмотри прикреплённую видеозапись и расшифруй её полностью.
Составь пошаговый план для команды: кто чем занимается, какие каналы участвуют, что нужно сделать и к каким срокам.
Оформи результат на листах А4 и добавь блок-схему, чтобы план можно было передать команде.
```

- [ ] Проверь результат и внеси конкретные правки. Например: добавить блок-схему, убрать шрифт с засечками, привести страницы к **А4**.
- [ ] Когда результат устроит, вызови встроенный **skill-creator** и создай навык `task-creator`.

## Запрос: создать task-creator

```text
Используй skill-creator.
Создай навык task-creator по выполненной здесь задаче и согласованным правкам.

На входе — скринкаст или видео с объяснением задач.
На выходе — план для команды на листах А4, с ответственными, сроками, каналами и блок-схемой.

Закрепи согласованный порядок работы и требования к результату.
В description укажи, когда применять навык: при просьбе превратить видео или голосовое объяснение в командный план.
```

- [ ] Открой созданный `SKILL.md` и проверь **description**: по нему агент определяет, когда применять навык. Убедись, что есть последовательность действий и требования к итоговому файлу.
- [ ] Выбери область установки: общие навыки — для Codex в целом, навыки с контекстом конкретного проекта — внутри этого проекта. [Устройство и размещение навыков](https://learn.chatgpt.com/docs/build-skills).
- [ ] Проверь навык на следующей подходящей задаче. Если он не выбран автоматически, явно укажи `task-creator` в запросе.

## 5. Подбери и установи только нужные навыки

- [ ] Ищи готовые навыки под три задачи: продумывание продукта, работа с внешними библиотеками и инструментами, интеграции с платформами.

## Запрос: подобрать навыки

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

Нужны три категории:
1. Продумывание продукта: интервью с пользователями, гипотезы, PRD.
2. Работа с внешними библиотеками и инструментами, в том числе с видео.
3. Интеграции и правила работы с конкретными платформами.

Объясни, для какой задачи нужен каждый навык и почему он подходит.
Не добавляй лишние навыки ради количества.
```

- [ ] Для дизайна рассмотри [Frontend Design от Anthropic](https://github.com/anthropics/skills/tree/main/skills/frontend-design), [Web Design Guidelines](https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines) и [Impeccable](https://impeccable.style/). Подбирай их под свой процесс: готовый навык сам по себе не гарантирует хороший дизайн.
- [ ] Навыки для **Vercel**, **Supabase**, **JSON Canvas** и работы с PDF добавляй по потребности проекта. Ориентируйся на ресурсы самих инструментов: [Vercel](https://vercel.com/docs), [Supabase](https://supabase.com/docs), [JSON Canvas](https://jsoncanvas.org/).
- [ ] Если у тебя уже есть скачанная папка навыков, прикрепи её через **«+» → файлы и папки**. Явно укажи, что установка нужна для **Codex**, затем проверь список установленных навыков.

## Запрос: установить готовый набор

```text
Установи навыки из прикреплённой папки для Codex.
После установки покажи, какие навыки установлены и где они находятся.
```

## 6. Открой сайт в браузере и внеси правки

- [ ] Включи встроенный браузер в настройках, если он выключен. Для сайта создай отдельный проект и добавь папку с его исходниками.
- [ ] Попроси открыть локальный сайт прямо в Codex.

## Запрос: открыть сайт

```text
Открой сайт из этого проекта во встроенном браузере Codex, чтобы можно было давать правки по конкретным элементам страницы.
```

- [ ] Через инструмент выделения укажи проблемную область. Начни с явных ошибок: выравнивание, выход блоков за границы страницы, горизонтальная прокрутка всего сайта.

## Запрос: исправить ширину страницы

```text
Исправь выравнивание в выделенной области.
Страница должна занимать 100% доступной ширины, а элементы не должны выходить за её края.
Убери горизонтальную прокрутку всей страницы.
```

- [ ] Найди подходящий референс на [Dribbble](https://dribbble.com/), сделай скриншот и прикрепи его. Выбирай решение, которое можно применить к реальному бизнесу, а не только эффектную картинку.
- [ ] Выдели блок для переработки и опиши желаемые изменения. Для крупной переработки сначала продумай запрос в отдельном чате, затем передай его на выполнение.

- Если установлен **Prompt Improver**, используй его для подготовки такого запроса.

## Запрос: переработать первый экран

```text
Прикреплён референс для сайта студии растяжки в России.
Нужен минималистичный дизайн в белых тонах с фотографией.

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

- [ ] Проверь обновлённую страницу в браузере. Если панель закрылась во время работы, открой её заново и оцени именно текущий результат.

## 7. Используй браузер для сбора данных и регулярных задач

- [ ] Задавай браузерной задаче понятный итог: какие сайты открыть, что собрать и что должно получиться. Для работы с конкретным сервисом явно попроси использовать видимый встроенный браузер, а не ограничиваться обычным поиском.

## Запрос: анализ студий растяжки

```text
Через встроенный браузер Codex открой Яндекс Карты.
Проанализируй студии растяжки в районе метро «Новослободская» в Москве:
что пишут в отзывах и как студии представлены в карточках.
Подготовь аналитику по найденным студиям.
```

- [ ] Проверь, что агент действительно работает с карточками в [Яндекс Картах](https://yandex.ru/maps/). Если появляется проверка «не робот», при необходимости пройди её самостоятельно.
- [ ] Для повторяемого мониторинга создай запланированную задачу. Пример: **каждый понедельник** обходить карточки конкурентов и собирать новые отзывы.
- [ ] Учитывай отдельный профиль встроенного браузера: вход в Chrome или Safari не означает вход внутри Codex. Для нужных аккаунтов используй сохранение паролей в настройках приложения либо доступную на macOS связку ключей.

## 8. Подготовь компьютер для разработки

- [ ] Попроси Codex проверить установку **Git, Node.js, npm, GitHub CLI и Vercel CLI** и установить или обновить недостающее под твою ОС.

## Запрос: проверить инструменты

```text
Проверь компьютер для разработки и публикации проекта: Git, Node.js, npm, GitHub CLI и Vercel CLI.
Оставь инструкции только для текущей операционной системы.
Покажи, что уже установлено и что нужно обновить, затем установи или обнови недостающее.
```

- [ ] Дождись окончания установки. При необходимости сверяй инструменты с официальными страницами: [Git](https://git-scm.com/downloads), [Node.js](https://nodejs.org/en/download), [npm](https://docs.npmjs.com/), [GitHub CLI](https://cli.github.com/), [Vercel CLI](https://vercel.com/docs/cli).
- [ ] Создай аккаунт на [GitHub](https://github.com/signup) и подключи его для работы агента. Если авторизация истекла, выполни вход заново через предложенный CLI или плагин GitHub.

## 9. Подключи историю версий

- [ ] Настрой Git в папке проекта: основную ветку `main`, `.gitignore` и первый коммит.

## Запрос: включить Git

```text
Проверь папку проекта и настрой в ней локальный Git.
Создай основную ветку main, добавь .gitignore и сохрани текущее состояние первым коммитом.
```

- [ ] Проверь `.gitignore`: секреты и другие файлы, которые не должны попасть на GitHub, должны быть исключены до отправки проекта.
- [ ] После следующего законченного изменения сохрани коммит с понятным названием и описанием. Попроси открыть историю и запомни, где смотреть хэш нужного состояния.

## Запрос: сохранить состояние и показать историю

```text
Сделай коммит текущего состояния проекта с понятным названием и описанием.
Покажи историю коммитов и хэш нового коммита.
```

- [ ] Различай сохранение и отправку: **commit** фиксирует локальное состояние, **push** отправляет его на GitHub. Локальные изменения в `main` и состояние удалённой ветки, отображаемое как `origin/main`, могут различаться.

## 10. Создай и проверь небольшую игру

- [ ] Создай новый проект **Game**. Проверь фактический путь к папке: если запрос содержит другой путь, исправь его до выполнения.
- [ ] Попроси создать простую браузерную игру **«Поймай квадрат»**, сначала получить план из **четырёх шагов**, а затем перейти к выполнению.

## Запрос: первая игра

```text
Создай в текущей папке проекта простую браузерную игру «Поймай квадрат».
Сначала верни понимание задачи и план из четырёх шагов.

После согласования плана создай игру, README с инструкцией по работе с проектом и .gitignore.
Запусти локальный сервер и дай адрес для проверки в браузере.
```

- [ ] Открой выданный локальный адрес, нажми **«Начать»** и проверь, что квадрат можно ловить.

- `localhost` или локальный адрес ведёт на твой компьютер.
- Число после двоеточия, например **3000**, — порт сервера.
- Такой адрес не заменяет публичную ссылку: у другого человека `localhost` обращается к его компьютеру.

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

## 11. Опубликуй приложение и проверь ссылку

- [ ] Подготовь аккаунт [Vercel](https://vercel.com/) и подключение для агента. Для этого учебного запуска используй технический домен Vercel.
- [ ] Попроси создать **приватный** репозиторий на GitHub, отправить код и историю, затем развернуть проект на Vercel.

## Запрос: GitHub и Vercel

```text
Создай приватный репозиторий на GitHub для этого проекта и отправь в него код с историей Git.
Затем создай проект на Vercel и разверни игру, чтобы её можно было открыть в интернете.
Используй технический домен Vercel и пришли публичную ссылку.
```

- [ ] Проверь на GitHub, что репозиторий приватный, код загружен, подключён `origin` и выбрана основная ветка `main`.
- [ ] Открой публичную ссылку и ещё раз проверь игру. Для статической игры после публикации ноутбук не должен оставаться включённым ради доступности сайта. [Как работают развёртывания Vercel](https://vercel.com/docs/deployments).
- [ ] При следующих обновлениях проходи цепочку: **локальная правка → проверка → коммит → push → развёртывание**. Изменение файлов на компьютере само по себе не обновляет опубликованный сайт.
- [ ] Когда появятся пользователи или совместная разработка, раздели работу: `dev` для изменений и тестирования, `main` для проверенной версии. При ошибке на опубликованной версии используй историю Git для возврата к нужному состоянию.
- [ ] Перед выбором хостинга для рабочего продукта отдельно оцени его применимость к проекту. Помимо Vercel, варианты для сравнения — [Railway](https://railway.com/) и [Timeweb Cloud](https://timeweb.cloud/).

---

Источник: https://localhost:3000/m/chek-list-codex-s-nulya-ot-nastroyki-do-prilozheniya-v-internete