Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Пошаговое руководство по созданию современных веб-приложений и лендингов в среде ChatGPT Codex (на базе GPT-5.6). Разбирается 7-этапная методология агентной веб-разработки: от первичной инициализации контекста и внедрения дизайн-систем до генерации ассетов, полировки компонентов и деплоя в один клик.
👤 Кому будет полезно: Вайбкодерам, инди-хакерам, веб-дизайнерам и разработчикам, которые создают клиентские сайты или SaaS-интерфейсы с помощью AI-агентов и хотят избавиться от шаблонного «AI-slop» стиля.
✨ Что получите: Чёткий алгоритм создания кастомных, отзывчивых и быстрых веб-сайтов на Next.js внутри ChatGPT Codex без использования внешних терминалов и сторонних IDE, готовых к передаче реальным клиентам.
1. Базовая настройка Codex: конфигурация модели, лимиты и рабочее пространство
Контекст: Codex встроен напрямую в десктопное приложение ChatGPT как отдельный режим работы. Он оперирует локальной файловой структурой на вашем компьютере, избавляя от необходимости открывать сторонние редакторы кода (VS Code) или терминал. Для предсказуемой генерации важно правильно выставить параметры рассуждений (Effort) и скорости (Speed), чтобы не исчерпать недельный лимит подписки ($20 Plus plan) за несколько итераций.
Тайминг:[00:48], [01:03], [01:43]
Выгода: Экономия до 80% лимитов подписки при сохранении максимального качества кода без лишних переплат за тарифы $100/$200.
Как применить:
Шаг 1: Подготовка среды — ChatGPT Desktop App — Скачайте официальное десктопное приложение ChatGPT, войдите в аккаунт с активной подпиской Plus ($20/мес) и переключитесь в режим Codex в верхнем меню.
Шаг 2: Настройка параметров генерации — Интерфейс выбора модели — Выберите модель GPT-5.6. В параметрах задайте:
Effort (глубина размышлений): установите значение между Light и High (не выставляйте экстремальные значения, так как они сжигают лимиты без ощутимого прироста в качестве верстки).
Speed (скорость): выберите Standard. Модели Codex работают быстрее Claude, поэтому режим Fast не требуется.
Шаг 3: Создание рабочего проекта — Codex Projects — Нажмите «Create New Project», задайте имя (например, beacon-landing). Codex автоматически создаст локальную папку на вашем диске, файлы которой можно просматривать через боковую панель.
Результат: Инициализирован изолированный проект с оптимальными настройками расхода токенов и прямым доступом к файловой системе.
2. Этап 1: Определение цели проекта и генерация автономного agents.md
Контекст: Типичная ошибка новичков — абстрактный запрос вроде «сделай лендинг для AI-сообщества». Codex не понимает целевую аудиторию, путь пользователя и ключевое целевое действие (CTA), из-за чего генерирует красивую, но нефункциональную заглушку. Кроме того, при смене тредов контекст теряется, если правила не зафиксированы в конфигурационном файле agents.md.
Тайминг:[01:59], [02:46], [03:27]
Выгода: Полная автономность агента. Codex сам запускает локальный сервер, компилирует код и валидирует изменения без постоянных запросов подтверждения у пользователя.
Как применить:
Шаг 1: Формулировка целевого брифа — Codex Chat — Отправьте структурированный вводный промпт с указанием стека (Next.js), назначения платформы и главного конверсионного действия (например, сбор email в waitlist, а не прямая регистрация).
Build a modern landing page for an app called "Beacon", which is a podcast analytics platform.
Use Next.js. The platform helps creators track listener retention, episode drop-off rates, and sponsor ROI.
The primary function and single conversion goal of this landing page is to get users to click and join the waitlist.
Шаг 2: Инициализация файла контекста — Codex Slash Command — Введите команду /init в строку ввода Codex. Агент проанализирует введенный бриф и сгенерирует файл agents.md в корне проекта со структурой папок и правилами архитектуры.
Шаг 3: Внедрение правила автономности — agents.md — Убедитесь, что в самом верху agents.md прописана строгая директива на самостоятельное выполнение системных действий:
### AUTONOMOUS EXECUTION RULE:Whenever Codex can perform an action itself, it MUST do so without asking the user. This includes installing dependencies, starting the local dev server (npm run dev), reading logs, and verifying that the build completed successfully in the browser.
Результат: Сформирован файл agents.md, гарантирующий сохранение единого контекста во всех будущих тредах проекта и автономное выполнение рутинных CLI-задач.
3. Этап 2: Устранение шаблонности с помощью скилла GPT Taste
Контекст: Даже современные LLM генерируют сайты с повторяющимися паттернами оформления («AI-slop»), если не ограничить их жесткими дизайн-правилами. Стандартные скиллы от Anthropic устарели для новых GPT-моделей, а встроенный инструмент OpenAI site генерирует примитивный дизайн. Для создания уникального визуала используется специализированный скилл GPT Taste, содержащий обновленную дизайн-систему для фронтенда.
Тайминг:[03:58], [04:24], [04:47], [05:14]
Выгода: Создание нестандартного UI с плавными микровзаимодействиями и правильной типографикой за 15–20 минут первичной генерации.
Как применить:
Шаг 1: Установка дизайн-скиллов — Терминал Codex — Установите набор скиллов в окружение Codex с помощью установочной команды:
npx skills-cli add gpt-taste
Шаг 2: Перезапуск сессии — Codex App — Закройте приложение Codex и откройте его заново, вернувшись в текущий тред (история и файлы сохранятся). Это необходимо для индексации новых скиллов.
Шаг 3: Запуск сборки с явным запретом site скилла — Codex Chat — Вызовите скилл через слеш-команду и запустите верстку, прямо запретив использовать базовый генератор сайтов:
/gpt-taste
Start building the entire Next.js landing page according to the project context in agents.md.
CRITICAL: Do NOT use the default "site" skill for designing this landing page, as it produces generic templates. Rely strictly on the visual rules defined in the GPT Taste skill.
Шаг 4: Просмотр результата — Codex Side Panel — Откройте встроенный браузер в правой панели Codex и перейдите на локальный адрес http://localhost:3000.
Результат: Полноценный интерактивный лендинг на Next.js с готовой структурой: Hero-секция, презентация продукта, аналитические графики и форма сбора заявок в waitlist.
4. Этап 3: Браузерная верификация и тестирование адаптивности
Контекст: Скомпилированный без ошибок код не гарантирует корректного визуального отображения. Codex обладает встроенной функцией Computer Use: агент сам открывает страницу в фоновом headless-браузере, считывает верстку и исправляет съехавшие элементы.
Тайминг:[05:42], [06:28], [06:45]
Выгода: Исключение багов верстки на мобильных устройствах без ручного написания CSS-медиазапросов.
Как применить:
Шаг 1: Автономная проверка агентом — Codex Engine — Благодаря правилу в agents.md, Codex автоматически делает скриншоты страницы во время сборки и проверяет DOM-дерево. Если агент находит расхождения, он самостоятельно правит код компонентов.
Шаг 2: Ручной стресс-тест адаптивности — Codex Preview Panel — Растяните окно встроенного браузера для проверки Desktop-версии (1440px+), затем сузьте его до ширины мобильного экрана (375px–420px). Проверьте корректность гамбургер-меню, перестроение гридов и читаемость заголовков.
Шаг 3: Исправление коллизий через скриншоты — Codex Chat — Если элемент отображается некорректно, сделайте скриншот проблемной области и отправьте в тред (инструмент аннотаций внутри Codex работает нестабильно при масштабировании, поэтому метод обычного скриншота надежнее).
Fix the layout shift on mobile screens below 480px as shown in this screenshot. Ensure the analytics cards stack vertically and padding on the hero container is reduced to 16px.
Результат: Полностью адаптивный интерфейс, проверенный визуальным анализатором агента под основные разрешения экранов.
5. Этап 4: Внедрение уникальной бренд-системы через design.md и Phosphor Icons
Контекст: Даже со скиллом GPT Taste агент склонен выбирать стандартные для GPT цветовые гаммы (повторяющиеся фиолетовые и зеленые оттенки). Чтобы придать сайту уникальную идентичность бренда, используется стандарт design.md (впервые предложенный Google в инструменте Stitch). Этот файл жестко фиксирует палитру, отступы, радиусы скруглений и типографику.
Тайминг:[07:03], [07:32], [08:23], [08:51]
Выгода: Мгновенный ребрендинг всего веб-приложения без нарушения логики компонентов и анимаций.
Как применить:
Шаг 1: Загрузка дизайн-системы — Библиотеки ресурсов — Скачайте готовый файл design.md из открытых библиотек (каталог getdesign.md или дизайн-система от Aurabuild).
Шаг 2: Импорт и перестилизация — Codex File Attachment — Прикрепите скачанный файл к сообщению и отправьте промпт на редизайн:
Create a design.md file in the project root and copy the contents of the attached file into it.
Revamp the entire Beacon website according to this new design.md visual system.
IMPORTANT: Do NOT change the layout, component structure, or existing Framer Motion animations. Only update colors, CSS variables, typography, border radiuses, and spacing tokens.
Шаг 3: Стандартизация иконок — agents.md — Пропишите использование набора Phosphor Icons как единственного стандарта для иконок в проекте, чтобы избежать разрозненных SVG:
### ICON SYSTEM RULE:Always use `phosphor-react` (or `@phosphor-icons/react`) for all UI icons and interactive elements. Do not inline random SVG shapes.
Результат: Сайт приобретает индивидуальную брендовую эстетику, полностью избавляясь от узнаваемых шаблонных цветов AI-моделей.
6. Этап 5: Генерация оригинальных бренд-иллюстраций в Plan Mode
Контекст: Стоковые фотографии из Unsplash или стандартные плейсхолдеры нарушают целостность дизайн-системы. Codex может напрямую генерировать векторные и растровые иллюстрации с помощью модели GPT Image, учитывая описания продукта из agents.md и цвета из design.md. На базовом тарифе важно использовать Plan Mode, чтобы агент не тратил генерации вслепую.
Тайминг:[09:72], [10:09], [10:52], [11:16]
Выгода: 100% совпадение стилистики графики, аватарок и карточек функций с цветовой гаммой бренда без привлечения иллюстратора.
Как применить:
Шаг 1: Подготовка каталога ассетов — agents.md — Добавьте директиву о хранении медиафайлов:
### ASSET MANAGEMENT:All static visual assets and generated illustrations must reside in `/public/assets`. Reference them inside Next.js components via `next/image`.
Шаг 2: Включение Plan Mode — Codex UI — Нажмите кнопку Plan Mode в интерфейсе ввода. В этом режиме агент сначала распишет концепцию каждого изображения и места их вставки, не трогая кодовую базу.
Шаг 3: Запрос на генерацию кастомной графики — Codex Chat — Отправьте запрос на генерацию иллюстраций и аватарок для отзывов:
Create an /assets folder inside /public. Generate custom branded illustrations using the GPT Image model to replace all stock images and placeholder cards across the landing page.
The illustrations must strictly match the color palette in design.md and reflect podcast analytics themes (audio waveforms, retention graphs, listener metrics). Also generate 3 cohesive avatar illustrations for the testimonials section.
Шаг 4: Утверждение плана — Codex Chat — Проверьте сгенерированный список промптов для картинок. Если все соответствует концепции, отправьте подтверждение: Plan looks great, proceed with generation and implementation.
Результат: Все плейсхолдеры заменены на кастомные иллюстрации и аватары, органично встроенные в верстку и карточки преимуществ.
7. Этап 6: Кастомизация Hero-секции по визуальным референсам
Контекст: Сгенерированная с нуля Hero-секция часто выглядит стандартно: заголовок по центру, подзаголовок, кнопка и скриншот под ними. Передать сложную визуальную композицию только текстом трудно. Намного эффективнее скормить агенту скриншот готового макета с Pinterest или Awwwards и попросить адаптировать сетку.
Тайминг:[11:29], [11:58], [12:13]
Выгода: Получение сложной асимметричной композиции топового уровня без ручной сборки CSS Grid.
Как применить:
Шаг 1: Поиск референса — Pinterest / Awwwards — Найдите выдающийся макет первого экрана по запросу SaaS hero section design или в каталоге Awwwards. Сделайте скриншот композиции.
Шаг 2: Передача макета агенту — Codex Chat — Загрузите изображение в тред и сформулируйте задачу на адаптацию:
Take the visual composition and layout structure of the attached hero section reference and apply it to our Beacon hero component.
Keep our copy, our brand colors from design.md, and our waitlist CTA form. Do not copy their branding — use only their layout hierarchy, badge placement, and container arrangement.
Результат: Эксклюзивная компоновка первого экрана с нестандартным расположением элементов, сохраняющая фирменный стиль проекта.
8. Этап 7: Внедрение шейдеров из 21.dev и оптимизация анимаций
Контекст: Для придания сайту премиального лоска отдельные элементы заменяются сложными веб-компонентами (шейдеры WebGL, размытия Liquid Glass, плавные аккордеоны). Большое количество тяжелых Framer Motion эффектов может вызвать падение FPS и высокий показатель Total Blocking Time (TBT).
Тайминг:[12:20], [12:75], [13:17], [13:30]
Выгода: Эффектный интерактивный фон Hero-секции при сохранении плавной прокрутки (60 FPS) и быстрой загрузке страницы.
Шаг 2: Внедрение шейдера в Hero-блок — Codex Chat — Передайте скопированный код/промпт в Codex:
Integrate this shader background component from 21.dev into our Hero section background.
Adjust its color parameters to match the primary and background hex codes specified in design.md.
Do not invoke optimization skills during this step.
Шаг 3: Оптимизация производительности рендеринга — Codex Chat — Вызовите команду оптимизации страницы для устранения лагов:
Optimize the landing page performance. Refactor heavy CSS filters, lazy-load below-the-fold animated sections, debounce scroll listeners, and ensure animations use hardware-accelerated transforms (translate3d, opacity) to eliminate rendering latency.
Результат: Интегрирован современный WebGL-шейдер на первом экране, а общая задержка рендеринга и лаги скролла устранены.
9. Вспомогательный рабочий процесс: Git-чекпоинты и деплой через Site Skill
Контекст: В процессе AI-генерации модель может случайно сломать работающий функционал. Создание локальных Git-коммитов позволяет моментально откатываться назад без регистрации на сторонних сервисах. Для итоговой публикации больше не требуется вручную настраивать репозитории в GitHub и связывать их с Vercel — деплой выполняется прямо из Codex через site skill.
Тайминг:[13:79], [14:08], [14:44], [14:82]
Выгода: Безопасная разработка с возможностью отката в 1 клик и мгновенная публикация сайта в интернет с поддержкой кастомных доменов.
Как применить:
Шаг 1: Создание контрольных точек (Checkpoints) — Codex Chat — После каждого успешного этапа просите Codex зафиксировать состояние в Git:
Create a local git commit checkpoint for the current state. Name it "milestone-stage-7-complete".
Шаг 2: Просмотр истории и откат (при необходимости) — Codex Chat — Если агент допустил ошибку:
List all local git commits. Revert the project back to the commit named "milestone-stage-5-assets-ready".
Шаг 3: Публикация проекта в сеть — Codex App — Нажмите кнопку + в чате, добавьте встроенный скилл site и инициируйте деплой:
Deploy the current project using the site skill so it is publicly accessible.
Шаг 4: Настройка публичного доступа — Панель сайтов ChatGPT — В левом сайдбаре перейдите в раздел Sites, найдите опубликованный проект, измените видимость с Just me на Anyone on the internet и нажмите Publish. При необходимости привяжите собственный домен через меню Settings -> Custom Domain.
Результат: Проект зафиксирован в версионном контроле и опубликован на быстром хостинге со стабильным публичным URL для клиентов и пользователей.
FAQ
В: Зачем использовать скилл GPT Taste, если у OpenAI есть собственный site skill?
О: Встроенный site skill от OpenAI оптимизирован под быстрый шаблонный деплой и базовые макеты, из-за чего создает устаревший и однообразный дизайн. GPT Taste содержит правила для современной типографики, сложных микроанимаций и правильных визуальных акцентов, создавая индивидуальный UI.
В: Обязательно ли покупать тариф за $100 или $200 для работы с Codex?
О: Нет, базового тарифа ChatGPT Plus за $20/месяц достаточно для большинства задач веб-разработки. Главное — держать параметр Effort в диапазоне от Light до High (не использовать экстремальные значения) и включать Plan Mode перед генерацией графических ассетов, чтобы не тратить лимиты впустую.
В: Чем design.md отличается от agents.md?
О: agents.md задает системные правила, стек технологий, архитектуру папок и инструкции по поведению самого агента (например, автономный запуск dev-сервера). design.md содержит исключительно визуальную систему бренда: палитру цветов, правила теней, типографику, токены отступов и скруглений.
В: Что делать, если при изменении одного компонента Codex ломает верстку всего сайта?
О: Регулярно просите Codex создавать локальные Git-коммиты после каждого удачного шага. В случае сбоя дайте команду: Revert the project back to the last git commit. Также всегда указывайте в промптах строгое ограничение: Only modify ComponentName.tsx, do not touch other files.
В: Можно ли подключить свой собственный домен к сайту, развернутому через Codex?
О: Да. После публикации проекта через site skill перейдите в боковую панель десктопного приложения в раздел Sites, откройте настройки нужного сайта (Settings) и добавьте ваш кастомный домен, следуя подсказкам DNS-маршрутизации.
В: Почему генерацию картинок лучше запускать через Plan Mode?
О: Генерация изображений моделью GPT Image расходует значительную часть лимитов сессии. Plan Mode заставляет агента сначала составить текстовое описание концептов всех иллюстраций и показать места их интеграции в верстке. Вы можете скорректировать промпты до того, как модель начнет физическую генерацию файлов.
Ресурсы и ссылки
ChatGPT Desktop App — Официальное десктопное приложение OpenAI с поддержкой режима Codex — https://chatgpt.com/
Aurabuild — Платформа для сборки сайтов с открытой библиотекой дизайн-систем design.md — упомянут в видео
getdesign.md — Репозиторий готовых дизайн-систем популярных технологических компаний (Claude, Cursor, Discord) — упомянут в видео
Phosphor Icons — Минималистичный и гибкий набор иконок для современных веб-интерфейсов — https://phosphoricons.com/
21.dev — Каталог продвинутых UI-компонентов, WebGL-шейдеров и анимаций — https://21.dev/
Awwwards — Международный каталог премиальных веб-сайтов для поиска композиционного вдохновения — https://www.awwwards.com/
Godly & Fancy Components — Библиотеки креативных фронтенд-компонентов и микровзаимодействий — упомянуты в видео
Конспект создан на основе видео «How to Build Websites with Codex» канала AI Labs. Все права на оригинальный материал принадлежат авторам.Источник: https://www.youtube.com/watch?v=pHstb0JGGhE
