Шаблон QuoteKit: лендинг сервиса коммерческих предложений

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

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

Что внутри шаблона QuoteKit?

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

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

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

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

Что здесь работает, а что нарисовано?

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

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

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

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

Кому подходит QuoteKit?

Подходит любому SaaS-продукту, где есть документ или заявка с жизненным циклом: коммерческие предложения, договоры, сметы, акты, заявки на подбор. Названия меняются, каркас остаётся.

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

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

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

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

Взять шаблон или собрать лендинг с нуля?

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

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

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

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

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

Как переделать шаблон под свой продукт?

Сначала смысл, потом оформление. Каждая правка стоит 300 кредитов, и переделывать один блок дважды невыгодно, поэтому порядок ниже выстроен от главного к второстепенному.

1. Замените название и обещание. Одна правка меняет имя продукта по всей странице и переписывает первый экран.
2. Подставьте свой пример. Документ на первом экране должен выглядеть как ваш реальный результат, а не как чужой.
3. Перепишите три шага. Порядок работы должен совпадать с тем, как продукт используют на самом деле.
4. Поставьте настоящие цены. Демонстрационные тарифы на опубликованной странице это обещание, которое вы не давали.
5. Настройте форму. Заявка должна куда-то приходить: письма отправляет коннектор Resend.
6. Опубликуйте. Проект живёт на адресе вида имя.zugo.run, свой домен подключается поверх на платных тарифах.

Второй шаг чаще всего пропускают, и зря. Именно пример документа отвечает на вопрос «а что я получу», и подмена его на свой стоит одной правки, а убеждает сильнее, чем переписанные заголовки. Это самая выгодная правка на всей странице.

Сколько стоит довести шаблон до публикации?

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

Тарифы Zugo: Free даёт 2 400 кредитов, Pro стоит $25 в месяц и включает 20 000 кредитов, Business стоит $50 в месяц. Каждая сборка перед выдачей запускается в песочнице, и вариант, который не открылся, вам не отдаётся.

Про бесплатный тариф есть деталь, которую стоит знать до регистрации, потому что арифметика неочевидная. Стартовых 2 400 кредитов не хватит на сборку с нуля, потому что она стоит 600. А путь через шаблон в них укладывается: клон ничего не стоит, и первая правка помещается в бесплатный запас. Для проверки идеи и первого показа коллегам этого вполне достаточно.

Страница цен заслуживает отдельной работы, а не одной строки в общем запросе. Что на ней должно быть и в каком порядке, разобрано в статье страница тарифов для SaaS нейросетью.

Какие правки просят чаще всего?

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

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

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

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

Где границы шаблона?

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

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

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

Своя логика доводится правками. Права доступа, шаблоны документов, история версий, напоминания: всё это описывается по шагам и проверяется по одному сценарию за раз. На по-настоящему сложном продукте Zugo не заменяет команду разработки, а исходники всегда забираются экспортом в GitHub.

Первый шаг простой: откройте галерею на zugo.dev, клонируйте QuoteKit и подставьте на первый экран пример своего документа вместо демонстрационного. Дальше сразу станет видно, ваш это каркас или нет.