SendPulse Marketplace UI Skill

Создаёте приложение или интеграцию для SendPulse? Этот скилл поможет разработчикам и вайбкодерам сделать интерфейс, который выглядит и работает как часть платформы. Опишите нужный экран, и ИИ ассистент сверстает его с использованием дизайн системы SendPulse. Скилл работает с Angular, React, Vue и обычным HTML.

Основные возможности

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

Компоненты дизайн системы. Использует существующие в бандле классы для форм, кнопок, селектов, переключателей, модальных окон, таблиц, выпадающих меню, бейджей и блоков для платных тарифов. В скилле есть два примера экранов: настройки интеграции и список подключённых аккаунтов.

Иконки. Помогает выбрать нужную иконку из набора sp_icons, который содержит 536 иконок с точными названиями. Например, icon-plus обозначает плюс в квадрате, а icon-plus-add обозначает обычный плюс.

Вёрстка внутри SendPulse. Учитывает размер iframe, помогает избежать двойных отступов и использует стандартную ширину полей 364 px.

Светлая и тёмная темы. Поддерживает тему, которую SendPulse передаёт через ?theme=dark, и помогает сохранить её после перенаправления или авторизации через OAuth.

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

Проверка результата. Скрипты находят несуществующие классы, ошибки в порядке подключения стилей и неисправленные проблемы бандла. В среде Node страницу также можно проверить в Chrome в обеих темах.

Как установить

Скачайте папку sendpulse-marketplace-ui-cdn из GitHub репозитория SendPulse.
Добавьте скилл в своего ИИ ассистента. Для Claude Code поместите папку в ~/.claude/skills/ или в .claude/skills/ проекта. В приложении Claude загрузите ZIP архив через Settings → Capabilities → Skills → Upload skill.
Опишите задачу своими словами. Например: «Сверстай страницу настроек интеграции с полем для API ключа, выбором воронки и кнопкой “Сохранить”».

Скилл также можно использовать в ChatGPT, Cursor, Gemini и Copilot. Инструкции для них находятся в папке adapters. MCP сервер и API ключ не требуются.

Скилл предназначен для приложений, которые подключают дизайн систему SendPulse через CDN. Если стили входят в вашу собственную сборку, используйте рекомендации по компонентам, иконкам и вёрстке, а шаги по подключению CDN пропустите.

Для чего использовать

Создать новую интеграцию. Получите экраны в стиле SendPulse для светлой и тёмной тем.

Создать приложение с помощью ИИ. Опишите нужный интерфейс, а ассистент подберёт компоненты и классы SendPulse.

Исправить существующий интерфейс. Найдите причину неправильного фона в тёмной теме, некорректного отображения вкладок или неработающего модального окна.

Проверить перед публикацией. Посмотрите, как экраны отображаются внутри iframe и в обеих темах.

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