Самый интересный результат разговора с нейросетью – иногда вообще не ответ. Это кнопка, которую можно нажать.
Представьте: у вас небольшая веломастерская. Клиенты спрашивают, какие велосипеды вы ремонтируете, когда можно приехать и как связаться с мастером. Вы тратите время и снова печатаете одно и то же. Хочется отправить одну ссылку: вот услуги, вот порядок работы, вот контакт.
Вот учебный сайт, который будем собирать: вымышленная мастерская, понятные услуги и кнопка перехода к контактам.
Теперь такую страницу можно попробовать собрать, объясняя задачу обычными словами. Попросить увеличить кнопку. Поменять заголовок. Проверить, что на телефоне текст помещается. Увидеть результат и сказать: «Да, вот так я и хотел».
Весь урок в одной строке: скачали приложение → открыли Codex → выбрали папку → вставили сообщение → нажали отправить → открыли свой сайт.
Ниже работаем в приложении для компьютера. Терминал и команды установки не понадобятся. Сначала сделаем одну понятную страницу; про GPT-6 Astra, цели и skills поговорим после первого результата. Если проходите урок с ребёнком, аккаунтом и установкой занимается взрослый с учётом возрастных правил сервиса.
В этом руководстве пройдём весь маршрут: откроем Codex, дадим ему первое задание и доведём сайт до понятной учебной версии. Покажем и альтернативу через Claude. Если вы уже общались с ИИ, здесь начинается следующий шаг: от «напиши мне текст» к «сделай вещь, которой можно пользоваться».
Материал подготовила команда 13FOX. Мы создаём сайты и цифровые сервисы для бизнеса. Поэтому вместе с первым красивым экраном покажем, как проверить результат и не потерять будущую заявку.
Codex, Claude и GPT – кто из них что делает
GPT-6 Astra – модель. Условно, та часть системы, которая понимает задание и придумывает решение. Codex – инструмент OpenAI для работы над кодом и проектами. В подходящей среде он может читать файлы, менять их, запускать команды и проверять результат.
Claude – помощник Anthropic и название семейства моделей. В обычном чате Claude можно обсуждать идею и создавать интерактивные результаты в отдельном окне – Artifacts. Claude Code работает с проектом и его файлами. То есть сравнивать Astra и Codex как две конкурирующие программы – примерно как выбирать между двигателем и автомобилем.
Для этой статьи основной путь – Codex и одна отдельная папка с сайтом. Claude покажем как альтернативу. Устанавливать оба инструмента и покупать две подписки ради первого упражнения не нужно.
Есть и полезная граница: чат, который показывает код, ещё не создал файл на вашем компьютере. Если вы видите только длинный ответ, попросите: «Создай файлы в выбранной папке и покажи предпросмотр». Так вы проверите, что работаете в нужном режиме.
Что приготовить до установки
Возьмите компьютер, доступный вам аккаунт и одну небольшую задачу. Например, страницу репетитора, портфолио фотографа или сайт мастерской. Для первого раза хорошо подходит ситуация, где посетителю нужно понять предложение и связаться с человеком.
Мы будем делать учебную страницу вымышленной веломастерской «Вело рядом». На ней будут главный экран, три услуги, порядок работы, ответы на вопросы и переход к контактам. Название учебное; реальные телефоны, отзывы и цены ИИ придумывать не должен.
Проверьте доступ до оплаты. Возможность пользоваться сервисом зависит от страны, возраста и условий аккаунта. У Claude минимальный возраст – 18 лет; Россия отсутствует в официальном списке поддерживаемых стран Anthropic. Сверьтесь с условиями регионального доступа Claude и правилами начала работы. Россия также отсутствует в списке поддерживаемых стран ChatGPT. Для OpenAI проверьте список поддерживаемых стран ChatGPT. Простота урока не отменяет условий сервисов.
Для входа в Codex через аккаунт ChatGPT отдельный API-ключ не нужен. API – способ подключать ИИ к своей программе; сегодня он нам не требуется. Тарифы и лимиты лучше смотреть в актуальных условиях OpenAI: подписка не означает неограниченное количество задач.
Лайфхак: сначала напишите три строки о будущем сайте. Кто вы? Что предлагаете? Какое одно действие должен сделать посетитель? Для мастерской: «Ремонтируем городские велосипеды. Помогаем понять, с чего начать ремонт. Посетитель находит контакт и уточняет возможность привезти велосипед».
Шаг 1 – скачиваем и устанавливаем приложение
Откройте официальную инструкцию установки OpenAI. В актуальном руководстве приложение называется ChatGPT desktop app, а Codex выбирается внутри него. Если вы видели старые инструкции с названием Codex app, это объясняет разницу.
- В блоке установки нажмите Download ChatGPT. Через стрелку рядом с кнопкой выберите свою систему. На Mac проверьте, соответствует ли вариант процессору вашего компьютера; на Windows выбирайте Windows. Linux также указан в текущем руководстве.
- Откройте скачанный установщик и следуйте его указаниям. Затем запустите приложение и войдите в аккаунт ChatGPT.
На скриншоте ниже – настоящая страница официальной инструкции. Белая кнопка Download ChatGPT находится под первым пунктом. Стрелка справа от неё открывает варианты загрузки. Расположение элементов может меняться после обновлений.
Не пугайтесь английских подписей: Download – скачать, Sign in – войти, New chat – новый разговор. Задания помощнику можно писать по-русски.
Где лежит скачанное приложение
После нажатия загрузки браузер сохраняет установочный файл. Найдите его в списке загрузок браузера или в папке «Загрузки» на компьютере. Сначала дождитесь окончания загрузки. Затем дважды щёлкните по файлу: один клик обычно только выделяет его, а два быстрых клика открывают.
На Mac загрузка из этой инструкции предлагает файл Codex.dmg. Если установщик показывает значок приложения и папку Applications, перетащите значок в Applications («Программы»). После этого запускайте установленное приложение из «Программ». На Windows откройте скачанный установщик и выполните показанные им шаги. Не нужно искать установщик в случайном каталоге программ: ссылка выше ведёт к официальному источнику.
При первом запуске приложение предложит войти. Используйте свой аккаунт ChatGPT и завершите вход, следуя экранным подсказкам. Пароль вводится в окне авторизации, а не сообщением помощнику. Когда появится рабочее окно, установка закончена.
Шаг 2 – открываем Codex и новый разговор
Найдите переключатель продукта в верхней части левой панели. Если он предлагает ChatGPT и Codex, выберите Codex. Затем нажмите New chat – «Новый разговор». Нужна сама надпись New chat, а не соседняя кнопка быстрого чата.
Перед вами будет пустое место для разговора и поле, в которое можно написать задание. Ничего сложного пока настраивать не нужно. Если название приложения или расположение элементов отличается, сверяйтесь с актуальным руководством OpenAI.
Следующие три изображения подготовлены по официальному интерактивному демо OpenAI: область интерфейса увеличена, посторонняя навигация убрана, добавлены указатели. Это поясняющие изображения, а не запись установки на вашем компьютере. В демо показана модель 5.6 Sol; она не является обязательным выбором для урока.
Что должно получиться: открыт Codex и новый разговор. Писать задание пока рано: сначала укажем, куда сохранять сайт.
Шаг 3 – создаём папку и выбираем её для проекта
Создайте на компьютере пустую папку my-first-site. На Windows: откройте Проводник, выберите удобное место, нажмите правой кнопкой мыши и создайте папку. На Mac: откройте Finder и выберите «Файл → Новая папка».
В приложении создайте локальный проект и выберите эту папку. Если проект уже создан, актуальная документация предлагает путь через меню проекта: Edit project → Add folder. После выбора проверьте название прикреплённой папки. Это место, где появятся файлы сайта. Подробности – в инструкции по локальным проектам.
Зачем отдельная папка? Вы сразу видите результат работы и не смешиваете эксперимент с семейными фотографиями или рабочими документами. На первом уроке дайте доступ именно к ней.
Если приложение просит подтвердить действие, прочитайте, что оно собирается сделать. Создать файл сайта внутри my-first-site – ожидаемый шаг. Удалить другую папку или опубликовать проект – уже отдельное решение. Для этого упражнения не требуется отключать все запросы подтверждения.
Папка, проект и разговор: что вы сейчас выбираете
Папка – место на диске, где будет лежать сайт. Проект – рабочее место в приложении, к которому подключается эта папка. Разговор – переписка о том, что нужно сделать. Для урока достаточно одной папки, одного проекта и одного разговора.
- Создайте my-first-site в понятном месте, например на рабочем столе. Название набирайте латинскими буквами. Внутри пока может быть пусто.
- Вернитесь в Codex. Если над полем сообщения есть Choose project («Выбрать проект»), нажмите его и выберите нужный локальный проект. Если проекта ещё нет, создайте его в разделе Projects, затем подключите папку.
- В меню проекта откройте Edit project → Add folder. В появившемся окне выбора файлов найдите созданную my-first-site. Выбирайте саму папку, а не весь рабочий стол.
- Завершите выбор кнопкой подтверждения в системном окне и проверьте, что в проекте указана my-first-site. Название кнопки подтверждения зависит от операционной системы.
Быстрая проверка перед большим заданием. Отправьте обычным сообщением: «Скажи, с какой папкой ты сейчас работаешь. Пока ничего не меняй». В ответе должна быть именно выбранная my-first-site. Если указано другое место, вернитесь к выбору проекта.
Шаг 4 – вставляем готовое задание
Задание нейросети называют промптом. Никакого тайного языка здесь нет: хороший промпт похож на понятную просьбу человеку, который пока ничего не знает о вашем деле.
Ниже готовый вариант. Откройте разговор внутри проекта с папкой my-first-site и вставьте задание целиком в Codex. Если у вас свой проект, замените мастерскую на репетитора, фотографа или другую услугу, сохранив конкретные требования.
Создай в выбранной папке учебный одностраничный сайт веломастерской «Вело рядом». Я новичок: объясняй коротко и по-русски, без необъяснённых терминов.
Посетитель – человек с городским велосипедом. Он должен понять, что мастерская делает, как начинается ремонт и где найти контакт.
Сделай главный экран с понятным заголовком и кнопкой «Как связаться», три услуги – диагностика, настройка тормозов, подготовка к сезону, блок «Как работаем», ответы на частые вопросы и контакты.
Стиль: светлый тёплый фон, тёмно-зелёный текст, один яркий акцент, крупные заголовки, много свободного места. Добавь простую собственную иллюстрацию велосипеда. Страница должна удобно читаться на телефоне.
Не выдумывай цены, отзывы, адрес и телефон. Напиши, что это учебная мастерская. В контактах укажи: «Перед публикацией добавьте свой телефон». Кнопка должна переводить к этому разделу; не имитируй отправку заявки.
Для упражнения сделай один файл index.html со встроенными стилями и нужным кодом. Он должен открываться двойным щелчком без установки дополнительных пакетов и без внешних ресурсов.
Создай файл, открой предпросмотр и проверь страницу на компьютере и узком экране. Нажми кнопки, раскрой вопросы, исправь найденные проблемы. Если у тебя нет доступа к браузеру, прямо скажи и дай мне короткую инструкцию ручной проверки.
Работай только в выбранной папке. Ничего не публикуй и не подключай платные сервисы. В конце покажи результат и объясни, как открыть его повторно.
Куда именно вставить текст
Сейчас нам нужны два открытых окна: эта статья и приложение Codex. В Codex уже должен быть выбран проект с папкой my-first-site. Не закрывайте статью: после отправки задания мы к ней вернёмся.
- В статье найдите большой блок задания. Он начинается словами «Создай в выбранной папке учебный одностраничный сайт веломастерской “Вело рядом”» и заканчивается просьбой объяснить, как открыть результат повторно.
- В веб-версии нажмите «Скопировать промпт» у нужного блока. В Word или если кнопки нет, выделите весь текст задания мышью, от первого слова до последнего предложения.
- При ручном выделении скопируйте текст: на Windows нажмите Ctrl + C, на Mac – Command + C. Знак «+» нажимать не нужно: удерживайте первую клавишу и один раз нажмите вторую.
- Переключитесь в Codex. В открытом разговоре найдите поле для нового сообщения внизу окна. Нажмите внутри него, чтобы появился мигающий текстовый курсор.
- Вставьте задание: Ctrl + V на Windows или Command + V на Mac. В поле должен появиться наш текст про мастерскую. Проверьте, что его начало и конец на месте.
- Нажмите кнопку отправки возле поля сообщения. В показанном интерфейсе это стрелка вверх; английская подпись действия – Send. После отправки задание появится в переписке.
Можно обойтись без сочетаний клавиш: нажать правой кнопкой по выделенному тексту и выбрать «Копировать», а затем правой кнопкой внутри поля сообщения – «Вставить». Если случайно вставили задание дважды, удалите повтор из поля перед отправкой.
Название модели возле поля может отличаться от картинки. В официальном демо показана GPT-5.6 Sol. Если у вас нет GPT-6 Astra, это не повод останавливаться: оставьте доступную модель Codex. Одинаковый дизайн страницы по одному заданию не гарантируется.
На картинке задание сокращено, чтобы было хорошо видно поле и кнопку. Для самого урока вставляйте полный блок выше: в нём есть оформление, нужные разделы и проверка.
Почему просьба такая подробная? Слова «сделай красиво» оставляют помощнику слишком много догадок. Здесь есть посетитель, цель, состав страницы, внешний вид и проверка. Вы заранее объясняете, что будете считать удачным результатом.
Маленький секрет: если не знаете, что написать, начните с фразы: «Помоги составить задание для моего первого сайта. Задай мне три вопроса, которые сильнее всего повлияют на результат». Ответьте своими словами, затем попросите собрать всё в один промпт.
Шаг 5 – нажимаем отправить и ждём результат
Теперь Codex выполняет задание. В разговоре могут появляться короткие сообщения о работе, сведения о создании файлов и проверках. Не нужно отправлять промпт повторно после каждого сообщения: промежуточное пояснение ещё не означает, что работа завершена.
Иногда помощник задаёт вопрос или ждёт разрешения. Прочитайте его. Если вопрос касается оформления учебного сайта, можно ответить: «Выбери подходящий вариант сам, сохрани требования из задания». Если приложение просит доступ к папке, проверьте, что указана именно my-first-site. Разрешайте только то действие, смысл которого вам понятен.
Пока работа идёт, не переименовывайте и не переносите папку. Дождитесь сообщения с результатом или конкретного вопроса. Здесь нет обещания фиксированного времени: оно зависит от модели, задачи и доступных инструментов.
Ответ, файл и открытая страница – три разных результата
Ответ в переписке – это слова помощника. Например: «Создал страницу». Даже длинный блок с кодом остаётся содержимым разговора, пока файл не сохранён в папке.
index.html – файл вашего сайта. Его нужно искать внутри my-first-site через Проводник на Windows или Finder на Mac. Значок файла может выглядеть по-разному; ориентируйтесь на имя, которое назвал помощник.
Открытая страница – то, как браузер показывает этот файл: заголовок мастерской, услуги, иллюстрацию и кнопки. Именно здесь вы сможете нажать «Как связаться» и проверить, произошёл ли переход к контактам.
Откройте папку my-first-site и дважды щёлкните по index.html. Если вместо страницы появился текст с кодом, нажмите на файл правой кнопкой и выберите «Открыть с помощью», затем свой браузер. Вручную перепечатывать код не требуется.
Сайт открылся? Нажмите кнопку контактов и раскройте один вопрос. Пока это учебная мастерская: переход к разделу контактов должен работать, а настоящий телефон мы ещё не добавляли.
Шаг 6 – открываем сайт и делаем его своим
После выполнения найдите в папке файл index.html и откройте двойным щелчком. Он должен появиться в браузере. HTML – обычный формат веб-страницы. В нашем упражнении внутри одного файла помещаются и текст, и оформление, и простые действия.
Если вместо сайта открылся редактор с кодом, нажмите на файл правой кнопкой и выберите «Открыть с помощью» → ваш браузер. Если Codex показал только текст ответа, напишите: «Сохрани результат именно как index.html в папке проекта».
Сравните результат с учебным примером в начале статьи. Ваш экран может отличаться: ИИ не обязан каждый раз выбирать одинаковое оформление. Важнее, чтобы выполнялись требования задания.
В веб-версии материала можно скачать учебный пример сайта, распаковать архив и открыть index.html. Внутри нет установки, настоящей формы заявок или подключения к ИИ. Промпт выше позволяет создать собственную версию с нуля.
Представьте, что вы открыли страницу и поняли: посетителю непонятно, можно ли привезти велосипед без записи. Вот первая содержательная правка. Она полезнее, чем ещё один час подбирать зелёный цвет.
Добавь в ответы на вопросы пункт «Можно ли приехать без записи?». Ответ: «Сначала свяжитесь с мастерской и уточните загрузку». Не обещай, что мастер примет велосипед сразу. Сохрани остальные блоки.
Дальше меняйте по одной понятной вещи. «Сделай лучше» – расплывчато. «На телефоне кнопка теряется; увеличь её и поставь сразу после описания» – проверяемая задача.
Лайфхак со скриншотом: если можете приложить изображение к разговору, покажите экран и напишите, где проблема. Например: «Вот этот большой отступ между заголовком и кнопкой. Уменьши его на телефоне, на компьютере оставь». Не нужно знать название CSS-свойства, чтобы описать то, что вы видите.
Шаг 7 – проверяем сайт как посетитель
Самый коварный момент: страница уже выглядит убедительно, и хочется отправить ссылку. Остановитесь на одну проверку. Нажмите каждую кнопку. Прочитайте контакты. Уменьшите окно браузера. Красивый экран может скрывать пустую ссылку или текст, который невозможно прочитать.
Скопируйте запрос для проверки:
Пройди сайт как новый посетитель. На ширине 390 пикселей и на большом экране проверь: нет ли горизонтальной прокрутки, читается ли текст, помещаются ли кнопки. Проверь переход к контактам и раскрытие каждого вопроса. Пройди интерактивные элементы клавишей Tab. Отдели реально выполненные проверки от рекомендаций. Исправь проблемы и покажи, что изменилось.
Теперь повторите основное сами:
- За первые несколько секунд понятно, что предлагает мастерская.
- Кнопка «Как связаться» приводит к контактам.
- Каждый вопрос раскрывается, текст не пропадает.
- На узком экране ничего не уезжает вправо.
- Нет выдуманных отзывов, цен, стажа и обещаний.
- Видно, что это учебная страница и настоящего контакта пока нет.
Узкое окно – полезная проверка, но перед настоящим запуском откройте сайт и на физическом телефоне. Там другие размер текста, клавиатура и ощущения от нажатия.
Если что-то сломалось, не нужно разбираться во всём сообщении об ошибке. Скопируйте его и добавьте: «Я нажал вот это, ожидал вот это, получил вот это. Найди причину и исправь, не переписывая весь сайт». Описание действия даёт помощнику гораздо больше, чем «у тебя не работает».
Пять мест, где легко застрять, и что написать
Получил объяснение, но папка пустая
Я вижу ответ, но не нахожу файл в my-first-site. Проверь, доступна ли тебе выбранная папка. Если доступна, создай в ней index.html по нашему заданию. Если нет, объясни, какое действие мне нужно выполнить в приложении.
Не понимаю, где искать готовый файл
Покажи точный путь к созданному index.html. Объясни, как найти его через Проводник или Finder и открыть двойным щелчком. Я новичок.
Открыл файл, а там пусто или ошибка
Открываю index.html из папки my-first-site, но вижу пустую страницу или ошибку. Проверь файл и исправь причину. Он должен открываться двойным щелчком. Если тебе нужен текст ошибки, скажи, что именно скопировать.
Попросил правку, а сайт выглядит по-старому
Сначала обновите страницу кнопкой обновления в браузере. Если ничего не изменилось, напишите:
После обновления страницы я не вижу последнюю правку. Проверь, в какой файл ты её сохранил. Назови путь и объясни, какой файл мне открыть. Не создавай ещё одну копию сайта без необходимости.
Кнопка есть, но нажатие ничего не меняет
Нажимаю «Как связаться», но страница не переходит к контактам. Исправь именно этот переход, сохрани остальные блоки. Проверь кнопку и отдельно скажи, удалось ли тебе выполнить проверку в браузере.
Как закрыть всё и продолжить завтра
После завершения работы файл остаётся в выбранной папке. Чтобы завтра посмотреть сайт, снова откройте my-first-site → index.html. Для просмотра этой автономной учебной страницы не нужно заново отправлять задание.
Чтобы изменить сайт, откройте приложение Codex и вернитесь в тот же проект и разговор. Папка должна оставаться на прежнем месте. Перед большой переделкой скопируйте её и назовите копию my-first-site-backup.
Продолжаем учебный сайт «Вело рядом» в этой папке. Сначала посмотри текущий index.html. Добавь в ответы на вопросы пункт о записи перед визитом, сохрани оформление. После изменения объясни, как посмотреть результат.
Это и есть следующий шаг: вы открываете уже сделанную вещь и объясняете одну нужную правку. Начинать сайт заново каждый раз не требуется.
GPT-6 Astra вышла – что это меняет для обычного человека
OpenAI выпустила GPT-6 Astra 3 сентября 2026 года. В официальной документации компания описывает её как свою наиболее способную модель для сложной работы с кодом, приложениями и исследованиями. Акцент – на длинных задачах: разобраться в материалах, выполнить работу, проверить и учесть новые требования. Дата – из журнала выпусков OpenAI, описание возможностей – из руководства по моделям.
Переведём на язык нашей мастерской. Нам мало получить красивый заголовок. Нужно, чтобы помощник создал страницу, открыл её, заметил съехавший блок и исправил его. Именно такая последовательная работа делает новые модели интересными за пределами беседы.
В API Astra появились асинхронные вызовы инструментов и возможность корректировать задание по ходу работы. Это возможности для разработчиков, которые встраивают модель в свои продукты, а не названия кнопок, которые нужно срочно искать новичку. Подробнее – в официальном руководстве Astra.
Первый полезный ход: не ждать идеального доступа. Если Astra уже есть в списке моделей вашего Codex, можно выбрать её. Если нет – пройдите этот урок на доступной модели. Доступ зависит от аккаунта, приложения и этапа развёртывания; одна подписка не гарантирует появления Astra. Умение объяснять задачу и проверять сайт останется с вами при следующем обновлении.
Любите цифры и сравнения? Мы отдельно разобрали результаты GPT-6 Astra и условия её рекордов. Здесь проверим более личный показатель: сможете ли вы открыть собственную страницу и объяснить, что на ней работает.
А если мне привычнее Claude
Можно пройти тот же путь через Claude Code: для настольного режима Code нужен подходящий платный план. Для бесплатного первого опыта ниже есть путь через Artifacts. На официальной странице Claude скачайте приложение для своей системы и войдите. Затем откройте Code → Local → Select folder, выберите отдельную папку и вставьте наше задание. Для локального запуска на Windows требуется Git; если приложение сообщает, что его нет, следуйте ссылке и инструкции из официального руководства Claude Code.
Claude Code уже входит в настольное приложение: для этого маршрута не нужно отдельно устанавливать его через терминал. Нужен подходящий платный план – Pro, Max, Team или Enterprise. Проверьте текущие тарифы Claude до оплаты и помните о лимитах.
Если пока хотите только попробовать идею, есть более короткая дорожка – Artifacts в обычном Claude. Это отдельное окно рядом с перепиской, где можно посмотреть, например, созданную HTML-страницу. Возможность есть и на Free. В настройках аккаунта путь к включению: Settings → Capabilities → Code execution and file creation. Подробности – в инструкции по Artifacts.
Создай интерактивный HTML-артефакт: учебный сайт веломастерской «Вело рядом» с услугами, раскрывающимися вопросами и переходом к контактам. Используй требования из задания ниже. Покажи результат рядом с чатом. Не публикуй его.
После этой строки добавьте содержательную часть большого промпта: посетитель, блоки, стиль и запрет выдумывать данные. Требование работать в локальной папке здесь уберите: вы просите артефакт внутри чата. Если нужна именно папка проекта и дальнейшая работа с файлами, выбирайте Claude Code.
Не устраивайте новичку чемпионат моделей. Начните в одном инструменте. Когда получите рабочую страницу, попросите другой ИИ проверить текст или предложить три улучшения. Сравнивать конкретный результат гораздо полезнее, чем спорить о брендах в пустом чате.
Семь привычек, которые делают результат заметно лучше
Говорите о посетителе, а не только о дизайне
«Хочу модный сайт» объясняет мало. «Человек с телефона ищет ремонт тормозов и хочет понять, как связаться» сразу помогает выбрать порядок блоков. Напишите одну такую фразу перед следующим заданием.
Просите варианты только там, где действительно выбираете
Для заголовка полезно получить три версии. Для всей страницы десять вариантов могут запутать. Попросите: «Предложи три заголовка: спокойный, дружелюбный и прямой. Объясни, кому подходит каждый». Затем выберите и двигайтесь дальше.
Сохраняйте удачную версию до большого поворота
Прежде чем просить «переделай всё в другом стиле», скопируйте папку сайта и назовите копию my-first-site-backup. Или попросите помощника объяснить, как сохранить версию через Git – систему истории изменений. Для первого урока понятной копии достаточно.
Давайте пример вместе с объяснением
Референс – пример, на который вы ориентируетесь. Покажите сайт или скриншот и назовите, что нравится: «крупные заголовки, короткий первый экран, хорошо видимая кнопка». Просите собственное оформление, а не копирование чужого логотипа, текста и фотографий.
Отделяйте факты от красивого наполнения
Если не дать реальные данные, на странице легко появится «15 лет опыта» или «500 довольных клиентов». Попросите: «Перечисли все утверждения, для которых тебе нужны мои факты». Для бизнеса честная пустота на этапе черновика лучше выдуманной репутации на готовой странице.
Расходуйте лимит на результат
Не запускайте десять разговоров с одной просьбой «сделай вау». Соберите несколько связанных замечаний в сообщение: заголовок слишком длинный, кнопка низко, услуга непонятна. Максимальная глубина рассуждений не является обязательным условием для смены цвета. Лимиты и доступные настройки проверяйте в своём аккаунте.
Просите короткую передачу проекта
В конце напишите: «Создай README с описанием сайта, способом открытия, списком файлов, выполненных проверок и того, что осталось сделать». README – обычная памятка рядом с кодом. Через неделю она позволит продолжить работу без повторного объяснения всей истории.
Эти привычки пригодятся и тем, кто уже пишет код. Новичок получает понятный маршрут, опытный пользователь – более точные критерии приёмки. Дополнительные приёмы мы собрали в статье о промптах для Claude.
Сайт уже работает? Вот три приёма, которые стоит попробовать дальше
На первом сайте хватает обычной переписки: попросили, посмотрели, поправили. Но вскоре появляются другие желания. Хочется, чтобы Codex сам прошёл весь список недочётов. Чтобы вы понимали, какой режим включён. Чтобы удачную проверку можно было повторить на следующем сайте, не переписывая длинное задание. Для этого пригодятся цели, команды и навыки.
1. Goal: дать работе понятный финиш
Допустим, страница уже открывается, но на телефоне текст теснится, кнопки нужно проверить, а фотографии загружаются слишком медленно. Можно отправлять каждую правку отдельно. А можно задать Goal – сохраняемую цель текущей задачи. Codex сможет продолжать работу между ответами и сверяться с условиями готовности. Такой режим полезен, когда решение требует нескольких попыток и проверок. Для замены одного слова обычного сообщения достаточно. Официальное руководство по Goals.
В приложении наберите /goal в поле сообщения и выберите команду. Если сначала нужно разобраться с объёмом работы, начните с /plan. Для нашего сайта цель может звучать так:
Доведи этот сайт до готового локального прототипа. Проверь его на широком экране и при ширине 390 пикселей: текст читается, горизонтальной прокрутки нет, все ссылки ведут по назначению. Исправь найденные проблемы и покажи итоговые скриншоты. Сохрани согласованные тексты и не выдумывай цены. Работай только с папкой проекта. Заверши после проверки всех пунктов; если что-то нельзя проверить, объясни причину. Публикацию пока не выполняй.
Здесь есть финиш, который можно проверить глазами. «Сделай идеально» такого финиша не даёт. И число 390 – выбранная нами ширина проверки, а не особый режим OpenAI.
В desktop-приложении активная цель показывается над полем сообщения. Кнопки в этой строке позволяют поставить её на паузу, продолжить, изменить текст или очистить цель. Правки можно писать по ходу работы. Если команды нет, попросите Codex проверить поддержку Goals в вашей версии и помочь включить функцию. Управление целью в приложении.
2. Косая черта: короткий путь к нужному действию
Напечатайте / в поле сообщения. Откроется список доступных команд: их можно выбирать, а не учить наизусть. Состав зависит от вашей среды и доступа. Для первых проектов достаточно небольшой шпаргалки. Справочник команд приложения.
/plan– включить или выключить режим планирования. Полезно перед большой переделкой: сначала согласовать, что строим./model– выбрать доступную модель для текущей задачи./reasoning– выбрать глубину рассуждения. Это настройка работы модели; готовность сайта всё равно проверяем./status– посмотреть состояние контекста и лимиты. Пригодится, когда переписка стала длинной./review– запустить проверку изменений в коде. Для проекта с Git помогает найти проблемы; дополнительно попросите открыть страницу и проверить её глазами./init– подготовить файл правил проектаAGENTS.md. Например, чтобы сохранить требования к языку сайта и проверкам перед завершением работы.
Лайфхак: после /init попросите: «Объясни созданные правила простыми словами и добавь: не выдумывать отзывы, проверять мобильную версию, показывать результат перед публикацией». Сначала прочитайте файл: эти инструкции могут влиять на дальнейшую работу.
Все команды в этой шпаргалке относятся к приложению Codex. Вводите их в то же поле, где писали задание для сайта. Дополнительное окно терминала открывать не нужно.
3. Skills: сохранить удачный способ работы
Представьте, что вы нашли удобную последовательность проверки: открыть сайт на двух размерах экрана, проверить ссылки, заметить слишком мелкий текст и собрать понятный отчёт. Её можно сохранить как skill, или навык. Это повторяемая процедура с инструкциями и при необходимости примерами, файлами или скриптами. Плагин – устанавливаемый набор, в который могут входить такие навыки и подключения к сервисам. Как устроены skills и plugins.
В Codex наберите $ и выберите доступный навык. Для собственного начните с встроенного создателя:
$skill-creator Создай навык проверки моего сайта перед показом клиенту. Он должен проверять мобильную и настольную версии, ссылки, читаемость текста и отсутствие выдуманных отзывов. Результат – короткий список проблем с приоритетами и скриншоты, если доступны инструменты браузера. Навык должен только проверять: исправления выполнять по отдельной просьбе.
Создатель поможет уточнить процедуру. Затем попробуйте её на своём сайте и исправьте пропущенные шаги. Навык появится под выбранным при создании именем – его и вызывайте через $. В ChatGPT для навыков используется @; здесь мы работаем именно в Codex.
Если хочется взять готовый навык, вызовите $skill-installer и попросите показать доступные варианты для локальной установки. После установки Codex обычно обнаруживает навык автоматически; если его нет в списке, перезапустите приложение. Для начала достаточно одного полезного навыка, который вы действительно будете повторять. Создание и установка skills.
Как показать сайт людям и не перепутать макет с запуском
Открытый на компьютере index.html уже работает у вас. Но адрес, начинающийся с file://, ведёт к вашему файлу. А localhost означает компьютер, на котором открыта страница. Отправить такой адрес другу – недостаточно: его браузер не получит ваш сайт.
Для учебной страницы есть два понятных пути. Первый – отправить архив с файлом, чтобы другой человек распаковал его и открыл у себя. Второй – разместить файлы на хостинге, то есть компьютере в интернете, который отдаёт страницу посетителям. Домен – привычное имя сайта; для первой демонстрации достаточно временного адреса хостинга.
Если вы выбрали Claude Artifacts, на индивидуальных планах Free, Pro и Max есть публикация через Publish и публичную ссылку. Перед нажатием проверьте, что в артефакте нет личных данных и учебных материалов, которые нельзя показывать всем. Это способ поделиться артефактом, а не автоматическое подключение собственного домена и системы заявок. Шаги – в официальной инструкции публикации.
Для файлового проекта попросите помощника подготовить конкретный маршрут:
Сайт готов для учебной демонстрации. Предложи один подходящий способ размещения статического HTML-сайта с учётом моей страны и аккаунтов. Проверь действующие условия и ограничения. Объясни шаги, стоимость, как получить публичную ссылку и как убрать сайт. Пока ничего не публикуй и не оплачивай.
Когда способ выбран, вы понимаете цену и видимость данных, можно отдельно дать команду на публикацию. После неё попросите помощника открыть публичный адрес и сами проверьте его на телефоне.
Для реального бизнеса следующий вопрос – что происходит после контакта. Кнопка может переводить на телефон или в мессенджер. Форма должна доставлять обращение туда, где его увидят. Сообщение «Заявка отправлена» без настоящей доставки не решает задачу.
В нашей учебной странице переход к контактам работает, но сам контакт нужно заменить вашим. Если добавляете форму, проверяйте весь путь: отправили тестовое обращение → получили его → поняли, кто отвечает клиенту. Потом идут защита от спама, понятное поведение при ошибке, аналитика и обслуживание. Когда появится сбор персональных данных, требования к нему нужно разобрать для вашей страны и сценария.
В разборе этапов разработки сайта мы показываем, почему работа продолжается после макета. Здесь проходит разумная граница: своими силами удобно попробовать идею и собрать первый экран; с командой – довести важный для бизнеса сценарий до надёжной работы.
Первый проект может быть совсем маленьким
Необязательно начинать с мастерской. Например, по той же схеме можно собрать личное портфолио, страницу семейного праздника без открытых персональных данных, каталог своих работ или страницу курса. Выбирайте задачу, для которой легко объяснить: «Вот кто придёт, вот что увидит, вот что сможет сделать».
А когда начнёте просить личный кабинет, оплату или запись на свободное время, появятся новые вопросы. Где хранятся данные? Как отменить запись? Кто получит доступ? Это хороший момент составить следующий этап проекта, а не дописывать к первому промпту двадцать функций.
Самое приятное в первом сайте – не ощущение, что вы выучили всё программирование за вечер. Это момент, когда собственная мысль становится вещью на экране, а следующую правку вы уже можете сформулировать сами.
Откройте пустую папку. Дайте одно задание. Нажмите первую кнопку. Если материал помог пройти этот путь, отправьте его человеку, у которого давно есть идея и пока нет первого шага.
Где сверять обновления
Инструкции и доступ проверены 7 сентября 2026 года. Перед установкой или оплатой сверяйтесь с текущими официальными страницами:
Частые вопросы о первом сайте с ИИ
Нужно ли уметь программировать, чтобы начать пользоваться Codex?
Для учебной одностраничной версии можно начать с описания задачи обычными словами. Понадобится проверять результат и объяснять правки. Чем сложнее сайт и важнее данные, тем больше требуется технической проверки.
Обязательно ли использовать GPT-6 Astra?
Нет. Если модель доступна в вашем аккаунте, её можно выбрать. Если нет, создайте первый сайт на доступной модели. Конкретный промпт, работа с папкой и проверка результата важны при любом выборе.
Можно ли попробовать Claude бесплатно?
В обычном Claude можно создавать Artifacts и на плане Free в пределах его лимитов. Claude Code в настольном приложении требует подходящего платного плана. Доступ также зависит от страны и условий аккаунта.
Почему у меня получился другой дизайн?
Задание задаёт требования, но не фиксирует каждый пиксель. Это нормально. Сравните структуру, читаемость и работу кнопок. Для более близкого оформления дайте свой референс и объясните, какие его признаки нужны.
Можно ли сразу использовать такую страницу для бизнеса?
Сначала замените учебные данные, настройте настоящий способ связи, проверьте мобильную версию и публичный адрес. Если есть формы, оплата или личный кабинет, отдельно проверьте доставку данных, безопасность и поведение при ошибках.
Уже сделали первый экран – давайте разберём следующий шаг
Если хотите превратить прототип в сайт для клиентов, пришлите в 13FOX ссылку или скриншоты, описание услуги и маршрут будущей заявки. Начнём с разбора: что уже работает, каких функций не хватает и что нужно проверить перед запуском. На этой основе обсудим состав работ – от доработки страницы до интеграции с вашей системой заявок.