17 сентября меня окончательно достала страница статьи на собственном сайте. Над текстом плеер, под текстом блоки, потом ещё связанные материалы. Всё это появлялось постепенно, у каждой добавленной детали когда-то была причина. Но вместе они уже мешали читать.
Начали с малого: упростили плеер, убрали лишнее. Я посмотрел на результат и понял, что хочу пересмотреть весь сайт.
28 сентября новая версия pimenov.ai заработала на основном домене. Между этими двумя событиями было около десяти дней работы с Codex: картинки будущих страниц, обсуждения, вёрстка, мои бесконечные замечания, проверки и ещё замечания. Несколько раз казалось, что уже всё готово. Потом я открывал очередную страницу.
Работал я с моделью Astra в высоком режиме размышления — high. Степан, так я называю своего помощника в Codex, генерировал варианты, писал код, проверял результат и вёл дневник проекта. Я выбирал направление, смотрел страницы, спорил, возвращал на переделку. Хочу рассказать, как это происходило и почему сайт получился именно таким.
Сайт вырос из своей первой версии
Первый pimenov.ai возник семь месяцев назад, довольно спонтанно. Я ещё работал с OpenClaw и только осваивал создание сайтов с агентами. Главное пожелание у меня было простое: сайт должен быстро загружаться. Так мы выбрали Astro, затем я взял одну из популярных бесплатных тем и начал её дорабатывать.
Появлялись новые материалы и возможности. Я добавлял аудио, рекомендации, разные блоки, правила оформления. Постепенно сайт стал тесен для того, что в нём накопилось.
Сейчас на нём более 900 материалов: авторские статьи, практические руководства, новости и заметки. База знаний выросла из инструкций, которые я сначала сохранял для себя в Notion. Статьи — из моего опыта, вопросов и вещей, которые мне хотелось разобрать. Всё это я выбираю сам и пропускаю через себя.
Когда мы стали обсуждать обновление, я понял, что уже думаю о сайте как об авторском журнале с большой библиотекой. Мне хотелось, чтобы человек чувствовал этот объём, видел, куда можно погрузиться, и при этом не терялся.
В обсуждении появилась формулировка, которая мне понравилась: «одновременно объём и порядок». Она и стала ориентиром.
Сначала мы рисовали картинки страниц
Незадолго до этого я увидел в X идею: сначала сгенерировать изображение будущей страницы, а потом по нему делать вёрстку. Решил попробовать.
Я начал новый чат, подробно рассказал Степану, что меня перестало устраивать, как вырос сайт и что я хочу сохранить. Дальше мы генерировали варианты. Смотрели на них, меняли расположение блоков, пробовали другие шрифты и композиции.
Мне нравится в такой работе просить ещё один вариант. Бывает, трудно объяснить словами, чего именно не хватает. А когда перед тобой два разных решения, уже легче понять собственную реакцию.
Сначала в макетах оставалось привычное меню слева. Потом появился вариант с верхним меню, и я за него зацепился: боковая панель давно занимала слишком много места. Мы смотрели чужие сайты, обсуждали референсы. Многое мне не нравилось, и я каждый раз объяснял почему.
По ходу я показывал варианты моему партнёру по проектам Арсению Камышеву и дизайнеру Вартану Чинчяну, с которым работаю много лет. Их замечания тоже влияли на результат. Например, Вартан помог отделить представление автора от навигации: меню должно помогать перемещаться, а для имени, портрета и короткого авторского текста нашлось своё место на странице.
После главной мы стали генерировать картинки внутренних страниц и мобильных вариантов. Когда направление нравилось, переходили к работающей странице в браузере.
И тут начиналось самое интересное. На картинке всё может быть красиво, а настоящий заголовок занимает пять строк. Мы специально взяли один из самых длинных заголовков на сайте — 111 символов — и стали проверять на нём. Свои тексты и обложки быстро показывают, выдерживает ли дизайн реальную жизнь.
Большая часть правок происходила прямо внутри Codex
Со стороны можно представить эту работу как переписку: я отправляю задание, агент возвращает готовый сайт. У меня день за днём происходило много маленьких обсуждений вокруг конкретных страниц.
Степан собирал страницу, я открывал её во внутреннем браузере Codex и шёл по ней, оставляя аннотации. Здесь слишком пусто. Тут маленькая обложка. Этот блок перетягивает внимание. Почему кнопка стоит отдельно от того, к чему относится?
В последние дни я много работал голосом. Включал микрофон, смотрел на страницу и обсуждал её со Степаном. Он в это время вносил изменения, я видел результат и продолжал. Скриншоты с телефона тоже были, но это лишь часть процесса. Многое мы придумывали и доводили прямо в Codex, глядя на живую страницу.
Из этих обсуждений постепенно выросли общие правила. Если мы договорились, как выглядит карточка, как ведёт себя плеер или где на телефоне скрывается декоративная иллюстрация, это нужно было сохранить для следующих страниц.
Так появилась собственная библиотека блоков: карточки, плеер, оглавление, промпты, завершающие панели. Часть элементов взяли из готовых библиотек, часть сделали сами. Принятые решения записали. Теперь, когда нужна новая страница, есть из чего её собирать и с чем сверять результат.
Я смотрел, как люди пользуются сайтом
К этому моменту у меня уже собиралась статистика. Было интересно понять, как люди попадают на сайт, что нажимают, пользуются ли поиском и слушают ли аудио.
Поиск оказался особенно показательной историей. Люди им пользовались, вводили названия инструментов по-русски, делали опечатки. Мы учитывали это, добавляли соответствия и улучшали выдачу. Поэтому в новой версии поиск получил отдельное внимание: теперь он ищет по полным текстам и вызывается из любого места сайта через ⌘K или Ctrl+K.
Это одна из моих любимых функций. Читаешь материал, вспомнил другой вопрос, нажал две клавиши — и уже ищешь по всей библиотеке.
Со статистикой были и моменты, когда приходилось остановиться. В начале работы мы захотели выяснить, какая доля людей приходит сразу в материалы, минуя главную. Получили убедительно выглядящий процент, но при проверке обнаружили, что выгрузка входов покрывает только часть общего числа визитов. Использовать эту цифру как ответ обо всей аудитории не стали.
А после вопроса в чате о том, как люди слушают материалы, я отдельно занялся статистикой аудио. В новой версии мы полностью переделали плеер: сделали его частью оформления сайта, сохранили позицию прослушивания и настройки. Человек может вернуться к материалу и продолжить с того места, где остановился.
Быстрый сайт — это ещё и быстрый первый клик
Скорость была главным требованием ещё при выборе Astro. В новой версии оно осталось. Мне важно, чтобы сайт быстро открывался и сразу реагировал на действия.
Но большой полнотекстовый поиск сначала работал медленно. С плеером тоже пришлось повозиться. В одном из проходов выяснилось, что раннее нажатие на кнопку происходит раньше, чем готово её управление: вместо плеера мог открыться сам MP3-файл. На уже загруженной странице всё выглядело исправным.
Поэтому мы проверяли первое действие после открытия страницы, повторный поиск, запуск звука, возвращение к материалу. Сначала локально, потом на тестовом домене, затем я смотрел сайт на телефоне. Оптимизировали загрузку изображений и поисковых данных, возвращались к одним и тем же сценариям.
По моему ощущению, проверки и оптимизация заняли больше половины всей работы. Об этом я говорил и на воскресном вебинаре в «Перезагрузке», когда показывал ещё тестовую версию сайта.
Хорошо запомнился эпизод с главной. Технические проверки прошли, мы открыли обновлённую версию, а я увидел странность: большая статья свежая, соседние карточки старые. Оказалось, один блок уже получал актуальные материалы, а другие продолжали брать данные из сохранённого набора для макета.
Страница работала, ссылки открывались, оформление было на месте. Но главная показывала не то, что должна. Исправили источники данных и добавили проверку состава карточек. После таких историй я особенно внимательно смотрел на сами материалы и даты.
Сколько времени и лимитов на это ушло
Основную работу над версией 2.0 мы начали 18 сентября, а 28 сентября она вышла. Получилось около десяти календарных дней. Работу после запуска я продолжаю: уже на опубликованном сайте заметил и поправил несколько мобильных деталей.
С самого начала я попросил Степана вести дневник в Plane. Хотел сохранить, что мы пробовали, почему отказывались от вариантов и откуда возникали решения. Он подошёл к этому основательно: к вебинару там выросло огромное полотно. Сейчас этот дневник помогает восстановить историю, которую я сам уже не удерживаю целиком в голове.
Точного количества рабочих часов и общего расхода токенов у меня пока нет. Мы переносили работу между чатами и компьютерами, а единого итогового подсчёта не делали.
По ощущениям, на проект ушло около двух недельных лимитов Pro. У меня две подписки: когда заканчивался доступный лимит на одной, я продолжал на другой машине с другой подпиской. Это моя приблизительная оценка расхода, а не посчитанная стоимость разработки.
При этом моего участия было много. Я последовательно смотрел страницы, возвращался к деталям, менял решения. Astra на high выполняла техническую работу, но направление и итоговое качество приходилось постоянно обсуждать и проверять.
Маленькая деталь с большой личной историей
В одном из первых макетов рядом с моим портретом появился короткий текст. Степан придумал его для композиции, а мне понравилось само место для мысли автора.
Дальше возник вопрос: что там должно быть? Я предложил брать мысли из собственных статей. Мы отобрали материалы, подготовили короткие формулировки, я их прочитал, часть убрал. Теперь при новых посещениях и обновлениях главной там можно увидеть разные мысли.
Большинство людей, возможно, даже не заметит эту деталь. А кто заметит, сможет познакомиться со мной ещё немного. Мне нравится, что у неё есть связь с тем, что я уже написал.
Есть и другая связь с прошлым: я сохранил киберпанк-тему. Ярко-жёлтый цвет пришёл ещё из оформления моего сайта ppk.ru в 1998 году. Рядом со светлой и тёмной темами живёт этот кусочек моей интернет-истории.
Что теперь попробовать на сайте
Зайдите на pimenov.ai со своим вопросом. Откройте поиск и посмотрите, что найдётся среди более чем 900 материалов. Если хочется просто освоиться, есть страница «С чего начать», темы, разборы и авторские спецпроекты.
Для чтения можно выбрать размер текста; на телефоне по умолчанию стоит средний. Настройки сохраняются в вашем браузере. Длинные материалы получили удобное оглавление, а изображения можно открыть крупнее — особенно полезно для инфографики на маленьком экране.
В аудиобиблиотеке собраны озвученные материалы. Озвучку создаёт моя голосовая модель на OmniVoice. Для руководств сделаны краткие аудиообзоры: они помогают познакомиться с темой, а пошаговые действия лучше смотреть в самом тексте. Плеер запоминает место и настройки в этом браузере; переход на другую страницу останавливает звук.
В практических материалах есть промпты, которые можно скопировать или открыть в ChatGPT и Claude. Я хочу сократить расстояние между прочитанной статьёй и попыткой применить её к своей задаче. Идея таких кнопок заодно изменила мои инструкции по подготовке новых материалов.
Подробности собраны в руководстве «Как пользоваться сайтом». А следующим этапом я займусь самой библиотекой: подачей старых материалов, промптами и устройством тематических разделов. Пока пересобирал сайт, увидел их свежим взглядом и набрал идей уже для содержания.
Буду рад, если вы попробуете новую версию и напишете мне, что оказалось полезным, а что мешает. Именно из таких наблюдений выросла заметная часть этого обновления.
Следующий шаг
Откройте руководство «Как пользоваться сайтом»: попробуйте поиск, настройте чтение и найдите материалы для своей задачи.
Если вы тоже пересобираете свой сайт или базу материалов, эту историю можно взять как отправную точку для своего проекта.
Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov
