Кейс: от подключения сайта и установки навыков до авторского дизайна, публикации и исправлений на реальных страницах.
На скриншоте — итоговый результат: школьный шаблон, созданный на uCoz с помощью Codex и MCP. В основе — светлый редакционный стиль Newsprint. В кейсе описан весь путь: подключение сайта, установка навыков, подготовка дизайна, публикация и исправления.
Для создания и доработки шаблона понадобилось 6 промптов, включая короткие «установи» и «продолжи». Задачи и замечания передавались через чат, изменения на сайте — через MCP/API.
1. Подготовка к работе
- Сайт uCoz и доступ к его панели управления.
- uAPI-токен с правами для планируемых действий. Для конструктора дизайна нужен доступ к панели управления.
- ИИ-агент с поддержкой MCP и навыков. В этом проекте использован Codex.
- Официальный MCP uCoz. Для локального запуска через npm потребуется Node.js 18+.
- Бриф: тема сайта, аудитория, название, нужные разделы и визуальные ориентиры.
Настройки подключения доступны на странице MCP uCoz. Подробная инструкция подключения содержит конфигурации для разных клиентов. Ключ для сайта создан в панели uCoz, в разделе «Сайт → uAPI».
Для сайта создано отдельное подключение ucoz_2026_template с собственными настройками. Все изменения выполнялись через MCP/API. FTP не потребовался.
Промпт 1. Подключить нужный сайт
Подключи через официальный MCP uCoz сайт https://ucoz-2026-template.ucoz.net.
Инструкция: https://www.ucoz.ru/ai/mcp
Создай отдельный конфиг для этого проекта. Не используй подключения и ключи других сайтов. Все дальнейшие изменения выполняй через MCP/API.
Ключ возьми из локального секрета проекта и не выводи его в ответах. Сначала проверь доступ и покажи список модулей. Дизайн пока не меняй.Для повторения достаточно подставить адрес своего сайта и заранее подготовить ключ. После подключения стоит проверить доступ к модулям и шаблонам.
2. Установка навыков
MCP даёт агенту инструменты для работы с сайтом. Навык описывает порядок их применения: какие шаблоны прочитать, как учитывать переменные uCoz, что сохранить и как проверить результат.
Создание авторского шаблона сайта
Собирает цельный дизайн всех разделов, адаптивную версию, навигацию и страницы материалов.
Редактирование дизайна сайта
Помогает аккуратно править CSS, меню, формы, форум и системные окна uCoz.
Промпт 2. Подготовить навыки
Установи для текущего проекта два официальных навыка:
https://www.ucoz.ru/ai/skills/ucoz-template-creator-skill
https://www.ucoz.ru/ai/skills/ucoz-design-editor-skill
Первый используй для авторского шаблона всего сайта, второй — для понимания дизайна uCoz и дальнейших точечных правок. Прочитай их инструкции. ТЗ и стиль будут в следующем сообщении.После установки навыков проверен доступ к сайту. Затем началась работа над дизайном.
3. Тема и визуальный стиль
Задача — современный светлый шаблон школьной тематики для всех модулей. В первом запросе заданы тема и требования к изображениям и иконкам. Название «School 2026» добавлено отдельным сообщением.
За основу взят дизайн-промпт с Design Prompts (designprompts.dev). Для другого проекта промпт можно написать самостоятельно, найти в сети или выбрать на этом же сайте. Здесь использован стиль Newsprint, адаптированный под школьную тематику и uCoz.
К запросу приложено описание Newsprint: фон #F9F9F7, текст #111111, красный акцент #CC0000, прямые углы, газетная сетка и чёрно-белые фотографии. В промпте заданы и шрифты: Playfair Display для заголовков, Lora для чтения, Inter для интерфейса и JetBrains Mono для дат и метаданных.
В готовом промпте упоминались React и Tailwind. Поэтому добавлено отдельное требование: игнорировать этот стек и создать шаблон на HTML, CSS и JavaScript uCoz.
Промпт 3. Дать бриф на шаблон
Создай современный светлый шаблон школьной и образовательной тематики для всех активных модулей uCoz. Название — School 2026.
Стиль Newsprint: бумажный фон #F9F9F7, чёрный текст #111111, редкие красные акценты #CC0000, заголовки с засечками, чёткие линии, прямые углы и редакционная сетка.
Используй приложенное описание дизайна, но игнорируй указанный в нём стек: реализация только на HTML/CSS/JS и нативных шаблонах uCoz.
Для фотографий можно использовать Unsplash, для иконок — качественный бесплатный набор. Сначала подготовь предпросмотр.В свой бриф можно добавить нужные разделы: новости, учебные материалы, библиотеку файлов, галерею, форум или программы обучения.
4. Предпросмотр шаблона
Для предпросмотра подготовлены общий каркас и оформление модулей. В шаблонах сохранены меню, переменные, формы и вывод материалов uCoz. Новости на главной подключены через $LAST_NEWS$. Оформление работает на CSS и небольшом общем JavaScript.
Всего в предпросмотре было 28 страниц: главная, новости и статьи, блог, каталоги, форум, галереи, пользовательские и служебные экраны. В оформлении использовались фотографии Unsplash и SVG-иконки Lucide.
Предпросмотр позволил сравнить разделы до установки на сайт. Демонстрационные события, цены и аккаунты оставались только в нём.
Промпт для проверки предпросмотра
Покажи главную, список материалов, полную статью, форум и пользовательские формы на компьютере и телефоне. Проверь меню, поиск, кнопки, поля и состояния фокуса. Отдельно обозначь демонстрационный контент и функции, которые можно проверить только после установки на uCoz.5. Установка на сайт
Установка началась с команды «установи» в чате. Сначала создана резервная копия, затем через MCP сохранён CSS и опубликован каркас. После этого шаблон стал доступен на сайте.
После установки проверены 119 шаблонов и доработаны общие блоки, поиск, системные страницы и отдельные модули. Существующие материалы и аккаунты сохранены.
Промпт 4. Установить согласованный вариант
Установи согласованный шаблон на этот сайт. Перед изменениями создай резервную копию. Сохрани существующие материалы, аккаунты и нативные функции uCoz; демонстрационные данные не загружай.
После публикации проверь активные модули, системные страницы, формы и мобильную версию. Сообщи, что проверено на живом сайте, а что пока недоступно.Установка выполнена после просмотра макетов. Дальнейшие замечания отправлялись отдельно, чтобы исправлять конкретные элементы.
6. Исправления после установки
На опубликованном сайте обнаружились странные ховеры меню, неправильно отображавшийся аватар в комментариях, перекошенный форум, разная ширина блоков справа, неудобный поиск, огромные обложки и неаккуратные окна uWnd. Замечания собраны в одно сообщение.
Автоматическая проверка не нашла переполнения страницы, но визуальные недочёты остались. После сообщения с замечаниями проверена разметка, которую uCoz формирует на реальных страницах.
Промпт 5. Вернуть конкретные замечания
На живом сайте нужно исправить:
— ховеры обычных пунктов меню и выпадающих списков;
— аватар в форме добавления комментария;
— вёрстку форума;
— размеры блоков, категорий, описаний и форм поиска справа;
— увеличенные обложки плохого качества;
— окна uWnd, особенно результат отправки почтовой формы.
Проверь причины в реальной разметке, внеси точечные изменения через API и повторно проверь компьютерную и мобильную версии.Выяснилось, что uCoz создавал пустые вложенные списки даже у обычных ссылок меню. При наведении они становились видимыми. После правки пустые списки скрылись, а указатели подменю остались только у пунктов с дочерними ссылками.
В комментариях аватару не хватало фиксированного контейнера. Его ограничили размером 44×44 px на компьютере и 36×36 px на телефоне, оформили заглушку, поля и панель профиля.
У форума заголовки старой таблицы не совпадали с новой структурой строк, а SVG-стрелка занимала стандартную большую область. Колонки согласовали, иконки уменьшили, на телефонах метаданные разместили под заголовком. Отдельно адаптировали редактор темы, поиск, фильтры и статистику.
Проблема обложек имела конкретную причину: картинка шириной 320 px растягивалась примерно до 1000 px. Вместо малого источника стали использовать оригинал, уже указанный в нативном изображении. В списках на компьютере обложку ограничили размером 260×173 px; на телефоне — высотой до 220 px.
Окна uWnd потребовали отдельных правил для штатной рамки, заголовка, содержимого и кнопки закрытия. Пустые части старой рамки отнимали высоту у уведомлений и обрезали текст. После их устранения короткие сообщения и окно почтовой формы стали читабельными.
По замечаниям внесены точечные правки в CSS и общий скрипт. Повторная установка всего каркаса не потребовалась.
7. Проверка результата
- В отчёте Codex: 28 страниц предпросмотра на пяти ширинах — 320, 375, 768, 1024 и 1440 px.
- Проверка установки: 119 шаблонов uCoz.
- После правок проверены 10 реальных страниц на компьютере и телефоне, всего 20 проходов. В отчёте не было ошибок JavaScript, горизонтального переполнения или необработанных переменных uCoz.
- Дополнительно: наведение на меню, Escape, мобильная навигация, аватар и заглушка, редактор форума, штатные уведомления и окно результата почтовой формы.
Название, метаданные и навигация складываются по ширине экрана. Формы комментариев, редактор форума и системные окна проверены на тестовых данных.
Магазин, поиск и подписки проверены частично: магазин был недоступен из-за неоплаты, поисковый индекс ещё не построен, а тарифы подписок не заданы.
8. Готовый шаблон
В результате создан и установлен школьный шаблон с единым оформлением навигации, материалов, форм и форума. Сохранены исходники HTML/CSS/JS и резервная копия прежнего дизайна. Результат можно посмотреть на сайте School 2026.
Работа над шаблоном прошла через чат: от выбора стиля и постановки задачи до установки и исправлений. Конкретные замечания о размере картинок, наведении на меню и формах на телефоне помогли довести оформление.
После установки стоит пройтись по реальным страницам сайта: открыть меню, формы и форум, проверить мобильную версию. В этом проекте так обнаружились недочёты, которые не были заметны в предпросмотре.
Промпт 6. Принять результат
Проведи финальную проверку опубликованного шаблона. Открой главную, списки и полные материалы, форум, поиск и пользовательские формы. Проверь мобильную ширину, наведение, пустые состояния и всплывающие окна.
Отдельно перечисли проверенные сценарии, ограничения сайта и действия, которые не выполнялись. Сохрани исходники и краткий отчёт.Начать свой проект: MCP uCoz, инструкция подключения, навык создания шаблонов и навык редактирования дизайна.
Посмотреть итоговый шаблон: ucoz-2026-template.ucoz.net.
Материал был полезен?
Оценка сохранится только в этом браузере.