🎯 О чём этот конспект: Пошаговое руководство по использованию десктопного приложения Codex для Mac OS (от создателей одноименной AI-модели). В видео демонстрируется полный цикл разработки SaaS-продукта: от брейншторминга в ChatGPT до генерации дизайн-системы, настройки правил для AI-агента и создания работающего приложения для генерации YouTube-превью и заголовков.

👤 Кому будет полезно: Вайбкодерам, разработчикам, использующим AI-агентов, и создателям контента, желающим автоматизировать рутинные задачи по оформлению видео.

✨ Что получите: Вы научитесь правильно структурировать проект для AI-агента, создавать «дизайн-систему для машин», ограничивать контекст для повышения точности кода и использовать мультимодальные возможности Codex для создания UI по скриншотам.

1. Стратегическое планирование: ChatGPT как Product Manager

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

Выгода: Экономия времени на переписывании кода из-за нечетких требований и получение структурированного Product Spec.

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

• Шаг 1: Описание идеи — ChatGPT — Опишите свою боль и желаемое решение.
• Шаг 2: Запрос спецификации — ChatGPT — Попросите составить документ без технических деталей, только функционал.

Промпт для планирования:

Я хочу создать YouTube Co-pilot. Главная фича: генератор превью, где я загружаю свое фото, а AI генерирует мое лицо с разными эмоциями (уверенный, улыбающийся, скептичный). Также нужен генератор техно-фонов и улучшайзер заголовков (даю название — получаю 5 вариантов с рейтингом кликабельности). Не пиши технические детали, составь только Product Specification.

Результат: Готовый текстовый файл со списком фич, который станет «библией» для AI-агента.

2. Создание гибридной дизайн-системы (Human + Agent)

Контекст: Для того чтобы приложение выглядело профессионально и консистентно, необходимо задать правила дизайна. Автор предлагает инновационный подход: создание двух версий дизайн-системы. Одна (HTML/CSS) — для визуальной проверки человеком, вторая (JSON-токены) — оптимизированная для чтения AI-агентом. Агент лучше понимает структуру данных в JSON, чем в громоздком коде стилей.

Выгода: Единый визуальный стиль (YouTube-style) и безошибочное использование цветов и отступов нейросетью.

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

• Шаг 1: Поиск референса — Dribbble — Найдите понравившийся дашборд и сделайте скриншот.
• Шаг 2: Промпт на генерацию — Codex Mac App — Загрузите скриншот и попросите создать систему.

Промпт для Codex:

Инициализируй Git репозиторий. Создай дизайн-систему на основе этого скриншота, но используй красный цвет в стиле YouTube. 
1. Создай папку для человека с превью компонентов (HTML). 
2. Создай папку 'agent' с токенами (colors, spacing, fonts) в формате JSON, который лучше всего подходит для AI-агентов. 
Если есть вопросы перед началом — спрашивай.

Результат: Набор JSON-файлов с константами дизайна, которые агент будет использовать при написании каждого нового компонента.

3. Оптимизация контекста через структуру документации

Контекст: Исследования показывают, что перегрузка файла agents.md или instructions.md лишней информацией снижает успех выполнения задач на 20%. Автор предлагает модульную структуру: вместо одного огромного файла инструкций использовать систему ссылок. Это позволяет агенту обращаться к нужным правилам только тогда, когда это необходимо.

Выгода: Снижение стоимости инференса, повышение точности кода и отсутствие «галлюцинаций» в архитектуре.

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

• Шаг 1: Создание структуры — Создайте папку docs/ с файлами product.md, architecture.md, testing.md.
• Шаг 2: Настройка Router-файла — Создайте agents.md, который будет служить «картой» и определять запрещенные действия (Anti-behavior).

Пример содержания agents.md:

 
---
 
## Rules
- Reference /docs/product.md for feature scope.
- Follow /docs/testing.md: every bug fix MUST include a regression test.
- Design tokens are in /agent/tokens.json.
 
 
---
 
## Anti-behavior (What NOT to do)
- DO NOT open files irrelevant to the current task.
- DO NOT load all docs into context at once.
- NEVER delete or relax tests to make them pass.

Результат: Агент работает в четких рамках, автоматически пишет тесты для критических фич и не ломает существующую архитектуру.

4. Интеграция API и итеративная разработка

Контекст: При разработке через Codex можно использовать «Plan Mode» (обсуждение перед кодингом) и «Review» (проверка диффов). В примере автор интегрирует Gemini API для генерации изображений. Важный инсайт: если агент выдает странные результаты (например, геометрические фигуры вместо лиц), это часто признак ошибки в API-ключе или использования fallback-рендерера.

Выгода: Работающее приложение с интеграцией современных LLM для обработки медиа.

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

• Шаг 1: Подключение API — Получите ключ на aistudio.google.com.
• Шаг 2: Настройка Hot Reload — Попросите агента настроить автоматическую перезагрузку сервера при изменениях кода, чтобы не делать это вручную.
• Шаг 3: Мульти-селектор — Если агент создал Radio-buttons, попросите заменить их на Multi-select chips для генерации нескольких вариантов эмоций сразу.

Команда для агента:

Исправь UI: замени выбор эмоций с radio buttons на multi-select chips. Добавь поддержку Gemini 1.5 Flash для генерации лиц. Перед изменениями сделай git commit.

Результат: Готовый инструмент, который по одной фотографии генерирует пачку превью с разными эмоциями и качественные техно-фоны.

FAQ

В: Чем Codex Mac App лучше Cursor? О: Codex предлагает более глубокую интеграцию с системными инструментами, возможность запускать несколько агентов в разных терминалах одновременно и специфические режимы планирования. Однако автор использует их в связке: Codex для логики и агентов, Cursor как визуальный редактор.

В: Зачем создавать JSON-токены для дизайна, если есть CSS? О: AI-модели гораздо точнее парсят JSON-структуры. Когда вы просите агента «сделай кнопку в стиле бренда», он берет конкретный гексакод и значение padding из JSON, что исключает визуальный разнобой в разных частях приложения.

В: Как избежать того, что агент забывает задачи при отправке новых сообщений? О: Автор предупреждает: не отправляйте новые промпты, пока агент выполняет текущую задачу. Codex может переключиться на новое сообщение, пометить его как выполненное и «потерять» контекст предыдущей большой задачи.

В: Почему автор рекомендует не использовать фреймворки (типа React/Next.js) в начале? О: Для простых утилит чистый JS/HTML часто лучше для AI-агентов, так как уменьшается количество шаблонного кода (boilerplate) и зависимостей, в которых агент может запутаться. Но это применимо только для MVP.

В: Что делать, если контекстное окно переполнено? О: Создавайте новый тред (Thread). В Codex это позволяет начать с «чистого листа», сохранив при этом доступ к файлам проекта. Перед этим убедитесь, что все важные изменения закоммичены.

Конспект создан на основе видео «Codex Mac OS App Tutorial» канала Codex. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=d4Uxfu7v8ro