Теперь связываем всё вместе: правильный режим, понятная задача, план до кода, создание настоящего файла, проверка глазами, точечные правки и диагностика вместо бесконечной генерации.
Для новичкапошаговобез лишней теориипроверка результата
Начать проект →10 экранов · 13 схем · вся практика без сокращений
HARDKODING PRO · CODEX · МАРШРУТ 00 → UI → 01 → 02 → 03 → 04 → 05
Экран 1 из 10. Практика, исходные пояснения и все схемы сохранены.
1. Что строим
Не учебную «страницу ради страницы», а маленький реальный лендинг под твою услугу или продукт.
Эксперт
Консалтинг, дизайн, маркетинг, внедрение ИИ.
Продукт
Бот, сервис, подписка, курс, шаблон.
Локальный бизнес
Студия, производство, услуги, туры.
Финальный результат
Один работающий index.html, который можно показать человеку.
Почему именно Codex, а не обычный Chat
Потому что результат должен появиться в настоящей папке проекта и быть проверен как реальный файл.
Обычный Chat отлично помогает думать, но здесь нам нужен агент, который физически создаст и изменит проект.
Где открыть CodexС июля 2026 года отдельного приложения Codex нет: Codex — раздел нового приложения ChatGPT для macOS и Windows. Открой «ChatGPT» (не «ChatGPT Classic»), в левом верхнем меню выбери Codex и открой папку проекта. Режим доступа под полем ввода — Auto, если он есть; нет — Approve for me; нет и его — Ask for approval (подробно в Гайде 02). Как установить приложение — в Гайде 01.
Сначала результат, потом код
1 / 10
2. Сначала даём контекст
Мы создаём мой первый реальный мини-лендинг.
Кто я:
[имя и роль]
Что предлагаю:
[услуга / продукт]
Для кого:
[целевая аудитория]
Какую проблему решаю:
[проблема]
Какой результат получает человек:
[результат]
Контакт:
[Telegram / почта / сайт]
Сначала ничего не создавай.
1. Сформулируй целевую аудиторию.
2. Предложи 3 варианта главного оффера.
3. Выбери лучший и объясни почему.
4. Покажи структуру страницы.
Жди моего подтверждения перед созданием файлов.
Кто за что отвечает
Ты
Определяешь бизнес-смысл, факты, ограничения и принимаешь результат.
Codex
Исследует, предлагает план, создаёт файлы, запускает проверки и показывает изменения.
Новичок не обязан знать правильный HTML-синтаксис. Но он обязан уметь сказать, какой результат ему нужен.
Контекст: кто ты, что предлагаешь и кому
2 / 10
3. Структура страницы
1
Первый экранЧто предлагаешь, кому и кнопка действия.
2
Проблема и аудитория
3
Три выгоды
4
Как работаем
5
ДоказательствоТолько реальные факты.
6
Частые вопросы
7
Финальный призыв
Почему сначала структура
Исправить плохую идею до написания кода почти бесплатно. Исправлять ту же ошибку после большой реализации намного дороже по времени и лимиту.
Критерии готовности: принимаем проект по фактам
3 / 10
4. Критерии готовности
Проверка
Результат
Файл
index.html существует.
Запуск
Открывается двойным кликом.
Первый экран
За 5 секунд понятно предложение.
Телефон
Нет горизонтальной прокрутки.
Кнопка
Ведёт на реальный контакт.
Факты
Нет выдуманных отзывов и кейсов.
Критерий должен быть наблюдаемым
«Красиво» — плохой критерий. «На iPhone нет горизонтальной прокрутки, кнопка видна на первом экране и ведёт в Telegram» — хороший.
Codex создаёт файл только после подтверждения структуры
4 / 10
5. Команда на создание
Структуру подтверждаю.
Создай один автономный index.html.
Условия:
- CSS внутри файла;
- без установки пакетов;
- без внешних библиотек;
- сначала под телефон, потом под большой экран;
- основной контент должен работать без JavaScript;
- не придумывай клиентов, отзывы и цифры.
После создания:
1. назови полный путь файла;
2. проверь все 7 блоков;
3. проверь ширину телефона;
4. проверь кнопку;
5. напиши, что реально проверено, а что нет.
Не проси «сделай всё идеально»
Большая задача должна заканчиваться отчётом: какой файл создан, что проверено, какие тесты запускались и что осталось непроверенным.
Первый результат открываем сами в браузере
5 / 10
6. Проверяем глазами и руками
Не принимай фразу «готово». Открой настоящий файл.
1
Открой страницу
2
Прочитай первый экран
3
Нажми кнопку
4
Проверь телефон
5
Проверь факты
Проверка агента и проверка человека — обе нужны
Codex умеет запускать автоматические проверки. Но интерфейс, смысл текста и пользовательский опыт ты всё равно должен посмотреть сам.
Первая правка — только после конкретной оценки
6 / 10
7. Первая осознанная правка
Страница уже работает.
Сначала оцени первый экран:
1. Понятно ли за 5 секунд, что я предлагаю?
2. Понятно ли, для кого?
3. Есть ли конкретная польза?
4. Понятно ли, что делать дальше?
Предложи 3 точечных улучшения.
Ничего не меняй до моего подтверждения.
Если задача большая, не меняй одновременно дизайн, тексты, структуру и логику. Чем меньше пакет изменений, тем легче понять, что именно улучшило или сломало результат.
Ошибка: сначала причина, потом минимальная правка
7 / 10
8. Если что-то сломалось
После последней правки появилась проблема.
Не переписывай страницу целиком.
1. Опиши симптом.
2. Воспроизведи проблему.
3. Найди конкретную причину.
4. Покажи проблемный фрагмент.
5. Предложи минимальное исправление.
6. Исправь только его.
7. Повторно проверь тот же сценарий.
Главный навык разработчика
Не знать все ответы, а уметь превращать «что-то не работает» в точный воспроизводимый симптом.
8 / 10
9. Финальная приёмка
Проект готов: создан, проверен и улучшен
9 / 10
Проверено 0 из 5. Отмечай только то, что работает на твоём проекте.
Реальный интерфейс · 02.10.2026
Первый проект: Git, review и worktrees
После первой рабочей версии проект должен стать воспроизводимым: review, PR, безопасный Git и отдельные worktrees для параллельных задач.
Как пользоваться этим блокомОткрой рядом настройки приложения ChatGPT (Codex — его раздел) и пройди экраны сверху вниз. Если после обновления приложения название или положение переключателя немного изменилось — ориентируйся на смысл настройки и подпись под скриншотом, а не на пиксельное совпадение. Если у тебя Mac: логика и набор настроек примерно такие же, но интерфейс, названия некоторых пунктов и их расположение могут немного отличаться от Windows.
Скриншот 56. Code Review: глобальные правила проверки. Оранжевая подпись внутри изображения показывает рекомендуемый рабочий default для Hardcoding.Скриншот 58. Auto-review и exhaustive review. Оранжевая подпись внутри изображения показывает рекомендуемый рабочий default для Hardcoding.Скриншот 59. Git: draft PR, branch prefix и force push. Оранжевая подпись внутри изображения показывает рекомендуемый рабочий default для Hardcoding.Скриншот 61. Worktrees: изолированная параллельная работа. Оранжевая подпись внутри изображения показывает рекомендуемый рабочий default для Hardcoding.
10 / 10
HARDKODING PRO · CODEX · МАРШРУТ 00 → UI → 01 → 02 → 03 → 04 → 05
