Советы и трюки для веб-сайтов на Vibe Coding
Сайт boxmining's boxmining.com с 2016 года на WordPress, стоимостью примерно $200 в месяц, перешёл на сборку Astro, созданную за 24 часа с использованием двух сгенерированных AI документов дизайна и примерно 800 миллионов токенов инференции.
Базовый стек и стоимость
Старый сайт работал на WordPress и был «очень дорогим в эксплуатации — почти около 200 долларов США в месяц» из-за размера, количества ссылок и трафика. Стек теперь Астро («код на самом деле относительно чистый»), что, по словам создателя, легко для агентов в навигации. Архив Boxmining охватывает 2016 год с более чем 1000 статей.
Два документа перед любым кодом
Весь рабочий процесс — «получить два документа, отправить их ИИ, позволить ему выполнить свою работу». Создатель сделал скриншоты существующего сайта, рассказал Клоду, что ему не понравилось («слишком ИИ», «не дружелюбно», «застряло в прошлом») и попросил его создать руководящие принципы по брендингу — Клод вернул HTML-набор с цветовой палитрой, шрифтами и мокапами. Второй документ был руководством по изображениям созданным с помощью Opus, привязанным к категориям темы сайта. Он называет эти два «профессиональными руководствами», которые настроили остальной вывод.
Деление модели: умный дизайнер, дешёвая рабочая сила
Для этапа проектирования он использовал Claude ("Claude уже потратил половину своих кредитов на использование" только на планирование) и Opus для руководства по изображениям. Реализация перешла к MiniMax-M3 внутри Claude Code: "вы в основном получаете стоимость MiniMax, но с такой, знаете, почти как Claude кодовой интеллигенцией." Он явно рекомендует "использовать наибольший интеллект для проектирования, а затем можно нанять своих китайских рабочих." Он предупреждает, что GLM 4.x создаёт некрасивые сайты; GLM 5.1 и 5.2 подходят.
Счёт за токены и сэкономленное
Общие расходы: "почти 800 миллионов токенов" примерно за один день, потребовавшие обновления до Максимальный план плюс дополнительные кредиты API. Он противопоставляет это предыдущим тратам на людей — «раньше мы нанимали внешних консультантов по брендингу, и это стоило нам примерно… пять тысяч долларов» — и представляет AI-проход как дешевый по сравнению с этим, хотя токены «не дешевы». Он называет результат «M3 был на 100% достаточен для этого», с ~200$/мес за хостинг WordPress ушли. Проход Higgsfield/Claude Code Design анонсируется для части два для настройки на уровне пикселей.
Что действительно сдвинуло дело с мертвой точки
Три вещи: документ с руководством по брендингу, документ с руководством по изображениям, и принудительное соответствие макету один к одному ("сделать соответствие теме и стилю один к одному"). Первый проход M3 сохранил старые компоненты и сделал "рестайлинг"; явные подсказки для соответствия макету исправили это. Цветовые категории сайта и направление в пастельных и дружелюбных тонах были взяты прямо из обращения к внешнему виду Claude.ai — "Мне нравится сайт Claude, знаешь, он как дружелюбный… такой, с волнистыми линиями, пастельных цветов."