Как начать делать сайты с Codex

От папки с материалами до первой страницы в браузере. Настроим Codex, выберем визуальное направление, подготовим изображения и соберём сайт.

Читать гайд

01 / О ЧЁМ ГАЙД

О чём этот гайд

Папка с текстами, картинками и правилами — с этого начинается работа над сайтом с агентом. Вы описываете задачу, он создаёт и меняет файлы, открывает страницу и проверяет результат. Вы смотрите, что получилось, и направляете работу.

В этом гайде работаем в Codex. Он умеет и собирать страницу, и генерировать изображения для неё. Например, можно попросить иллюстрацию для первого экрана, сохранить её в проект и сразу поставить на страницу.

Хороший сайт начинается с понятной задачи, материалов и выбранного направления. В новой среде этот путь записан по шагам: бриф, разбор референсов, визуальный план, изображения, сборка и проверка в браузере.

В архиве есть готовый пример «Денсио»: светлая грудная клетка на тёплом градиенте, мягкие интерфейсные элементы и три этапа проверки исследования. Его можно открыть, посмотреть в движении и разобрать по исходникам. Для своего сайта вы выберете собственный образ и композицию.

Перед практикой покажу три примера из моей работы с ИИ-агентами на одном клиентском проекте. Они объясняют сам подход: переезд сайта, библиотеку блоков и правила, которые остаются в папке. Пошаговая часть после примеров полностью посвящена Codex.

Готовый пример «Денсио» из архива: первый экран страницы.

Открыть «Денсио»

Чем лучше подготовлена папка, тем точнее агент понимает вашу задачу.

02 / НА ПРАКТИКЕ

Что даёт агент на практике

Все три примера — с одного клиентского проекта. Это не демо: сайт живой, на нём формы заявок и бронирование.

Сайт уехал с конструктора на свой код

Сайт жил в конструкторе. Летом решили уводить его на свой код, чтобы развитие сайта не зависело от чужой платформы.

Агент снимал живую страницу узел за узлом и собирал её заново на нашем коде, визуально один в один. Так, страница за страницей, с 11 июля по 13 августа переехал весь сайт: три языка, двадцать четыре страницы, блог и отзывы в админке, формы заявок. Все 66 адресов, которые были в поиске, остались на месте: проверяли по выгрузке из Search Console, потерь нет.

Что меняется

Потолок платформы исчез. То, из-за чего раньше отказывали клиенту, стало обычной задачей агенту.

Фрагмент клиентской страницы после переноса на свой код.

Сначала витрина блоков, потом страницы

До первой страницы мы с агентом собрали витрину в Storybook. Это бесплатный инструмент, что-то вроде каталога: каждый кусок сайта лежит в нём отдельно. У нас там дизайн-система сайта: цвета, шрифты, отступы, кнопки, карточки, шапка, подвал, форма заявки. И секции, то есть крупные блоки страницы: первый экран, отзывы, вопросы. Любой блок можно открыть, посмотреть в разных состояниях и сверить со старым сайтом. Страницу для этого собирать не нужно. Первую страницу потом собрали уже из этих блоков.

Остальные страницы агент собирал из того, что уже есть. Правило записано ему в инструкцию: переиспользуй готовое, а если контент не влезает — расширь блок, но ничего не выбрасывай. Нужного блока в библиотеке нет — агент делал его один раз и клал туда же, а дальше его просто брали готовым. К концу переезда готовых секций в библиотеке было тридцать пять.

В журнале сохранились девять моих правок по страницам. Что агент с ними делал — в следующем примере.

Что меняется

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

Витрина блоков проекта в Storybook: слева библиотека, справа один блок отдельно от страниц

Правки остаются в правилах проекта

Самое ценное в этом проекте — не сайт, а файл, который к нему прилагается. К моменту передачи проекта в журнале было 27 правил с описаниями ошибок и проверок.

Девять из них появились после моих правок. Кнопка открывается в той же вкладке, а должна в новой. Кнопку сделали мимо дизайн-системы. Переключил вкладку, а название осталось от прежней. Каждую правку он превращает не в разовое исправление, а в правило и проверку: перед следующей страницей читает весь журнал, после правки дописывает туда новый пункт.

Что меняется

Перед следующей страницей агент читает накопленные правила. Это помогает не возвращаться к тем же ошибкам. В начале сентября я передал эту папку другому человеку вместе с правилами работы.

Фрагмент журнала: описания ошибок и правила проверки следующих страниц

Как ещё помогает агент

Разбирает сайт, который вам нравится, до сетки, шрифтов и ритма — и переносит приёмы, а не копирует куски

Применяет десять правок клиента за один проход, а не за десять

Сохраняет согласованные правила в файлах, чтобы использовать их в следующих задачах

Проверяет страницу по списку, как второй человек, и докладывает, что не так

03 / ТРИ СТУПЕНИ

Чем агент отличается от чата и от конструктора

Три ступени, чтобы дальше было понятно.

Чат

В обычном разговоре вы получаете ответ и переносите его в работу сами. Какие файлы и действия доступны чату, зависит от его инструментов и выданных разрешений.

Конструктор и генератор страниц

Тильда и Webflow дают визуальный редактор, готовые блоки и публикацию. Вы собираете сайт средствами выбранной платформы. Для многих задач этого достаточно; дополнительные возможности зависят от самой платформы и подключений.

Агент

Живёт у вас в папке. Видит ваши файлы, читает их, меняет, создаёт новые, запускает проверки. Вы ставите задачу, а он сам решает, что для неё нужно сделать, делает и проверяет.

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

Знакомый конструктор никуда не исчезает. Codex — ещё один способ работать над сайтом, когда вы хотите управлять его файлами и развитием.

04 / ИНСТРУМЕНТ

Страница и изображения — в Codex

Одна задача, одна папка проекта. Описываете результат обычными словами.

Собирает сайт

Читает бриф и материалы, создаёт файлы, меняет текст и оформление, запускает проверки. Можно попросить открыть страницу в браузере и показать, что получилось на компьютере и телефоне.

Генерирует изображения

Создаёт иллюстрации, фоны и другие изображения по описанию или референсу. Попросите встроенную генерацию и сохранение в папку сайта. Доступность этой возможности и лимиты зависят от вашего плана.

Для этого гайда используем вход через аккаунт ChatGPT. Отдельный API-ключ для встроенной генерации не нужен.

Установка, генерация и работа с файлами сверены по документации OpenAI 15 сентября 2026 года. Интерфейс может обновляться.

05 / ДО УСТАНОВКИ

Что проверить перед началом

Аккаунт, инструменты и лимиты — до того, как вы начали собирать сайт.

Откройте приложение и проверьте, что можете начать задачу в Codex. Для повторения части с изображениями нужна доступная встроенная генерация.

Ссылки на официальные условия и инструкции — в шаге установки ниже.

01План и оплата

Войдите в собственный аккаунт ChatGPT. Перед оплатой проверьте, какие возможности Codex и способы оплаты доступны именно вам. Цены и состав планов меняются, поэтому здесь не фиксируем сумму подписки.

02Генерация изображений

Проверьте наличие встроенной генерации на вашем плане. Если её нет, первую страницу можно собрать со своими фотографиями или иллюстрациями и вернуться к генерации позже.

03Лимиты работы

Сообщения, сложные задачи и изображения расходуют доступные лимиты. Генерация изображений расходует их заметнее обычной переписки. Следите за остатком в приложении; дополнительные кредиты покупаются отдельно.

Подготовьте рабочую папку

Один сайт — одна папкаМатериалы и правила разных клиентов не смешиваются.

Материалы, которыми можно пользоватьсяСвои фото и тексты или файлы, на использование которых есть разрешение.

Начните с одной страницыНа ней выберете вид и проверите, как работает ваш процесс.

Сохраняйте удачные версииПеред большой переделкой попросите Codex сохранить текущую версию проекта.

Для старта достаточно понятной задачи, своих материалов и доступного Codex.

06 / УСТАНОВКА

Откройте папку и пройдите бриф

Шесть шагов. Установка — через настольное приложение; работа над сайтом — в Codex.

Сначала материалы и направление. Потом сборка.

В среде есть порядок работы и документы для каждого этапа. Codex уточнит задачу, разберёт референсы, запишет композицию и поведение страницы, а после сборки проверит результат в браузере.

Скачать среду для Codex

ZIP · версия 2. Правила, три скилла, шаблоны документов и готовый «Денсио» с исходниками. Распакуйте папку starter; файл START.html поможет сориентироваться.

Шаг 01

Установите приложение ChatGPT

Скачайте настольное приложение с официальной страницы OpenAI. В актуальной версии оно называется ChatGPT. После установки войдите в аккаунт. Если приложение у вас уже стоит, обновите его.

Порядок установки для вашей системы можно сверить в инструкции OpenAI. В документации есть варианты для macOS, Windows и Linux.

Страница скачивания ChatGPT для компьютера.

Шаг 02

Выберите раздел «Работа»

В верхней части окна нового чата выберите «Работа» рядом с «Чат», как на скриншоте ниже. В английском интерфейсе этот раздел называется Work. Убедитесь, что можете начать новую задачу. Для сценария этого гайда API-ключ не нужен.

Проверьте планы и лимиты Codex. Для части с изображениями нужна доступная встроенная генерация.

Раздел «Работа» в актуальной русской версии приложения ChatGPT.

Шаг 03

Скачайте среду — папку вашего сайта

Скачайте архив и распакуйте его: на Mac — двойным кликом, на Windows — через «Извлечь всё». Внутри папка starter. Переместите её туда, где храните проекты, например в «Документы».

Откройте START.html двойным кликом. Оттуда можно перейти к готовому «Денсио», посмотреть его документы и прочитать инструкцию. Для начала своего сайта откройте эту же папку starter в Codex.

Скачать среду для Codex

Что внутри

AGENTS.md и .agents/skills/ — порядок работы и три скилла: brief проводит бриф, new-page собирает страницу, page-reviewer проверяет результат.
BRIEF.md — задача сайта, аудитория, предложение и подтверждённые факты.
REFERENCES.md и DESIGN.md — разбор ориентиров и выбранный визуальный план: шрифт, палитра, композиция, мобильная версия и движение.
materials/ — ваши тексты и изображения. В ASSETS.md — что нужно для каждой секции, откуда взят файл и где оставлено место под текст.
shared/ и SITEMAP.md — общие файлы сайта и список страниц. Цвета, шрифты и отступы можно менять в одном месте.
REVIEW.md и HANDOFF.md — результаты проверок, оставшиеся задачи и точка продолжения работы.
examples/densio/ — готовый сайт, две иллюстрации с исходниками и запросами, локальный Manrope и заполненные документы примера.

На Mac скрытую папку .agents можно увидеть в Finder: Command + Shift + точка. Сам Codex читает её и без этого.

START.html: навигация по новой среде и готовому примеру.

Шаг 04

Создайте проект и выберите папку starter

Нажмите «Создать новый проект». В открывшемся окне «Создать проект» укажите название своего сайта. В разделе «Исходные папки» нажмите на область добавления папок и выберите папку starter, которую скачали и распаковали на предыдущем шаге.

Выбирайте распакованную папку, а не ZIP-архив. В ней сразу должны лежать AGENTS.md, BRIEF.md и папка shared. Если внутри ещё одна starter, выберите её. После выбора папки нажмите «Создать проект».

Начните новую локальную задачу в этом проекте. Когда приложение попросит разрешение, смотрите, что именно агент собирается сделать. Для обычных правок достаточно доступа к папке сайта. Если назначение запроса непонятно, попросите Codex объяснить его.

Название пунктов может меняться. Текущий порядок — в инструкции по проектам.

Окно «Создать проект»: выберите распакованную папку starter в разделе «Исходные папки».

Шаг 05

Начните с брифа

Привет, начинаем. Прочитай AGENTS.md и проведи меня по брифу сайта.

Codex спросит, что за проект, для кого сайт и какое действие должен сделать посетитель. Затем — что вы предлагаете, какие материалы есть, какие сайты нравятся и почему. Ответы он сохранит в BRIEF.md.

Отвечайте своими словами. Готовые тексты и фото положите в materials. Если чего-то нет, так и скажите: агент объяснит, как это влияет на страницу, и предложит, чем заменить. Факты, отзывы и цены придумывать нельзя.

Заполненный BRIEF.md примера «Денсио», открытый в просмотрщике документов среды.

Шаг 06

Подготовьте визуал и выберите направление

Сгенерируй иллюстрацию для первого экрана по нашему брифу встроенным инструментом Codex. Сохрани её в materials/media. Текст и подписи сделай в HTML.

Дайте 2–3 сайта-ориентира и поясните, что нравится: композиция, шрифт, фотографии, поведение при прокрутке. Codex запишет наблюдения в REFERENCES.md. После выбора направления — палитру, шрифты, сетку и поведение страницы в DESIGN.md. Шрифты попросите показать на вашем заголовке.

Затем составьте план изображений в materials/ASSETS.md: какой кадр нужен каждой секции, какого размера и где будет текст. Начните с одного ключевого изображения. После выбора можно сделать остальные в том же стиле. Подписи и кнопки остаются отдельными элементами страницы.

О возможностях и ограничениях — встроенная генерация изображений.

Визуальный план «Денсио» из среды: главный образ, палитра, типографика и поведение.

07 / ПЕРВАЯ СТРАНИЦА

Теперь можно собирать

У вас есть папка проекта, первая страница и правила для следующей. Её уже можно открыть и предметно обсуждать.

Публикация и рабочая отправка заявок — отдельный следующий шаг.

«Собери главную по брифу»

Добавьте: «Используй BRIEF.md, выбранный DESIGN.md и материалы из materials/ASSETS.md. После сборки открой страницу в браузере». Codex создаст index.html и подключит общие файлы. Он должен проверить композицию уже на первом экране: текст, изображение и кнопка не мешают друг другу.

Готовый «Денсио»: изображение, текст и интерфейс используют общую сетку.

Посмотрите в браузере

Напишите: «Открой страницу в браузере и покажи компьютерную и мобильную версии». Или откройте index.html двойным кликом. Прокрутите страницу целиком, нажмите меню и кнопки, соберите замечания в один список.

Та же сцена на телефоне: предмет расположен над текстом и интерфейсом.

«Проверь страницу»

Попросите использовать page-reviewer. Он сверит страницу с брифом и выбранным направлением, проверит компьютер, телефон, короткое и широкое окно, кнопки и промежуточные положения анимации. В REVIEW.md запишет, что действительно проверил. Найденные ошибки исправляются одним списком; после этого повторно проверяются затронутые места.

REVIEW.md готового примера: выполненные проверки и оставшиеся ограничения.

08 / КАК УСТРОЕНА РАБОТА

Из чего складывается результат дальше

Папка развёрнута, страница есть.

Чем точнее то, что кладёте на старте, тем меньше кругов

Тексты, фото, ссылка на сайт, который нравится, и честное «этого у меня нет». Пустой запрос даёт безликую заготовку не потому, что модель плохая, а потому что ей не из чего собирать.

Данные только настоящие

Цены, отзывы и достижения берутся из материалов. Правило в файле помогает удерживать это ограничение, а проверка ловит нарушения. Сгенерированная картинка — иллюстрация, а не доказательство результата.

Второй взгляд перед сдачей

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

Правки пачкой

Посмотрели страницу, собрали все замечания в один список, отдали за раз. Десять правок по одной — это десять прогонов и вечер.

Сделал не то — уточняйте, не переписывайте

Скажите, что именно не так. Работает как с человеком: точная правка лучше нового длинного описания.

Правила живут в файлах, а не в вашей памяти

Уточнили задачу — попросите обновить BRIEF.md. Нашли повторяющуюся ошибку — попросите предложить правило для скилла и согласуйте его. В следующей задаче агент сможет прочитать это из папки.

09 / УСИЛЕНИЕ

Чем усилить агента потом

Сразу всё это ставить не надо. Сначала первая страница, потом по одному инструменту, когда упрётесь в конкретную нехватку. Иначе получится ворох подключений, в котором непонятно, кто виноват, когда что-то сломалось.

Скиллы хранят способ работы: как провести бриф, собрать и проверить страницу. Подключения дают доступ к другим сервисам. Часть таких подключений работает через MCP — набор инструментов, которыми агент может пользоваться.

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

01Дизайн-скилл в стартере

В рецепте new-page есть руководство по арт-дирекции: главный визуал, типографика, композиция и движение. Оно помогает принимать решения, но не заменяет ваши материалы и выбор направления.

02Impeccable и Taste Skill

Это дополнительные инструкции по дизайну. В наших пробах одного такого скилла оказалось недостаточно: без брифа и материалов результат оставался слабым. В этот стартер они не включены.

03Mobbin и Osmo

В Mobbin можно искать примеры интерфейсов, в Osmo — примеры движения и взаимодействий. Смотрите, какой приём решает вашу задачу. Условия доступа, лицензии и доступные подключения проверяйте на сайте выбранного сервиса перед использованием.

Добавляйте инструменты, когда понятно, какую часть работы они улучшат.

10 / НЕ РАБОТАЕТ

Если что-то не работает

01Открыли страницу, а шапки и подвала нет

Попросите Codex проверить пути к shared, загрузку скриптов и ошибки браузера. Отправьте ему, как именно открывали страницу. Это полезнее, чем пересобирать всё с нуля.

02Агент написал «проверено», а блок не раскрывается

Попросите повторить проверку в браузере после полной прокрутки и проверить проблемный блок. Затем прогоните приёмщика.

03На телефоне кнопка залипает после нажатия

Попросите Codex проверить эффект наведения и включить его только для мыши. После правки проверьте кнопку на телефоне.

04На телефоне обрезан первый экран

Попросите проверить страницу на узком и коротком экране, например 390×640. Адресная строка и панели встроенных браузеров уменьшают доступное место; одной проверки на большом телефоне недостаточно.

05Агент выдумал цену или отзыв

Скажите: «Сверь все факты с BRIEF.md и материалами. Удали неподтверждённые утверждения, перечисли, чего не хватает». Затем проверьте эти места сами.

06Сайт «выглядит как сделанный нейросетью»

Проверьте исходные материалы. Есть ли главный визуал, конкретное предложение и выбранный ориентир? Попросите Codex показать, что именно он взял из каждого. Если на странице только текст и одинаковые карточки, одного нового цвета будет мало.

07Правок много, и каждая по кругу

Соберите их в файл PRAVKI.md и скажите «примени всё из файла».

08Нужно продолжить в новой задаче

Попросите сохранить текущее состояние в BRIEF.md и SITEMAP.md: что готово, что осталось и с чего продолжать. Откройте новую задачу в той же папке и попросите прочитать эти файлы.

09Codex не начал бриф

Проверьте, что открыли папку с AGENTS.md. Напишите: «Прочитай .agents/skills/brief/SKILL.md и выполни инструкцию». Если навык не появился в списке, перезапустите приложение.

10Вместо изображения агент написал промпт

Уточните: «Используй встроенную генерацию изображений, создай сам файл и сохрани его в проект». Если инструмент недоступен, проверьте план и лимиты; временно используйте своё изображение.

11 / ЧТО ДАЛЬШЕ

Страница — это ещё не сайт, который можно сдать

Этого достаточно, чтобы начать: агент стоит, папка знает ваш сайт, первая страница открыта.

Чтобы сайт работал у клиента, нужно решить ещё несколько задач.

Домен и публикацияЧтобы ссылку можно было отправить.

ФормаИз которой заявки падают вам, а не в никуда.

АдминкаЧтобы клиент правил тексты сам и не дёргал вас по каждой правке.

Защита форм и ключейЧтобы через месяц не разбирать спам и утечки.

Передача проектаЧтобы другой человек получил файлы, доступы и понятную инструкцию, как продолжать работу.

Это следующий этап после первой страницы. Каждый пункт нужно настроить и проверить.

12 / КУРС

Курс «Сайты с ИИ»

Это программа, по которой я веду людей от рабочего места до сайта, сданного клиенту.

Формат

10 недель, 6 модулей, 44 урока. От рабочего места до сдачи сайта клиенту.

Проекты

Лендинг, корпоративный сайт, интернет-магазин и интерактивный сайт. В программе — работа с содержанием, дизайном, админкой и публикацией.

Сдача

Проверка сайта, безопасность и передача проекта. Первая страница из этого гайда — начало этого пути.

Посмотреть программу

Продолжим на YouTube и в Telegram

Разборы сайтов, работа с ИИ-агентами и новые примеры из практики.

YouTube