🎯 О чём этот конспект: Пошаговое руководство по использованию Codex (нового режима внутри ChatGPT) для создания высококачественных лендингов. Автор раскрывает методику «7 стадий», которая позволяет уйти от типичного «пластикового» дизайна нейросетей к профессиональному брендингу с использованием кастомных навыков (skills), дизайн-систем и оптимизации анимаций.

👤 Кому будет полезно: Вайбкодерам, разработчикам на Cursor/Windsurf и предпринимателям, которые хотят быстро запускать SaaS-продукты или продавать услуги по созданию сайтов клиентам.

✨ Что получите: Вы научитесь настраивать рабочее окружение Codex, использовать файлы agents.md и design.md для управления контекстом, внедрять продвинутые анимации и деплоить готовые проекты в один клик прямо из чата.

1. Настройка окружения и основы Codex

Контекст: Codex теперь является встроенным режимом внутри приложения ChatGPT (десктопная версия). Это не просто чат, а полноценная среда разработки, которая имеет доступ к файловой системе вашего компьютера. Вам не нужно открывать терминал или VS Code — Codex сам создает папки, файлы и запускает локальный сервер для предпросмотра. Для эффективной работы рекомендуется подписка Plus ($20/мес) и использование последней модели (на момент видео — GPT 4o/5.6).

Тайминг: [00:48], [01:00], [01:39]

Выгода: Экономия времени на переключении между инструментами; работа в едином окне «чат + код + браузер».

Как применить:

• Шаг 1: Установка — Скачайте десктопное приложение ChatGPT и переключитесь в режим Codex.
• Шаг 2: Создание проекта — Нажмите «New Project», введите название. Codex создаст локальную папку на вашем ПК.
• Шаг 3: Настройка параметров — В меню модели установите Effort (Усилия) на уровень Light или High. Не ставьте выше, чтобы не тратить лимиты впустую. Speed оставьте на Standard.

2. Стадия 1: Глубокий промптинг и контекст

Контекст: Обычный промпт «сделай лендинг» выдает посредственный результат. Codex должен понимать: для кого сайт, какую проблему он решает и какое целевое действие (CTA) должен совершить пользователь. Без четкого указания функции (например, сбор заявок в Waitlist), ИИ будет гадать, что приведет к созданию красивого, но бесполезного продукта.

Тайминг: [01:59], [02:13]

Выгода: Сайт сразу решает бизнес-задачу, не требуя бесконечных правок структуры.

Как применить:

• Шаг 1: Формулировка задачи — Используйте структуру: Название] + Стек] + Целевая аудитория] + Главная функция].
• Шаг 2: Промпт для старта — Скопируйте и адаптируйте:

Build a landing page for [Название продукта] using Next.js. 
The platform is for [Целевая аудитория] and it does [Описание функций]. 
The main goal of this page is to get users to click and join the waitlist.

3. Стадия 2: Использование agents.md для автономности

Контекст: agents.md — это файл инструкций, который Codex читает перед каждой задачей. Это «память» проекта. Если вы не пропишете правила здесь, Codex будет переспрашивать одно и то же в каждом новом треде. Важнейшая настройка — разрешение ИИ действовать автономно: запускать сервер, проверять ошибки и фиксить их без вашего участия.

Тайминг: [02:46], [03:27]

Выгода: Полная автономность агента; вам не нужно следить за каждым шагом сборки.

Как применить:

• Шаг 1: Инициализация — Введите команду /init. Codex создаст файл agents.md на основе вашего первого промпта.
• Шаг 2: Добавление инструкции автономности — Откройте agents.md и добавьте в самое начало:

Whenever you can perform an action yourself, do so. 
This includes starting the app, running tests, and verifying that the build is correct without asking for permission.

4. Стадия 3: Уход от «AI Slop» через Skills (GPT Taste)

Контекст: Стандартные модели ИИ имеют свой «почерк» (цвета, отступы), из-за чего тысячи сайтов выглядят одинаково («AI Slop»). Чтобы этого избежать, используются Skills — наборы правил дизайна. Автор рекомендует использовать навык GPT Taste, который заменяет стандартные решения OpenAI на более современные и профессиональные.

Тайминг: [03:58], [04:24], [04:47]

Выгода: Уникальный дизайн, который не выглядит как шаблонный ответ ChatGPT.

Как применить:

• Шаг 1: Установка скиллов — Вставьте команду установки (из репозитория автора или сообщества) в чат Codex.
• Шаг 2: Активация — Используйте команду / и выберите нужный скилл (например, GPT Taste).
• Шаг 3: Запрет стандартного стиля — Добавьте в промпт или agents.md:

Do not use the default 'site' skill for designing. Use the GPT Taste skill rules for the entire visual system.

5. Стадия 4: Визуальная идентичность через design.md

Контекст: Если Skills задают общие правила качества, то файл design.md задает конкретную «душу» бренда: специфические цвета, шрифты и отступы. Это формат, популяризированный Google. Вы можете взять дизайн-систему любого известного бренда (Discord, Linear, Claude) и применить её к своему коду.

Тайминг: [07:24], [07:53], [08:31]

Выгода: Мгновенный ребрендинг сайта под стиль топовых IT-компаний.

Как применить:

• Шаг 1: Поиск системы — Зайдите на getdesign.md или в библиотеку Aurabuild. Скачайте понравившийся .md файл.
• Шаг 2: Импорт — Прикрепите файл к чату Codex (скрепка) и дайте команду:

Create a design.md file in the project, copy the contents of the attached file into it, and revamp the site according to this visual system. Keep the structure, layout, and animations unchanged.

6. Стадия 5: Генерация брендированных ассетов

Контекст: Стоковые фото часто портят вид. Codex может использовать встроенную модель генерации изображений (DALL-E 3), учитывая контекст вашего agents.md и design.md, чтобы создать иллюстрации и аватары в едином стиле сайта.

Тайминг: [09:53], [10:32], [10:54]

Выгода: Бесплатные, уникальные и стилистически выверенные изображения.

Как применить:

• Шаг 1: Включение Plan Mode — Нажмите кнопку Plan (иконка блокнота). Это заставит Codex сначала составить список нужных картинок.
• Шаг 2: Промпт на генерацию — После утверждения плана скомандуйте:

Create an /assets folder. Generate original illustrations that match the design.md visual system and the content of each section. Replace all stock images with these new assets.

7. Стадия 6: Оптимизация тяжелых анимаций

Контекст: Профессиональные сайты с кучей шейдеров и анимаций могут тормозить (высокий latency). Codex может оптимизировать код, уменьшая нагрузку на браузер.

Тайминг: [13:12], [13:26]

Выгода: Высокая скорость загрузки (LCP) и плавность работы даже на слабых устройствах.

Как применить:

• Шаг 1: Запрос оптимизации — Если сайт «лагает», используйте промпт:

Optimize the website for performance. Reduce latency caused by heavy animations and shaders without removing the visual effects.

8. Стадия 7: Деплой в один клик через Site Skill

Контекст: Раньше для деплоя требовался GitHub и Vercel. Теперь в Codex есть встроенный site skill, который позволяет опубликовать сайт на домене *.chatgpt.com или привязать свой кастомный домен прямо из интерфейса чата.

Тайминг: [14:43], [14:54]

Выгода: Публикация сайта за 30 секунд без настройки CI/CD.

Как применить:

• Шаг 1: Активация — Нажмите + в чате и добавьте Site Skill.
• Шаг 2: Команда — Напишите: Deploy this site.
• Шаг 3: Настройка доступа — В боковой панели в разделе "Sites" выберите свой проект, нажмите "Share" и смените доступ на "Anyone on the internet".

FAQ

В: Нужно ли мне знать React или Next.js, чтобы пользоваться Codex? О: Нет, Codex берет на себя всю техническую часть. Вам достаточно понимать структуру промпта и уметь описывать желаемый результат. Знание основ поможет лишь точнее формулировать правки.

В: Что делать, если Codex выдает ошибку при сборке? О: Благодаря инструкции в agents.md (Stage 2), Codex должен сам увидеть ошибку в терминале и попытаться её исправить. Если он застрял, просто скопируйте текст ошибки из логов и вставьте в чат.

В: Можно ли использовать свои иконки? О: Да. Автор рекомендует Phosphor Icons. Вы можете прописать в agents.md, чтобы Codex всегда использовал именно этот сет для минималистичного вида.

В: Как вернуться к предыдущей версии сайта, если ИИ всё сломал? О: Используйте локальные коммиты. Напишите: Make a local commit named "Before design changes". Codex создаст точку восстановления, к которой можно вернуться командой Revert to commit [Name].

В: Сколько стоит хостинг через Site Skill? О: На данный момент базовый хостинг на поддомене ChatGPT включен в стоимость подписки Plus. Для кастомных доменов могут потребоваться дополнительные настройки.

Ресурсы и ссылки

• GetDesign.md — Библиотека дизайн-систем для AI-агентов — https://getdesign.md
• Aurabuild Design Library — Бесплатные шаблоны design.md — упомянут в видео
• 21.dev — Библиотека UI-компонентов (шейдеры, кнопки) — https://21.dev
• Phosphor Icons — Рекомендуемый сет иконок — https://phosphoricons.com
• AI Labs Pro — Сообщество автора с кастомными скиллами — ссылка в описании видео

Конспект создан на основе видео «7 Stages of AI Web Design (Codex)» канала AI Labs. Все права на оригинальный материал принадлежат авторам. Источник: https://youtu.be/pHstb0JGGhE