Конспект: Codex AI: 7 стадий создания профессиональных сайтов без AI-эффекта — VibCoderZ - VibeCoderz

Загрузка...

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

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

✨ Что получите: Вы научитесь настраивать автономную работу AI-агента, внедрять кастомные дизайн-системы через design.md, генерировать брендированные ассеты и деплоить готовые проекты в один клик прямо из чата.

1. Настройка окружения и инициализация проекта

Контекст: Codex — это не просто чат, а полноценная среда разработки внутри приложения ChatGPT, имеющая доступ к файловой системе вашего компьютера. Чтобы AI работал эффективно и не задавал лишних вопросов, необходимо правильно инициализировать проект и настроить файл инструкций agents.md. Это позволяет агенту действовать автономно: запускать сервер, проверять ошибки и управлять структурой папок без вашего участия.

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

Выгода: Экономия времени на рутинных операциях и возможность работы в режиме «одного окна» без открытия VS Code или терминала.

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

Шаг 1: Создание проекта — ChatGPT App] — Скачайте десктопное приложение ChatGPT, переключитесь в режим Codex и создайте новую папку для проекта.
Шаг 2: Инициализация контекста — Codex] — Используйте встроенную команду /init, чтобы создать файл agents.md.
Шаг 3: Настройка автономности — agents.md] — Добавьте в начало файла инструкцию, чтобы Codex сам выполнял действия, а не просил вас о них.

# Инструкция для добавления в agents.md:
Whenever you can perform an action yourself, do so. This includes starting the app, installing dependencies, and verifying that it was built correctly. Do not ask for permission for routine technical tasks.

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

2. Использование навыков (Skills) для борьбы с «AI-слопом»

Контекст: Стандартные модели часто выдают однотипный дизайн («AI slop»), который легко узнать по характерным цветам и отступам. Чтобы этого избежать, используются «скиллы» — наборы инструкций, которые Codex подгружает перед работой. Вместо того чтобы каждый раз объяснять правила хорошего дизайна, вы подключаете проверенный набор правил, например GPT taste, который заставляет модель использовать современные визуальные паттерны.

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

Выгода: Получение уникального, дорого выглядящего интерфейса, который не похож на стандартные шаблоны ChatGPT.

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

Шаг 1: Установка скиллов — Codex] — Введите команду установки (ссылки на репозитории обычно в описании автора) и перезапустите приложение.
Шаг 2: Подключение в чате — Codex] — Используйте команду / для выбора нужного скилла.
Шаг 3: Запрет стандартного стиля — Prompt] — Явно укажите модели не использовать стандартный site skill от OpenAI для дизайна, так как он часто выдает слишком простые результаты.

/gpt-taste
Build the landing page using Next.js. 
Important: Do not use the default 'site skill' for designing. 
Follow the rules in GPT taste skill for animations and layout.

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

3. Внедрение визуальной идентичности через design.md

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

Тайминг: [07:23], [07:53], [08:30]

Выгода: Мгновенный ребрендинг всего сайта без изменения его структуры и логики.

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

Шаг 1: Поиск системы — Browser] — Зайдите на ресурсы вроде getdesign.md или библиотеку Aurabuild и скачайте понравившийся файл.
Шаг 2: Импорт в проект — Codex] — Прикрепите файл к чату и дайте команду на внедрение.
Шаг 3: Обновление стилей — Codex] — Попросите переработать сайт согласно новой системе, сохраняя структуру.

Create a design.md file in the project and copy the contents of the attached file into it. 
Then, revamp the entire site according to this visual system. 
Keep the layout, structure, and animations exactly as they are—only change the visual styling (colors, spacing, etc.).

Результат: Профессиональный сайт с уникальной цветовой схемой и консистентным брендингом.

4. Генерация брендированных ассетов и иллюстраций

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

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

Выгода: Полностью оригинальный контент, соответствующий смыслу текста и стилистике сайта.

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

Шаг 1: Создание папки ассетов — Codex] — Попросите создать папку /public/assets и прописать путь к ней в agents.md.
Шаг 2: Включение Plan Mode — Codex] — Нажмите кнопку «Plan», чтобы модель сначала описала, какие изображения она создаст, прежде чем тратить лимиты.
Шаг 3: Генерация и замена — Codex] — Дайте промпт на замену стоковых заглушек реальными изображениями.

Replace all stock images on the landing page with original illustrations. 
The images must match the visual system in design.md and the content of each section. 
Generate avatars for the testimonial section as well. 
Put everything in the /public/assets folder.

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

5. Оптимизация производительности и деплой

Контекст: Современные сайты с тяжелыми анимациями могут тормозить. Последний этап — оптимизация кода и публикация. Codex позволяет делать «чекпоинты» (git commits) прямо в чате, чтобы можно было откатиться назад, и деплоить сайт в интернет одной командой.

Тайминг: [13:12], [13:48], [14:43]

Выгода: Быстрый сайт, доступный по прямой ссылке, без необходимости настройки Vercel или GitHub вручную.

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

Шаг 1: Оптимизация — Codex] — Попросите модель оптимизировать код для уменьшения задержек (latency).
Шаг 2: Создание бэкапа — Codex] — Перед важными изменениями просите сделать локальный коммит.
Шаг 3: Публикация — Codex] — Используйте site skill для деплоя.

# Команда для коммита:
Make a local commit named "final-build-optimized".
 
# Команда для деплоя:
Deploy this site using the site skill so it's accessible via a public link.

Результат: Оптимизированный, быстрый сайт, опубликованный в сети с возможностью подключения кастомного домена.

FAQ

В: Нужно ли знать программирование, чтобы использовать Codex? О: Базовое понимание структуры файлов полезно, но Codex спроектирован так, что вы можете управлять процессом через текстовые промпты. Он сам устанавливает зависимости и запускает локальный сервер.

В: Чем Codex лучше обычного Cursor или Claude? О: Codex интегрирован прямо в экосистему ChatGPT, имеет встроенный браузер для верификации дизайна и уникальную функцию «Computer Use» для проверки визуальных багов. Также он позволяет деплоить сайты без сторонних сервисов.

В: Что делать, если модель исчерпала лимиты? О: Автор рекомендует план за $20 (Plus), которого хватает для большинства задач. Если вы строите много, можно перейти на Pro-планы ($100-200). Важно следить за индикатором использования в меню Codex.

В: Как исправить баги в верстке, которые не видит код? О: Используйте метод скриншотов. Сделайте скриншот проблемной зоны, прикрепите к чату и попросите Codex исправить это. Встроенный инструмент аннотаций пока работает нестабильно.

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

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

ChatGPT Desktop App — среда, в которой работает режим Codex — https://chatgpt.com/download
Getdesign.md — библиотека дизайн-систем в формате .md — https://getdesign.md
Aurabuild — бесплатная библиотека design.md и конструктор — https://aurabuild.co
21.dev — библиотека готовых React/Next.js компонентов — https://21.dev
Phosphor Icons — рекомендуемый автором сет иконок — https://phosphoricons.com
Godly & Fancy Components — ресурсы для поиска вдохновения и сложных компонентов — упомянуты в видео.

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