AI-верстальщик: уникальный дизайн вашего сайта

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

Работа с верстальщиком включает следующие этапы:

1. Получить данные, необходимые ИИ-агенту для работы;
2. Создать пользователя, от имени которого ИИ-агент будет работать на сайте;
3. Создать проект в ИИ-агенте;
4. Сгенерировать макет сайта;
5. Внедрить макет в режиме предпросмотра;
6. Внедрить макет в качестве основного шаблона сайта.

Получение необходимых данных

Чтобы поделиться с ИИ-агентом файлами, которые будут необходимы ему для работы, выполните следующие действия:

ШАГ 1. В панели администрирования перейдите в раздел Сайт → Шаблоны → Список и нажмите кнопку AI-верстальщик.

Переход к AI-верстальщику

ШАГ 2. На открывшейся странице нажмите кнопку Скачать навык (ZIP) и скачайте архив на свой компьютер. 

В данном архиве содержатся необходимые данные и инструкции для ИИ-агента.

Получение архива

ШАГ 3. Разархивируйте полученный архив.

Для вашего удобства полученную после разархивации папку можно переименовать — например, дать название AI_design.

Папка с данными

Создание пользователя

Чтобы ИИ-агент мог самостоятельно внедрять изменения в ваш сайт, требуется создать отдельного пользователя в системе. Для этого выполните следующие действия:

ШАГ 1. В панели администрирования перейдите в раздел Справочники → Пользователи → Список и нажмите кнопку Создать нового пользователя.

ШАГ 2. На вкладке Основные укажите необходимые параметры в следующих полях:

1. Имя — например, aidesigner
2. Логин
3. Регион
4. Электронная почта
5. Пароль и Подтверждение пароля

Настройки пользователя

ШАГ 3. На вкладке Роли пользователя активируйте роль Разработчик шаблона.

Другие роли не требуются.

Роль пользователя

Ограничение доступа к шаблонам

Нажмите кнопку Сохранить.

ШАГ 4. Сохраните логин и пароль нового пользователя в отдельном файле (например, текстовом) и расположите его в папке проекта.

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

Файл с данными для входа в папке проекта

Работа с верстальщиком

В качестве примера рассмотрим работу с ИИ-агентом Cursor.

Как поделиться необходимыми данными с другими ИИ-агентами:

• Claude (claude.ai, приложение) — скачайте ZIP-архив и загрузите его в настройках в разделе навыков (Skills);
• Claude Code — распакуйте ZIP-архив в каталог навыков, например, ~/.claude/skills/. В результате получится папка с названием ps-site-template-designer;
• Codex CLI — распакуйте ZIP-архив в ~/.codex/skills/. В результате получится ~/.codex/skills/ps-site-template-designer/SKILL.md. После этого перезапустите Codex. Формат SKILL.md с frontmatter в Codex поддерживается;
• Агенты без навыков — распакуйте ZIP-архив рядом с инструкциями и добавьте в файл AGENTS.md или инструкцию агента следующий текст: «Прочитай %{skill}/SKILL.md». Если требуется, можно приложить к переписке справочные файлы из ZIP-архива.

Создание проекта

Чтобы создать новый проект в Cursor и предоставить агенту доступ к папке проекта на вашем компьютере, выполните следующие действия:

ШАГ 1. Откройте программу Cursor на вашем компьютере, начните новый чат.

ШАГ 2. Добавьте новое рабочее место. Для этого нажмите Start from scratch → Use Existing → Open Folder ... и выберите папку проекта.

Переход к добавлению проекта

После этого ваша папка должна отображаться в чате как рабочее место.

Привязанная папка

Создание дизайна

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

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

Пример запроса

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

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

Готовый макет

Внедрение готового дизайна

Если вас устраивает макет и вы готовы перейти к внедрению дизайна на сайте, отправьте ИИ-агенту соответствующий запрос.

После того, как ИИ-агент завершит внедрение макета на ваш сайт, проверьте результат в режиме предпросмотра. Для этого выполните следующие действия:

ШАГ 1. В панели администрирования перейдите в раздел Сайт → Шаблоны → Список и нажмите кнопку AI-верстальщик.

ШАГ 2. В строке шаблона, созданного верстальщиком, нажмите кнопку Включить для себя.

Включение предпросмотра шаблона

Пример готового макета

ШАГ 3. Тщательно протестируйте функционал шаблона. 

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

Чтобы установить шаблон как основной, найдите его в списке шаблонов и нажмите кнопку Установить в его строке.

Установка шаблона как основного