Как я сделал удобную CMS с созданием статей и товаров через ChatGPT

С чего всё началось

Изначально эту CMS я сделал для клиентского проекта по Честному Знаку:

Блог сайта «Честная маркировка»

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

Но в процессе получилась не просто форма для добавления текста, а полноценная небольшая CMS, которой действительно удобно пользоваться.

Что умеет эта CMS

В админке можно:

• создавать новые материалы;
• редактировать существующие статьи;
• сохранять материал в черновик;
• публиковать статью;
• снимать её с публикации;
• задавать дату публикации;
• загружать и заменять обложку;
• заполнять SEO title, description и OG title;
• выбирать категорию;
• писать основной текст в Markdown;
• смотреть предпросмотр материала;
• добавлять связанные статьи.

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

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

Markdown-редактор

Основной текст статьи пишется в Markdown.

Он поддерживает:

• заголовки;
• подзаголовки;
• маркированные списки;
• нумерованные списки;
• жирный текст;
• ссылки;
• цитаты;
• кодовые блоки.

В самой админке есть короткая подсказка с примерами разметки. Её можно раскрыть, когда она нужна, и скрыть, чтобы она не занимала место во время работы.

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

Самая интересная часть — создание статьи через ChatGPT

Отдельный блок в админке называется «Создать статью через ChatGPT».

Внутри находится большой подготовленный промпт и короткая инструкция:

1. Нажать кнопку «Скопировать промпт».
2. Вставить его в ChatGPT.
3. Добавить тему статьи, свои мысли и важные детали.
4. Получить готовые блоки для вставки в CMS.

ChatGPT возвращает отдельно:

• заголовок;
• вступление;
• короткое описание;
• категорию;
• SEO-данные;
• основной текст в Markdown;
• CTA;
• промпт для изображения;
• alt-текст обложки.

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

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

Почему я перенёс эту систему на свой сайт

После реализации на клиентском проекте я понял, что хочу такую же админку и для собственного блога:

Блог на niki-losk.ru

На личном сайте я пишу о создании сайтов, Telegram-ботах, автоматизациях, рабочих процессах и собственных digital-проектах.

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

Для меня это важная вещь: чем проще процесс публикации, тем меньше поводов откладывать статью на потом.

Другие мои проекты можно посмотреть в разделах кейсов и digital-проектов.

Тот же подход для товаров

После блогов я использовал похожую идею в демонстрационном чайном магазине «Дом Пуэра».

Открытая демо-админка доступна здесь:

Админка нового товара в «Доме Пуэра»

Здесь формат уже другой. Вместо статьи создаётся карточка товара.

Можно заполнить:

• название;
• короткое и полное описание;
• категорию;
• цену;
• характеристики;
• фотографию;
• alt-текст;
• статусы сайта, Telegram-бота и Telegram-канала.

Справа снова находится блок с промптом для ChatGPT. Он помогает подготовить описание товара, SEO-текст и другие данные для карточки.

То есть сама идея оказалась универсальной. Это может быть не только CMS для блога, но и внутренний инструмент для управления товарами, услугами или другими типами контента.

Синхронизация товара между площадками

В демо-админке «Дома Пуэра» заложена более широкая логика.

Одна карточка товара может использоваться сразу для:

• сайта;
• Telegram-бота;
• оплаты;
• Telegram-канала.

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

Это уже не просто форма редактирования товара, а основа единого управления контентом проекта.

Куда я перенесу эту систему дальше

Следующий проект — сайт по фулфилменту:

Блог проекта по фулфилменту

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

Я не хочу каждый раз собирать CMS с нуля. Намного логичнее взять удачную рабочую основу и адаптировать её под конкретный проект, его дизайн, структуру и задачи.

Почему я горжусь этим решением

Мне нравится, что здесь соединилось сразу несколько вещей:

• понятная CMS;
• удобный интерфейс;
• Markdown;
• предпросмотр;
• SEO-поля;
• управление публикацией;
• загрузка изображений;
• готовый промпт для ChatGPT;
• отдельные блоки для быстрого копирования;
• возможность адаптировать систему под статьи и товары.

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

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

Где можно посмотреть, как это работает

Клиентский блог:

Честная маркировка

Мой личный блог:

niki-losk.ru/blog

Открытая демонстрационная админка товаров:

Дом Пуэра — создание товара

Проект, куда система будет добавлена дальше:

Фулфилмент — блог

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

Что я понял в процессе

Удобная админка — это не просто дополнительная страница сайта.

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

Если создать понятный редактор, добавить предпросмотр, SEO-поля и нормальную работу с изображениями, управление сайтом перестаёт быть технической проблемой.

А встроенный промпт для ChatGPT делает следующий шаг: помогает быстрее подготовить материал, но сохраняет за человеком возможность всё проверить и исправить.

Именно такой формат я теперь хочу использовать как основу в следующих проектах.

Коротко по теме

• CMS позволяет создавать, редактировать, публиковать и скрывать статьи без работы с кодом.
• Markdown-редактор поддерживает заголовки, списки, ссылки, выделение текста и предпросмотр.
• Встроенный промпт для ChatGPT помогает подготовить все поля статьи отдельными блоками для копирования.
• Тот же подход можно использовать не только для блога, но и для управления товарами.
• Открытую демо-версию товарной админки можно посмотреть в проекте «Дом Пуэра».

Обсудим вашу задачу?

Если вам нужен сайт, блог, каталог, CMS, Telegram-бот или внутренняя автоматизация, оставьте заявку. Я посмотрю задачу и предложу понятный вариант реализации.