Загрузка...
Смарт-конспекты YouTube-видео — ключевые идеи и инсайты без необходимости смотреть часовые ролики
Узнайте, как использовать Codex Mac App для разработки AI-инструментов: от дизайн-систем для агентов до интеграции Gemini API.
🎯 О чём этот конспект: Пошаговое руководство по использованию десктопного приложения Codex для Mac OS (от создателей одноименной AI-модели). В видео демонстрируется полный цикл разработки SaaS-продукта: от брейншторминга в ChatGPT до генерации дизайн-системы, настройки правил для AI-агента и создания работающего приложения для генерации YouTube-превью и заголовков.
👤 Кому будет полезно: Вайбкодерам, разработчикам, использующим AI-агентов, и создателям контента, желающим автоматизировать рутинные задачи по оформлению видео.
✨ Что получите: Вы научитесь правильно структурировать проект для AI-агента, создавать «дизайн-систему для машин», ограничивать контекст для повышения точности кода и использовать мультимодальные возможности Codex для создания UI по скриншотам.
Контекст: Автор утверждает, что модель Codex (как и большинство кодинг-моделей) не оптимизирована для написания подробных спецификаций продукта. Чтобы избежать технического долга и путаницы на старте, лучше сначала использовать ChatGPT для проработки логики и функционала без привязки к коду. Это позволяет «отполировать» идею до того, как агент начнет тратить токены на написание файлов.
Выгода: Экономия времени на переписывании кода из-за нечетких требований и получение структурированного Product Spec.
Как применить:
Промпт для планирования:
Codex
KodaCodeЯ хочу создать YouTube Co-pilot. Главная фича: генератор превью, где я загружаю свое фото, а AI генерирует мое лицо с разными эмоциями (уверенный, улыбающийся, скептичный). Также нужен генератор техно-фонов и улучшайзер заголовков (даю название — получаю 5 вариантов с рейтингом кликабельности). Не пиши технические детали, составь только Product Specification.Результат: Готовый текстовый файл со списком фич, который станет «библией» для AI-агента.
Контекст: Для того чтобы приложение выглядело профессионально и консистентно, необходимо задать правила дизайна. Автор предлагает инновационный подход: создание двух версий дизайн-системы. Одна (HTML/CSS) — для визуальной проверки человеком, вторая (JSON-токены) — оптимизированная для чтения AI-агентом. Агент лучше понимает структуру данных в JSON, чем в громоздком коде стилей.
Выгода: Единый визуальный стиль (YouTube-style) и безошибочное использование цветов и отступов нейросетью.
Как применить:
Промпт для Codex:
Инициализируй Git репозиторий. Создай дизайн-систему на основе этого скриншота, но используй красный цвет в стиле YouTube.
1. Создай папку для человека с превью компонентов (HTML).
2. Создай папку 'agent' с токенами (colors, spacing, fonts) в формате JSON, который лучше всего подходит для AI-агентов.
Если есть вопросы перед началом — спрашивай.Результат: Набор JSON-файлов с константами дизайна, которые агент будет использовать при написании каждого нового компонента.
Контекст: Исследования показывают, что перегрузка файла agents.md или instructions.md лишней информацией снижает успех выполнения задач на 20%. Автор предлагает модульную структуру: вместо одного огромного файла инструкций использовать систему ссылок. Это позволяет агенту обращаться к нужным правилам только тогда, когда это необходимо.
Выгода: Снижение стоимости инференса, повышение точности кода и отсутствие «галлюцинаций» в архитектуре.
Как применить:
docs/ с файлами product.md, architecture.md, testing.md.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.Результат: Агент работает в четких рамках, автоматически пишет тесты для критических фич и не ломает существующую архитектуру.
Контекст: При разработке через Codex можно использовать «Plan Mode» (обсуждение перед кодингом) и «Review» (проверка диффов). В примере автор интегрирует Gemini API для генерации изображений. Важный инсайт: если агент выдает странные результаты (например, геометрические фигуры вместо лиц), это часто признак ошибки в API-ключе или использования fallback-рендерера.
Выгода: Работающее приложение с интеграцией современных LLM для обработки медиа.
Как применить:
Команда для агента:
Исправь UI: замени выбор эмоций с radio buttons на multi-select chips. Добавь поддержку Gemini 1.5 Flash для генерации лиц. Перед изменениями сделай git commit.Результат: Готовый инструмент, который по одной фотографии генерирует пачку превью с разными эмоциями и качественные техно-фоны.
В: Чем 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