Что вы получите
- Один самодостаточный раздел тарифов, который работает офлайн и внутри iframe
- Две-четыре карточки тарифов со значками, функциями, лентой рекомендуемого тарифа и кнопкой для каждого
- Переключатель «Месяц / Год» с строкой о скидке и пометками об оплате за год
- Светлая и тёмная темы, а также статическая проверка готового файла
- По желанию: вырезанная иллюстрация-стикер, сделанная с PopNow после расчёта цены
Подходит для
- Независимые приложения, инструменты для креаторов и небольшие SaaS-продукты
- Тарифы членства, курсов или рассылок
- Лендинги запусков, которым нужен дружелюбный, неформальный тон
Не подходит для
- Корпоративные прайс-листы с длинными таблицами сравнения
- Бренды с формальным или строго минималистичным голосом
Как пользоваться
В Claude или ChatGPT
Используйте навык PopNow «Раздел цен в стиле рисованной заметки» (pricing-page-section) для этой задачи: Цены для Brewlog, журнала дегустаций кофе: Free, Barista 4 $ в месяц или 40 $ в год, Roastery 12 $ в месяц или 120 $ в год для кафе. Рекомендуйте Barista.
В агенте для кода
/popnow-pricing-page-section Цены для Brewlog, журнала дегустаций кофе: Free, Barista 4 $ в месяц или 40 $ в год, Roastery 12 $ в месяц или 120 $ в год для кафе. Рекомендуйте Barista.
Потом попробуйте
Сделайте стикер с чайником для пор-овера в наших акцентных цветах и вырежьте его.
Превратите это в компонент Svelte, и тёмную тему пусть переключает собственная тема сайта.
Что подготовить
- Названия тарифов, месячные и годовые цены, лимиты и функции
- Какой тариф вы рекомендуете и куда ведёт каждая кнопка
- Одна честная строка о пробном периоде, возвратах или отмене
- По желанию: ключ API PopNow для иллюстрации-стикера
Похожие навыки
Смотреть все →- Веб
3D-конструктор аватаров
+25Соберите милого плюшевого 3D-персонажа прямо в браузере и сохраните его как прозрачный PNG или 3D-страницу.
- Веб
Календарная тепловая карта активности
+25Год ежедневной активности в виде календарной сетки с заливкой — с сериями, итогами и управлением с клавиатуры.
- Веб
Лендинг SaaS с ИИ
+25Песочный фон, тонкие направляющие и штриховка вокруг живой канбан-доски, где ассистент планирует задачи.
- Веб
Анимированный первый экран сайта
+25Первый экран лендинга с плавно сменяющимся словом в заголовке, двумя кнопками и широкой рамкой для изображения.
- Веб
Шаблон сайта бренда напитков
+25Солнечный сайт бренда напитков или снеков: магазин, конструктор наборов, карта точек продаж и демо-оформление в одном файле.
- Веб
Сайт агентства с шейдерным героем
+25Живой оранжевый шейдерный герой под крупным заявлением, навигация-таблетка и сетка кейсов.
- Веб
Тёмный лендинг для SaaS
+25Тёмный маркетинговый сайт с насыщенной анимацией для программного продукта — в одном автономном HTML-файле.
- Веб
Сайт портфолио дизайнера
+25Шесть наклонённых карточек вокруг заголовка на сером фоне, красная карточка портрета и кейсы.
- Веб
Сайт-портфолио разработчика
+25Тёмный личный сайт для инженеров с кейсами, статьями, докладами, резюме и формой обратной связи.
- Веб
Редакционный сайт SaaS
+25Тёмно-синий разделённый герой, заголовок с засечками рядом с документальным кадром и кобальтовый акцент.
- Веб
Сайт фрилансера-дизайнера
+25Смелый сайт соло-студии с фиксированными пакетами: страницы тарифов, кейсы и форма брифа.
- Веб
Шаблон сайта в стиле глассморфизма
+25Матовые стеклянные таблетки на почти чёрном фоне, крупный заголовок с засечками и подписка.
- Веб
Сайт аппаратного продукта
+25Огромные тонкие названия моделей на студийных кадрах, матовые карточки характеристик и линейка в масштабе.
- Веб
Интерактивная схема архитектуры
+25Офлайн-схема системы, по которой можно кликать: построена из проверенной JSON-модели, с обоснованием для каждого блока.
- Веб
Интерактивный герой с сеткой
+25Тёмная сетка тонких нитей, которая гнётся к курсору, и светящееся кольцо от каждого клика.
- Веб
Граф знаний из заметок
+25Превратите заметки проекта в офлайн-граф с поиском, где каждое утверждение ведёт к строке источника.
- Веб
Шаблон KPI-дашборда
+25Четыре KPI-плитки с чипами изменений, линейный график, таблица разбивки и целевые полосы на тёплой бумаге.
- Веб
Лендинг из ИИ-макетов
+25Сначала три полноэкранных макета на выбор, затем ваш агент собирает выбранный как чистый адаптивный код.
- Веб
Шаблон сайта журнала
+25Сайт журнала с качеством печатного издания: статьи, рубрики, небольшой магазин и подписка — в одном HTML-файле.
- Веб
Герой с анимацией частиц
+25Текст на тёплой бумаге рядом со сферой из чернильных и бирюзовых точек, меняющей форму под каждую идею.
- Веб
Сайт личного бренда
+25Портрет, растворённый в тёплой бумаге под тонкой скобкой, с лёгким и жирным заявлением по бокам.
- Веб
Шаблон сайта зоомагазина
+25Работающий магазин зоотоваров с каталогом, вариантами, корзиной, планировщиком пополнения и демо-оформлением в одном HTML-файле.
- Веб
Шаблон сайта подкаста
+25Сайт подкаста с проигрываемым хедером, архивом выпусков, страницами гостей и плеером, который продолжает играть.
- Веб
Кинематографичная страница запуска продукта
+25Почти чёрная страница в свете премьеры: заголовок с засечками, ночная сцена в letterbox и форма брони.
- Веб
Сайт исследовательской статьи
+25Страница проекта для вашей статьи с интерактивным рисунком 1, результатами, ограничениями и цитированием в один клик.
- Веб
Шаблон админ-панели
+25Рабочая консоль бэк-офиса с графиками, таблицами, канбаном и календарём — в одном офлайн-HTML-файле.
- Веб
Шаблон лендинга для SaaS
+25Спокойный светлый маркетинговый сайт для программного продукта с рабочей консолью продукта, ценами и регистрацией.
- Веб
Сайт-портфолио в стиле скрапбукинга
+25Многостраничное онлайн-резюме из бумажных предметов, с кейсами и версией резюме для печати.
- Веб
Шаблон сайта магазина кроссовок
+25Полноценный магазин обуви или одежды с каталогом, карточками товаров, корзиной и демо-оформлением заказа в одном HTML-файле.
- Веб
Шаблон сайта спортивного клуба
+25Сайт клуба, зала или студии с расписанием, страницами тренеров, абонементами, планом кортов и бронированием в одном файле.
- Веб
Раздел стены отзывов
+25Мозаичная или медленно дрейфующая стена отзывов клиентов, в которую попадают только цитаты, на которые люди дали согласие.
- Веб
Шаблон сайта турагентства
+25Сайт с фото для туров, гидов или лоджей: поиск поездок, заявки на бронирование и квиз для подбора поездки.
- Веб
Лендинг автоматизации процессов
+25Графитовая страница, небольшой заголовок слева и живой граф узлов: запускается, повторяет попытку, пишет логи.
Вопросы
Работает ли переключатель года без фреймворка?
Да. Каждая цена хранит месячное и годовое значение в атрибутах данных, и несколько строк простого JavaScript меняют их местами. Удалите переключатель, если продаёте один цикл оплаты.
Будет ли рукописный шрифт загружаться на каждом устройстве?
Используются рукописные шрифты, уже установленные в системе, с запасными вариантами, поэтому ничего не скачивается и раздел работает офлайн. Точное начертание немного отличается на macOS, Windows и Android.
Что добавляет PopNow?
По желанию иллюстрацию-стикер для поля: один рисунок в том же стиле чернил и плоских цветов, затем чистую вырезку инструментом удаления фона PopNow. Каждый запуск сначала оценивается и стартует только после вашего согласия.
Можно ли вставить это в существующий сайт?
Да. Все стили ограничены классами с префиксом .skp-, а навык пересобирает раздел как компонент для React, Vue, Svelte или Astro, давая странице-хосту управлять темой.
Подходит ли это как шаблон SaaS-тарифов?
Да. Тарифы, месячные и годовые цены, строки функций и значок «самый популярный» берутся из одного блока данных, как строятся большинство страниц тарифов SaaS. Используйте как шаблон страницы тарифов целиком или вставьте таблицу тарифов в существующую страницу.