Обновить

Как создать сайт с помощью Codex и GPT-5.6 — пошаговый гайд для новичка

Уровень сложностиПростой
Время на прочтение9 мин
Охват и читатели12K
Всего голосов 20: ↑9 и ↓11-2
Комментарии46

Комментарии 46

Отличный пример как НЕ надо делать сайт и ресурс подобрали нужный, тут прям одни новички сидят. И пусть UX / UI выйдут в окно, мы же типа должны только копии шаблонов делать, а не продукты для людей.

даже не читали, посмотрите второй сайт с пахлавой. Референс нужен для примера. А про "копии шаблонов" - ну вы идите поспрашивайте обычных людей видят ли они отличия между покупным шаблоном за 29 долларов, сгенерированным сайтом за 3 часа и уникальным сайтом, который студия пилила три месяца за 4900 долларов, мне очень интересно посмотреть на ответы)

Ты даже не понимаешь разницу между сайтом за 5 килобаксов и нейровысером. Исследования маркетолог делал? Статистику тесты интерфейса видимости элементов? Тип рекламы, какой товар услугу и как донести до потребителя. Сбор статмстики. Документацию с упаковкой брена, дальнейшим сео гео составил? Законадательство проверил? Авторские права не нарушил? В чем ценность этого нейро? Нейронка должна была повысить уровень и сложность ваших проектов. А толкаете вайб и поощеряете лень и деградацию.

Ну я смотрю вы знаете все и про меня и как лучше жить и трудиться людям. Оставлю вас в вашей реальности. Мой портал в вашу киновселенную закрывается. Адиос, мучачос

У меня 13 лет вебстудия была. Учитесь всегда и все время. Нет халявы нигде. И не надо рассказывать сказки.

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

Сайт нельзя создать за 3 часа. Вы не уловили моë сообщение. Сайт, то работа команлы, решение какой то боли, аналитика, составление тз, юр основы реклама. Сделать его можно и на тильде. Пока вы не выкините из своего сленга, легко вайб и пофигистичный подход, вы не прймете разницы между сайтом еа шаблоне за 1000 р, и сайтом за 5 тысяч баксов. Автор на примере своей поделки не показал стату, цифры посещаемости, конверсию, цену 1 лида. Ценность его труда 0. Ии это инструмент, но для создания качественного продукта надо задолбаться, вылодиться на 100%

сайтом за 5 тысяч баксов

А может для сайта, продающего конфеты и не нужен сайт от студии за 5k$?

странный коммент, особенно последняя его часть. Банальный пример - вы бельё стираете вручную или в машинке ? Конечно ИИ пока что не заменит полностью хорошего веб разаработчика, но через несколько лет вполне может сократить ручной труд до минимума, что уже происходит в передовых ИТ компаниях, ну а если вы будете и дальше все делать ручками, это будет фиаско))

Вы билье перед стиркрй разделяете по цвету по ткани? В курсе какой порошок для чего? Когда нужен кондиционер когда вреден. Чем стирка детской одежды отлична от взрослой? А почему не смотря на наличие стиралки есть химчистка? Ии не должно вести к деградации. Это значит, что читать учить, планировать создавать и учиться нужно еще больше.

Тестовый сайт. Простите, надо было открыть свой бизнес пахлавы и через полгода собрать сайт с нейронкой и отзывами, чтобы написать гайд выше? Зачётная идея)

Да забей просто у некоторых подгорает что ИИ забирает у них рабочие места.

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

Серьезно, клиент прям будет вас по коду гонять, тестирование на знание бэкэнда проводить ? Что мешает сделать хорошую аналитику и потом с помощью ИИ сделать mvp с админ частью. А потом с клиентом хоть до пенсии можно сидеть выравнивать кнопки и палитру. Так же по первому зову делать правки, это никто не отменял, вам же объясняют, что ИИ это инструмент, если вы умеете им пользоваться, то это будет преимуществом. Для примера нам пилили сайт, одна компания из Барнаула, пол года, и основная часть расходов по смете была - программирование и адаптация, если бы они с ИИ ускорили этот процесс нам было бы только в радость и пофиг, что это не человек погрязший в дедлайнах писал говнокод(нет), а ИИ.

с заказчиком часами готов сидеть выравнивать кнопки, тестить на разных устройствах

да уж, 5k надо как-то оправдать перед заказчиком

Честно я бегло прочитал но ключевой вопрос. Вот, вроде пока еще профильный ресурс, зачем нужны эти гайды как создавать сайты без опыта с помощью ИИ на ресурсе где большая часть программистов которые годами их делали самостоятельно? До сих пор еще многие коллеги находятся в стадии отрицания и считают, что качественный продукт с нейронкой не сделаешь, и тем более если ты не знаешь техничку. С чем я конечно не согласен, и с нейронками действительно можно делать полноценные работающие приложения, и по качеству кода не будет уступать многим уже реализованным проектам, конечно тех. Навыки позволяют лучше контролировать процесс, без них не получится ловить ии на ошибках или ставить под сомнения принятые ее решиния. Но подобные посты будут члюарать гораздо больше негатива. Просто склепать сайтик можно без гайдов на самых простых промтах, ведь сейчас буквально появилась там самая кнопка "сделать красиво". И не важно шаблонное или нет, сейчас все шаблонное и однотипное.

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

Как создать сайт с помощью Codex и GPT-5.6 — пошаговый гайд для новичка

  1. Открываем окно ИИ чата

  2. Пишем "Нужен сайт для продажи пахлавы, я не программист, сделай пошаговый гайд"

Ну... удачи!

Я что-то сомневаюсь, что вы, как не-программист, сделали как-то по-другому. Не обкладывались же книжками? Не брали курсы "как работать в Codex"? Не думаю, что сильно ошибусь, если скажу, что в статье вы просуммировали свой опыт общения с чатом. Не в одной сессии, и, скорее всего, не с первой попытки, но суть та же.

Зачем гайд если автор не сделал реальный продукт?

Техно/учебные демки нынче не ценятся

Терра нахрен не нужна. Сол для самых трудных задача и планов. Луна хай для всего остального.

сайт хорошего качества

А можно критерии качества, пожалуйста?

Это не от технаря вопрос, это про деньги. Как в это вкладываться?

Никак, это как развод с сайтами визитками которые стоили пару тыс.рублей а продавали за 20+ в 2010е. Сейчас же такой сайт почти любой ИИ сделать сможет со встроенным плагином и продавать визитки подобные можно только тем же мамонтам которые не знают про ИИ и когда совесть умерла

Уже насколько деградировали, что данные с паролями в нейронку отдаём... И по скринам видно оно написало на React с витом, следовательно ничего оно в SSG не сгенерировало и прощай SEO. Вообщем статья по типу "напишите промт: сделай мне продукт за 10000$, не делай никакие ошибки". Ну и в добавок стиль нейрохлама остался. В итоге что имеем? Или оно делает копию, даже не точь в точь (с таким же успехом можно оригинальный сайт выкачать просто) или ИИ слоп.

Вторым этапом делается. Написал же в гайде. Вот лишь бы вляпать чего-нибудь

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

По сабжу, хабр уже давно посещают не только профессионалы которые ходят закрытыми глазами

🤣🤣🤣

Отлично для тех, кто не программист и самостоятельно изучает. Обычно представляют в таких площадках какой нибудь фрагмент, кусок по направлениям ИИ и обсуждают и для непрограммистов многое непонятно. Здесь в одной статье представляется общая картина построения сайта пошагово это очень ценно лично для меня. Показалось что те, кто критикует очень продвинутые ребята в IT. У меня предложение для тех, кто критикует предложить указать свои достижения в 2,3 словах или даже ссылку дать на свою статью.

То, что вы показали, это не сайт, а веб-приложение (SPA). Это одностраничник для лендинга презентации мобильного приложения.

адаптировать контент под SEO
создать sitemap.xml и настроить robots.txt

А как вы собрались адаптировать под SEO пустой <div id="root"></div>? И какая у одностраничника может быть sitemap.xml (а главное - зачем и для кого)?

PS: А свой сайт, вы, почему то, сделали на WP… И криво его настроили:

  • в блоке «Рекомендуемые инструменты» (да, он скрыт от показа в CSS, но мы же (и ПС) умеем смотреть HTML) допущена ошибка. Для всех четырех абсолютно разных инструментов (логотипы WordPress, Rank Math SEO, VK WorkMail и др.) выводится один и тот же скопированный текст: «Создание блога. Выберите платформу для блога, которая позволит вам монетизировать контент…»

  • В том же блоке инструментов присутствует текст: «BloggersPassion был запущен в 2010 году. За последние 12 лет мы испробовали…». А копирайт в футере указывает на 2015–2026 годы. Появление англоязычного бренда BloggersPassion и несоответствие дат говорит о том, что сие было спиз@#но скопировано с зарубежного ресурса…

Спасибо, Шерлок Холмс по сайтам. Я то думал, почему меня в поиске не находят. А это оказывается я сайт спиздил. Смотрю, портал в киновселенную "Я крутой разработчик, ай да я!" открывается все шире и вы валите от туда как манная каша из кастрюли. Ну ептесь, я лучше побежал, а то задавите)

@moderator, прошу обратить внимание на этот комментарий. Мат, хамство и переход на личности не имеют отношения к технической дискуссии и, на мой взгляд, такому поведению не место на Хабре.

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

@moderator прошу обратить внимание на этого юзера. Мат, хамство и переход на личности не имеют отношения к технической дискуссии и, на мой взгляд, такому поведению не место на Хабре.

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

Вы берёте сайт, который браузер уже видит как DOM, CSS, шрифты, размеры, медиазапросы и исполняемый JavaScript, превращаете всю эту структурированную информацию в пережатое видео, а затем просите модель восстановить структуру, стили, адаптивность и анимации обратно из пикселей. Это примерно как распечатать исходники, снять листы на домофон, удалить репозиторий и попросить OCR восстановить проект. Видео может быть дополнительным референсом для динамики, но использовать его как основной источник — технически ущербный обходной путь.

Причём статья сама это прекрасно демонстрирует. Сначала заявляется, что ИИ якобы «запомнит» сайт по видео лучше, чем по скриншотам. Затем выясняется, что сложная анимация сломалась, композицию пришлось упрощать, понадобилось больше десяти ручных правок, скриншоты каждого этажа, ещё 5–8 итераций и примерно половина недельного лимита Codex. То есть в конце вы всё равно пришли к скриншотам и ручному визуальному тестированию, только перед этим установили Bandicam и сожгли огромный объём лишних токенов.

Нормальный процесс сегодня гораздо короче: дать агенту URL и браузерный доступ, при необходимости разрешить DevTools, чтобы он мог изучить DOM, применённые стили, консоль и сеть; передать репозиторий или поручить создать его; описать требования, контент и брендинг; попросить проверить адаптивность и опубликовать результат. Всё это можно сделать в ChatGPT Work/Codex, а затем развернуть через Sites или плагин Vercel, не выходя из одной задачи.

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

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

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

это, конечно, ужасно, ужасно... сжигать токены 😁

А конструктивного сказать, конечно же, нечего. Ну, учите дальше людей тому, что сами не знаете и не умеете и не представляете, как это работает даже. Успехов.

Вайбкодеры начали писать статьи. Статья уровня как в 3 шага положить жирафа в холодильник. На деле надо скачать кодек и написать ему - все. Данные гайд не требуется ))

Мне кажется данная статья не нужна. Неужели автор думает что хабаровчане не в состоянии скачать кодекс и написать ему по русски?) Люди когда пишут статьи делятся ЦЕННЫМ опытом. Этот опыт не имеет особой ценности.

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

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

Либо вы публикуете статью чтобы потешить своё эго - какой вы молодец, что покорили ИИ русским языком, и тогда бегаете и спорите с каждым.


Если статья плохая, нет смысла бегать и спорить с каждым. Вы её публикуете для людей или чтобы бегать и убеждать 90% людей что это хороший материал? Можно даже тогда не тратить время и токены, сразу дикпик разместить и бежать в комментарии, всех убеждать что это отличная штука)).

Я не спорил.

Посмеиваюсь над тем как "настоящие" программисты тратят время, чтобы доказать мне "ненастоящему" программисту (это так на самом деле, я простую функцию сам не напишу) какое говно я сделал.

Цель статьи была показать как создать сайт с помощью Codex новичку, а не строить мега-проект десятилетия.

А новичку то надо и всего что собрать проект попырому и показать клиенту (да, в моем понимании это так выглядит). Буду ли я сам генерить "боевые" сайты? Конечно!

"Настоящий" разработчик это хорошо, очень хорошо. Но стоит дорого.

У меня нет денег на хорошую разработку, а нанимать фрилансера самоучку, который соберет такой же сайт как Codex (если не хуже) и зависеть от него, у меня желания нет.

Ребята выше гарцуют в комментах как пони, оскорбленные новой лошадкой, зашедшей на их территорию. Она выглядит как конфетка. В понимании этих правильных пони у конфетки сомнительная начинка. Я даже соглашусь с этим, так как, да надо бы шарить в сайты, чтобы делать их хорошо. Но другим, обычным людям, на это плевать - им нужна экономия и скорость выполнения задачи. И нейронки это дают.

И простите за пони. Ну такие зануды, я не смог сдержаться.

нанимать фрилансера самоучку, который соберет такой же сайт как Codex (если не хуже) и зависеть от него..

- Как я Вас понимаю :) Захотелось даже Вас обнять и вместе всплакнуть:))

Мне понравилась Ваша статья, спасибо. Я как раз не специалист и не разбираюсь в коде. И для меня сейчас Кодекс - один из моих помощников. Я честно устала от программистов, которые через две недели куда-то пропадают НАВСЕГДА, от дикого сленгового хайпа, от общения "через губу". В этом очень много пустоты. Сделать "нормальный" сайт - уже звучит , как стигматизация.
Что такое "нормальный", хочется спросить? К сожалению, критерии "нормальности" для всех разные, а сведение нормальности к стандартам приводит к потере уникальности.....

Да, я за то, чтобы UI был уникальным, ничего не у кого не надо "скачивать". Но здесь автор просто показывает ПРИМЕР. Что можно и так...И брать его один-в-один никто же не заставляется. Каждый видит то - что хочет видеть, или не хочет....:)

Спасибо, Елена за поддержку. С вами согласен полностью!

А потом переделывай за вами, вайбкодерами...

хоть с куском хлеба останетесь, спасибо надо сказать еще)

Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации