SendPulse Marketplace UI Skill

Створюєте застосунок або інтеграцію для SendPulse? Цей скіл допоможе розробникам і вайбкодерам зробити інтерфейс, який виглядає та працює як частина платформи. Опишіть потрібний екран, а ШІ асистент зверстає його з використанням дизайн системи SendPulse. Скіл працює з Angular, React, Vue та звичайним HTML.

Основні можливості

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

Компоненти дизайн системи. Використовує наявні в бандлі класи для форм, кнопок, селектів, перемикачів, модальних вікон, таблиць, випадаючих меню, бейджів і блоків для платних тарифів. Містить два приклади екранів: налаштування інтеграції та список підключених акаунтів.

Іконки. Допомагає вибрати потрібну з 536 іконок sp_icons за точною назвою. Наприклад, 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 без переробки всього застосунку.