Как сделать страницу тарифов без кода: структура и цена

Опишите текстом свои планы: название, цена, что входит, для кого. Zugo соберёт страницу с карточками тарифов, таблицей сравнения и кнопками оплаты, проверит сборку в песочнице и опубликует на адресе вида yourapp.zugo.run. Одна страница стоит 6 кредитов и собирается около минуты, правка 3.

Сложность страницы тарифов не в вёрстке карточек. Она в решении, которое вы принимаете до сборки: сколько планов, чем они различаются и какой из них должен выбирать типичный клиент. Красивое оформление плохой линейки тарифов не спасает.

Сколько тарифов показывать?

Три плана это рабочий стандарт, и не из-за красоты симметрии. Один план не даёт человеку почувствовать выбор. Два превращаются в вопрос «зачем платить больше». Три создают середину, которая читается как разумный вариант по умолчанию.

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

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

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

Что должно быть в карточке тарифа?

Пять элементов и ни одним больше. Название, цена с периодом, одна строка «для кого это», список из трёх или четырёх ключевых отличий и кнопка. Всё остальное уводит внимание от решения.

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

В списке отличий указывают различия, а не общие возможности. Строка, которая присутствует во всех трёх карточках, не помогает выбрать и занимает место. Такие пункты выносят под карточки одной фразой «во всех планах есть».

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

Нужна ли таблица сравнения?

Нужна, если у вас больше двух планов и различий больше четырёх. Карточки отвечают на вопрос «какой мне», таблица отвечает на вопрос «а точно ли там есть то, что мне нужно». Это разные вопросы и разные моменты принятия решения.

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

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

Таблицу не стоит делать длиннее десяти строк. Если различий больше, значит планы отличаются не набором функций, а масштабом, и тогда лучше сказать это одной строкой про лимиты, чем перечислять двадцать галочек.

Как описать страницу тарифов в промпте?

Дайте конструктору готовую линейку, а не задание её придумать. Промпт «сделай страницу с ценами» приведёт к трём абстрактным планам с выдуманными функциями, и вы будете переписывать их правками. Промпт с вашими планами даёт готовую страницу сразу.

Слабый вариант: «страница тарифов для SaaS». Сильный: «Страница тарифов сервиса для агентств. Три плана: Старт $19 в месяц до трёх проектов, Команда $49 в месяц до пятнадцати проектов и общий доступ, Агентство $149 в месяц без лимита и с приоритетной поддержкой. Рекомендован средний. Ниже таблица сравнения на восемь строк и блок частых вопросов».

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

Блок частых вопросов стоит просить отдельно. Он снимает возражения, которые иначе превращаются в письма в поддержку: что при отмене, что при превышении лимита, есть ли годовая оплата.

Сколько стоит такая страница в кредитах?

Отдельная страница тарифов это 6 кредитов плюс две или три правки по 3. Если тарифы это часть сайта продукта с главной, страницей возможностей и оплатой, это многостраничная платформа: 12 за первые три страницы и по 3 за каждую следующую.

Free даёт 5 кредитов, чего не хватает даже на одну свежую сборку. Pro стоит $25 в месяц и включает 200 кредитов. Business стоит $99 в месяц. Страницу тарифов правят чаще других страниц, потому что цены меняются, и это стоит заложить в расчёт заранее.

Как подключить оплату и переключение планов?

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

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

Связь тарифа с возможностями внутри продукта живёт не на странице цен, а в приложении. Проверка вида «у этого пользователя план Pro, значит доступен экспорт» относится к панели, и про её устройство есть отдельный разбор про панель SaaS. Хранение статуса подписки удобно держать в базе, как описано в статье про приложение с Supabase.

Как менять цены, не теряя доверия?

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

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

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

Отдельная техническая деталь: цена живёт минимум в трёх местах, на странице тарифов, в платёжной системе и внутри продукта. Расходятся они молча. Заведите правило менять их одним подходом и проверять все три после каждого изменения, иначе однажды на сайте будет одно, а в счёте другое.

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

Чего конструктор не сделает?

Он не придумает вашу линейку. Сколько планов, где границы лимитов и какая цена выдержит рынок это решения о бизнесе. Сгенерированные цифры здесь опаснее пустой страницы, потому что выглядят правдоподобно.

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

Он не заменит команду разработки на сложном продукте. Тарификация по потреблению, промокоды с ограничениями, налоги по странам и годовые контракты это отдельная система биллинга. Специфичную логику доводят правками, а не одним промптом.

Каждая сборка проверяется в песочнице перед выдачей, и та, что не открылась, до вас не доходит. Это гарантия работоспособности страницы, а не проверка того, что ваши цены осмысленны.

С чего начать

Выпишите свои планы на бумаге и проверьте одним вопросом: понятно ли за секунду, кому подходит каждый. Если непонятно, поправьте линейку до сборки. Дальше опишите её одним абзацем и соберите страницу на Zugo. Если у вас не подписка, а расчёт по объёму работы, ближе окажется разбор про сайт типографии с калькулятором.